How to Use the Shadow Root Functions

If you want to Click an element inside the shadow Root, please follow the below steps.

e.g.👇 we have to click the A Tag

1. To achieve this, we have to first find the shadow root from the shadow host. Choose any selectors of your choice from this list and store.

2. After this store the ShadowRoot Element and selector to find the ATag.

3. Pass the stored Details in the available Functions.

import {utils} from 'ya-done';
const webShadowHost = {locator: `//ns-cta[@href='/help-and-support/bills-and-payments/if-your-bills-wrong']`, locatorType: 'xpath'};
const webShadowRootElement = {locator: '.nds-cta.text.animated', locatorType: 'css'};

//To Click the Element 
await utils.clickShadowRootElement.call(this, webShadowHost, webShadowRootElement);

//To get the innerText of the Element
const innerText = await utils.getInnerTextOfShadowRootElement.call(this, webShadowHost, webShadowRootElement);

If we want to interact with the web elements using Jquery and CSS selector, we can use the below functions after storing the selectors.

import {utils} from 'ya-done';
const webShadowHostCssSelector = {locator: 'ns-cta.bills.list-item', locatorType: 'css'};
const webShadowRootElementCssSelector = {locator: '.nds-cta.text.animated', locatorType: 'css'};

//To Click the Element 
await utils.clickShadowRootElementByCssSelector.call(this, webShadowHostCssSelector, webShadowRootElementCssSelector);

//To get the innerText of the Element
const innerText = await utils.getInnerTextShadowRootElementByCssSelector.call(this, webShadowHostCssSelector, webShadowRootElementCssSelector);