3 / 11
Playwright

Add a title to My List from its hover card

Medium50 pts~2 min
  • Hover
  • Mouse actions
  • Scoped locators
  • State verification
Practice app · StreamFlix

A dark-themed streaming service: sign-in, a “Who's watching?” picker with a PIN-locked Kids profile, paged browse carousels with hover cards, title details with seasons, debounced search, My List, a video player with shortcuts and a Skip intro button, a trailer iframe and plan selection.

Test URL
/lab/playwright-streamflix-hover-add-to-list

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

Objective

Hover the Glass Harbor card in New releases to reveal its hover card, add the title to My List, and verify it is saved on the My List page.

Your task

  1. 1Open TEST_URL. You are signed in as Maya on the browse page.
  2. 2Find the Glass Harbor card in the New releases row: #row-new [data-testid="title-card"][data-title-id="glass-harbor"].
  3. 3Move the mouse over the card and wait for its hover card ([data-testid="hover-card"]).
  4. 4Click “+ My List” (.hover-mylist) and assert the button now reads “✓ In My List”.
  5. 5Click My List in the header (#nav-mylist).
  6. 6Assert exactly one [data-testid="mylist-item"] is listed, it is Glass Harbor, and #mylist-count shows 1.

Acceptance criteria

  • The hover card's button changed to “✓ In My List”.
  • The My List page lists exactly one title: Glass Harbor.
  • The header badge shows 1.
  • The test makes at least two assertions.

Fixtures

Email
viewer@streamflix.test
Password
Stream@2026
Profiles
Maya · Leo · Kids (PIN locked)
Kids PIN
2580
Plans
Basic $7.99 · Standard $15.49 (current) · Premium $22.99 per month
Featured series
Northbound Signal (3 seasons: 6, 8 and 4 episodes)

Playwright · Playwright Challenges · StreamFlix