QA PRACTICE•DEVTOOLS

Locator Practice HubTopics / DevTools workflow

Lesson 16 / 20 · Beginner

DevTools workflow

Inspect DOM, accessibility, and locator candidates.

10 min

Not completed

Concept

DevTools’ta $0 seçili elementi, $$() CSS listesini, $x() XPath sonuçlarını gösterir. Copy selector/XPath çoğu zaman brittle çıkar. Playwright Inspector ve Cypress Selector Playground aday locator’ı gözlemlemek için kullanılabilir.

Prerequisites: HTML & DOM basics

Live demo

Try the locator

Scoped to lesson demo

Try the locator against the live demo.

Good

DevTools aday üretmek için kullan, sonra semantik ve stabiliteyle sadeleştir.

Avoid

Copy full XPath çıktısını doğrudan commit etme.

Why

Araç çıktısı başlangıçtır; final selector tasarım kararıdır.

Real-world trap

$x() sonucu browser console’a özgüdür; test kodunda doğrudan kullanılmaz.

Framework comparison

Playwright

page.locator("[data-testid='devtools-demo']")

Selenium

driver.findElement(By.cssSelector("[data-testid='devtools-demo']"))

Cypress

cy.get("[data-testid='devtools-demo']")

Mini quiz

$0 neyi temsil eder?
← PreviousNext →