[web] Webdriver can't return shadowRoot (as SearchContext) in Chrome96+

[ditman]

We're attempting to run some tests in Chrome96, and this bit of the code is failing:

flutter/examples/hello_world/test_driver/smoke_web_engine_test.dart

Lines 46 to 50 in 5e0cc4c

	// It's either the shadowRoot within flt-glass-pane, or [driver.webDriver].
	final SearchContext appRoot = await driver.webDriver.execute(
	'return document.querySelector("flt-glass-pane")?.shadowRoot;',
	<dynamic>[],
	) as SearchContext? ?? driver.webDriver;

With the following error (complete build):

   type '_InternalLinkedHashMap<dynamic, dynamic>' is not a subtype of type 'SearchContext?' in type cast
   test_driver/smoke_web_engine_test.dart 50:9       main.<fn>.<fn>
   ===== asynchronous gap ===========================
   package:test_api/src/backend/declarer.dart 215:9  Declarer.test.<fn>.<fn>
   ===== asynchronous gap ===========================
   package:test_api/src/backend/declarer.dart 213:7  Declarer.test.<fn>
   ===== asynchronous gap ===========================
   package:test_api/src/backend/invoker.dart 257:7   Invoker._waitForOutstandingCallbacks.<fn>

[ditman]

It seems that there has been a change in how Chrome 96+ retrieves the shadowRoot of an element.

• Chromedriver issue: https://bugs.chromium.org/p/chromedriver/issues/detail?id=3958
• Documentation + possible workaround: https://titusfortner.com/2021/11/22/shadow-dom-selenium.html

Looking at the equivalent fix in Selenium, it seems that some of the changes need to happen in package:webdriver?

[ditman]

There might be a workaround by splitting the selection of the element that contains the shadow root, and the retrieval of the shadowRoot itself:

WebElement shadowHost = seleniumWebDriver.findElement(By.cssSelector("#shadowrootcontainer"));
JavascriptExecutor javascriptExecutor = (JavascriptExecutor) seleniumWebDriver;

SearchContext shadowRoot = (SearchContext) javascriptExecutor.executeScript("return arguments[0].shadowRoot", shadowHost);

WebElement shadowContent = shadowRoot.findElement(By.cssSelector("#shadowcontentcss"));

[yjbanov]

We should copy this issue into the package:webdriver repo, but keep this one open for tracking.

[ditman]

Created google/webdriver.dart#247

[flutter-triage-bot]

Issue is assigned to multiple teams (ecosystem, web). Please ensure the issue has only one team-* label at a time. Use fyi-* labels to have another team look at the issue without reassigning it.
The triaged-web label is irrelevant if there is no team-web label or fyi-web label.