data-testid best practices
Name test IDs, scope repeated elements, and use them in Playwright, Cypress, and Testing Library.
SAMELOGIC / GUIDESBetter tests.
One explicit name. The same target.
Better tests.
Clearer bug reports.
Practical guides to choosing locators, reproducing frontend bugs, and giving AI agents useful browser context. Find the answer you need, then put it to work.
Browse the guidesSTART HERE / TEST AUTOMATION
data-testid
best practices.
Give your test IDs a clear purpose. Naming conventions, scoped locators, and code examples for the frameworks your team uses.
Read the guide Playwright · Cypress · Testing LibraryFROM ELEMENT TO LOCATOR
THE ELEMENT
Place order
data-testid="checkout-submit"THE PLAYWRIGHT LOCATOR
page.getByTestId(
'checkout-submit'
)THE LIBRARY
Find your next read.
Start with the problem you’re working on.
Playwright & selectors Bug reproduction How to reproduce a frontend bug
Bring the steps, affected element, and expected result together in a report your teammate can investigate.
Playwright & selectors CSS, getByRole, or getByTestId?
Compare three locator strategies and the markup each one depends on.
Playwright & selectors Why Playwright locators break
Understand how changing DOM structure, accessible names, and test IDs can break a locator.
Playwright & selectors When the selector makes the test flaky
Investigate selector-related failures before choosing a replacement locator.
Playwright & selectors getByRole vs. CSS selectors
Change a sample UI, compare locator matches, and learn when roles or CSS attributes fit.
AI context Browser context for AI agents
Build a clearer agent handoff with page state, steps, and evidence. Includes a copyable template.
AI context Element context through MCP
Connect your coding assistant to saved recordings and elements, choose the right MCP tool, and review the evidence.
AI context What a screenshot leaves out
Try identical-looking buttons with different states. See what visual, element, and recording evidence each explain.
FROM READING TO DOINGPut it to work.
Put it to work.
On your own page.
Inspect an element, review its selectors, or record the browser steps behind a bug with the Samelogic extension.
Free extension for desktop Chrome. Try it before signing up.