是否可以使用 Watir-Webdriver 与 Polymer 进行交互？

Question

我刚刚更新了我的 Chrome 浏览器（版本 50.0.2661.75），发现 chrome://downloads 页面发生了变化，我的自动化测试无法再与之交互。之前，我一直在使用 Watir-Webdriver 清除下载页面，从我的机器中删除文件等，没有太大的困难。

看起来 Google 在这个页面上使用了 Polymer，

Watir-Webdriver 无法识别 paper-button 等新元素（对我来说）
甚至browser.img(:id, 'file-icon').present?returnsfalse当我可以清楚的看到图片在页面上

在对 Watir-Webdriver 进行更改之前，自动化使用 Polymer 制作的页面（特别是 chrome://downloads 页面）是失败的原因，还是有解决此问题的方法？

Answer 1

看起来 Google 将元素放在 Shadow-Dom 中，Selenium/Watir/WebDriver 规范（目前）不支持它。可能有一种方法可以通过 javascript (browser.execute_script(<...>)) 获取元素，但它充其量只是实验性的。

Answer 2

鉴于下载项目可在 Javascript 和 Watir allows Javascript execution 中访问（正如@titusfortner 指出的那样），可以使用 Watir 自动化新的下载页面。

注意影子根元素（在 Polymer 中又名 "local DOM"）can be queried with $$。

这是一个示例 Javascript，它记录每个下载项目的图标存在和文件名，并从列表中删除这些项目。将代码片段复制并粘贴到 Chrome 的控制台进行测试（在 Chrome 49.0.2623.112 on OS X El Capitan 上验证）。

(function() {
  var items = document
                .querySelector('downloads-manager')
                .$$('iron-list')
                .querySelectorAll('downloads-item');

  Array.from(items).forEach(item => {
    let hasIcon = typeof item.$$('#file-icon') !== 'undefined';
    console.log('hasIcon', hasIcon);

    let filename = item.$$('#file-link').textContent;
    console.log('filename', filename);

    item.$.remove.click();
  });
})();

更新： 我在 OS X（使用 ChromeDriver 2.21）中使用 Watir-Webdriver 验证了 Javascript。它与我在控制台中的工作方式相同（即，我看到控制台日志，并且删除了下载项）。以下是重现步骤：

运行在新的 irb shell 中执行以下命令（复制+粘贴）：

require 'watir-webdriver'
b = Watir::Browser.new :chrome

在新打开的Chromewindow中，下载几个文件创建一些下载项，然后打开下载选项卡.
运行在irbshell中执行以下命令（复制+粘贴）：

script = "(function() {
  var items = document
                .querySelector('downloads-manager')
                .$$('iron-list')
                .querySelectorAll('downloads-item');

  Array.from(items).forEach(item => {
    let hasIcon = typeof item.$$('#file-icon') !== 'undefined';
    console.log('hasIcon', hasIcon);

    let filename = item.$$('#file-link').textContent;
    console.log('filename', filename);

    item.$.remove.click();
  });
})();"

b.execute_script(script)

观察下载选项卡不再包含下载项目。
从下载选项卡打开Chrome控制台。
观察控制台显示几行hasIcon true和下载项目的文件名。

Answer 3

尝试自动化 Polymer 页面，我发现我可以通过在 URL.就像本页的示例 https://www.polymer-project.org/1.0/docs/devguide/settings:

http://example.com/test-app/index.html?dom=shady

添加 dom 参数以请求 Polymer 使用 shady dom 可能值得一试。

是否可以使用 Watir-Webdriver 与 Polymer 进行交互？

Is it possible to use Watir-Webdriver to interact with Polymer?

watir-webdriver

polymer