Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsUse Playwright’s locator-based hover() action to put a control into its hover state, then assert its rendering with toHaveScreenshot(). Choose a page screenshot when surrounding layout matters, or a locator screenshot when the element alone is the visual contract.
Test a hover state with Playwright Test
This TypeScript example hovers a navigation link and compares the page against a screenshot baseline:
As an Amazon Associate I earn from qualifying purchases.
import { test, expect } from '@playwright/test';
test('navigation link has the expected hover appearance', async ({ page }) => {
await page.goto('/');
const link = page.getByRole('link', { name: 'Products' });
await link.hover();
await expect(page).toHaveScreenshot('products-link-hover.png');
});Replace the URL, role, and accessible name with those for your page. Prefer a role and accessible name when they identify the control clearly; if your project defines a stable test ID as its testing contract, use that instead. Playwright recommends user-facing attributes and explicit contracts over brittle CSS or XPath chains where practical. Playwright locator guidance
Choose page or locator screenshot assertions
| Assertion | Best when | Trade-off |
|---|---|---|
await expect(page).toHaveScreenshot() |
The hover may change surrounding layout, overlays, or other parts of the viewport. | Captures a wider visual contract, so unrelated page rendering can affect the comparison. |
await expect(locator).toHaveScreenshot() |
The target element alone is the intended visual contract. | Focused on that element, so it will not catch visual changes elsewhere on the page. |
For example, after hovering the link, a focused assertion is:
#1 Best Overall
const link = page.getByRole('link', { name: 'Products' });
await link.hover();
await expect(link).toHaveScreenshot();Playwright documents screenshot assertions for both pages and locators. Page screenshot assertions are part of the Playwright Test runner. Playwright visual comparisons
Build and maintain a stable hover baseline
- Select the intended control. Use a role and accessible name or a project-owned test ID when available; avoid selectors tied to incidental DOM nesting.
- Trigger the interaction. Call
locator.hover()and await it before taking the screenshot. It performs actionability checks unlessforceis enabled. The olderpage.hover()API is discouraged in favor of locator-based hover. Locator hover API - Assert the rendering. Use a page or locator
toHaveScreenshot()assertion, depending on the scope of the visual contract. For page screenshots, Playwright waits for two consecutive screenshots to match before comparing with the expectation. Screenshot assertion behavior - Generate and review the reference. The first visual-comparison run creates the expected screenshot; subsequent runs compare against it. Inspect the generated baseline to confirm it represents the intended hover state before committing it. Baseline workflow
- Keep the environment consistent. Rendering can differ with operating system, browser version, settings, hardware, power source, and headless mode. Generate and check baselines in a consistent setup, ideally the same environment. Screenshot comparison guidance
- Choose animation handling intentionally. Screenshot assertions default to
animations: 'disabled'. Playwright stops CSS animations, transitions, and Web Animations for capture: finite animations are fast-forwarded to completion, while infinite animations are canceled to their initial state and played again after capture. Setanimations: 'allow'when the animation itself is what you need to test. Screenshot assertion options
Troubleshoot hover screenshot failures
- The screenshot shows the normal state: verify that the locator targets the control whose appearance should change, and await
hover()before the assertion. Hover performs actionability checks by default. - The locator stops matching after markup changes: replace brittle nesting-based CSS or XPath with a suitable role/name locator or the project’s explicit test ID contract.
- The screenshot differs across machines: align the browser, operating system, headless mode, and other environment settings with those used to create the baseline.
- The image captures an unintended transition frame: decide whether the test should suppress animation with the default
animations: 'disabled'or capture it usinganimations: 'allow'. - The test uses
page.hover(): migrate tolocator.hover(), which is the documented preferred approach.
Or skip the browser setup
If you need a screenshot of a URL rather than an automated hover interaction, ScreenshotNeo provides a website screenshot API and MCP server. A single GET request can return a PNG, JPEG, WebP, or PDF. For example, this cURL request saves a WebP screenshot; see the ScreenshotNeo API documentation for options and setup:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp- Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; responses indicate the page verdict and billing status in headers.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for AI agents and MCP clients. - The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
Does a screenshot assertion trigger hover by itself?
No. Hover the locator first with await locator.hover(), then call the screenshot assertion.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCan Playwright test the hover animation itself?
Yes. Screenshot assertions disable animations by default; set animations: 'allow' when the animated transition is part of the expected result.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
