selenium webdriver (chromedriver) and accessing shadow dom

Question

I'm testing out a new application that uses shadow dom like so:

 #shadow-root (open)
    <div class="th_filePicker">
        <div class="th_fp_header">
            <div class="th_fp_title" role="heading" aria-level="1" data-l10n-id="th_fp_title">Select Image</div>
                <div class="th_fp_Close"><button class="close-popup" data-l10n-id="close_popup" title="Close"></button></div>
        </div>
    </div>

Does anyone have any idea on how I can access the elements in the file picker control - specifically, the close icon?

Answer 1

One way would be to use a piercing CSS selector (/deep/ or >>>). Though it's not supported by all the browsers and it may be removed in a future release.

This one should give you the close button with Chrome 62:

driver.findElement(By.css("* /deep/ button[title='Close']"))