Skip to content

Add runnable shadow DOM finder examples for all bindings #2875

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
diemol merged 2 commits into from
Oct 8, 2026
Merged

Add runnable shadow DOM finder examples for all bindings #2875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1cadb00
Add runnable shadow DOM finder examples for all bindings
diemol Oct 8, 2026
2e7e8b6
Unindent gh-codeblock lines on English finders page
diemol Oct 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions examples/dotnet/SeleniumDocs/Elements/FindersTest.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,5 +91,18 @@ public void GetsActiveElement()

Assert.AreEqual("fname", attr);
}

[TestMethod]
public void FindsElementInShadowDom()
{
StartDriver();
driver.Url = "https://www.selenium.dev/selenium/web/shadowRootPage.html";

IWebElement shadowHost = driver.FindElement(By.CssSelector("custom-checkbox-element"));
ISearchContext shadowRoot = shadowHost.GetShadowRoot();
IWebElement shadowContent = shadowRoot.FindElement(By.CssSelector("input[type=checkbox]"));

Assert.IsTrue(shadowContent.Displayed);
}
}
}
13 changes: 13 additions & 0 deletions examples/java/src/test/java/dev/selenium/elements/FindersTest.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.SearchContext;
import org.openqa.selenium.WebElement;

import java.util.List;
Expand Down Expand Up @@ -90,4 +91,16 @@ public void getsActiveElement() {

assertEquals("fname", attr);
}

@Test
public void findsElementInShadowDom() {
startChromeDriver();
driver.get("https://www.selenium.dev/selenium/web/shadowRootPage.html");

WebElement shadowHost = driver.findElement(By.cssSelector("custom-checkbox-element"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement shadowContent = shadowRoot.findElement(By.cssSelector("input[type=checkbox]"));

assertTrue(shadowContent.isDisplayed());
}
}
12 changes: 12 additions & 0 deletions examples/javascript/test/elements/finders.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,4 +75,16 @@ describe('Finders', function () {
assert.equal(attr, 'fname');
await driver.quit();
});

it('finds an element in the shadow DOM', async function () {
let driver = await new Builder().forBrowser('chrome').build();
await driver.get('https://www.selenium.dev/selenium/web/shadowRootPage.html');

const shadowHost = await driver.findElement(By.css('custom-checkbox-element'));
const shadowRoot = await shadowHost.getShadowRoot();
const shadowContent = await shadowRoot.findElement(By.css('input[type=checkbox]'));

assert.ok(await shadowContent.isDisplayed());
await driver.quit();
});
});
11 changes: 11 additions & 0 deletions examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,17 @@ class FindersTest : BaseTest() {
assertEquals("fname", attr)
}

@Test
fun findsElementInShadowDom() {
driver.get("https://www.selenium.dev/selenium/web/shadowRootPage.html")

val shadowHost = driver.findElement(By.cssSelector("custom-checkbox-element"))
val shadowRoot = shadowHost.shadowRoot
val shadowContent = shadowRoot.findElement(By.cssSelector("input[type=checkbox]"))

assertTrue(shadowContent.isDisplayed)
}

@BeforeEach
fun configureImplicitWait() {
driver.manage().timeouts().implicitlyWait(Duration.ofMillis(500))
Expand Down
10 changes: 10 additions & 0 deletions examples/ruby/spec/elements/finders_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,14 @@

expect(attr).to eq('fname')
end

it 'finds an element in the shadow dom' do
driver.navigate.to 'https://www.selenium.dev/selenium/web/shadowRootPage.html'

shadow_host = driver.find_element(css: 'custom-checkbox-element')
shadow_root = shadow_host.shadow_root
shadow_content = shadow_root.find_element(css: 'input[type=checkbox]')

expect(shadow_content).to be_displayed
end
end
103 changes: 48 additions & 55 deletions website_and_docs/content/documentation/webdriver/elements/finders.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,22 +38,22 @@ two elements with the class name `information`, so this method returns the first

{{< tabpane langEqualsHeader=true text=true >}}
{{< tab header="Java" >}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L22-L23">}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L23-L24">}}
{{< /tab >}}
{{< tab header="Python" >}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L7-L8">}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L7-L8">}}
{{< /tab >}}
{{< tab header="CSharp" >}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L15-L16">}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L15-L16">}}
{{< /tab >}}
{{< tab header="Ruby" >}}
{{< gh-codeblock path="/examples/ruby/spec/elements/finders_spec.rb#L10-L11" >}}
{{< /tab >}}
{{< tab header="JavaScript" >}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L9-L10">}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L9-L10">}}
{{< /tab >}}
{{< tab header="Kotlin" >}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L19-L20">}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L19-L20">}}
{{< /tab >}}
{{< /tabpane >}}

Expand All @@ -67,22 +67,22 @@ One solution is to locate an ancestor of the desired element, then call find ele

{{< tabpane langEqualsHeader=true text=true >}}
{{< tab header="Java" >}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L31-L33">}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L32-L34">}}
{{< /tab >}}
{{< tab header="Python" >}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L14-L16">}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L14-L16">}}
{{< /tab >}}
{{< tab header="CSharp" >}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L25-L27">}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L25-L27">}}
{{< /tab >}}
{{< tab header="Ruby" >}}
{{< gh-codeblock path="/examples/ruby/spec/elements/finders_spec.rb#L17-L19" >}}
{{< /tab >}}
{{< tab header="JavaScript" >}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L18-L20">}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L18-L20">}}
{{< /tab >}}
{{< tab header="Kotlin" >}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L27-L29">}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L27-L29">}}
{{< /tab >}}
{{< /tabpane >}}

Expand All @@ -100,31 +100,24 @@ The Shadow DOM is an encapsulated DOM tree hidden inside an element.
With the release of v96 in Chromium Browsers, Selenium can now allow you to access this tree with
easy-to-use shadow root methods. NOTE: These methods require Selenium 4.0 or greater.

{{< tabpane langEqualsHeader=true >}}
{{< badge-examples >}}
{{< tabpane langEqualsHeader=true text=true >}}
{{< tab header="Java" >}}
WebElement shadowHost = driver.findElement(By.cssSelector("#shadow_host"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement shadowContent = shadowRoot.findElement(By.cssSelector("#shadow_content"));
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L100-L102" >}}
{{< /tab >}}
{{< tab header="Python" text=true >}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L39-L42">}}
{{< tab header="Python" >}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L39-L42" >}}
{{< /tab >}}
{{< tab header="CSharp" >}}
var shadowHost = _driver.FindElement(By.CssSelector("#shadow_host"));
var shadowRoot = shadowHost.GetShadowRoot();
var shadowContent = shadowRoot.FindElement(By.CssSelector("#shadow_content"));
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L101-L103" >}}
{{< /tab >}}
{{< tab header="Ruby" >}}
shadow_host = @driver.find_element(css: '#shadow_host')
shadow_root = shadow_host.shadow_root
shadow_content = shadow_root.find_element(css: '#shadow_content')
{{< gh-codeblock path="/examples/ruby/spec/elements/finders_spec.rb#L68-L70" >}}
{{< /tab >}}
{{< tab header="JavaScript" text=true >}}
{{< badge-code >}}
{{< tab header="JavaScript" >}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L83-L85" >}}
{{< /tab >}}
{{< tab header="Kotlin" text=true >}}
{{< badge-code >}}
{{< tab header="Kotlin" >}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L86-L88" >}}
{{< /tab >}}
{{< /tabpane >}}

Expand All @@ -141,22 +134,22 @@ For this example, we'll use a CSS selector:

{{< tabpane langEqualsHeader=true text=true >}}
{{< tab header="Java" >}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L41-L42">}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L42-L43">}}
{{< /tab >}}
{{< tab header="Python" >}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L22-L23">}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L22-L23">}}
{{< /tab >}}
{{< tab header="CSharp" >}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L36-L37">}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L36-L37">}}
{{< /tab >}}
{{< tab header="Ruby" >}}
{{< gh-codeblock path="/examples/ruby/spec/elements/finders_spec.rb#L25-L26" >}}
{{< /tab >}}
{{< tab header="JavaScript" >}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L28-L29">}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L28-L29">}}
{{< /tab >}}
{{< tab header="Kotlin" >}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L36-L37">}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L36-L37">}}
{{< /tab >}}
{{< /tabpane >}}

Expand All @@ -170,22 +163,22 @@ references to all input elements will be returned in a collection.

{{< tabpane langEqualsHeader=true text=true >}}
{{< tab header="Java" >}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L50-L51">}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L51-L52">}}
{{< /tab >}}
{{< tab header="Python" >}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L29-L30">}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L29-L30">}}
{{< /tab >}}
{{< tab header="CSharp" >}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L46-L47">}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L46-L47">}}
{{< /tab >}}
{{< tab header="Ruby" >}}
{{< gh-codeblock path="/examples/ruby/spec/elements/finders_spec.rb#L32-L33" >}}
{{< /tab >}}
{{< tab header="JavaScript" >}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L37-L38">}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L37-L38">}}
{{< /tab >}}
{{< tab header="Kotlin" >}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L44-L45">}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L44-L45">}}
{{< /tab >}}
{{< /tabpane >}}

Expand All @@ -196,22 +189,22 @@ need to iterate over the collection and identify the one you want.

{{< tabpane langEqualsHeader=true text=true >}}
{{< tab header="Java" >}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L61-L64">}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L62-L65">}}
{{< /tab >}}
{{< tab header="Python" >}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L51-L53">}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L51-L53">}}
{{< /tab >}}
{{< tab header="CSharp" >}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L58-L62">}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L58-L62">}}
{{< /tab >}}
{{< tab header="Ruby" >}}
{{< gh-codeblock path="/examples/ruby/spec/elements/finders_spec.rb#L40-L42" >}}
{{< gh-codeblock path="/examples/ruby/spec/elements/finders_spec.rb#L40-L42" >}}
{{< /tab >}}
{{< tab header="JavaScript" >}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L47-L50">}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L47-L50">}}
{{< /tab >}}
{{< tab header="Kotlin" >}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L53-L56">}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L53-L56">}}
{{< /tab >}}
{{< /tabpane >}}

Expand All @@ -222,22 +215,22 @@ To achieve this, the parent WebElement is chained with 'findElements' to access

{{< tabpane langEqualsHeader=true text=true >}}
{{< tab header="Java" >}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L74-L78">}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L75-L79">}}
{{< /tab >}}
{{< tab header="Python" >}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L61-L64">}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L61-L64">}}
{{< /tab >}}
{{< tab header="CSharp" >}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L73-L78">}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L73-L78">}}
{{< /tab >}}
{{< tab header="Ruby" >}}
{{< gh-codeblock path="/examples/ruby/spec/elements/finders_spec.rb#L48-L51" >}}
{{< gh-codeblock path="/examples/ruby/spec/elements/finders_spec.rb#L48-L51" >}}
{{< /tab >}}
{{< tab header="JavaScript" >}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L59-L63">}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L59-L63">}}
{{< /tab >}}
{{< tab header="Kotlin" >}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L64-L68">}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L64-L68">}}
{{< /tab >}}
{{< /tabpane >}}

Expand All @@ -247,22 +240,22 @@ It is used to track (or) find DOM element which has the focus in the current bro

{{< tabpane langEqualsHeader=true text=true >}}
{{< tab header="Java" >}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L88-L89">}}
{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/FindersTest.java#L89-L90">}}
{{< /tab >}}
{{< tab header="Python" >}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L72-L73">}}
{{< gh-codeblock path="/examples/python/tests/elements/test_finders.py#L72-L73">}}
{{< /tab >}}
{{< tab header="CSharp" >}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L89-L90">}}
{{< gh-codeblock path="/examples/dotnet/SeleniumDocs/Elements/FindersTest.cs#L89-L90">}}
{{< /tab >}}
{{< tab header="Ruby" >}}
{{< gh-codeblock path="/examples/ruby/spec/elements/finders_spec.rb#L58-L60" >}}
{{< gh-codeblock path="/examples/ruby/spec/elements/finders_spec.rb#L58-L60" >}}
{{< /tab >}}
{{< tab header="JavaScript" >}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L72-L73">}}
{{< gh-codeblock path="/examples/javascript/test/elements/finders.spec.js#L72-L73">}}
{{< /tab >}}
{{< tab header="Kotlin" >}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L76-L77">}}
{{< gh-codeblock path="/examples/kotlin/src/test/kotlin/dev/selenium/elements/FindersTest.kt#L76-L77">}}
{{< /tab >}}
{{< /tabpane >}}

Expand Down
Loading
Loading