{"id":59583,"date":"2025-01-31T16:29:23","date_gmt":"2025-01-31T21:29:23","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=59583"},"modified":"2025-09-08T14:53:56","modified_gmt":"2025-09-08T18:53:56","slug":"leveraging-applitools-for-seamless-visual-testing-in-playwright","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/","title":{"rendered":"Leveraging Applitools for Seamless Visual Testing in Playwright"},"content":{"rendered":"\n<p>As applications become more complex and UI consistency becomes critical, ensuring that the user interface appears as expected across multiple environments is key. Applitools Eyes, when integrated with the Playwright SDK, provides a powerful, efficient, and streamlined approach to visual testing in your Playwright tests. The combination of Playwright, a popular end-to-end testing framework, and Applitools Eyes, a visual AI-powered testing tool, makes visual validation easier, faster, and more scalable.<\/p>\n\n\n\n<p><strong>Applitools Eyes<\/strong> is a <strong>visual AI-powered testing tool<\/strong> that helps address these UI consistency challenges. It uses advanced<strong> AI-driven image comparison<\/strong> to detect visual differences. Unlike traditional visual testing tools that perform pixel-by-pixel image comparisons, Applitools Eyes uses AI algorithms to determine if the visual differences are actual bugs.<\/p>\n\n\n\n<p><strong>Applitools Playwright SDK <\/strong>introduces several improvements designed to streamline the process of setting up and running visual tests, making the experience more efficient and user-friendly.<\/p>\n\n\n\n<p><strong>In this blog,<\/strong> we will discuss when it is appropriate to use visual testing with Playwright and which cases will be suitable for using Applitools.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-overview-of-visual-testing\"><strong>Overview of Visual Testing<\/strong><\/h2>\n\n\n\n<p>Visual testing is a technique performed to ensure the visual appearance of a given website or application matches the provided design and layout . This includes the comparison of the actual UI against a standard image or a reference UI image. This type of testing primarily focuses on detecting any visual anomalies, which include alignment issues , font problems, color discrepancies , images, or structural shifts that can disrupt the user experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How Visual Testing Differs from Functional Testing<\/strong><\/h3>\n\n\n\n<p>Visual testing and functional testing are both crucial if the goal is to deliver a high-quality application; visual testing checks the visual appeal of the application, while functional testing verifies how the application functions.<\/p>\n\n\n\n<p>Let&#8217;s see some major differences between visual and functional testing.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Aspect<\/strong><\/td><td><strong>Visual Testing<\/strong><\/td><td><strong>Functional Testing<\/strong><\/td><\/tr><tr><td><strong>Purpose<\/strong><\/td><td>Ensures the layout and design of the UI look as expected.<\/td><td>Verifies that the application&#8217;s functions work as intended.<\/td><\/tr><tr><td><strong>Scope<\/strong><\/td><td>Focuses on UI elements&#8217; appearance (position, dimensions, colors, fonts, etc.).<\/td><td>Focuses on the application&#8217;s behavior, verifying logic, workflows, and system responses.<\/td><\/tr><tr><td><strong>Approach<\/strong><\/td><td>Uses image comparison tools to detect visual discrepancies.<\/td><td>Uses test scripts or user simulations to validate functionality.<\/td><\/tr><tr><td><strong>Techniques<\/strong><\/td><td>Relies on image or screenshot comparison against baseline images.<\/td><td>Involves input\/output verification, user interaction simulation, and data validation.<\/td><\/tr><tr><td><strong>Tools<\/strong><\/td><td>Tools like Playwright, Cypress, and other functional testing frameworks.<\/td><td>Tools like Playwright,Cypress, and other functional testing frameworks.<\/td><\/tr><tr><td><strong>Issues Detected<\/strong><\/td><td>Identifies layout errors, pixel misalignments, broken images, wrong colours, or responsive design bugs.<\/td><td>Identifies logical errors, broken workflows, malfunctioning features, or incorrect data processing.<\/td><\/tr><tr><td><strong>Use Case<\/strong><\/td><td>Suitable for detecting unintended UI changes during development.<\/td><td>Suitable for validating features and ensuring correct application logic.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Before delving into how we can perform visual testing using Playwright and Applitools, let&#8217;s review some of the new improvements that Applitools has introduced .<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What\u2019s New In Applitools Playwright SDK?<\/strong><\/h2>\n\n\n\n<p>The Applitools Playwright SDK is a library that integrates Applitools\u2019 visual testing capabilities with the Playwright automation framework.<\/p>\n\n\n\n<p>Let\u2019s explore the improvements done by <strong>Applitools <\/strong>to streamline the process of setting up and running visual tests, making the experience more efficient and user-friendly.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s a detailed breakdown of what\u2019s new in the updated SDK:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Test Fixtures:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Test fixtures Centralize and reuse setup code across multiple tests, making the setup for visual tests more consistent and reducing redundant configuration.<\/li>\n\n\n\n<li>This feature is particularly valuable when running tests on multiple pages or scenarios, as it simplifies the initialization of Applitools Eyes in each test.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>CLI Onboarding:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Command-Line Interface (CLI) simplifies the initial setup process by automating configuration steps, helping users quickly integrate Applitools Eyes with Playwright.&nbsp;<\/li>\n\n\n\n<li>This is especially helpful for new users, reducing the complexity of the setup and enabling faster onboarding into visual test creation.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Config Object Setup:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The configuration object setup automates the insertion of Applitools Eyes settings into the Playwright configuration file (e.g., playwright.config.js or playwright.config.ts).&nbsp;<\/li>\n\n\n\n<li>This feature eliminates manual setup, reducing the risk of errors, ensuring accurate configuration from the outset, and saving developers valuable time.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Custom HTML Reporter:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The custom HTML reporter enhances Playwright&#8217;s default test report by integrating visual test results from Applitools Eyes.&nbsp;<\/li>\n\n\n\n<li>This allows developers to view a direct comparison between the baseline image and the current test screenshot, helping identify visual regressions more effectively.&nbsp;<\/li>\n\n\n\n<li>By adding visual results to the standard Playwright report, it simplifies the review process, offering a comprehensive overview of the test outcomes.<\/li>\n<\/ul>\n\n\n\n<p><strong>Befor<\/strong>e we deep dive into how Applitools helps in visual testing, let&#8217;s first see how we can perform visual testing using Playwright.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Visual Testing Using Playwright<\/strong><\/h2>\n\n\n\n<p>Playwright comes equipped with tools to make visual testing effortless, allowing developers to take and compare screenshots of web pages or specific web page elements.&nbsp;<\/p>\n\n\n\n<p>Here&#8217;s how visual testing works in Playwright:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>First Run<\/strong>: Playwright captures and saves a screenshot of the page or specific UI elements. This is known as the <em>base image<\/em>.<\/li>\n\n\n\n<li><strong>Subsequent Runs<\/strong>: In the next run, Playwright takes a new screenshot and compares it against the base image.\n<ul class=\"wp-block-list\">\n<li>If there are no differences, the test passes.<\/li>\n\n\n\n<li>If differences exist, the test fails, flagging the areas where changes occurred.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Prerequisites<\/strong><\/p>\n\n\n\n<p>Ensure the following tools are installed:<\/p>\n\n\n\n<p><strong>Node.js<\/strong>: Download and install from <a href=\"https:\/\/nodejs.org\/\">Node.js<\/a>.<\/p>\n\n\n\n<p><strong>Visual Studio Code (Optional)<\/strong>: Recommended IDE for coding.<\/p>\n\n\n\n<p><strong>Install Playwright:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npm i @playwright\/test<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Write the Simple Visual Regression Test Using Playwright <\/strong><strong><br><\/strong>Create a new JavaScript file in your test folder, e.g., demo.spec.js.<\/p>\n\n\n\n<p>Use the <strong>page.screenshot()<\/strong> method to capture the screenshot and the expect.toMatchSnapshot() assertion from the @playwright\/test module to compare images.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">const { test, expect } = require('@playwright\/test'); \ntest('Visual Regression Test Example', async ({ page }) =&gt; { \n   \/\/ Navigate to the website \n   await page.goto('https:\/\/playwright.dev'); \n   \/\/ Capture a screenshot of the page \n   const screenshot = await page.screenshot(); \n   expect(screenshot).toMatchSnapshot(); \n}); <\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>When we execute the above code for the first time, the test case fails with the below error, and Playwright captures and saves a screenshot of the page or specific UI elements. This is known as the base image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large browser-frame-dark\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"401\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1024x401.png\" alt=\"\" class=\"wp-image-59606\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1024x401.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-300x118.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-768x301.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1536x602.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>When we execute the same test case again, it will pass.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large browser-frame-dark\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"356\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1-1024x356.png\" alt=\"\" class=\"wp-image-59607\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1-1024x356.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1-300x104.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1-768x267.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1-1536x534.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Visual Regression Test with maxDiffPixels option&nbsp;<\/strong><\/h3>\n\n\n\n<p>There might be the case when there are some minor differences in the images and the test case starts failing; to handle this situation we have an option, the \u2018maxDiffPixels option,\u2019 that we can pass. It allows you to specify the maximum number of pixels that can differ between two images for the comparison to still be considered successful.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">const { test, expect } = require('@playwright\/test');\ntest('Visual Regression Test Example', async ({ page }) =&gt; {\n  \/\/ Navigate to the website\n  await page.goto('https:\/\/playwright.dev');\n  \/\/ Capture a screenshot of the page\n  const screenshot = await page.screenshot();\n  expect(screenshot).toMatchSnapshot({ maxDiffPixels: 100 });\n}); <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\"><strong>const<\/strong> { test, expect } = require('@playwright\/test');\ntest('Visual Regression Test Example', <strong>async<\/strong> ({ page }) =&gt; {\n&nbsp; \/\/ Navigate to the website\n&nbsp; <strong>await<\/strong> page.goto('https:\/\/playwright.dev');\n&nbsp; \/\/ Capture a screenshot of the page\n&nbsp; <strong>const<\/strong> screenshot = <strong>await<\/strong> page.screenshot();\n&nbsp; expect(screenshot).toMatchSnapshot({ threshold:0.5} );\n});&nbsp;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Visual Regression Test with Threshold option<\/strong><\/h3>\n\n\n\n<p>Passing \u2018threshold\u2019 as an option is another option to avoid failing the test case. This is particularly useful for handling slight differences that occur due to rendering variations.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\"><strong>const<\/strong> { test, expect } = require('@playwright\/test');\ntest('Visual Regression Test Example', <strong>async<\/strong> ({ page }) =&gt; {\n&nbsp; \/\/ Navigate to the website\n&nbsp; <strong>await<\/strong> page.goto('https:\/\/playwright.dev');\n&nbsp; \/\/ Capture a screenshot of the page\n&nbsp; <strong>const<\/strong> screenshot = <strong>await<\/strong> page.screenshot();\n&nbsp; expect(screenshot).toMatchSnapshot({ threshold:0.5} );\n});&nbsp;<\/code><\/pre>\n\n\n\n<p>So far we have seen how we can automate the visual UI using Playwright. In the next section you will see how we can use Applitools Eyes and Playwright SDK together to automate visual testing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-visual-testing-using-applitools-eyes-and-playwright-sdk\"><strong>Visual Testing using Applitools Eyes and Playwright SDK<\/strong><\/h2>\n\n\n\n<p>Visual testing is a crucial aspect of modern software quality assurance. It ensures that a web application&#8217;s UI renders correctly across different devices, screen sizes, and browsers. Tools like Applitools Eyes and frameworks like Playwright SDK simplify this process by providing robust solutions for automated visual regression testing.<\/p>\n\n\n\n<p>Below are the steps to set up Applitools Eyes and Playwright SDK.<\/p>\n\n\n\n<p><strong>Install Playwright<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npm init playwright@latest<\/code><\/pre>\n\n\n\n<p><strong>Install Applitools Eyes SDK&nbsp;<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npm install -D @applitools\/eyes-playwright<\/code><\/pre>\n\n\n\n<p><strong>Add the below line in .spec.js file&nbsp;<\/strong><\/p>\n\n\n\n<p>To configure your project for Applitools Eyes, we have to add the below line.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\"><strong>import<\/strong> { test } <strong>from<\/strong> '@applitools\/eyes-playwright\/fixture';<\/code><\/pre>\n\n\n\n<p>In the next section you will see examples to explain how we can use SDK with Playwright tests.&nbsp;<\/p>\n\n\n\n<p>Before moving in the detail of various types of matchLeavel, let see one basic example to understand how we do the visual testing in Applitool,&nbsp; and the method used in Applitools, to capture and validate a checkpoint in your application&#8217;s UI.<\/p>\n\n\n\n<p>Below is code that integrates Applitools Eyes with Playwright to perform a visual test.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\"><strong>import<\/strong> { test } <strong>from<\/strong> '@applitools\/eyes-playwright\/fixture';\ntest('My first visual test Using Applitools with matchLevel: Dynamic', <strong>async<\/strong> ({ page, eyes }) =&gt; {\n<strong>await<\/strong> page.goto('https:\/\/app14743.cloudwayssites.com\/helloworld\/');\n&nbsp; \/\/ Visual check\n&nbsp; <strong>await<\/strong> eyes.check('Landing Page', {\n&nbsp; &nbsp; fully: true,\n&nbsp; &nbsp; matchLevel: 'Dynamic',\n&nbsp; });\n});<\/code><\/pre>\n\n\n\n<p>In the above code we mainly use two things: one is the method eyes. check() and two options: {fully: true}, and {matchLevel: &#8216;Dynamic&#8217;}<\/p>\n\n\n\n<p><strong>eyes.check()<\/strong>: Performs a visual snapshot of the page or a specific element and compares it with the baseline image stored in Applitools.<\/p>\n\n\n\n<p><strong>Options<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>fully: true<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Captures the entire page, including scrollable sections.<\/li>\n\n\n\n<li>Ensures that all content on the page is included in the visual test.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>matchLevel: &#8216;Dynamic&#8217;<\/strong>:\n<ul class=\"wp-block-list\">\n<li>A matching algorithm that focuses on the content while ignoring dynamic changes, such as text or layout differences.<\/li>\n\n\n\n<li>Useful for pages with frequently changing content, like user-generated text or dynamic data.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Below are the <strong>options<\/strong> that we can pass in our test case. These options provide flexibility and precision, enabling robust visual testing tailored to different scenarios and challenges.<\/p>\n\n\n\n<p>This table summarizes each configuration, making it easier to understand their purposes.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Option<\/strong><\/td><td><strong>Purpose<\/strong><\/td><td><strong>Example Use Case<\/strong><\/td><\/tr><tr><td><strong>matchLevel: &#8216;Dynamic&#8217;<\/strong><\/td><td>Ignores minor layout or content changes (e.g., dynamic text, animations).<\/td><td>Testing pages with frequent dynamic content (e.g., dates, real-time updates) without raising false alarms.<\/td><\/tr><tr><td><strong>matchLevel: &#8216;Strict&#8217;<\/strong><\/td><td>Detects even small pixel or layout changes for precise visual validation.<\/td><td>Validating critical UI components or designs where every pixel matters (e.g., brand logos, product pages).<\/td><\/tr><tr><td><strong>region: component<\/strong><\/td><td>Focuses the visual check on a specific component or region of the page.<\/td><td>Testing a new or modified UI component in isolation (e.g., buttons, headers, or form fields).<\/td><\/tr><tr><td><strong>fully: true<\/strong><\/td><td>Captures and validates the entire page, including content outside the viewport.<\/td><td>Ensuring the layout and content of a long webpage or scrolling section is consistent.<\/td><\/tr><tr><td><strong>ignoreRegions: [dynamicContent]<\/strong><\/td><td>Excludes specific regions with dynamic content from the validation.<\/td><td>Ignoring areas like ads, live feed sections, or widgets with fluctuating content (e.g., real-time graphs).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Examples with different matchLevel<\/strong><\/h3>\n\n\n\n<p>MatchLevel determines how the captured visual output is compared with the baseline image.Let&#8217;s see the examples with different options.<\/p>\n\n\n\n<p>1. Visual Testing with <strong>matchLevel: Strict<\/strong><\/p>\n\n\n\n<p>This ensures pixel-perfect comparison between the baseline and current screenshot, highlighting any visual difference, no matter how small.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">test('My first visual test Using Applitools with matchLevel: Strict', <strong>async<\/strong> ({ page, eyes }) =&gt; {\n&nbsp; <strong>await<\/strong> page.goto('https:\/\/app14743.cloudwayssites.com\/helloworld\/');\n&nbsp; <strong>await<\/strong> eyes.check('Landing Page', {\n&nbsp; &nbsp; fully: true,\n&nbsp; &nbsp; matchLevel: 'Strict',\n&nbsp; });\n});<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose<\/strong>: Validates the entire page with <strong>Strict match level<\/strong>.<\/li>\n\n\n\n<li><strong>Strict Match Level<\/strong>: Identifies even small differences, such as minor pixel or layout changes, ensuring high precision in visual validation.<\/li>\n<\/ul>\n\n\n\n<p>2. Visual Testing with <strong>matchLevel: Dynamic<\/strong><\/p>\n\n\n\n<p>Focuses on content consistency by ignoring minor layout differences, such as text movement, while ensuring key visual elements remain unchanged.<\/p>\n\n\n\n<p>In the below example you can see even if the text color is changed after clicking on link \u2018?diff2\u2019 test case still works perfectly fine because we have set matchLevel: Dynamic. This ensures the visual test focuses on the content and structure of the text rather than superficial changes like color.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">test('My first visual test Using Applitools with matchLevel: Dynamic', async ({ page, eyes }) =&gt; {\n await page.goto('https:\/\/app14743.cloudwayssites.com\/helloworld\/');\n await page.getByRole('link', { name: '?diff2' }).click();\n await eyes.check('Homepage', {\n   fully: true,\n   matchLevel: 'Dynamic',\n });\n});<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose<\/strong>: Validates the entire page with <strong>Dynamic match level<\/strong>.<\/li>\n\n\n\n<li><strong>Dynamic Match Level<\/strong>: Ignores minor content\/layout differences (e.g., text changes, animations) and focuses on high-level structural comparisons.<\/li>\n\n\n\n<li><strong>fully: true<\/strong>: Captures a screenshot of the full page, not just the visible viewport.<\/li>\n<\/ul>\n\n\n\n<p>3. Visual Testing for a<strong> Specific Region\/Component<\/strong><\/p>\n\n\n\n<p>Limits visual comparisons to a particular area or component of the application.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">test('My first visual test Using Applitools with particular region\/Component', <strong>async<\/strong> ({ page, eyes }) =&gt; {\n&nbsp; <strong>await<\/strong> page.goto('https:\/\/app14743.cloudwayssites.com\/helloworld\/');\n&nbsp; <strong>const<\/strong> component = page.locator('.fancy.title.primary');\n&nbsp; <strong>await<\/strong> eyes.check('My Component', {\n&nbsp; &nbsp; region: component,\n&nbsp; });\n});<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose<\/strong>: Tests only a specific component or region on the page.<\/li>\n\n\n\n<li><strong>region<\/strong>: Focuses the validation on the area defined by the component locator (.fancy.title.primary), instead of the entire page.<\/li>\n<\/ul>\n\n\n\n<p>4. Visual Testing <strong>with Ignored Regions<\/strong><\/p>\n\n\n\n<p>Excludes specific areas from comparison, preventing false positives caused by expected dynamic changes in those regions.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">test('Visual test Using Applitools with ignoring the region', <strong>async<\/strong> ({ page, eyes }) =&gt; {\n&nbsp; <strong>await<\/strong> page.goto('https:\/\/app14743.cloudwayssites.com\/helloworld\/');\n&nbsp; <strong>const<\/strong> dynamicContent = page.locator('.fancy.title.primary');\n&nbsp; <strong>await<\/strong> eyes.check('Homepage', {\n&nbsp; &nbsp; fully: true,\n&nbsp; &nbsp; matchLevel: 'Strict',\n&nbsp; &nbsp; ignoreRegions: [dynamicContent],\n&nbsp; });\n});<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose<\/strong>: Tests the page while <strong>ignoring specific dynamic regions<\/strong>.<\/li>\n\n\n\n<li><strong>ignoreRegions<\/strong>: Excludes certain areas from the visual validation (e.g., areas with dynamic content like dates, ads, or animations).<\/li>\n\n\n\n<li><strong>fully: true<\/strong>: Captures the entire page for validation.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>About dynamic match level<\/strong><\/h2>\n\n\n\n<p>Dynamic match level is a feature in Applitools Eyes that verifies text by matching it against predefined or custom patterns, ensuring the content adheres to a specific format. It focuses on format validation rather than content changes, making it ideal for dynamic text like dates, emails, or numbers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Type of dynamic match level<\/strong><\/h3>\n\n\n\n<p>Dynamic match levels allow for flexible verification of text by matching it against predefined or custom patterns. The default types include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>TextField<\/strong>: Text inside input fields.<\/li>\n\n\n\n<li><strong>Number<\/strong>: Numeric values like ZIP codes or phone numbers.<\/li>\n\n\n\n<li><strong>Date<\/strong>: Validates text as a date in proper format.<\/li>\n\n\n\n<li><strong>Link<\/strong>: Hyperlinks or URLs.<\/li>\n\n\n\n<li><strong>Email<\/strong>: Checks for a valid email address format.<\/li>\n\n\n\n<li><strong>Currency<\/strong>: Recognizes monetary values.<\/li>\n<\/ul>\n\n\n\n<p>These types ensure accurate validation by focusing on the format <strong><em>rather than the content changes,<\/em><\/strong> such as dynamic updates to dates or numbers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Custom dynamic pattern<\/strong><\/h3>\n\n\n\n<p>To create a custom dynamic pattern we have to follow below steps in Applitools dashboard&nbsp;<\/p>\n\n\n\n<p>Here are the steps to create a custom dynamic pattern:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Open the Settings Window<\/strong>: In the <strong>Page Navigator<\/strong>, select <strong>Apps &amp; Tests<\/strong>.<\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\">\n<li><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large browser-frame-dark\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"765\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-2-1024x765.png\" alt=\"\" class=\"wp-image-59608\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-2-1024x765.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-2-300x224.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-2-768x574.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-2.png 1146w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>In the list of applications on the left, hover over an application and click <strong>&gt; Settings<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large browser-frame-dark\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"689\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-3-1024x689.png\" alt=\"\" class=\"wp-image-59609\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-3-1024x689.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-3-300x202.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-3-768x517.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-3.png 1498w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Add a Custom Type<\/strong>: Click <strong>Add custom type<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large browser-frame-dark\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"587\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-4-1024x587.png\" alt=\"\" class=\"wp-image-59610\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-4-1024x587.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-4-300x172.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-4-768x440.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-4-1536x880.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-4.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Define the Custom Pattern<\/strong>:<\/li>\n<\/ol>\n\n\n\n<p>Enter a <strong>name<\/strong> and a <strong>Regex pattern<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large browser-frame-dark\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"734\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-5-1024x734.png\" alt=\"\" class=\"wp-image-59611\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-5-1024x734.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-5-300x215.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-5-768x551.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-5-1536x1101.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-5.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Save the Custom Pattern<\/strong>:<\/li>\n<\/ol>\n\n\n\n<p>In the below screenshot you can see we have set a custom pattern for Zip Code. Once the custom pattern is created, its <strong>name<\/strong> can be used in the code to reference the pattern.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large browser-frame-dark\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-6-1024x535.png\" alt=\"\" class=\"wp-image-59612\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-6-1024x535.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-6-300x157.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-6-768x401.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-6-1536x802.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-6.png 1590w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Click <strong>Add<\/strong> will save the entered pattern.&nbsp;<\/p>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><strong>Apply the Settings<\/strong>:<\/li>\n<\/ol>\n\n\n\n<p>Once all required patterns have been selected, click <strong>Apply settings<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Applitools Dashboard: Execute visual testing using the Applitools Playwright SDK<\/strong><\/h2>\n\n\n\n<p>Applitools&#8217; Dashboard is a powerful interface designed to manage and analyze test results efficiently, especially for visual testing and monitoring user interfaces.<\/p>\n\n\n\n<p>Below are the steps that we normally have in the Applitools Dashboard when we execute any visual test case.<\/p>\n\n\n\n<p><strong>Precondition : <\/strong>Run the below command to export the key&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\"><strong>export<\/strong> APPLITOOLS_API_KEY='your_api_key_here'<\/code><\/pre>\n\n\n\n<p>Once the key is exported, the next step is to execute the test cases using the below command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npx playwright test --ui tests\/visual.spec.js<\/code><\/pre>\n\n\n\n<p><strong>First Run<\/strong>: Playwright captures and saves a screenshot of the page or specific UI elements. This is known as the <em>base image<\/em>.<\/p>\n\n\n\n<p><strong>Subsequent Runs<\/strong>: In the next run, Playwright takes a new screenshot and compares it against the base image.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>If there are no differences<\/strong>, the test passes.<\/li>\n\n\n\n<li><strong>If differences exist<\/strong>, the test fails, flagging the areas where changes occurred.<\/li>\n<\/ul>\n\n\n\n<p>In the below screenshot in the Applitools Dashboard, you can see all the above four test cases are executed successfully.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large browser-frame-dark\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-7-1024x509.png\" alt=\"\" class=\"wp-image-59613\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-7-1024x509.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-7-300x149.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-7-768x382.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-7-1536x763.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-7.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Applitools Playwright SDK with Example in Detail<\/strong><\/p>\n\n\n\n<p>Let&#8217;s take an example of a particular component in the page. In the below screenshot, the component focuses on a specific component or region of the page. You can see only the \u2019Hello World\u2019 part is tested. In case there is any change in this component, the test case will fail.<\/p>\n\n\n\n<p>In the below example we have updated the component with the text \u2018Happy World\u2019&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">test('Visual test Using Applitools with Updating Component UI', <strong>async<\/strong> ({ page, eyes }) =&gt; {\n<strong>await<\/strong> page.goto('https:\/\/app14743.cloudwayssites.com\/helloworld\/');\n<strong>await<\/strong> page.getByRole('link', { name: '?diff2' }).click();\n<strong>await<\/strong> eyes.check('Homepage', {\n&nbsp; fully: true,\n&nbsp; matchLevel: 'Strict',\n });\n});<\/code><\/pre>\n\n\n\n<p>When we execute the above code, it will not execute successfully because the UI of the component is changed after clicking on the link \u2018diff2.\u2019<\/p>\n\n\n\n<figure class=\"wp-block-image size-large browser-frame-dark\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"427\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-8-1024x427.png\" alt=\"\" class=\"wp-image-59615\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-8-1024x427.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-8-300x125.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-8-768x320.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-8-1536x640.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-8.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>To fix the above problem, we have marked it resolved from the Applitools Dashboard. Once we accept the change, it becomes the base image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large browser-frame-dark\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"549\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-9-1024x549.png\" alt=\"\" class=\"wp-image-59616\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-9-1024x549.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-9-300x161.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-9-768x412.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-9-1536x824.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-9.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Now when we execute the test case again, it gets executed successfully with the updated UI.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>When Playwright\u2019s Visual Testing Features Are Useful&nbsp;<\/strong><\/h2>\n\n\n\n<p>Playwright\u2019s built-in visual testing features are well-suited for scenarios where:<\/p>\n\n\n\n<p><strong>Simple Visual Comparisons<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Comparing entire pages or specific UI components with baseline images for detecting pixel-level differences.<\/li>\n\n\n\n<li>Example: Ensuring the homepage layout hasn\u2019t shifted after a CSS update.<\/li>\n<\/ul>\n\n\n\n<p><strong>Static UIs<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Testing applications with minimal dynamic or animated content, as these are less prone to false positives caused by animations or transient elements.<\/li>\n<\/ul>\n\n\n\n<p><strong>Fast Feedback<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When quick pixel-by-pixel comparisons in CI pipelines are sufficient without advanced AI-powered analysis.<\/li>\n\n\n\n<li>Example: Smoke testing in a fast-moving development cycle.<\/li>\n<\/ul>\n\n\n\n<p><strong>Budget-Friendly<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Playwright\u2019s native screenshot and comparison capabilities don\u2019t require additional tools or subscriptions.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>When Playwright\u2019s Visual Testing May Fall Short<\/strong><\/h2>\n\n\n\n<p><strong>Dynamic Content<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UIs with dynamic or frequently changing elements (e.g., time, randomized content, or animations) can cause false positives due to exact pixel mismatches.<\/li>\n\n\n\n<li>Example: A dashboard with live-updating graphs.<\/li>\n<\/ul>\n\n\n\n<p><strong>Complex Visual Changes<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Playwright\u2019s threshold-based comparison may miss subtle or semantic changes that don\u2019t exceed the defined pixel difference threshold.<\/li>\n\n\n\n<li>Example: Slightly altered typography or colour changes.<\/li>\n<\/ul>\n\n\n\n<p><strong>Ignored Regions<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>While Playwright allows element-specific testing, ignoring specific dynamic regions within a larger page requires custom logic.<\/li>\n\n\n\n<li>Example: Excluding advertisements or live widgets from visual comparison.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How Applitools Handles Situations Better<\/strong><\/h2>\n\n\n\n<p>Applitools offers superior visual testing capabilities compared to Playwright, especially when handling dynamic content, ensuring pixel-perfect validation, focusing on specific components, and reducing false positives.&nbsp;<\/p>\n\n\n\n<p><strong>Dynamic Content Handling<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Match Levels<\/strong>: Applitools\u2019 AI-powered matchLevel options (<strong>e.g., Strict, Layout, Content<\/strong>) allow intelligent comparison by focusing on structure and ignoring irrelevant pixel differences.<\/li>\n\n\n\n<li>Example: Testing a real-time dashboard with dynamic data but a consistent layout.<\/li>\n<\/ul>\n\n\n\n<p><strong>Ignored Regions<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Applitools allows you to define <strong>ignored regions<\/strong> to exclude specific parts of a page from comparison (e.g., ads or timestamps).<\/li>\n\n\n\n<li>Example: Excluding a \u201ccurrent time\u201d widget from visual testing.<\/li>\n<\/ul>\n\n\n\n<p><strong>Advanced Visual Validation<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Features like <strong>dynamic regions<\/strong> and AI-based semantic analysis help detect visual regressions that go beyond pixel-by-pixel differences.<\/li>\n\n\n\n<li>Example: Identifying a button misalignment that might not be detected by Playwright\u2019s threshold settings.<\/li>\n<\/ul>\n\n\n\n<p><strong>Visual Testing Across Components<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Allows you to target specific regions or components for testing without manually cropping or capturing screenshots.<\/li>\n\n\n\n<li>Example: Testing the styling of a navigation bar or modal dialog.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>Playwright&#8217;s built-in visual testing features are suitable for simple cases where you need pixel precision in image comparisons of static UIs. However, it may struggle with complicated designs, whether they involve minor changes within the site or more intricate design requirements .<\/p>\n\n\n\n<p>Applitools Eyes, which employs artificial intelligence, is more suitable for overcoming these difficulties. It performs extraordinarily in cases with dynamic content; it easily identifies subtle visual regressions and is equipped with extra functionalities such as ignored areas and cross-browser testing. For teams with significant testing and enhancement requirements, where the built-in visual testing capabilities of Playwright may fall short for complex and large-scale application testing, Applitools serves as an invaluable complement. It ensures and elevates the visual quality of dynamic applications, making it an ideal choice for robust testing and quality assurance.<\/p>\n\n\n\n<p><strong>About the Author<\/strong><\/p>\n\n\n\n<p><strong>Kailash Pathak (Applitools Ambassador | Cypress Ambassador)<\/strong><\/p>\n\n\n\n<p>Senior QA Lead Manager with over 15 years of experience in QA engineering and automation. Kailash holds certifications including PMI-ACP\u00ae, ITIL\u00ae, PRINCE2 Practitioner\u00ae, ISTQB, and AWS (CFL).<\/p>\n\n\n\n<p>As an active speaker and workshop conductor, Kailash shares his expertise through blogs on platforms like <a href=\"https:\/\/medium.com\/@kailash-pathak\">Medium<\/a>, <a href=\"https:\/\/dzone.com\/authors\/kailash808\">Dzone<\/a>, <a href=\"https:\/\/talent500.co\/blog\/author\/kailash-pathak\/\">Talent500<\/a>, <a href=\"https:\/\/www.thetesttribe.com\/blog\/cypress-vs-playwright\/\">The Test Tribe<\/a>, and his personal site <a href=\"https:\/\/qaautomationlabs.com\/\">https:\/\/qaautomationlabs.com\/<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<div class=\"wp-block-group pt-none pb-none\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-quick-answers\">Quick Answers<\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1731025092682\"><strong class=\"schema-faq-question\">How do I add Applitools Eyes to an existing Playwright project?<\/strong> <p class=\"schema-faq-answer\">Follow the Playwright Quick Start to install the SDK, run CLI setup, and execute your first visual test (<a href=\"https:\/\/app14743.cloudwayssites.com\/tutorials\/playwright\">https:\/\/app14743.cloudwayssites.com\/tutorials\/playwright<\/a>).<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1757357563361\"><strong class=\"schema-faq-question\">What\u2019s the difference between Playwright functional checks and visual testing?<\/strong> <p class=\"schema-faq-answer\">Functional asserts confirm behavior (clicks, responses, state), while visual testing validates the rendered UI\u2014catching regressions in layout, fonts, colors, and dynamic content that functional checks overlook.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1757357586460\"><strong class=\"schema-faq-question\">How do I run cross-browser visual tests quickly in CI?<\/strong> <p class=\"schema-faq-answer\">Use the Ultrafast Grid to fan out visual checkpoints across real browsers\/devices in parallel without maintaining an in-house grid (<a href=\"https:\/\/app14743.cloudwayssites.com\/ultrafast-grid\">https:\/\/app14743.cloudwayssites.com\/ultrafast-grid<\/a>).<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1757357603260\"><strong class=\"schema-faq-question\">How do I reduce flakiness in Playwright tests?<\/strong> <p class=\"schema-faq-answer\">Favor stable visual checkpoints over brittle locator assertions, use consistent viewports and network conditions, and rely on Visual AI to ignore non-material diffs (<a href=\"https:\/\/app14743.cloudwayssites.com\/platform\/validate\/visual-ai\/\">https:\/\/app14743.cloudwayssites.com\/platform\/validate\/visual-ai\/<\/a>).<\/p> <\/div> <\/div>\n\n\n\n<div class=\"wp-block-group pb-none pt-none\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<style>\n.schema-faq-section { \n  background: white;\n  margin: 1rem 0;\n  border: 2px solid rgba(0, 0, 0, 0.13);\n  border-radius: 10px;\n  box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.03);\n}\n.schema-faq-question{\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  transition: opacity ease 0.25s;\n  padding: 1rem;\n  color: var(--wp--preset--color--primary);\n  font-size: var(--wp--preset--font-size-large);\n}\n.schema-faq-question:hover {\n  color: var(--wp--preset--color--secondary);\n}\n.schema-faq-question:after{\n  width: 16px;\n  height: 20px;\n  display: inline-block;\n  margin-left: auto;\n  margin-right: 5px;\n  vertical-align: top;\n  color: inherit;\n  content: \"+\";\n}\n.schema-faq-question.expanded:after{\n  content: \"-\";\n}\n.schema-faq-question:hover{\n  opacity: 0.75;\n}\n.schema-faq-answer{\n  padding: 0 1rem 1rem 1rem;\n  display: none;\n}\n.schema-faq-answer.default{\n  display: block;\n}\n.editor-styles-wrapper .schema-faq-question {\n  cursor: text;\n}\n.editor-styles-wrapper .schema-faq-answer {\n  display: block; \n}\n<\/style>\n\n\n\n<script>\njQuery(function($){var yoast={accordion:function(){var isAnimating=!1;$(\".schema-faq-section\").find(\".schema-faq-question\").click(function(event){event.stopPropagation();if(isAnimating)return;isAnimating=!0;var answer=$(this).nextAll(\".schema-faq-answer\").eq(0);answer.slideToggle(250,function(){$(this).toggleClass(\"expanded\");$(this).prev(\".schema-faq-question\").toggleClass(\"expanded\");isAnimating=!1});$(\".schema-faq-answer\").not(answer).slideUp(\"fast\",function(){$(this).removeClass(\"expanded\");$(this).prev(\".schema-faq-question\").removeClass(\"expanded\")})})}};yoast.accordion()});\n<\/script>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<style>\n.browser-frame-light,.browser-frame-dark {\n   margin:0 auto;\n   width:100%;\n   position:relative;\n   border-radius:5px 5px 3px 3px;\n   box-shadow:0 0.2em .8em 0 rgba(0,0,0,0.4);\n}\n\n.browser-frame-light {\n   background-color:#f3f4f6;\n   border-top:1.25em solid rgba(120,144,156,0.3);\n}\n\n.browser-frame-dark {\n   background-color:#1c304b;\n   border-top:1.25em solid rgba(28,48,75,0.3);\n}\n\n.browser-frame-light:before, .browser-frame-dark:before {\n   content:\"\";\n   position:absolute;\n   top:-.8em;\n   left:0.75em;\n   width:0.4em;\n   height:0.4em;\n   border-radius:50%;\n}\n\n.browser-frame-light:before,.browser-frame-dark:before {\n   background-color:#0d7eb3;\n   box-shadow:0 0 0 1px #0d7eb3,1.1em 0 0 1px #0097ba,2.2em 0 0 1px #00a698;\n}\n\n.browser-frame-light video,.browser-frame-light img,\n.browser-frame-dark video,.browser-frame-dark img {\n   display:block;\n   width:100%;\n   height:auto;\n   border-radius:0 0 3px 3px;\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>As applications become more complex and UI consistency becomes critical, ensuring that the user interface appears as expected across multiple environments is key. Applitools Eyes, when integrated with the Playwright&#8230;<\/p>\n","protected":false},"author":132,"featured_media":59607,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12271,16867,10558],"tags":[17013,17015,16608,12758,10262],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.5 (Yoast SEO v24.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Leveraging Applitools for Seamless Visual Testing in Playwright - AI-Powered End-to-End Testing | Applitools<\/title>\n<meta name=\"description\" content=\"Learn how to integrate Applitools Eyes with Playwright for visual testing. This post explains the differences between visual and functional testing, outlines the improvements in the Applitools Playwright SDK, and provides step-by-step examples to help you detect UI inconsistencies efficiently.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Leveraging Applitools for Seamless Visual Testing in Playwright\" \/>\n<meta property=\"og:description\" content=\"As applications become more complex and UI consistency becomes critical, ensuring that the user interface appears as expected across multiple environments\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-31T21:29:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-08T18:53:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"556\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kailash Pathak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kailash Pathak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/\"},\"author\":{\"name\":\"Kailash Pathak\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/2097576a16c6477c0a356d7c4e01d0ff\"},\"headline\":\"Leveraging Applitools for Seamless Visual Testing in Playwright\",\"datePublished\":\"2025-01-31T21:29:23+00:00\",\"dateModified\":\"2025-09-08T18:53:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/\"},\"wordCount\":3188,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1.png\",\"keywords\":[\"Eyes\",\"Learn\",\"Playwright\",\"Product\",\"Visual Testing Tools\"],\"articleSection\":[\"Getting Started\",\"Learn\",\"Product\"],\"inLanguage\":\"en-US\"},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/\",\"name\":\"Leveraging Applitools for Seamless Visual Testing in Playwright - AI-Powered End-to-End Testing | Applitools\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1.png\",\"datePublished\":\"2025-01-31T21:29:23+00:00\",\"dateModified\":\"2025-09-08T18:53:56+00:00\",\"description\":\"Learn how to integrate Applitools Eyes with Playwright for visual testing. This post explains the differences between visual and functional testing, outlines the improvements in the Applitools Playwright SDK, and provides step-by-step examples to help you detect UI inconsistencies efficiently.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1731025092682\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357563361\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357586460\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357603260\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1.png\",\"width\":1600,\"height\":556},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Product\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/product\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Leveraging Applitools for Seamless Visual Testing in Playwright\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"name\":\"Applitools Visual AI\",\"description\":\"Applitools delivers full end-to-end test automation with AI infused at every step.\",\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\",\"name\":\"Applitools\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"width\":156,\"height\":28,\"caption\":\"Applitools\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/2097576a16c6477c0a356d7c4e01d0ff\",\"name\":\"Kailash Pathak\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a7e8128d6d431232918007c6d9dc8792?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a7e8128d6d431232918007c6d9dc8792?s=96&d=mm&r=g\",\"caption\":\"Kailash Pathak\"},\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/kailashpathak\/\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1731025092682\",\"position\":1,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1731025092682\",\"name\":\"How do I add Applitools Eyes to an existing Playwright project?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Follow the Playwright Quick Start to install the SDK, run CLI setup, and execute your first visual test (<a href=\\\"https:\/\/app14743.cloudwayssites.com\/tutorials\/playwright\\\">https:\/\/app14743.cloudwayssites.com\/tutorials\/playwright<\/a>).\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357563361\",\"position\":2,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357563361\",\"name\":\"What\u2019s the difference between Playwright functional checks and visual testing?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Functional asserts confirm behavior (clicks, responses, state), while visual testing validates the rendered UI\u2014catching regressions in layout, fonts, colors, and dynamic content that functional checks overlook.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357586460\",\"position\":3,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357586460\",\"name\":\"How do I run cross-browser visual tests quickly in CI?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Use the Ultrafast Grid to fan out visual checkpoints across real browsers\/devices in parallel without maintaining an in-house grid (<a href=\\\"https:\/\/app14743.cloudwayssites.com\/ultrafast-grid\\\">https:\/\/app14743.cloudwayssites.com\/ultrafast-grid<\/a>).\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357603260\",\"position\":4,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357603260\",\"name\":\"How do I reduce flakiness in Playwright tests?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Favor stable visual checkpoints over brittle locator assertions, use consistent viewports and network conditions, and rely on Visual AI to ignore non-material diffs (<a href=\\\"https:\/\/app14743.cloudwayssites.com\/platform\/validate\/visual-ai\/\\\">https:\/\/app14743.cloudwayssites.com\/platform\/validate\/visual-ai\/<\/a>).\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Leveraging Applitools for Seamless Visual Testing in Playwright - AI-Powered End-to-End Testing | Applitools","description":"Learn how to integrate Applitools Eyes with Playwright for visual testing. This post explains the differences between visual and functional testing, outlines the improvements in the Applitools Playwright SDK, and provides step-by-step examples to help you detect UI inconsistencies efficiently.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/","og_locale":"en_US","og_type":"article","og_title":"Leveraging Applitools for Seamless Visual Testing in Playwright","og_description":"As applications become more complex and UI consistency becomes critical, ensuring that the user interface appears as expected across multiple environments","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2025-01-31T21:29:23+00:00","article_modified_time":"2025-09-08T18:53:56+00:00","og_image":[{"width":1600,"height":556,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1.png","type":"image\/png"}],"author":"Kailash Pathak","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kailash Pathak","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/"},"author":{"name":"Kailash Pathak","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/2097576a16c6477c0a356d7c4e01d0ff"},"headline":"Leveraging Applitools for Seamless Visual Testing in Playwright","datePublished":"2025-01-31T21:29:23+00:00","dateModified":"2025-09-08T18:53:56+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/"},"wordCount":3188,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1.png","keywords":["Eyes","Learn","Playwright","Product","Visual Testing Tools"],"articleSection":["Getting Started","Learn","Product"],"inLanguage":"en-US"},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/","name":"Leveraging Applitools for Seamless Visual Testing in Playwright - AI-Powered End-to-End Testing | Applitools","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1.png","datePublished":"2025-01-31T21:29:23+00:00","dateModified":"2025-09-08T18:53:56+00:00","description":"Learn how to integrate Applitools Eyes with Playwright for visual testing. This post explains the differences between visual and functional testing, outlines the improvements in the Applitools Playwright SDK, and provides step-by-step examples to help you detect UI inconsistencies efficiently.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1731025092682"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357563361"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357586460"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357603260"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2025\/01\/image-1.png","width":1600,"height":556},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Product","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/product\/"},{"@type":"ListItem","position":3,"name":"Leveraging Applitools for Seamless Visual Testing in Playwright"}]},{"@type":"WebSite","@id":"https:\/\/app14743.cloudwayssites.com\/#website","url":"https:\/\/app14743.cloudwayssites.com\/","name":"Applitools Visual AI","description":"Applitools delivers full end-to-end test automation with AI infused at every step.","publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/app14743.cloudwayssites.com\/#organization","name":"Applitools","url":"https:\/\/app14743.cloudwayssites.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","width":156,"height":28,"caption":"Applitools"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/2097576a16c6477c0a356d7c4e01d0ff","name":"Kailash Pathak","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a7e8128d6d431232918007c6d9dc8792?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a7e8128d6d431232918007c6d9dc8792?s=96&d=mm&r=g","caption":"Kailash Pathak"},"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/kailashpathak\/"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1731025092682","position":1,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1731025092682","name":"How do I add Applitools Eyes to an existing Playwright project?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Follow the Playwright Quick Start to install the SDK, run CLI setup, and execute your first visual test (<a href=\"https:\/\/app14743.cloudwayssites.com\/tutorials\/playwright\">https:\/\/app14743.cloudwayssites.com\/tutorials\/playwright<\/a>).","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357563361","position":2,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357563361","name":"What\u2019s the difference between Playwright functional checks and visual testing?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Functional asserts confirm behavior (clicks, responses, state), while visual testing validates the rendered UI\u2014catching regressions in layout, fonts, colors, and dynamic content that functional checks overlook.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357586460","position":3,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357586460","name":"How do I run cross-browser visual tests quickly in CI?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Use the Ultrafast Grid to fan out visual checkpoints across real browsers\/devices in parallel without maintaining an in-house grid (<a href=\"https:\/\/app14743.cloudwayssites.com\/ultrafast-grid\">https:\/\/app14743.cloudwayssites.com\/ultrafast-grid<\/a>).","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357603260","position":4,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/leveraging-applitools-for-seamless-visual-testing-in-playwright\/#faq-question-1757357603260","name":"How do I reduce flakiness in Playwright tests?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Favor stable visual checkpoints over brittle locator assertions, use consistent viewports and network conditions, and rely on Visual AI to ignore non-material diffs (<a href=\"https:\/\/app14743.cloudwayssites.com\/platform\/validate\/visual-ai\/\">https:\/\/app14743.cloudwayssites.com\/platform\/validate\/visual-ai\/<\/a>).","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/59583"}],"collection":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/users\/132"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=59583"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/59583\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/59607"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=59583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=59583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=59583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}