How to fix Playwright selectors that fail with Shadow DOM components?

App code using Shadow DOM can hide internals from brittle CSS selectors.

Prefer user-facing locators (getByRole, getByLabel, getByText) that pierce shadow boundaries when possible.

await page.getByRole('button', { name: 'Submit order' }).click();

Common mistake: relying on deep implementation selectors that break after component updates.