Returns the shadowRoot read-only property which represents the shadow root hosted by the element. This can further be used to retrieve elements part of the shadow root element.

Usage:

browser.getShadowRoot(selector, callback)
browser.getShadowRoot(selector)

Parameters:

Name Type description
using
Optional
string

The locator strategy to use. See W3C Webdriver - locator strategies

selector string|object|WebElement|By

The selector (CSS/Xpath) used to locate the element. Can either be a string or an object which specifies element properties.

callback function

Callback function which is called with the result value.

Example:

describe('Shadow Root example test', function() {
  it('retrieve the shadowRoot', async function(browser) {
     await browser
       .navigateTo('https://mdn.github.io/web-components-examples/popup-info-box-web-component/')
       .waitForElementVisible('form');

     const shadowRootEl = await browser.getShadowRoot('popup-info');
     const infoElement = await shadowRootEl.find('.info');

     await expect(infoElement.property('innerHTML')).to.include('card validation code');
     const iconElement = await shadowRootEl.find('.icon');
     const firstElement = await browser.getFirstElementChild(iconElement);

     await expect.element(firstElement).to.be.an('img');
   });
});

More Info: