Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.

Use a text assertion to make the test fail when required wording is missing, then use a screenshot assertion if you also need to catch visual changes. In Playwright Test, toContainText() checks for a phrase and toHaveText() checks the expected text; toHaveScreenshot() compares the rendered page or component with a reviewed baseline. These checks answer different questions, so a pixel diff should not be your only test for required copy.

Write a text assertion before the screenshot assertion

Here is a complete Playwright Test example. It fails if the “Account overview” heading is not visible or the main content does not contain “Your balance”; if those checks pass, it also compares the page with its screenshot baseline.

import { test, expect } from '@playwright/test';

test('page contains the expected copy and matches its visual baseline', async ({ page }) => {
  await page.goto('/page-under-test');

  await expect(page.getByRole('heading', { name: 'Account overview' })).toBeVisible();
  await expect(page.locator('main')).toContainText('Your balance');
  await expect(page).toHaveScreenshot();
});

Replace the route and sample copy with the page and wording your test needs. The assertions use Playwright Test’s asynchronous, web-first API: they retry the check while the page settles and fail if it does not pass before the configured assertion timeout. Playwright’s assertions documentation lists five seconds as the default timeout; check your project configuration if it overrides that value. See Playwright’s assertion guidance.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The sequence is intentional. If the copy is missing, the report identifies a failed content assertion. If the copy is present but the layout, color, spacing, or other pixels differ from the approved image, the screenshot assertion can identify the visual change. A screenshot-only failure is less specific: text might be missing, but an unrelated rendering difference can also produce a diff.

#1 Best Overall
Sale
Philips 24 Inch Computer Monitor FHD 100Hz VA VESA Flicker-Free, 241V8LB
  • CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
  • INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
  • THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
  • WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
  • A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents

Choose the right text assertion and locator

Require an exact text value

Use toHaveText() when the locator’s text must match the expected value. For example:

await expect(page.getByRole('heading', { name: 'Account overview' }))
  .toHaveText('Account overview');

This is useful when wording, punctuation, or the full contents of a small element are part of the acceptance condition. If the element contains additional text, an exact assertion can correctly fail even though the desired phrase appears within it; choose the assertion to match the actual requirement.

Require a phrase within longer content

Use toContainText() when the expected phrase may appear alongside other words or nested elements:

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #2
Philips 22 Inch Computer Monitor FHD 100Hz VA VESA Flicker-Free, 221V8LB
  • CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
  • 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
  • SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
  • INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
  • THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
await expect(page.locator('main')).toContainText('Your balance');

Nested elements contribute to the text Playwright checks. The locator assertion documentation describes both exact and containing text assertions, including regular-expression matching: Playwright LocatorAssertions.

Use a regular expression only for controlled variation

If a value changes in a predictable way—for example, a status includes a variable identifier—a regular expression can describe the acceptable pattern:

await expect(page.locator('[data-testid="status"]'))
  .toHaveText(/^Order #[A-Z0-9]+ is ready$/);

Keep the expression narrow enough to reject wording that is genuinely wrong. A broad pattern can make the test pass while missing a meaningful copy change.

Rank #3
Sale
Dell 24 Monitor - SE2426H - 23.8-inch FHD (1920x1080) 144Hz 1ms Display, in-Plane Switching (IPS) Technology, AMD FreeSync™, TÜV 3-Star 2X HDMI, Tilt
  • Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
  • Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
  • Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
  • In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
  • Ultra-thin bezels: Maximize your viewing experience with thin bezels.

Scope the assertion to the intended region

Prefer a semantic locator, such as a heading selected by role and accessible name, or a stable locator for the specific content region. A page-wide search can match a duplicate phrase in a hidden menu, footer, or unrelated component and therefore pass when the intended section is wrong. Choose the smallest locator that represents the requirement, and assert visibility separately when being visible to a user matters.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Make the screenshot check useful, not noisy

toHaveScreenshot() is a Playwright Test screenshot assertion, not a general-purpose page method. It waits until two consecutive screenshots produce the same result, then compares the captured output with the expected image. It can be used for a whole page or for a locator when only one component needs visual checking. Playwright’s PageAssertions documentation notes that screenshot assertions work with the Playwright Test runner.

Review and keep the first baseline

The first visual-comparison run creates a reference image. Inspect that image to confirm it shows the intended state before treating it as the expected result. Once reviewed, keep the baseline with the test code so later runs compare against the same approved appearance. A baseline is not proof that the page is correct: the text assertion checks the content requirement, and a person must confirm the initial image is an acceptable design.

Rank #4
Samsung 27" Essential S3 (S36GD) Series FHD 1800R Curved Computer Monitor
  • CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
  • SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
  • MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
  • KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
  • INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient

When the page changes intentionally, review the new screenshot before accepting an updated baseline. Otherwise, a baseline update can simply bless an unintended change. Playwright explains its baseline and comparison workflow in Visual comparisons.

Keep comparison environments consistent

Screenshot output can vary with the operating system, browser version, browser settings, hardware, power source, and headless mode. Generate and compare baselines in a consistent environment to reduce unrelated differences. A baseline made on one host may not be a reliable pixel-for-pixel reference on a substantially different host.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

If the page has animation or other volatile regions, screenshot assertion options or an applied stylesheet can help control noise. Use those controls carefully: do not hide or mask the text, component, or visual state the test is meant to verify. The Playwright screenshot assertion options document the available controls.

Best Value
Sale
Sceptre New 22-Inch Gaming Monitor, FHD 1080p, Up to 144Hz, HDMI, DisplayPort, Built-in Speakers, Machine Black (E225W-FW144 Series, 2026)
  • 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
  • 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
  • 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Recommended workflow

  1. Navigate and establish state. Open the route and perform any actions needed to reach the page state being tested, such as signing in through your test setup or opening a panel.
  2. Assert the required copy on a focused locator. Use toHaveText() for an exact value or toContainText() for a required phrase within longer content. Use await so Playwright can retry while asynchronous content appears.
  3. Add visibility when it is part of the requirement. Text existing in the DOM is not the same as the intended user-visible element being visible; use a visibility assertion where that distinction matters.
  4. Add the screenshot assertion only if appearance matters too. Use a page screenshot for whole-page changes or a locator screenshot for a component-level comparison.
  5. Inspect the baseline before relying on it. Review the first generated image, then keep an approved baseline and compare against it in a stable browser and host environment.
  6. Investigate failures in order. First determine whether the text locator assertion failed. If it passed and the visual assertion failed, inspect the screenshot diff and environment for visual changes or rendering variation.

Common failures and how to fix them

  • The text assertion times out although the copy appears later. The page may be loading asynchronously or the assertion timeout may be too short for the application’s behavior. Use a web-first locator assertion, verify the page state and target locator, then adjust the configured timeout only if the real load behavior justifies it.
  • The phrase is present but the assertion fails. Check whether the test expects exact text when the requirement is only a substring, whether punctuation or whitespace differs, and whether the locator points to the expected element. Use toContainText() for a phrase within longer text; retain exact matching when the full text must be fixed.
  • The test passes even though the intended section is wrong. A broad locator may match a duplicate elsewhere. Scope the check to the relevant region or select the element by role and accessible name.
  • The screenshot assertion fails after the text assertion passes. The copy may be correct while layout or styling changed; inspect the diff. Also compare browser and host settings with those used to create the baseline, since rendering can vary by environment.
  • The first screenshot has no trusted reference yet. Review the generated image and confirm the application is in the expected state before accepting it as the baseline. Do not treat an automatically generated image as an approved design without inspection.
  • Only a screenshot assertion is available outside the test runner. Playwright’s documentation states that screenshot assertions work with its Test runner. Keep the text and screenshot checks in Playwright Test rather than assuming toHaveScreenshot() is a standalone browser assertion.
  • Animations or changing content cause intermittent diffs. Control only the visual volatility outside the behavior under test using documented screenshot options or a stylesheet. If the changing region contains the required wording or is itself being tested, masking it defeats the purpose of the check.

Or skip the browser setup

If the goal is to capture an image of a URL rather than make an automated test fail on missing text, ScreenshotNeo offers a screenshot API. It does not replace the Playwright text assertion or a reviewed visual baseline; use it to request a capture when you do not need to set up a browser for that job. The request below returns an image response; see the ScreenshotNeo documentation for API details.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

ScreenshotNeo accepts cookie or consent banners like a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and each response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents using Claude, Cursor, or another MCP client.

The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo’s free plan to try it without a card.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

FAQ

Can I use this method with a different test framework?

This example is specifically for Playwright Test. The assertion names and screenshot-baseline workflow described here are Playwright APIs; another framework has its own syntax and behavior.

Can a text assertion prove the page looks right?

No. It establishes the text condition expressed by the locator assertion. Use a screenshot baseline as a separate visual check when appearance is also part of the requirement.

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.