Selenium - 在 shadow dom 中测试 iframe答案

【问题标题】：Selenium - test iframe inside shadow domSelenium - 在 shadow dom 中测试 iframe
【发布时间】：2021-07-17 17:39:34
【问题描述】：

我有一个启用 ViewEncapsulation.ShadowDom 的 Angular 应用程序，其中有一个 iframe。当我尝试编写量角器测试时出现错误：

Failed: unknown error: no element reference returned by script

虽然我能够实际获取网络元素，但我无法使用它执行任何操作。

const root = element(by.css('app-root')).getWebElement();
    browser.driver
      .executeScript('return arguments[0].shadowRoot', root)
      .then((shadowRoot: WebElement) => {
        browser.switchTo()
          .frame(shadowRoot.findElement(by.css('iframe')))
          .then(()=>{
            element(by.css('.app-block')).getWebElement().then(el=>{
              console.log("EL:",el); //logs element
              browser.actions().mouseMove(el).perform(); //throws error
            });
          });
      });

有没有办法正确切换到嵌套在 shadow dom 中的 iframe？

【问题讨论】：

什么错误？
“失败：未知错误：脚本没有返回元素引用”。但我知道它找到了元素，因为它还记录了“为定位器找到的多个元素 By(css selector, .app-block) - 将使用第一个结果”
这是您想要自动化的公共网页吗？我从未与shadow elements 合作过，很好奇他们有什么关系。也许可以帮助你
野刺； browser.actions().mouseMove() 是一个 global 函数，而您给它的参数 (el) 是对 shadowRoot 中元素的引用。所以你必须找出如果 mouseMove() 可以访问影子内容。

标签： angular selenium iframe protractor shadow-dom

【解决方案1】：

你可以使用这个插件query-selector-shadow-dom。在你的 conf.js 文件中添加这个

plugins: [{
    package: 'query-selector-shadow-dom/plugins/protractor'
}],

然后现在使用影子by.shadowDomCss 切换到 iframe。

【讨论】：