All challenges · Core Interactions
Challenge 11 of 29 · Building fluency · Core Interactions
Reveal Hidden Content on Hover
Some content appears only when the pointer is over an element. Hover the right image, found by its alternative text, so the hidden content shows.
Skills you will practise
- hover
- image alt text
- hidden content
The concept
Tooltips, image captions and flyout menus often appear only while the pointer is over an element. Playwright's hover() moves the mouse over the centre of the element after checking it is visible and stable, which triggers the same mouseover and CSS :hover behaviour a user would.
Images are best found by their alternative text with getByAltText(). Alt text describes the image for screen reader users, so it tends to be meaningful (“Profile photo of Ada”) rather than an implementation detail.
After hovering, assert that the hidden content is now visible. Do not assert it exists in the DOM, because hidden content is often already present and merely invisible.
The fragile version
await page.locator('img').nth(1).hover();
await expect(page.locator('.caption')).toBeAttached();Why it breaks: nth(1) breaks when images are reordered, and toBeAttached() can pass even when the caption is still hidden, because it only checks the element is in the DOM.
A robust Playwright version
await page.getByAltText('Profile photo of Ada').hover();
await expect(page.getByText('Ada Lovelace, Engineer')).toBeVisible();It picks the image by its meaning and checks the content a user would actually see.
This is a general example on a made-up page, not the challenge’s reference solution.
Common mistakes
- Asserting presence (
toBeAttached) instead of visibility. - Moving to another element between hover and assertion, which hides the content again.
- Using
getByRole('img')without a name when several images exist.
FAQ
How do I hover in Playwright?
await locator.hover(). It waits for the element to be visible and stable first.
What is getByAltText?
A locator that matches images and other elements by their alt attribute.
Why does my hover test pass locally but fail in CI?
Often the assertion checks DOM presence, not visibility, or the viewport hides the element. Assert toBeVisible().
Try it
Practise this in Challenge 11. You write the code in the browser editor with no setup. It runs in a fresh Chromium, a hidden validator checks what actually happened, and you get pass or fail, the logs and a video of the run. Create a free account to open the practice page and its hints. The reference solution and the hidden validator are shown only after you pass. We never publish solutions here.