Shadow DOM — Custom Component — BrauzerLab

The page contains a custom <user-card> element. The «Profile» button inside it lives in a Shadow DOM — querySelectorAll cannot reach it from the outside.

In real Playwright, Shadow DOM is pierced automatically: getByRole, getByTestId, and other locators descend into shadow roots without any extra configuration.

The same behaviour is simulated here. getByTestId('profile-btn') or getByRole('button', { name: 'Profile' }) reach the button inside the shadow root directly.

page is already available. Find and click the «Profile» button inside the Shadow DOM.

import { test, expect } from '@playwright/test'; test('Shadow DOM — Custom Component', async ({ page }) => { await page.goto('https://lab.local/mission/shadow-dom'); // ↓ Your code goes below ↓ });