1

Can not identify button which inside the ShadowRoot in protractor.

I have tried using deepCss as follows,

this.startNowButton = element(by.deepCss('button[class="apply-now"]'));

But I am getting

NoSuchElementError: No element found using locator: By(css selector, * /deep/ button[class="apply-now"])

Is this the correct way to identify the elements inside the ShadowRoot for Protractor? Thanks

my HTML page is similar to as follows, 

<div id="modal">
<div class="push-wrap">
   <header id ="site-header">
      <hmy-cms-header class="hydrated">
         #shadow-root (open)
           <header>
               <div class=notification-banner> ... </div>
               <div class="ca">
                  <button class="apply-now">"Apply"<span>now</span>
Wicky
  • 118
  • 2
  • 13

3 Answers3

2

The pull request https://github.com/angular/protractor/pull/4786 is not yet merged. I have implemented the suggested workaround (https://github.com/angular/protractor/issues/4367) and then it worked.

Wicky
  • 118
  • 2
  • 13
0

Try the below locator options

1. const ele = element(by.css(div.ca>button.apply-now));
2. const ele = element(by.buttonText('Apply'));

If normal click does not works for you, Try the below executor to perform click on the button

await browser.executeScript("arguments[0].click()", ele);

Madhan Raj
  • 1,404
  • 1
  • 7
  • 13
  • Thanks for your reply. this is not working because it's cannot identify the element inside the Shadow root. any other way? thanks – Wicky May 27 '19 at 22:15
0

There has been issues with deepcss locator and it doesn't work as expected but there is work around for finding element in shadow DOM. Refer following link for other way of finding shadow dom element.

Protractor - shadow DOM

Nitin Sahu
  • 611
  • 6
  • 12
  • @Nithin , thanks for your reply, seems the PR is still open https://github.com/angular/protractor/pull/4786 Do you know any other way to do this? Thanks – Wicky May 27 '19 at 22:23