How to use getShadowRoot command for multiples shadow roots

[egarc12]

Hello everyone

Does anyone have any idea how to use the getShadowRoot command when shadowRoot elements exist inside another shadowRoot element?

For example the following HTML:

How could I get to the element named iron-query-params?

I am using version 2.1.7 of Nightwatch

[harshit-bs]

@egarc12 could you please try running this :

describe('Shadow Root example test', function() {
  it('retrieve the shadowRoot', async function(browser) {
     await browser.navigateTo('<URL>')

     const shadowRootEl = await browser.getShadowRoot('pw-shell');
     const shodowHostEl = await shadowRootEl.find('app-location');
    
     const nextShadowRootEl = await browser.getShadowRoot(shodowHostEl);
     const infoElement = await nextShadowRootEl.find('iron-query-params');
   });
});

[egarc12]

This works, but I'm looking to make a custom commands for these cases with nested shadow roots, I have the following

I am using page object, this is one of the commands which calls a custom assertion called elementIdVisible and mySelectors is a json object with the CSS selectors of each element

waitForPageLoaded: async function () { return await this.assert.elementIdVisible( mySelectors.myElements.formBoxHome.selector, mySelectors.myShadowElements.loginButton ) .assert.elementIdVisible( [ mySelectors.myElements.formBoxHome.selector, mySelectors.myShadowElements.documentNumber, ], mySelectors.myShadowElements.inputDocumentNumber ); }

Then this is my custom assertion called elementIdVisible

exports.assertion = function (roots, selectors, msg) { this.options = { elementSelector: true, }; this.formatMessage = function () { const message = msg || Element %s ${this.negate ? 'is not visible' : 'is visible'}; return { message, args: [this.elementSelector] }; }; this.expected = function () { return this.negate ? 'is not visible' : 'is visible'; }; this.evaluate = function (value) { return value === true; }; this.actual = function (passed) { return passed ? 'visible' : 'not visible'; }; this.value = function (result) { return result.value; }; this.command = (callback) => { const _this = this; _this.api.getIdShadowRoot(roots, selectors, async (result) => { var elementId = await result.id_; _this.api.elementIdDisplayed(elementId, callback); }); return _this; }; };

Finally, this is my custom command called getShadowRoot in charge of finding an element within one or several shadow roots

module.exports.command = async function (roots, selectors, callback) { if (!Array.isArray(selectors)){ selectors = [selectors]; } if (!Array.isArray(roots)){ roots = [roots]; } var element; element = await browser.getShadowRoot(roots[0]); if(roots.length > 1){ element = await element.findElement(roots[1]); for(var i = 2; i < roots.length; i++){ element = await browser.getShadowRoot(element); element = await element.findElement(roots[i]); } element = await browser.getShadowRoot(element); } for(var selector of selectors){ element = await element.findElement(selector); } return callback(element); };

The problem is that this does not work at all, with the following selectors I am able to get the element and the assertion is fulfilled successfully

assert.elementIdVisible( mySelectors.myElements.formBoxHome.selector, mySelectors.myShadowElements.loginButton )

But with the following selectors I get the following error

.assert.elementIdVisible( [ mySelectors.myElements.formBoxHome.selector, mySelectors.myShadowElements.documentNumber, ], mySelectors.myShadowElements.inputDocumentNumber )

[egarc12]

I found the error, it seems when I initialize my custom command in the following way the command does not work as expected

module.exports.command = async function (roots, selectors, callback) { ...

But when I initialize it in the following way it works correctly

module.exports = class CustomCommand { async command(roots, selectors, callback) { ...

This is the issue: #3000

This is my custom command to get an element in nested shadow roots:

module.exports = class CustomCommand { async command(roots, selectors, callback) { if (!Array.isArray(selectors)){ selectors = [selectors]; } if (!Array.isArray(roots)){ roots = [roots]; } var shadowElement; shadowElement = await browser.getShadowRoot(roots[0]); if(roots.length > 1){ shadowElement = await shadowElement.findElement(roots[1]); for(var i = 2; i < roots.length; i++){ shadowElement = await browser.getShadowRoot(shadowElement); shadowElement = await shadowElement.findElement(roots[i]); } shadowElement = await browser.getShadowRoot(shadowElement); } for(var selector of selectors){ shadowElement = await shadowElement.findElement(selector); } return callback(shadowElement); } };