I have components arranged like so:
app-home
shadow-root
component1
shadow-root
div id=div1
In other words both my app-home and component1 have shadow doms.
I can find component1 easily in Stenciljs E2E Tests like so:
const page = await newE2EPage();
await page.setContent('<app-home></app-home>');
const component1 = await page.find('app-home >>> component1');
But, whatever I've tried I cannot get #div1 inside component1. It's important that I get back an E2EElement so I can use its methods such as click which trigger changes in the page.
Here's what I've tried:
page.find('app-home >>> component1 >>> #div1')
Returns null
component1.find(':host >>> #div1')
orcomponent1.find(':root >>> #div1')
orcomponent1.find('>>> #div1')
orcomponent1.find('#div1')
orcomponent1.find('component1 >>> #div1')
Returns null
component1.shadowRoot.querySelector('#div1')
This method gets an element but clicking on it or dispatching an event to it has no effect on app-root or component1 in the page.
Any suggestions then on how to find a child of a child when both elements have shadowDOMs?