Playwright Selector Tester

locator() accepts CSS selectors, XPath, and Playwright's extended selectors. getByRole() uses ARIA roles to find elements, which is the most robust approach for accessibility testing since it matches how screen readers see the page. Playwright recommends using getByRole() first, then getByText() or getByTestId(), and falling back to CSS selectors only when needed.

data-testid (or data-test-id) are custom HTML attributes added specifically for testing. They don't affect styling or functionality and are stable across refactors. Playwright's getByTestId() defaults to the 'data-testid' attribute but you can configure it. They're ideal for elements that have no unique text or role.

Use `page.getByText('Submit')` for exact text matching. For partial matches, use `page.getByText('Submit', { exact: false })`. You can also use CSS like `page.locator('button:has-text("Submit")')` or the text= pseudo-selector `page.locator('text=Submit')`.

Good selectors are: (1) user-facing — they target what the user sees, (2) stable — they don't break on minor refactors, (3) unique — they match exactly one element. Avoid selectors based on position (nth-child), auto-generated class names, or implementation details like internal IDs that change between builds.

Yes — this tool uses your browser's DOMParser and querySelector to validate selectors against the HTML you paste. For production use, Playwright's codegen tool (`playwright codegen <url>`) records real interactions and generates selectors automatically. The VS Code Playwright extension also has a built-in selector picker.