0

This question might come of as silly because of my lack of knowledge, but I'm struggling to understand how do I use document.querySelector for identical shadow doms.

Let's say we have 2 shadowDoms that are identical, visible at the same time and you can interact with both.

To perform clicks and what not using testcafe, I use something like:

private shadowDomSelector = Selector(() => document.querySelector('myShadowDom').shadowRoot) 
private myShadowDomElement = this.shadowDomSelector.find('input.flex-auto.rounded-full')

await t.typeText(this.myShadowDomElement, 'Test1')

This works, but how do I make the following work?:

private secondShadowDomSelector = Selector(() => document.querySelector('myShadowDom').shadowRoot)
private myShadowDomElement = this.secondShadowDomSelector.find('input.flex-auto.rounded-full')

I tried private secondShadowDomSelector = Selector(() => document.querySelector('myShadowDom').shadowRoot).nth(1)

or private myShadowDomElement = this.ShadowDomSelector.find('input.flex-auto.rounded-full').nth(1)

Please point me in the right direction. Thank you.

Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
Liviu Avram
  • 103
  • 10
  • How specifically is the second code block not working? – Casey Rule Jun 29 '21 at 14:16
  • @Casey Rule I get an error: Expected false to be true, because I'm checking if the element is there on the 2nd shadow dom. I tried with other elements that are visible only on 1 shadow dom at a time (eg. a status, Active), that is not working either. So if I try something like: private statusCheck = this.secondShadowDomSelector.find('div.text-grey-inactive').withText('Active') / await t.expect(this.statusCheck.visible).ok({timeout: 10000}) it doesn't work. – Liviu Avram Jun 29 '21 at 14:37
  • If I'm reading this correctly, the only difference between these two code blocks are the variable names. Can you provide more context for where these pieces of code are coming from? – Casey Rule Jun 29 '21 at 14:56

0 Answers0