QA PRACTICE•PORTALS

Locator Practice HubTopics / Portals and overlays

Lesson 14 / 20 · Advanced

Portals and overlays

Find dialogs rendered outside the local container.

10 min

Not completed

Concept

Modal, dropdown ve tooltip portal ile body’nin sonunda render edilebilir. Tetikleyici container’ının altında aramak yerine görünür overlay role/name’i global scope’ta bul; cookie banner ve overlay tıklamayı engelleyebilir.

Prerequisites: Scope and repeated components

Live demo

Try the locator

Scoped to lesson demo

Filter results

Try the locator against the live demo.

Good

Dialog role ve accessible name ile portalı bul.

Avoid

Dropdown’un tetikleyici div’inin çocuğu olduğunu varsayma.

Why

React portal görsel ilişkiyi korurken DOM ilişkisini değiştirir.

Real-world trap

Görsel olarak üstte görünen overlay, alttaki butona receives-events vermeyebilir.

Framework comparison

Playwright

page.locator("[role='dialog'][data-testid='portal-dialog']")

Selenium

driver.findElement(By.cssSelector("[role='dialog'][data-testid='portal-dialog']"))

Cypress

cy.get("[role='dialog'][data-testid='portal-dialog']")

Mini quiz

Portal dialog nerede olabilir?
← PreviousNext →