# Guides for Playwright Locators, Selectors, Bug Reproduction, and Element Context

Read practical guides on Playwright locators, selector strategy, bug reproduction, and element context for QA and frontend teams.

## Playwright Locators Break 
This guide explains where locator failures usually come from and how live element capture helps teams pick safer Playwright targets. [Read more](/content/guides/playwright-locators-break-and-why/index.html)

## CSS Selector vs GetByRole vs GetByTestId 
This guide helps teams choose the locator that matches their markup discipline, testing standards, and debugging workflow. [Read more](/content/guides/css-selector-vs-getbyrole-vs-getbytestid/index.html)

## Stop Flaky Playwright Tests 
This guide shows how unstable selectors create recurring failures and how teams can capture the live element before choosing a better locator. [Read more](/content/guides/stop-flaky-playwright-tests-from-unstable-selectors/index.html)

## Bug Reproduction 
This guide explains how QA and frontend teams can move from vague bug reports to fix-ready handoff by preserving the exact element, screenshot, and context that failed. [Read more](/content/guides/how-to-reproduce-a-frontend-bug/index.html)

## Data-testid Best Practices 
This guide explains when test IDs help, how they fail, and how teams can evaluate them against CSS selectors and role-based locators using real element capture. [Read more](/content/guides/data-testid-best-practices/index.html)

## GetByRole vs CSS Selector 
This guide helps teams choose between semantic and structural locators using the exact UI context in front of them instead of a blanket rule. [Read more](/content/guides/playwright-getbyrole-vs-css-selector/index.html)

## Browser Agents 
This page keeps agent-context work in a supporting role and ties it back to the core wedge: selectors, QA handoff, and precise UI artifacts. [Read more](/content/guides/browser-agent-context-for-web-apps/index.html)

## Element Context via MCP 
This page frames MCP around concrete UI artifact data instead of abstract protocol hype, then points back to the selector and bug-reproduction wedge. [Read more](/content/guides/element-context-via-mcp/index.html)

## AI Agents Need Element Context 
This page keeps the argument concrete: agents need selectors, DOM context, and element-level evidence just like human engineers do. [Read more](/content/guides/why-ai-agents-need-element-context-not-just-screenshots/index.html)