Handling elements inside Shadow DOM in Selenium WebDriver

Question

I want to automate to check that a file completely downloads or not in chrome driver or not. HTML of each entry in downloads list looks like

<a is="action-link" id="file-link" tabindex="0" role="link" href="http://fileSource" class="">DownloadedFile#1</a>

So I have used the following code:

driver.get('chrome://downloads/')  

This returns empty list but there are 3 new downloads.

As I found out, only parent elements of #shadow-root (open) tag can be handled. How can I find elements inside this #shadow-root element?

Answer 1

You can use the driver.executeScript() method to access the HTML elements and JavaScript objects in your web page.

In the below example the executeScript will return in a Promise the Node List of all <a> elements present in the Shadow tree of the element whose Id is the host. Then you can perform the assertion test:

it( 'check shadow root content', function () 
{
    return driver.executeScript( function ()
    {
        return host.shadowRoot.querySelectorAll( 'a' ).then( function ( n ) 
        {
            return expect( n ).to.have.length( 3 )
        }
    } )
} )