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

Question

I just updated my Chrome browser (Version 50.0.2661.75) and have found that the chrome://downloads page has changed such that my automated tests can no longer interact with it. Previously, I had been using Watir-Webdriver to clear the downloads page, delete files from my machine, etc, without too much difficulty.

It looks like Google is using Polymer on this page, and

• there are new (to me) elements like paper-button that Watir-Webdriver doesn't recognize

• even browser.img(:id, 'file-icon').present? returns false when I can clearly see that the image is on the page.

Is automating a page made with Polymer (specifically the chrome://downloads page) a lost cause until changes are made to Watir-Webdriver, or is there a solution to this problem?

Answer 1

Looks like Google put the elements inside the Shadow-Dom, which isn't supported by Selenium/Watir/WebDriver spec (yet). There might a way to obtain the element via javascript (browser.execute_script(<...>)), but it is experimental at best still.

Answer 2

Given that the download items are accessible in Javascript and that Watir allows Javascript execution (as @titusfortner pointed out), it's possible to automate the new Downloads page with Watir.

Note the shadow root elements (aka "local DOM" in Polymer) can be queried with $$.

Here's an example Javascript that logs the icon presence and filename of each download item and removes the items from the list. Copy and paste the snippet into Chrome's console to test (verified in 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();
  });
})();

UPDATE: I verified the Javascript with Watir-Webdriver in OS X (with ChromeDriver 2.21). It works the same as in the console for me (i.e., I see the console logs, and the download items are removed). Here are the steps to reproduce:

1. Run the following commands in a new irb shell (copy+paste):

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

2. In the newly opened Chrome window, download several files to create some download items, and then open the Downloads tab.

3. Run the following commands in the irb shell (copy+paste):

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)

3. Observe the Downloads tab no longer contains download items.

4. Open the Chrome console from the Downloads tab.

5. Observe the console shows several lines of hasIcon true and the filenames of the downloaded items.

Answer 3

Attempting to automated a Polymer page, I found I was able to access the web elements by asking Polymer to use the shady dom by adding ?dom=shady in the URL. Like in the example on this page https://www.polymer-project.org/1.0/docs/devguide/settings:

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

Adding the dom parameter to request Polymer to use the shady dom may be worth a try.