QA PRACTICE•CSS

Locator Practice HubTopics / CSS selectors

Lesson 5 / 20 · Beginner

CSS selectors

Use attribute, child, sibling, and state selectors.

12 min

Not completed

Concept

CSS attribute operatörleri `^=` starts-with, `$=` ends-with, `*=` substring, `~=` whitespace-separated word ve `|=` prefix/locale eşleşmesidir. `:nth-child` tüm kardeşleri sayar; `:nth-of-type` sadece aynı tag türünü sayar. `:has`, `:is`, `:not`, `:checked` ve `:disabled` güçlü ama hedef tarayıcı/runner desteğini kontrol et.

Prerequisites: ID, name, class

Live demo

Try the locator

Scoped to lesson demo

Try the locator against the live demo.

Good

Attribute ve container ilişkilerini birleştiren okunabilir CSS kullan.

Avoid

Sadece sıralamaya dayalı `:nth-child()` ile kimlik kurma.

Why

CSS kısa ve hızlıdır; doğru contract ile scoped ve bakımı kolay olabilir.

Real-world trap

`:contains()` browser CSS selector değildir.

Framework comparison

Playwright

page.locator("[data-testid='css-demo'] input[name='email']")

Selenium

driver.findElement(By.cssSelector("[data-testid='css-demo'] input[name='email']"))

Cypress

cy.get("[data-testid='css-demo'] input[name='email']")

Mini quiz

`[id^='user-']` neyi ifade eder?
← PreviousNext →