Skip to content

Implement Shadow DOM support - #1010

Merged
OndraM merged 2 commits into
mainfrom
feature/shadow-dom
Sep 15, 2022
Merged

OndraM merged 2 commits into
mainfrom
feature/shadow-dom

Conversation

@OndraM

@OndraM OndraM commented Sep 8, 2022 •

Copy link
Copy Markdown
Collaborator

This PR adds Shadow DOM support. Fixes #1003 .

Shadow DOM is essential part of Web Components, as it encapsulates the component DOM and styles. This component isolation however mean one cannot access elements which are encapsulated in shadow DOM of a component with usual $driver->findElement() and $driver->findElements() method. You will basically not by able to find those elements in the default DOM.

Because of this, W3C WebDriver added support for endpoints specifically made for accessing Shadow DOM elements.

So far, this has been implemented in Chromedriver and partially in Geckodriver.

Example usage:

// consider having web component <custom-element>...</custom-element> with its inner DOM

// first, locate the element of the Web Component, which is part of the default DOM
$element = $this->driver->findElement(WebDriverBy::cssSelector('custom-element'));

// locate Shadow Root, which is the base for accessing encapsulated elements
$shadowRoot = $element->getShadowRoot();

// ShadowDom instance now provide findElement() and findElements() method, which will target only elements inside this Shadow DOM
$elementInShadow = $shadowRoot->findElement(WebDriverBy::cssSelector('input'));

@OndraM
OndraM merged commit 9bd91ba into main Sep 15, 2022
@OndraM
OndraM deleted the feature/shadow-dom branch September 15, 2022 21:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Shadow DOM support

2 participants