Protractor: ShadowDOM support request

@first87

Tnx for sharing this. It looks nice and it's a nice workaround.

If you would like to see this in a newer version of Protractor you could add a PR with a new locator like element(by. shadowRoot('#parentElement #innerElement'))

@wswebcreation Ok, good. I will add a PR.
But I want to make sure just one thing before go: are you okay with this style of selector #parentElement::sr #innerElement to indicate the element #innerElement inside the shadow tree of the #parentElement?

@first87

Looks good to me 👍

I'm only not the (only) one who decides about the PR's. The core members, that will also review your PR, decide in the end.

I think it will be a great addition and a clear logging, so go for it 😉

@wswebcreation How can I push my commits? Seems that I have no enough permission to contribute.

Hi @first87 ,

Have you seen this document. It holds all the steps you need to take.

@wswebcreation Yes, I checked DEVELOPER.md and did not find any guide to push. These are steps I went:

• git clone [email protected]:angular/protractor.git
• cd protractor/
• git remote add upstream https://github.com/angular/protractor.git
• git checkout -b feature/shadow-root-locator master to create my own branch
• npm install
• made several commits
• gulp lint to check if code formatted correctly
• npm start, webdriver-manager start, npm test to pass all tests

Now what should I do for next?

Hi @first87,

• You start by forking the project.
• Then it will be add to your account.
• Do a clone to your local machine
• Then push your changes and click on the "Create PR"-button.

That should do the trick

@wswebcreation Ok, thank you for guiding.

@wswebcreation I just created a PR #4392.

@first87 Tnx!!

What is the status on this? We would like to be able to use the by.shadowRoot function.

Hope someone helps me resolve this: https://github.com/angular/protractor/pull/4392#issuecomment-359814654

@first87 I tried using your new locator in my e2e tests. I am unable to get the elements in the shadow dom.

Environment: Angular (v5) Application with Polymer Web Components. Protractor for running e2e tests.

Angular CLI: 1.6.4
Node: 6.10.0
Angular: 5.2.0
@angular/cli: 1.6.4
typescript: 2.5.3
Below given is my polymer web component shadow root expanded in chrome. You could see input type = "text" inside this custom element.

I am unable to access input element inside custom polymer component using protractor by.css_sr.

var polymerFirstName = element(by.className('polyFName'));
var inputElement = polymerFirstName.element(by.css_sr('input')); // returns nothing.

It failed with an error "No element found using locator: by.css_sr("input")".

I need to access the inner input element so that I can perform UI Automation tasks like.
polymerFirstName.element(by.css_sr('input')).clear();
polymerFirstName.element(by.css_sr('input')).sendKeys('Ritchie');

Anything I am missing?

@msbasanth You missed ::sr since by.css_sr won't start to find elements in a shadow root of the element ~ it will dig into the shadow DOM tree of any element for each ::sr.
So you should replace your input element finder with this:

var inputElement = polymerFirstName.element(by.css_sr('::sr input'));

Thank you @first87 it worked like a charm.
Hope we will get this shadow DOM support in protractor soon.

This works! Thank you! It's going to be so hard locating elements now especially if there are nested shadow doms :( since we can't test the locators in the console. Thanks again!

@firstor Thank you so much for this! Hopefully this can get integrated soon....

I was hoping to get some assistance from you on this though. While I am able to get the correct value using ::sr as needed, when I do title.getText() it seems to get the "incorrect" value. It seems to be coming in as an object. See the following output below:

Expected [ 'Title' ] to be 'Title'.

I have not had success in being able to get the string from that object/array and was wondering if you had an any idea?

Thanks again for the workaround!!

EDIT: Disregard!! Referenced this and it did the trick https://stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-string. Thanks again!!

Hi @firstor / @msbasanth , I am unable to get an element present in shadow-root DOM. I copied your above code in a .ts file but getting a compilation error at line no. 6:
Code: let shadowDomInUse = (document.head.createShadowRoot .......
Error: Property 'createShadowRoot' does not exist on type 'HTMLHeadElement'.

Application: Angular v7
NodeJS: 6.9.0
typescript: 2.3.3
protractor: 5.3.2

Can you please elaborate on how to use your method to enter some text in the input box inside shadow-root?
Thanks!

@firstor
Thanks for this. Am trying to use it like this.
var searchBar = element(by.css_sr('::sr input'));
var searchButton = element(by.css_sr('::sr i'));

Am getting the below error
[11:36:06] E/launcher - TypeError: Invalid locator

What am i doing wrong?
Any help is highly appreciated. Thanks in advance.

@firstor hey, thanks for the workaround)
however, we can't fully use it in our team unless it's merged into Protractor master branch (we're using Protractor on remote nodes so the libs are always pulled when the tests are being run).

Any progress on merging the https://github.com/angular/protractor/pull/4786 ?

Any update on this?

any update? this is a blocker for many specs as of late(

Hello @firstor ,

Application : Angular 8
NodeJS : 12.13.1
typescript: 3.5.3
Protractor : 5.4.0

Thank you for your workaround.

I try to find element into ShadowRoot. In our frontend architecture, we Have 3 depth levels

• First level : Micro frontend application
• Second level : Micro frontend component
• Third level : Angular material Component

First and second shadowRoot level are accessible but not the last one.

Extract of the Code source :

    await expect(element(by.tagName('page-affaire')).isDisplayed());
    await browser.driver.sleep(3000);
    console.log('Page affaire chargée');
    var el1 = element(by.tagName('page-affaire'));

    var el2 = el1.element(by.css_sr('::sr rac-card'));
    console.log('rac-card found');

    var el3 = el1.element(by.css_sr('::sr rac-option'));
    console.log('rac-option found');

    var el4 = el1.element(by.css_sr('::sr mat-select')); 
    console.log('rac-card select');

Result logs :

Jasmine` started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

We try with other solution (https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o). We have the same issue :

await browser.executeScript("return document.querySelector(\"page-affaire\");").then(function () {
      console.log('page affaire found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\");").then(function () {
      console.log('rac card found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\");").then(function () {
      console.log('rac option found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\").shadowRoot.querySelector(\"mat-select\").click();").then(function () {
      console.log('Type de Demande cliqué');
      browser.sleep(5000);
    });

Result :

Jasmine started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

Is there a limit regarding shadowRoot depth limit access ?

Thanks you for your support.

V1nc3kr0

Hello @firstor ,

Application : Angular 8
NodeJS : 12.13.1
typescript: 3.5.3
Protractor : 5.4.0

Thank you for your workaround.

I try to find element into ShadowRoot. In our frontend architecture, we Have 3 depth levels

• First level : Micro frontend application
• Second level : Micro frontend component
• Third level : Angular material Component

First and second shadowRoot level are accessible but not the last one.

Extract of the Code source :

    await expect(element(by.tagName('page-affaire')).isDisplayed());
    await browser.driver.sleep(3000);
    console.log('Page affaire chargée');
    var el1 = element(by.tagName('page-affaire'));

    var el2 = el1.element(by.css_sr('::sr rac-card'));
    console.log('rac-card found');

    var el3 = el1.element(by.css_sr('::sr rac-option'));
    console.log('rac-option found');

    var el4 = el1.element(by.css_sr('::sr mat-select')); 
    console.log('rac-card select');

Result logs :

Jasmine` started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

We try with other solution (https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o). We have the same issue :

await browser.executeScript("return document.querySelector(\"page-affaire\");").then(function () {
      console.log('page affaire found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\");").then(function () {
      console.log('rac card found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\");").then(function () {
      console.log('rac option found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\").shadowRoot.querySelector(\"mat-select\").click();").then(function () {
      console.log('Type de Demande cliqué');
      browser.sleep(5000);
    });

Result :

Jasmine started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

Is there a limit regarding shadowRoot depth limit access ?

Thanks you for your support.

V1nc3kr0

Give a try like
var el4 = el3.element(by.css_sr('::sr mat-select'));

@firstor
My Web Application is using Polymer.js with 10 levels of Shadow roots.

Is it possible to call the last Shadow root element from the top node instead of traversing the individual Shadow roots.
Thanks for your support.

Hello guys ,
I am new to protractor and i wish i can get a help on how to include this locator script (shadowDOM) in protractor .
i am doing some UI testing on polymer webcomponent , the protractor version : 5.4.2 and node v12.13 .

could any one tell me where to include that script ? @firstor , @alagappan-qa

thanks in advance.

@rugaba
Include the script in the Configuration.js file under onPrepare() method.

thx @alagappan-qa , it worked !!

Hi,

Is it possible to include this script in a separate js file and import it in the protractor.conf file and include in onPrepare() method. If so, how do we do it ?

Thanks,
Lakshmi

If anyone needs this now, see https://github.com/angular/protractor/pull/4786#issuecomment-607204672 and https://github.com/angular/protractor/pull/4786#issuecomment-607224145

You can also use https://github.com/angular/protractor/pull/4786.patch or https://github.com/angular/protractor/pull/4786.diff

Hi,

Is it possible to include this script in a separate js file and import it in the protractor.conf file and include in onPrepare() method. If so, how do we do it ?

Thanks,
Lakshmi

@Lakhs02
Declare this locator in some other file as

exports.addShadowRootLocator = function () {
    by.addLocator('css_sr', function (
.
.
.
    return matches;
    });
};

Then in the onPrepare() method

onPrepare: function () {
        // register the shadow root locator, to use it globally
        require('./path/to/file').addShadowRootLocator();
}

>

@firstor
My Web Application is using Polymer.js with 10 levels of Shadow roots.

Is it possible to call the last Shadow root element from the top node instead of traversing the individual Shadow roots.
Thanks for your support.

@firstor I can see on your profile that you are experienced with shadow DOM. Could you please be so kind and provide an example how you access nested shadow DOM? I am struggling with it for two weeks now and still cannot access some elements:
This is my example, I need to access highlighted div element: div.a-choosen-text:

I tried the below locator (and many others) but with no success:
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app-project:nth-child(1)::sr appkit-panel::sr app-assignee-dropdown::sr appkit-dropdown::sr div.a-choosen-text'));

What is suprising, the locator for app-project works fine, but when I go deeper, whatever I try, it does not work.
Works fine: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app-project:nth-child(1)'));

Do you have any idea what am I doing wrong?
Thank you in advance,
Magda

>

@firstor
My Web Application is using Polymer.js with 10 levels of Shadow roots.

Is it possible to call the last Shadow root element from the top node instead of traversing the individual Shadow roots.
Thanks for your support.

@firstor I can see on your profile that you are experienced with shadow DOM. Could you please be so kind and provide an example how you access nested shadow DOM? I am struggling with it for two weeks now and still cannot access some elements:
This is my example, I need to access highlighted div element: div.a-choosen-text:

I tried the below locator (and many others) but with no success:
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app-project:nth-child(1)::sr appkit-panel::sr app-assignee-dropdown::sr appkit-dropdown::sr div.a-choosen-text'));

What is suprising, the locator for app-project works fine, but when I go deeper, whatever I try, it does not work.
Works fine: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app-project:nth-child(1)'));

Do you have any idea what am I doing wrong?
Thank you in advance,
Magda

Hi Magda,
In your case, the shadow root under the WebElement appkit-panel is not expanded to find out your Element.
But in the nameOnTheProjectTab element it's expanded which causes this issue.
Try out the below element locator,
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app-project:nth-child(1)::sr app-assignee-dropdown::sr appkit-dropdown::sr div.a-choosen-text'));

OMG, I got it now, and I am able to find all locators I need!
Thank you so much for help !
Best regards,
Magda

From: alagappan-qa notifications@github.com
Sent: Saturday, July 4, 2020 4:34 AM
To: angular/protractor protractor@noreply.github.com
Cc: Bartkowiak-Jowsa, Magdalena magdalena.bartkowiak-jowsa@capgemini.com; Comment comment@noreply.github.com
Subject: Re: [angular/protractor] ShadowDOM support request (#4367)

@firstorhttps://github.com/firstor
My Web Application is using Polymer.js with 10 levels of Shadow roots.
[Image removed by sender. RJvlf]https://user-images.githubusercontent.com/57852329/72205775-de7d6300-34ac-11ea-93f7-37917052ce90.png
Is it possible to call the last Shadow root element from the top node instead of traversing the individual Shadow roots.
Thanks for your support.

@firstorhttps://github.com/firstor I can see on your profile that you are experienced with shadow DOM. Could you please be so kind and provide an example how you access nested shadow DOM? I am struggling with it for two weeks now and still cannot access some elements:
This is my example, I need to access highlighted div element: div.a-choosen-text:
[Image removed by sender. image]https://user-images.githubusercontent.com/50359393/86498151-c532e080-bd84-11ea-867c-337085b96087.png

I tried the below locator (and many others) but with no success:
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app-project:nth-child(1)::sr appkit-panel::sr app-assignee-dropdown::sr appkit-dropdown::sr div.a-choosen-text'));

What is suprising, the locator for app-project works fine, but when I go deeper, whatever I try, it does not work.
Works fine: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app-project:nth-child(1)'));

Do you have any idea what am I doing wrong?
Thank you in advance,
Magda

Hi Magda,
In your case, the shadow root under the WebElement appkit-panel is not expanded to find out your Element.
But in the nameOnTheProjectTab element it's expanded which causes this issue.
Try out the below element locator,
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app-project:nth-child(1)::sr app-assignee-dropdown::sr appkit-dropdown::sr div.a-choosen-text'));

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/angular/protractor/issues/4367#issuecomment-653710546, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AMAGYYOPZMDJCRSHT5XI45TRZ2ILDANCNFSM4DR44ABQ.

Capgemini Polska Sp. z o.o.,
ul. Żwirki i Wigury 16a 02-092 Warszawa,
S?d Rejonowy dla M.ST. Warszawy, XII Wydzia? Gospodarczy Rejestrowy, nr KRS: 0000040605,
NIP: 526-11-84-467,
Wysoko?? kapita?u zak?adowego: 16.403.320,00 z?.
This message contains information that may be privileged or confidential and is the property of the Capgemini Group. It is intended only for the person to whom it is addressed. If you are not the intended recipient, you are not authorized to read, print, retain, copy, disseminate, distribute, or use this message or any part thereof. If you receive this message in error, please notify the sender immediately and delete all copies of this message.

Hey Everyone, Found a solution to locate the Shadow Elements inside the Shadow Root at any deep level.
With the help of the node module "query-selector-shadow-dom", we can identify the Web elements in the Shadow DOM with ease. No need to traverse through all the Shadow roots.
Using element(by.shadowDomCss('')), we can point to the Web element inside the Shadow Root at any level.

Hi Alagappan,
can you please describe a little more with an example please.Thanks

On Wed, Aug 19, 2020 at 7:52 AM alagappan-annamalai <
[email protected]> wrote:

Hey Everyone, Found a solution to locate the Shadow Elements inside the
Shadow Root at any deep level.
With the help of the node module "query-selector-shadow-dom", we can
identify the Web elements in the Shadow DOM with ease. No need to traverse
through all the Shadow roots.
Using element(by.shadowDomCss('')), we can point to the Web element inside
the Shadow Root at any level.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/protractor/issues/4367#issuecomment-676304234,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ
.

Hi Alagappan, can you please describe a little more with an example please.Thanks
…
On Wed, Aug 19, 2020 at 7:52 AM alagappan-annamalai < @.*> wrote: Hey Everyone, Found a solution to locate the Shadow Elements inside the Shadow Root at any deep level. With the help of the node module "query-selector-shadow-dom", we can identify the Web elements in the Shadow DOM with ease. No need to traverse through all the Shadow roots. Using element(by.shadowDomCss('')), we can point to the Web element inside the Shadow Root at any level. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4367 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ .

In the above screenshot, the tag paper-input-container with id=container is at 6+ shadow root layer. To take this webElement we can use element(by.shadowDomCss('paper-input#textbox paper-input-container#container')); This short element identifier will act on the WebElement.

Hi @firstor / @msbasanth , I am unable to get an element present in shadow-root DOM. I copied your above code in a .ts file but getting a compilation error at line no. 6:
Code: let shadowDomInUse = (document.head.createShadowRoot .......
Error: Property 'createShadowRoot' does not exist on type 'HTMLHeadElement'.

I also got this error and the solution is to replace createShadowRoot with attachShadow because the createShadowRoot() method has been deprecated in favor of attachShadow(). See reference:
https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

By the way @firstor, thank you for this contribution! It has been working great so far. I wasted so much time trying to get by.deepCss to work with Protractor and Angular 10. I have recently started using native shadowDom encapsulation with my Angular 10 components, encapsulation: ViewEncapsulation.ShadowDom which I love but was not happy I could not access any nested shadowDom elements during e2e testing. Thankfully I found this code!

@Rob4226
Please look into package https://www.npmjs.com/package/query-selector-shadow-dom

Looks promising.

@msbasanth @Rob4226 I'm new to protractor, I'm trying to access text 'Downloads' of chrome download page
my code :

I also tried var x = await element.element(by.css_sr('h1')).getText(); It doesn't work.
I receive below error message:

Appreciate your response on this Thanks!

I fixed it, I need to create separate element variable for every nested shadow root element.

@firstor I greatly appreciate for this code. many thanks 👍

Hello i am currently tr to select shadow dom. I get the following error when using the workaround:

Logg: { StaleElementReferenceError: stale element reference: stale element not found (Session info: chrome=87.0.4280.66)

Usage:
const parent = element(by.css_sr('my-wrapper > div > div::sr my-data')); const domElement = parent.element(by.css('my-checkbox input')); console.log('Displayed', await domElement.isDisplayed());

<my-data> <my-checkbox> <input> <my-checkbox> </my-data> .....
What am I doing wrong?

Hello i am currently tr to select shadow dom. I get the following error when using the workaround:

Logg: { StaleElementReferenceError: stale element reference: stale element not found (Session info: chrome=87.0.4280.66)

Usage:
const parent = element(by.css_sr('my-wrapper > div > div::sr my-data')); const domElement = parent.element(by.css('my-checkbox input')); console.log('Displayed', await domElement.isDisplayed());

<my-data> <my-checkbox> <input> <my-checkbox> </my-data> .....
What am I doing wrong?

Hi @wasoek , Can you provide the Chrome Developer Tool > Inspect Element for this element from the Shadow Root. That will give more details on this issue.

Hi,

This can be handled using any of the below 2 methods,

Let element1 = element.all(by.css_shadowroot('downloads-manager::sr div’)).get(1)

Let element2 = element1.element(by.css_shadowroot(‘::sr downloads-item::sr div::sr downloads-item')).getText();
OR

browser.element(by.css_shadowroot('downloads-manager::sr div[id=”mainContainer”]::sr downloads-item::sr div::sr downloads-item')).getText();
[here instead of nth child we are using the ID, so that it’ll focus to the element]

Thanks,
Alagappan A

From: shopmujahid notifications@github.com
Sent: Thursday, December 3, 2020 9:20 AM
To: angular/protractor protractor@noreply.github.com
Cc: Alagappan Annamalai alagappan.annamalai@riversand.com; Comment comment@noreply.github.com
Subject: Re: [angular/protractor] ShadowDOM support request (#4367)

I'm trying to access elements under second div element of shadow dom (highlighted) but it is always retrieving the first div element with below message:

W/element - more than one element found for locator by.css_shadowroot("downloads-manager::sr div") - the first result will be used

below is my xpath:
browser.element(by.css_shadowroot('downloads-manager::sr div:nth-child(1)::sr downloads-item::sr div::sr downloads-item')).getText();

could someone guide me over this? Thanks in advance

[image]https://user-images.githubusercontent.com/58770415/100961235-336c0280-34df-11eb-9618-1f24ffcd62a0.png

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/angular/protractor/issues/4367#issuecomment-737647758, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AORWPO6XNK7RUWPVHCWKBCTSS4DH5ANCNFSM4DR44ABQ.

I'm trying to access one of div elements inside shadow dom both nth-child() and type-of() are not working in my case.
anybody faced this issue before?

Below is the DOM structure and my xpath

await browser.element(by.css_shadowroot('d2l-navigation::sr d2l-navigation-main-header:nth-type-of(3)'))

I'm receiving no element found error.

Any help would be greatly appreciated Thanks in advance.

Hi,

Try removing the ::sr in the element locator since it’s outside the Shadow Root.
Use any of these 2 element locators and see whether it’s working or not.

await browser.element(by.css_shadowroot('d2l-navigation d2l-navigation-main-header:nth-type-of(3)'))
OR

await browser.element(by.css_shadowroot('d2l-navigation d2l-navigation-main-header div. d2l-navigation-header-right’))

Thanks,

Alagappan A
From: shopmujahid notifications@github.com
Sent: Wednesday, December 9, 2020 12:09 PM
To: angular/protractor protractor@noreply.github.com
Cc: Alagappan Annamalai alagappan.annamalai@riversand.com; Comment comment@noreply.github.com
Subject: Re: [angular/protractor] ShadowDOM support request (#4367)

I'm trying to access one of div elements inside shadow dom both nth-child() and type-of() are not working in my case.
anybody faced this issue before?

Below is the DOM structure and my xpath
[2134234]https://user-images.githubusercontent.com/58770415/101593797-cc9e8b80-39ad-11eb-8fd0-a7cd7541773f.jpg

await browser.element(by.css_shadowroot('d2l-navigation::sr d2l-navigation-main-header:nth-type-of(3)'))

I'm receiving no element found error.

Any help would be greatly appreciated Thanks in advance.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/angular/protractor/issues/4367#issuecomment-741567009, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AORWPO7CSSI7P5GH37O74R3ST4LO5ANCNFSM4DR44ABQ.

Thanks @alagappan-annamalai! 👍 the second solution worked for me by removing ::sr and adding tagname.classname, however I ran into other weird issue its not accessing the child elements below:

I need to access highlighted element above

tried with both xpaths below:
browser.element(by.css_sr('d2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul:nth-child(2)'))

and

browser.element(by.css_sr('d2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul li._ (the li class name will append some text to it when we hover over it)