QA PRACTICE•DOM

Locator Practice HubTopics / HTML & DOM basics

Lesson 1 / 20 · Beginner

HTML & DOM basics

Read the element tree before choosing a locator.

8 min

Not completed

Concept

DOM, HTML elementlerinin ağaç yapısındaki canlı temsilidir. Element adı, attribute’lar ve iç içe ilişkiler locator seçiminin ham maddesidir. `display:none`, `visibility:hidden`, `hidden`, `aria-hidden`, `opacity:0` ve ekran dışı bir element DOM’da bulunabilir ama aynı şekilde etkileşilebilir değildir.

Live demo

Try the locator

Scoped to lesson demo

Try the locator against the live demo.

Good

Önce Elements panelinde hedefin outerHTML’ini, görünürlük ve attribute’larını incele.

Avoid

Sadece ekrandaki koordinata veya uzun absolute XPath’e güvenme.

Why

Locator problemi çoğu zaman selector değil; yanlış DOM düğümü, görünürlük veya actionability problemidir.

Real-world trap

DOM’da bulunmak, elementin görünür ve tıklanabilir olduğu anlamına gelmez.

Framework comparison

Playwright

page.locator("[data-testid='visible-control']")

Selenium

driver.findElement(By.cssSelector("[data-testid='visible-control']"))

Cypress

cy.get("[data-testid='visible-control']")

Mini quiz

hidden attribute taşıyan element için hangisi doğrudur?
Next →