11 / 18
Selenium WebDriver 4

Use CSS combinators (child and descendant)

Medium70 pts~25 min
  • CSS combinators
  • Scoping
Practice app · Practice Catalog

A product catalog with ids, names, classes, links, data-testids and duplicate buttons for locator practice.

Test URL
/lab/selenium-use-css-combinators-child-and-descendant

Your starter code already declares TEST_URL — never hardcode a host.

Objective

Scope selectors with the descendant (space) and child (>) combinators.

Your task

  1. 1Open TEST_URL.
  2. 2Use the descendant selector .product-card .add-to-cart to find all buttons and assert there are 3.
  3. 3Use the child selector form[role='search'] > input to type “mug”.
  4. 4Click form[role='search'] > button and assert #search-summary contains “mug”.

Acceptance criteria

  • A child combinator (>) is used in a CSS selector
  • #search-summary mentions “mug”
  • At least 2 assertions pass

Selenium WebDriver 4 · Selenium · Locators & the DOM