Protractor getting DOM element and using their properties

Question

I'm running e2e tests with Protractor and Selenium on a Polymer/Angular App. Most of the elements are in the shadow DOM (I managed to handle it with custom css locators but it made my tests unstable as any change in the dom breaks them). The problem is that the devs have implemented a virtual scroll list : Only a few items are loaded in the scroll list, next ones are loaded when you scroll. I asked my devs how to deal with it and they told me I had to get the web-component and test it without protractor aka running commands like this :

document.querySelector('virtual-scroll').baseList

Where baseList is a public property of the tag. I tried

var element = browser.executeScript('return document.querySelector("virtual-scroll")');
element.then(function (el){
  console.log(el.$.baseList);
});

but the command above returns a WebElement. Is there any way to return the HTML DOM element as a javascript querySelector command does ?

EDIT : as requested the source code with the property of the scrollList that I want to get

I found out I could use this command : browser.executeScript('return document.querySelector("iris-app").baseList;'). It works but I still don't get why I can't just get the parent and call his properties. — JiggyJinjo
Try leatest Protractor's API by.deepCSS() which used to find an element by css selector within the Shadow DOM, for detail: protractortest.org/#/api?view=ProtractorBy.prototype.deepCss — yong
AFAIK It has been deprecated and this is why I use custom css locators. These are working fine, this isn't the issue here. I'm sorry if you misunderstood it was just a side note if someone had a tip for it too. — JiggyJinjo

Buaban Buaban · Accepted Answer · 2018-01-24T10:28:16

If "virtual-scroll" is name of the shadow root element and baseList is an attribute of the element. You can get it with command below.

var baseList = browser.executeScript('return document.querySelector("virtual-scroll").baseList');

By the way, you can test the shadow DOM with Selenium. See an example below.

var shadowRootElement = browser.executeScript('return document.querySelector("virtual-scroll").shadowRoot');
var element = shadowRootElement.findElement(......);

Protractor getting DOM element and using their properties

1 Answers