QA PRACTICE•REPEATED

Locator Practice HubTopics / Repeated components

Lesson 11 / 20 · Intermediate

Repeated components

Scope cards, rows, and nested controls precisely.

12 min

Not completed

Concept

Tekrarlayan kart, satır veya listede önce container’ı bul, sonra onun içinde kontrolü ara. `filter({ hasText, has })` ilişkiyi korur; global aynı isimli butonun nth’ine güvenmez.

Prerequisites: Role and accessible name

Live demo

Try the locator

Scoped to lesson demo
  • QA Starter

  • Automation Pro

Try the locator against the live demo.

Good

Product card → Add to cart şeklinde scope-then-act yap.

Avoid

Global `getByRole('button', {name:'Add to cart'}).nth(1)` kullanma.

Why

Kart sırası değişse bile ürün adı ile aksiyon ilişkisi korunur.

Real-world trap

Sadece kart metninin eşleşmesi, kart içindeki butonun da doğru olduğu anlamına gelmez; nested kontrolü ayrıca seç.

Framework comparison

Playwright

page.locator("[data-testid='repeated-demo'] li:nth-of-type(2) button")

Selenium

driver.findElement(By.cssSelector("[data-testid='repeated-demo'] li:nth-of-type(2) button"))

Cypress

cy.get("[data-testid='repeated-demo'] li:nth-of-type(2) button")

Mini quiz

Tekrarlayan kartlarda ilk adım nedir?