QA PRACTICE•ROLE

Locator Practice HubTopics / Role and accessible name

Lesson 2 / 20 · Beginner

Role and accessible name

Prefer user-facing locators that survive visual changes.

10 min

Not completed

Concept

Accessible name; aria-label, label ilişkisi, element içeriği ve bazı durumlarda title üzerinden hesaplanır. Playwright’ta role + name, kullanıcı ve assistive technology perspektifini doğrudan test eder.

Prerequisites: HTML & DOM basics

Live demo

Try the locator

Scoped to lesson demo

Try the locator against the live demo.

Good

page.getByRole('button', { name: 'Save' }) kullan.

Avoid

Renk veya CSS class’ı butonun kimliği olarak kullanma.

Why

Semantik HTML hem erişilebilirliği hem locator stabilitesini güçlendirir.

Real-world trap

`aria-label` varsa görünür metin her zaman accessible name’i belirlemez.

Framework comparison

Playwright

page.locator("[aria-label='Save profile']")

Selenium

driver.findElement(By.cssSelector("[aria-label='Save profile']"))

Cypress

cy.get("[aria-label='Save profile']")

Mini quiz

Accessible name için ilk kontrol hangisidir?
← PreviousNext →