.getShadowRoot() Suggest edits

Since: 2.0.0

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.

For more info on working with DOM elements in Nightwatch, refer to the Finding & interacting with DOM Elements guide page.

Usage

                    browser.getShadowRoot(selector, [callback])
                
                    browser.getShadowRoot(selector)
                
                    browser.element(selector).getShadowRoot()

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');
   });
});

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.