CODEWITHSUNDEEP
angularseleniumiframeprotractorshadow-dom
lexigren
lexigren

Reputation: 550

Selenium - test iframe inside shadow dom

I have an angular app with enabled ViewEncapsulation.ShadowDom, inside which there is an iframe. When I'm trying to write protractor test I'm getting an error:

Failed: unknown error: no element reference returned by script

While I'm able to actually get web element, I can't perform any actions with it.

const root = element(by.css('app-root')).getWebElement();
    browser.driver
      .executeScript('return arguments[0].shadowRoot', root)
      .then((shadowRoot: WebElement) => {
        browser.switchTo()
          .frame(shadowRoot.findElement(by.css('iframe')))
          .then(()=>{
            element(by.css('.app-block')).getWebElement().then(el=>{
              console.log("EL:",el); //logs element
              browser.actions().mouseMove(el).perform(); //throws error
            });
          });
      });

Is there a way to properly switch to iframe nested in shadow dom?

Upvotes: 2

Views: 454

Answers (1)

ohlori
ohlori

Reputation: 310

You can use this plugin query-selector-shadow-dom. On your conf.js file add this

plugins: [{
    package: 'query-selector-shadow-dom/plugins/protractor'
}],

Then switch now to iframe by using the shadow by.shadowDomCss.

Upvotes: 1

Related Questions