How I can properly test things inside nested shadow roots?

[dortamiguel]

So I have to access something that is nested inside three shadow roots. So far I managed to access to the elements I need like this.

await browser.execute(() => {
  const shadowRoot = document
    .querySelector("ui-loader")
    ?.shadowRoot?.querySelector("custom-post")
    ?.shadowRoot?.querySelector("blocks-renderer")?.shadowRoot;

  let canStartGame = false;
  shadowRoot?.querySelectorAll("span").forEach((span) => {
    if (span.textContent?.includes("Find the Exit")) {
      canStartGame = true;
      span.click();
    }
  });
  if (canStartGame === false) {
    throw Error("Can't start the game");
  }
});

This will throw an error if I can't make my test pass but this is very hacky and I can't use anymore things like waitForElementVisible

I know there is a browser.getShadowRoot method (https://nightwatchjs.org/api/element/getShadowRoot.html), but I don't know how I can get a nested shadow root from there.