在使用 Cucumber、Selenium 和 Capybara 进行测试时，是否有一种简单的方法来遍历嵌套的 Shadow DOM？

Question

我正在尝试为一个应用程序的前端 UI 编写自动化测试，它有很多嵌套的 shadow-dom，我无法使用 Capybara、Cucumber 和 Selenium (使用 chrome 驱动程序）。该应用程序正在使用 AWS Amplify Authenticator 。当我尝试查找输入元素时，我不断收到以下错误：

Unable to find css "input[id$='username']" (Capybara::ElementNotFound)

这是我的测试结果：

When('I type into the username field my {string}') do |string| find("input[id$='username']").set(string) end

我在其他帖子上看到 chrome 驱动程序支持 shadow-doms 但不确定在这种情况下如何处理它

Answer 1

目前您需要使用 evaluate_script 才能访问影子-dom - 喜欢

element = find(...) # find element that contains shadow dom
shadow_root = @session.evaluate_script(<<~JS, element)
        (function(root){
          return root.shadowRoot;
        })(arguments[0])
      JS
shadow_root.find("input[id$='username']")

然后你只能使用 CSS based finders/actions/etc on the shadow DOM.

WebDriver 规范已更新，为影子提供更多支持dom，但它尚未在驱动程序中实现 - https://w3c.github.io/webdriver/#shadow-root

在使用 Cucumber、Selenium 和 Capybara 进行测试时，是否有一种简单的方法来遍历嵌套的 Shadow DOM？

Is there an easy way to traverse nested Shadow DOM when testing with Cucumber, Selenium & Capybara?

automated-tests

cucumber

capybara

aws-amplify

shadow-dom