空手道 UI 中的 ShadowRoot dom 元素访问问题 [英] ShadowRoot dom elements access issue in Karate UI

查看：67
本文介绍了空手道 UI 中的 ShadowRoot dom 元素访问问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试访问 ShadowRoot dom 树元素，但我面临的问题是我无法使用特定的 html 元素来调用 .ShadowRoot，因为该元素是动态的(请参阅下面的 html 代码段 id="vaadin-text-字段错误-0).因此，我唯一能做的就是访问上一级的 .vaadin-text-field-container 类.基本上，下面是 html 代码片段，它返回错误消息 = 255 个字符最大"；在我的 KarateUI 测试中，我试图断言该错误消息.到目前为止，我根据之前阅读的论坛查询尝试了以下选项，但不幸的是，我永远无法访问返回文本最多 255 个字符"的正确元素.做断言:

尝试 1:

 * def test = script('.vaadin-text-field-container', '_.innerHTML')* 打印错误信息是"+ 测试

输出:

evaluation (js) failed: script('.vaadin-text-field-container', '_.innerHTML'), js eval 失败两次:(function(){ var fun = function(_){return _.innerHTML }; var e = document.querySelector(".vaadin-text-field-container"); return fun(e) })(), error: {"type":"object",";subtype":"error","className":"TypeError","description":"TypeError:Cannot read property 'innerHTML' of null\n at fun (<anonymous>:1:46)\n 在 <匿名>:1:130\n 在 <匿名>:1:139","objectId":"{\"injectedScriptId\":3,\"id\":3}"}

尝试 2:

 * def test = script('//*[@id=vaadin-text-field-error-0"]', '_.innerHTML')* 打印 '错误信息是:' + 测试

输出:

evaluation (js) failed: script('//*[@id="vaadin-text-field-error-0"]', '_.innerHTML'), js eval 失败两次:(function(){ var fun = function(_){ return _.innerHTML }; var e = document.evaluate("//*[@id="vaadin-text-field-error-0"]",document, null, 9, null).singleNodeValue; return fun(e) })(), error: {"type":"object","subtype":"error","className":";SyntaxError","description":"SyntaxError: missing ) after argument list","objectId":"{\"injectedScriptId\":3,\"id\":3}"}

尝试 3:

* match text('#vaadin-text-field-error-0') == '255 个字符最大'

输出:

evaluation (js) failed: text('#vaadin-text-field-error-0'), js eval 失败两次:document.querySelector("#vaadin-text-field-error-0";)['textContent'], 错误: {"type":"object","subtype":"error","className":"TypeError","description":"TypeError:Cannot读取属性 'textContent' of null\n at :1:53","objectId":"{\"injectedScriptId\":3,\"id\":3}"}

此处的 HTML 代码片段:

#shadow-root(打开)<div class="vaadin-text-field-container"><标签部分=标签"id="vaadin-text-field-label-0">运行名称</label><div部分=输入字段"id="vaadin-text-field-input-0"><槽名=前缀"></槽><插槽名称=输入"><输入部分=值"tabindex=0"；aria-labelledby="vaadin-text-field-label-0 vaadin-text-field-input-0";placeholder="在此处输入...";必需="aria-描述的=vaadin-text-field-helper-0 vaadin-text-field-error-0";无效="咏叹调无效=真"></slot><div part="clear-button";id =清除按钮"角色=按钮"aria-label =清除"hidden="true"></div><插槽名称=后缀"></插槽>

<div part="helper-text";id="vaadin-text-field-helper-0"><slot name="helper">无特殊字符，最多 255 个字符</slot>

<div part="error-message";aria-live=断言"；咏叹调隐藏=假"；id=vaadin-text-field-error-0"> 255 个字符(最大)</div>

</vaadin-text-field>

有人可以看看这个吗?指出我在这里做错了什么?谢谢，桑迪

解决方案

如果这个答案没有回答你的问题:https://stackoverflow.com/a/61742555/143475

请遵循此流程，以便我们将来能够(以通用方式)添加对此的支持:https://github.com/intuit/karate/tree/develop/examples/ui-test

我们确实需要社区帮助解决其中一些问题，请考虑一下.

I am trying to access ShadowRoot dom tree elements, but the problem I face is I cannot use the Specific html element to call on .ShadowRoot, as that element is dynamic (see below html snippet id="vaadin-text-field-error-0). So only way I can do is by accessing the class .vaadin-text-field-container which is one level up. Basically, below is the html code snippet where it returns an "error message = 255 characters max" and in my KarateUI test I am trying to assert that error message. So far I tried the below options based on previous forum queries I read, but no luck I could never access the right element that returns the text "255 characters max" to do the assertion:

Try 1:

  * def test = script('.vaadin-text-field-container', '_.innerHTML')
  * print "Error Message is" + test

Output :

evaluation (js) failed: script('.vaadin-text-field-container', '_.innerHTML'), js eval failed twice:(function(){ var fun = function(_){ return _.innerHTML }; var e = document.querySelector(".vaadin-text-field-container"); return fun(e) })(), error: {"type":"object","subtype":"error","className":"TypeError","description":"TypeError: Cannot read property 'innerHTML' of null\n    at fun (<anonymous>:1:46)\n    at <anonymous>:1:130\n    at <anonymous>:1:139","objectId":"{\"injectedScriptId\":3,\"id\":3}"}

Try 2:

  * def test = script('//*[@id="vaadin-text-field-error-0"]', '_.innerHTML')
  * print 'Error Message is :' + test

Output:

evaluation (js) failed: script('//*[@id="vaadin-text-field-error-0"]', '_.innerHTML'), js eval failed twice:(function(){ var fun = function(_){ return _.innerHTML }; var e = document.evaluate("//*[@id="vaadin-text-field-error-0"]", document, null, 9, null).singleNodeValue; return fun(e) })(), error: {"type":"object","subtype":"error","className":"SyntaxError","description":"SyntaxError: missing ) after argument list","objectId":"{\"injectedScriptId\":3,\"id\":3}"}

Try 3:

* match text('#vaadin-text-field-error-0') == '255 characters max'

Output:

evaluation (js) failed: text('#vaadin-text-field-error-0'), js eval failed twice:document.querySelector("#vaadin-text-field-error-0")['textContent'], error: {"type":"object","subtype":"error","className":"TypeError","description":"TypeError: Cannot read property 'textContent' of null\n    at <anonymous>:1:53","objectId":"{\"injectedScriptId\":3,\"id\":3}"}

HTML code snippet here:

<vaadin-text-field class="standardformfield" id="runsetup" tabindex="0" required has-label has-helper has-value invalid has-error-message>
#shadow-root (open)
<div class="vaadin-text-field-container">

      <label part="label" id="vaadin-text-field-label-0">Run Name</label>

      <div part="input-field" id="vaadin-text-field-input-0">

        <slot name="prefix"></slot>

        <slot name="input">
          <input part="value" tabindex="0" aria-labelledby="vaadin-text-field-label-0 vaadin-text-field-input-0" placeholder="Type here..." required="" aria-describedby="vaadin-text-field-helper-0 vaadin-text-field-error-0" invalid="" aria-invalid="true">
        </slot>

        <div part="clear-button" id="clearButton" role="button" aria-label="Clear" hidden="true"></div>
        <slot name="suffix"></slot>

      </div>

      <div part="helper-text" id="vaadin-text-field-helper-0">
        <slot name="helper">No special characters, 255 characters max</slot>
      </div>

      <div part="error-message" aria-live="assertive" aria-hidden="false" id="vaadin-text-field-error-0">255 characters max</div>

    </div>

</vaadin-text-field>

Can someone please look into this & point me what I am doing wrong here? Thanks, Sandy

解决方案

If this answer does not answer your question: https://stackoverflow.com/a/61742555/143475

Please follow this process, so that we can work on adding support for this (in a generic way) in the future: https://github.com/intuit/karate/tree/develop/examples/ui-test

We really need community help for some of these things, do consider it.

这篇关于空手道 UI 中的 ShadowRoot dom 元素访问问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆