Automating Shadow DOM with Selenium WebDriver 4 in C#

How to drive web elements inside a shadow root on a web page

About 9 months ago, I published an article that documenting my first attempt on Automating Shadow DOM, using Selenium v3 in Ruby. This is an update to use Selenium v4, which added getShadowRoot() method. Below are the differences (in Java).

Selenium v3:

Using JavaScript.

WebElement shadowHost = driver.findElement(By.cssSelector("#shadow_host"));
JavascriptExecutor jsDriver = (JavascriptExecutor) driver;
WebElement shadowRoot = (WebElement) jsDriver.executeScript(
   "return arguments[0].shadowRoot", shadowHost);

Selenium v4:

Get it directly.

WebElement shadowHost = driver.findElement(By.cssSelector("#shadow_host"));
WebElement shadowRoot = shadowHost.getShadowRoot();

In this article, I will show how to do the Selenium v4 way in C#. yes, another language :-), Beside a change of language (which is quite minor, really), I made a couple of improvements.

The Task

Add a new list item to the Editable List of the demo Fiddle site.