microsoft / microsoft/playwright
[Feature] Allow forcing open closed shadow DOM roots
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 96.3k
- Forks
- 6.5k
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 180
Description
**Note from maintainers**
Following up on [this suggestion](https://github.com/microsoft/playwright/issues/23047#issuecomment-1874652966) by @enkelmedia, you can work around this issue:
```ts
test.beforeEach(async ({ context }) => {
await context.addInitScript(() => {
const originalAttachShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = function attachShadow(options) {
return originalAttachShadow.call(this, { ...options, mode: "open" });
};
});
});
```
---
There is already a bunch of issues related to shadow DOM but as far as I could see, they deal with open shadow DOM roots.
I am in a situation where on my page, there is a custom web component with closed shadow DOM root with an `iframe` in it with a `button` in _that_ which I want to click on.
For anyone curious, specifically, it is the Vercel Live Feedback widget shown in the Vercel's Preview environments. I want to click the `…` button in it and then close the widget programmatically so it doesn't obscure elements in my web app and prevent locators pointed at them from working.
For now I ended up solving this issue as per the below. But I don't like this solution, because that's not how a user would do it and I prefer my tests to be as user-mimicking as possible.
```typescript
await page.locator('css=vercel-live-feedback').evaluate((iframe) => iframe.remove());
```
I know there are selectors that can enter open shadow DOM roots (`.locator('css=vercel-live-feedback')`) but as far as I could find, there is nothing in Playwright to allow forcibly entering a closed shadow DOM root?
I am aware there will be people who don't like this and are of the opinion that closed shadow roots should not be accessible. To that I raise two motivating examples for why I think that shouldn't be the case:
1. The user's can enter the contents of the closed shadow DOM root. Why shouldn't the test be able to emulate user behavior?
2. Playwright already has mechanisms to bypass other barriers like the CSP so there is a precedent for allowing that.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the existing shadow-DOM locator behavior and the addInitScript workaround using Element.prototype.attachShadow. Determine how a user-facing option could force closed roots to be traversable across Playwright's supported browsers, including the iframe and button case described here. Done means a documented API behavior and coverage for locating content inside a closed shadow root.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- testing
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100