Local dev is where most UI changes happen (and where regressions sneak in). States drift, styles diverge, and tiny tweaks pile up until something breaks in CI. The Applitools Storybook Addon brings AI-powered visual testing straight into Storybook so you can catch issues as you code, approve the good changes quickly, and keep your CI/CD pipelines green.

AI-Powered Visual Testing Inside Storybook

Open your Storybook and run visual tests from an Applitools Eyes tab – no context switching. Results are grouped by component to mirror your Storybook structure, and a reporter widget highlights what needs attention first so you can review diffs in minutes, not hours. Learn more on our Storybook Component Testing with Applitools page.

• Catch bugs where you build. Validate component states during local development and avoid surprises later.
• Review faster with Visual AI. See only meaningful, human-perceptible UI changes without pixel-to-pixel noise. Tune sensitivity with AI match levels when you need to.
• Scale coverage painlessly. Run once; render everywhere with Ultrafast Grid across browsers, devices, and viewports in parallel.

How to Use the Applitools Eyes Storybook Addon

Getting started takes just a couple of minutes.

1. Install the SDK & Addon
   Add Applitools Eyes to your project and enable the Storybook addon (React, Vue, Angular supported). See the installation instructions in the Eyes Storybook Addon docs.
2. Run Applitools Visual Tests in Storybook
   Open Storybook, switch to the Applitools Eyes tab, and trigger tests for a single story or an entire component. Results stream back in real time with automatic grouping by component.
3. Review & Maintain
   Use Visual AI diffs, side-by-side views, and auto-maintenance to approve or reject changes in bulk. Prioritized sorting surfaces what needs attention first.
4. Scale Across Browsers/Devices
   Turn on Ultrafast Grid to parallelize renders across Chrome, Firefox, Safari, Edge, and mobile sizes – without extra local setup.

Applitools Storybook Addon Use Case Playbook

Below are the three most common ways teams use the Eyes Storybook Addon each – with a quick, practical flow pulled right from the product.

Use Case: Guard Your Design System

As you refactor tokens or update themes, run visual tests on every component state. Spot unintended changes across the library instantly.

How to do it in Storybook

1. Start Storybook and open your design‑system component in the Applitools Eyes tab.
2. Click Run from the tab (or use Run in the left sidebar test module). The addon tests the stories and streams results inline for every browser/device in your applitools.config.js.
3. In the sidebar, filter by Unresolved to zero in on changes across the library (Green = passed, Orange = unresolved, Red = failed).
4. Open a story’s result and use Side‑by‑Side or the Slider to spot subtle spacing/typography diffs.
5. Approve legit theme updates with Thumbs Up (or use ⋯ → Review actions to approve the whole story/batch). Reject regressions with Thumbs Down and fix.

Pro tip: Use the tab ⋯ → Configuration to confirm you’re validating the right browser matrix and server URL. See more options in the docs.

Use Case: Fix Fast During Local Dev

Working on a feature branch? Validate your component in Storybook before you commit.

How to do it in Storybook

1. Open your feature’s stories, then hit Run in the Applitools tab for the component you’re touching.
2. Watch statuses update inline; click the status buttons to filter to Unresolved so you only look at what changed.
3. Click into any row to open compare tools: Diff Image, Actual Image, Expected Image, Side‑by‑Side, or Slider.
4. If the change is intended, Thumbs Up to approve; otherwise Thumbs Down to flag and keep iterating.
5. When you’re happy locally, push your branch. You can scale the same setup in CI using your existing Storybook build/preview URL.

Heads‑up: To view baselines or approve/reject, sign in to your Applitools account in the same browser that’s running Storybook (you’ll be prompted if not).

Use Case: Ship Multi‑Browser Confidence

One click, many targets. Validate layout and responsive behavior across browsers and viewports – early.

How to do it in Storybook

1. In ⋯ → Configuration, verify your browsers/devices list (Chrome, Firefox, Safari, Edge; add viewports you care about).
2. Hit Run for representative stories (states, theming, interactive). Results come back grouped by each browser/device so differences are obvious.
3. Filter the sidebar by Unresolved and scan. Use Side‑by‑Side or Slider to compare layout at different sizes.
4. Approve good changes in bulk (⋯ → Review actions) to keep maintenance low.
5. For broader coverage, run the same setup in CI and expand the matrix.

Why Visual AI > Pixel Diffs for Storybook

Pixel-to-pixel tools are fragile with dynamic content and minor rendering differences. Applitools Visual AI mimics human vision to highlight only meaningful UI changes (structure, layout, content) while ignoring the noise. You can still dial sensitivity up or down with match levels whenever needed. Less flake, more signal.

Try AI-Powered Visual Testing in Storybook Today

Run your first component tests in minutes, review diffs right in Storybook, and expand coverage with Ultrafast Grid – without slowing delivery.

• Explore the Applitools Storybook Component Testing solution
• Read the Applitools Storybook Addon docs
• Compare Applitools Eyes against Chromatic

The post Test Your Components Where You Build with the Applitools Storybook Addon appeared first on AI-Powered End-to-End Testing | Applitools.

Even the best design systems can fall short when a layout moves from Figma to code. Fonts shift, buttons resize, and colors look a little off. These small issues result in visual drift and long review cycles between design, development, and QA.

Figma design testing with Applitools Eyes closes that gap. Export Figma frames directly to Eyes to compare what you designed with what you built using the same visual testing tools your QA teams already trust.

Design-to-Code Testing in One Place

The plugin lets you send Figma frames, including individual components, pages, or entire prototypes, straight into Applitools Eyes. Each exported frame becomes a visual baseline, the same kind used in automated tests.

Developers can run their regular visual tests against these baselines to confirm that what they’ve built matches the approved design. Meanwhile, Designers can export each new version of a design to see what changed between iterations. Everyone reviews results in the same Eyes dashboard, where visual differences appear side by side.

This shared view reduces guesswork and keeps teams aligned around what “correct” actually looks like.

How to Use the Applitools Eyes Figma Plugin

Getting started takes just a couple of minutes.

1. Install the Plugin

Open the plugin from the Figma Store, or open the Figma desktop app and select Plugins → Manage Plugins → Search “Applitools Eyes” → Install.

2. Connect Your Applitools Account

Launch the plugin and enter your Applitools API key and server URL (default: https://eyes.applitools.com). These settings are saved for future use.

3. Select Figma Frames to Export

You can export a single frame, multiple frames, or a full design. The plugin automatically names them based on your Figma file, or you can customize names with dynamic parameters like {figma_filename}, {figma_page}, or {figma_frame}.

4. Adjust Settings

Optional configurations include:

• Match level: strict, dynamic, layout, ignore colors, exact, or none
• Contrast level: accessibility comparison thresholds
• Auto-accept baselines: mark first exports as approved
• And more…

5. Export and Review

Lastly, click Export to Eyes to send your selections to Applitools. Frames appear in the Eyes dashboard under the “Figma” environment. Designers and Devs can view differences directly and decide whether to accept or reject them.

Three Use Cases for QA Teams

1. Design-to-Implementation Validation

Once designs are uploaded, developers can link automated tests to the same baseline using the “baseline environment name” provided by the plugin. When they run their tests, Eyes compares the live UI against the design reference.

Result: Teams catch spacing, text, or layout differences before they reach production.

2. Design-to-Design Version Comparison

Designers often revisit earlier layouts or explore small variations. Exporting both versions to Eyes highlights the exact visual differences, making it easy to review and choose the preferred version.

Result: Faster review cycles and fewer overlooked design changes.

3. Shared Visual Baselines for Collaboration

Designers, developers, and QA teams can all access the same Eyes dashboard. Instead of passing screenshots or notes, they can comment on the same visual checkpoints.

Result: Clearer handoffs and fewer miscommunications between design and engineering.

Why Visual Testing from Design to Code Matters

Designs are often reviewed visually, while code is tested functionally. However, the Figma plugin connects these two disciplines by giving both teams a consistent, visual source of truth.

For designers, it’s a way to confirm that their layouts are faithfully implemented without manually comparing screenshots. The plugin provides a reference that removes ambiguity about spacing, colors, or typography for developers. For QA teams, it introduces an additional layer of confidence that each release matches approved specifications.

This integration fits naturally into existing workflows: designs are exported once, developers test as usual, and visual checks happen automatically. What was once a manual review step becomes part of the team’s regular quality process.

Try Design-to-Code Testing for Yourself

The Applitools Eyes Figma Plugin brings visual testing into the design process, helping teams maintain consistency from mockup to release. It’s a straightforward way for design and development to share one accurate reference for how an interface should look in order to reduce manual review and give everyone confidence that what’s shipped matches what was designed.

Install the Applitools Eyes Figma Plugin and start validating your designs before code ships.

The post Validate Your Figma Designs Before Code Ships with the Applitools Eyes Plugin appeared first on AI-Powered End-to-End Testing | Applitools.

The new Applitools Eyes 10.22 release brings Visual AI testing directly to the tools teams already use to design and develop digital experiences. This update strengthens how teams build, validate, and release with three major enhancements:

• Scale quality without slowing down delivery using the new Storybook Addon.
• Align development and design with the new Figma Plugin, bridging intent and implementation.
• Improve traceability and accountability with smarter Dashboard Optimizations for QA and leadership.

Together, these updates make visual testing faster, sharper, and more connected across the product pipeline, helping teams fully embrace shift-left testing and collaborate around a shared baseline for visual quality.

Scale Quality Without Slowing Down Delivery: Storybook Addon

Test Where You Build with the Storybook Addon

The new Storybook Addon for Applitools Eyes brings storybook visual testing directly into the development workflow. Developers can now validate UI components where they build them—no CI/CD wait times, no switching between tools.

Core Capabilities

• Run and review visual tests directly inside your component workspace.
• Approve or reject diffs inline and validate changes locally before merging.
• Leverage higher concurrency for faster feedback.
• Catch visual issues early and prevent CI failures that slow releases.

Use Case Example:
A frontend developer refactoring a shared button component runs Eyes tests directly in Storybook to verify that the update didn’t alter its appearance across the design system. By catching issues immediately, they avoid regressions on the main branch and prevent unnecessary rework later in the release cycle.

The Applitools Eyes Storybook Addon allows teams to scale quality by expanding coverage while maintaining release velocity. By embedding visual validation where developers work, organizations can expand test coverage and reduce release timelines without compromising accuracy.

See the newest features in action during the Platform Pulse webinar, coming October 22.

Align Development and Design: Figma Plugin

Bridge Design & Code with the Figma Plugin

The new Applitools Figma Plugin connects design intent with implementation through seamless Figma design testing and design-to-code comparison. Designers and developers can now validate visual consistency earlier—and with far less manual effort.

What You Can Do

• Export Figma frames directly into Eyes for automated design-to-code validation.
• Compare design-to-design versions to manage iteration cycles.
• Maintain shared baselines so designers and developers work from the same source of truth.
• Designers can validate implementations without writing code, while developers see exactly what “done” looks like.

Use Case Example:
A designer exports a component from Figma and compares it with the implemented version in Eyes to confirm that spacing, colors, and typography match the original design. Any differences appear immediately, allowing the designer and developer to resolve them early instead of during QA or after release.

This plugin bridges design and development, reducing handoff friction and review cycles. Teams gain a single source of truth for UI quality and deliver products that match design intent from concept to code.

Improve Traceability and Accountability: Dashboard Optimizations

Context-Rich Results with Dashboard Optimizations

Eyes 10.22 introduces dashboard enhancements that bring clarity and accountability to every test result. These updates help QA engineers, SDETs, and technical leaders focus on what matters most.

Key Highlights

• Commit SHA and branch info appear directly in batch details for instant traceability.
• “Required Attention First” sorting automatically surfaces unresolved and failed tests.
• Auto-grouping mirrors your Storybook structure, making results easier to navigate.
• Streamlined triage reduces noise from passed tests and accelerates review.

Use Case Example:
A QA engineer reviewing test results spots a visual regression and uses the Eyes dashboard to trace it back to the specific commit that introduced the change. With commit and branch details in context, the engineer can alert the right developer and close the feedback loop quickly.

These context-rich results strengthen accountability and compliance across teams. Organizations gain the visibility they need for auditability—particularly valuable for industries with governance or regulatory requirements.

Explore all the updates and improvements in the Eyes 10.22 Release Notes.

Broader Strategic Impact

Eyes 10.22 delivers improvements that go beyond new capabilities. Together, these updates create a foundation for stronger collaboration and faster releases across the organization:

• Align Development & Design Around a Single Source of Truth – With the Storybook addon and Figma plugin, teams collaborate around shared visual baselines.
• Scale Quality Without Slowing Delivery – Native testing inside development tools ensures visual coverage grows with velocity.
• Improve Traceability & Accountability – Git-linked context and prioritized review queues make it easier to understand, resolve, and communicate changes.
• Drive Shift-Left Adoption Across the Organization – With validation embedded where work happens, teams can catch issues earlier and release with confidence.

Quality That Scales: Visual AI for Every Team

With Applitools Eyes 10.22, teams can test where they build—bringing Visual AI testing directly into their design and development workflows. By embedding validation inside Storybook, Figma, and the Eyes dashboard, organizations can scale software quality without adding maintenance or slowing delivery. Developers, designers, and QA now share one intelligent workflow powered by Visual AI—delivering expanded test coverage, faster feedback, and less maintenance across every stage of the testing lifecycle. Learn more about Applitools Eyes.

The post Test Where You Build with Eyes 10.22: Visual AI for Storybook & Figma appeared first on AI-Powered End-to-End Testing | Applitools.

Test automation is essential but often time-consuming. Writing and maintaining tests, generating reliable data, switching tools for API calls, and keeping everything aligned across environments can slow down even the best teams.

The latest updates to Applitools Autonomous, part of the broader Applitools Intelligent Testing Platform, introduce features that significantly reduce this overhead. From natural language test authoring to integrated API testing and deterministic execution, these additions help teams move faster with fewer manual steps. Alongside ongoing improvements to Applitools Eyes, the platform continues to evolve to support modern testing workflows at scale.

New Applitools Autonomous Highlights at a Glance:

• Natural language test creation powered by LLMs
• On-the-fly test data generation
• Enhanced API testing with visual builder
• Deterministic test execution (no LLMs at runtime)
• Upcoming support for mobile apps, IDE integration, and Storybook workflows

Natural Language Test Creation, Powered by LLMs

Instead of writing test steps manually or wrestling with locators, you can now describe your intent in plain English. Applitools Autonomous converts your input into executable test steps.

Autonomous interprets the instruction and adapts to your application’s context. Tests can be created by typing, recording interactions, or letting the system generate steps automatically. This approach makes test authoring more accessible, easier to maintain, and more readable across teams.

On-the-Fly Test Data Generation in Context

Need a specific persona, value range, or edge case? Autonomous now includes built-in test data generation. No external tools required.

Just describe what you need, a French fashion designer or a prime number over 1,000, and the platform generates valid, realistic data at runtime. Datasets are generated ahead of time, so test execution remains fast and predictable.

Enhanced API Testing in the Same Flow

You can now send and validate API requests directly within your test flow, using a Postman-style interface.

Author steps in several ways:

• Describe them in plain English
• Use raw HTTP or cURL
• Use the interactive UI builder

Once executed, responses can be inspected, variables extracted, and values asserted. UI, API, and visual checks all operate in a single environment—no tool switching needed.

Deterministic Execution Model for Reliable AI-Powered Tests

A standout feature of this release is the deterministic execution engine behind every test.

“You don’t need to be a prompt engineer or even a developer to scale automation. But when your test runs, it executes with the speed and reliability of code.”
— Adam Carmi, CTO and Co-founder of Applitools

Unlike some platforms that rely on live LLMs during execution—an approach that can be slow or unpredictable—Applitools separates test creation from test execution.

• LLMs assist during authoring and data generation.
• Test runs are powered by a proprietary deterministic model that ensures speed, stability, and consistent behavior.

This offers the flexibility of AI and the dependability of code, without trade-offs.

What’s Coming Next

Applitools continues to invest in both Autonomous and Eyes, with upcoming features focused on deepening cross-functional collaboration, improving performance, and expanding platform coverage.

For Applitools Autonomous:

• Native mobile app testing: Author and execute tests across devices and operating systems.
• Autonomous MCP server: Translate high-level test cases or BDD scenarios into full test flows.

For Applitools Eyes:

• Eyes MCP server: Move Visual AI directly into your workflow. Maintain, review, and run tests directly from your preferred IDE.
• Visual testing in Storybook: Approve changes directly where components are built.
• Performance improvements for component tests: Shorter pipelines and faster feedback loops.
• Figma collaboration enhancements: Sync designs and visual testing for consistent results.

Where Things Stand Now

Whether you’re building automation for the first time or looking to reduce the overhead of test maintenance, this release meets teams where they are. With natural language authoring, integrated data and API support, and a deterministic execution engine, Applitools helps teams reduce manual effort and work more confidently.

If you’re already using Applitools, now’s a great time to explore the latest features. If you’re just getting started, we invite you to see what’s possible with a free trial for you and your team.

The post Applitools Autonomous and Eyes: New AI Features, Better Execution, and What’s Next appeared first on AI-Powered End-to-End Testing | Applitools.

Building and maintaining automated tests has always been a challenge, especially when it comes to speed, coverage, and collaboration across technical and non-technical roles.

The release of Autonomous 2.2 helps teams reduce the time and effort needed to build and maintain reliable end-to-end tests. It combines LLM-generated test steps, automatic test data generation, built-in API validation, and visual comparisons across environments so that teams can find bugs earlier and release with more confidence.

API Step Builder: Visual API Testing, No Context Switching

Applitools Autonomous has always supported API testing, but with Autonomous 2.2, creating API tests is easier and more accessible than ever.

The new API Step Builder lets you build, run, debug, and update API calls with the UI, directly in your workflow—no code or external tools required.

• Paste in raw cURL or HTTP
• Translate into readable test steps
• Add headers, cookies, auth, body, and parameters visually
• Chain responses into UI steps via variables

Supported Features:

• Full HTTP method support: GET, POST, PUT, PATCH, DELETE, etc.
• Built-in request fields for headers, cookies, authorization, body, and URL params
• Dynamic variables: Ex. use {response.body.token} or {response.body.name} like variables in downstream steps
• Support for raw cURL or HTTP input with automatic translation to English-readable steps

Whether you’re preparing state, validating backend responses, or asserting API behavior, you can now do it all in one place—with a clean, intuitive UI that works just like the rest of Autonomous.

LLM Generated Test Steps: From Business Logic to Automation in Seconds

Write test steps the way you think—in plain English. With LLM Generated Test Steps, you can simply describe your business logic (e.g., “Select Ohio from the state dropdown menu”) and Autonomous will convert it into executable steps.

Let’s say you’re testing a job application page. Instead of clicking through each form field manually, you simply type:

Submit the form as an obscure Tolkien character

Autonomous analyzes the rendered page in real-time, understands the structure and semantics, and breaks down that one line into multiple actionable steps, such as:

• Typing the name and email address
• Selecting an appropriate option from dropdown menus
• Clicking the “Submit” button

The result? A complete, readable, and editable test created in seconds—no coding, no selectors, no extra UI to learn.

Perfect for:

• Speeding up test creation during sprints
• Empowering manual testers to create automated tests
• Eliminating writer’s block in test authoring

Join our Platform Pulse webinar on July 24 to see Autonomous 2.2 in action

Test Data Generation: Realistic Input with Zero Effort

Test coverage is only as good as the data behind it. Autonomous 2.2 introduces natural language–based test data generation that instantly produces realistic data at runtime, helping with edge case coverage and state variability.

Just say what you need:

Submit the form using random data for 90’s TV dads

Autonomous parses your request, uses LLMs to create diverse, high-quality data, and injects it directly into your test. Each run can generate fresh values—so no two executions are the same.

Cross-Environment Visual Comparisons: One Baseline, Many Environments

Ensuring parity across environments—staging vs. prod, dev vs. QA—or locales is critical. Parameterized visual baselines allow test engineers to define and run tests using variable data while still maintaining deterministic baseline comparison.

For example, you can run the same test in different plans—one with {env}=integration, another with {env}=staging—and compare visual differences across each environment without changing a single line of test logic.

• Parameters and datasets handled automatically
• Custom flows and URL List tests supported
• Visual baselines set per unique parameter set
• Abort prevention and value prompts to ensure test validity

Parameter handling is enforced at both test and plan levels—tests abort cleanly if required values are missing, ensuring reliable execution outcomes.

Tunneling Enhancements: Instant Feedback, Zero Guesswork

Tunneling just got easier and more reliable. With tunneling enhancements, Applitools Autonomous now includes improved diagnostics, real-time tunnel status, actionable error codes, and visibility for team admins—not just account owners

Users now get real-time diagnostics:

• Is the tunnel connected?
• Which hosts is it routing?
• Are there errors, and what do they mean?

Admins now get access to error codes, logs, host mapping, and verification checks—all without reaching out to support.

The Bottom Line

Applitools Autonomous 2.2 turns plain English into production-grade automation. Whether you’re testing UI, APIs, internal systems, or staging vs. production, it removes friction that slows QA teams down.

Explore the new features in the product documentation or dive into Autonomous with a free trial.

Quick Answers

The post Applitools Autonomous 2.2: AI-Driven Testing That Thinks Like You appeared first on AI-Powered End-to-End Testing | Applitools.

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.

Applitools Eyes is a visual AI-powered testing tool that helps address these UI consistency challenges. It uses advanced AI-driven image comparison 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.

Applitools Playwright SDK introduces several improvements designed to streamline the process of setting up and running visual tests, making the experience more efficient and user-friendly.

In this blog, we will discuss when it is appropriate to use visual testing with Playwright and which cases will be suitable for using Applitools.

Overview of Visual Testing

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.

How Visual Testing Differs from Functional Testing

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.

Let’s see some major differences between visual and functional testing.

Before delving into how we can perform visual testing using Playwright and Applitools, let’s review some of the new improvements that Applitools has introduced .

What’s New In Applitools Playwright SDK?

The Applitools Playwright SDK is a library that integrates Applitools’ visual testing capabilities with the Playwright automation framework.

Let’s explore the improvements done by Applitools to streamline the process of setting up and running visual tests, making the experience more efficient and user-friendly. 

Here’s a detailed breakdown of what’s new in the updated SDK:

Test Fixtures:

• Test fixtures Centralize and reuse setup code across multiple tests, making the setup for visual tests more consistent and reducing redundant configuration.
• This feature is particularly valuable when running tests on multiple pages or scenarios, as it simplifies the initialization of Applitools Eyes in each test.

CLI Onboarding:

• The Command-Line Interface (CLI) simplifies the initial setup process by automating configuration steps, helping users quickly integrate Applitools Eyes with Playwright. 
• This is especially helpful for new users, reducing the complexity of the setup and enabling faster onboarding into visual test creation.

Config Object Setup:

• 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). 
• This feature eliminates manual setup, reducing the risk of errors, ensuring accurate configuration from the outset, and saving developers valuable time.

Custom HTML Reporter:

• The custom HTML reporter enhances Playwright’s default test report by integrating visual test results from Applitools Eyes. 
• This allows developers to view a direct comparison between the baseline image and the current test screenshot, helping identify visual regressions more effectively. 
• By adding visual results to the standard Playwright report, it simplifies the review process, offering a comprehensive overview of the test outcomes.

Before we deep dive into how Applitools helps in visual testing, let’s first see how we can perform visual testing using Playwright.

Visual Testing Using Playwright

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. 

Here’s how visual testing works in Playwright:

1. First Run: Playwright captures and saves a screenshot of the page or specific UI elements. This is known as the base image.
2. Subsequent Runs: In the next run, Playwright takes a new screenshot and compares it against the base image.
   • If there are no differences, the test passes.
   • If differences exist, the test fails, flagging the areas where changes occurred.

Prerequisites

Ensure the following tools are installed:

Node.js: Download and install from Node.js.

Visual Studio Code (Optional): Recommended IDE for coding.

Install Playwright:

npm i @playwright/test

Write the Simple Visual Regression Test Using Playwright
Create a new JavaScript file in your test folder, e.g., demo.spec.js.

Use the page.screenshot() method to capture the screenshot and the expect.toMatchSnapshot() assertion from the @playwright/test module to compare images.

const { test, expect } = require('@playwright/test'); 
test('Visual Regression Test Example', async ({ page }) => { 
   // Navigate to the website 
   await page.goto('https://playwright.dev'); 
   // Capture a screenshot of the page 
   const screenshot = await page.screenshot(); 
   expect(screenshot).toMatchSnapshot(); 
}); 

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.

When we execute the same test case again, it will pass.

Visual Regression Test with maxDiffPixels option 

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 ‘maxDiffPixels option,’ 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.

const { test, expect } = require('@playwright/test');
test('Visual Regression Test Example', async ({ page }) => {
  // Navigate to the website
  await page.goto('https://playwright.dev');
  // Capture a screenshot of the page
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchSnapshot({ maxDiffPixels: 100 });
}); 

const { test, expect } = require('@playwright/test');
test('Visual Regression Test Example', async ({ page }) => {
  // Navigate to the website
  await page.goto('https://playwright.dev');
  // Capture a screenshot of the page
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchSnapshot({ threshold:0.5} );
}); 

Visual Regression Test with Threshold option

Passing ‘threshold’ 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.

const { test, expect } = require('@playwright/test');
test('Visual Regression Test Example', async ({ page }) => {
  // Navigate to the website
  await page.goto('https://playwright.dev');
  // Capture a screenshot of the page
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchSnapshot({ threshold:0.5} );
}); 

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.

Visual Testing using Applitools Eyes and Playwright SDK

Visual testing is a crucial aspect of modern software quality assurance. It ensures that a web application’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.

Below are the steps to set up Applitools Eyes and Playwright SDK.

Install Playwright

npm init playwright@latest

Install Applitools Eyes SDK 

npm install -D @applitools/eyes-playwright

Add the below line in .spec.js file 

To configure your project for Applitools Eyes, we have to add the below line.

import { test } from '@applitools/eyes-playwright/fixture';

In the next section you will see examples to explain how we can use SDK with Playwright tests. 

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,  and the method used in Applitools, to capture and validate a checkpoint in your application’s UI.

Below is code that integrates Applitools Eyes with Playwright to perform a visual test.

import { test } from '@applitools/eyes-playwright/fixture';
test('My first visual test Using Applitools with matchLevel: Dynamic', async ({ page, eyes }) => {
await page.goto('https://app14743.cloudwayssites.com/helloworld/');
  // Visual check
  await eyes.check('Landing Page', {
    fully: true,
    matchLevel: 'Dynamic',
  });
});

In the above code we mainly use two things: one is the method eyes. check() and two options: {fully: true}, and {matchLevel: ‘Dynamic’}

eyes.check(): Performs a visual snapshot of the page or a specific element and compares it with the baseline image stored in Applitools.

Options:

• fully: true:
  • Captures the entire page, including scrollable sections.
  • Ensures that all content on the page is included in the visual test.
• matchLevel: ‘Dynamic’:
  • A matching algorithm that focuses on the content while ignoring dynamic changes, such as text or layout differences.
  • Useful for pages with frequently changing content, like user-generated text or dynamic data.

Below are the options that we can pass in our test case. These options provide flexibility and precision, enabling robust visual testing tailored to different scenarios and challenges.

This table summarizes each configuration, making it easier to understand their purposes.

Examples with different matchLevel

MatchLevel determines how the captured visual output is compared with the baseline image.Let’s see the examples with different options.

1. Visual Testing with matchLevel: Strict

This ensures pixel-perfect comparison between the baseline and current screenshot, highlighting any visual difference, no matter how small.

test('My first visual test Using Applitools with matchLevel: Strict', async ({ page, eyes }) => {
  await page.goto('https://app14743.cloudwayssites.com/helloworld/');
  await eyes.check('Landing Page', {
    fully: true,
    matchLevel: 'Strict',
  });
});

• Purpose: Validates the entire page with Strict match level.
• Strict Match Level: Identifies even small differences, such as minor pixel or layout changes, ensuring high precision in visual validation.

2. Visual Testing with matchLevel: Dynamic

Focuses on content consistency by ignoring minor layout differences, such as text movement, while ensuring key visual elements remain unchanged.

In the below example you can see even if the text color is changed after clicking on link ‘?diff2’ 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.

test('My first visual test Using Applitools with matchLevel: Dynamic', async ({ page, eyes }) => {
 await page.goto('https://app14743.cloudwayssites.com/helloworld/');
 await page.getByRole('link', { name: '?diff2' }).click();
 await eyes.check('Homepage', {
   fully: true,
   matchLevel: 'Dynamic',
 });
});

• Purpose: Validates the entire page with Dynamic match level.
• Dynamic Match Level: Ignores minor content/layout differences (e.g., text changes, animations) and focuses on high-level structural comparisons.
• fully: true: Captures a screenshot of the full page, not just the visible viewport.

3. Visual Testing for a Specific Region/Component

Limits visual comparisons to a particular area or component of the application.

test('My first visual test Using Applitools with particular region/Component', async ({ page, eyes }) => {
  await page.goto('https://app14743.cloudwayssites.com/helloworld/');
  const component = page.locator('.fancy.title.primary');
  await eyes.check('My Component', {
    region: component,
  });
});

• Purpose: Tests only a specific component or region on the page.
• region: Focuses the validation on the area defined by the component locator (.fancy.title.primary), instead of the entire page.

4. Visual Testing with Ignored Regions

Excludes specific areas from comparison, preventing false positives caused by expected dynamic changes in those regions.

test('Visual test Using Applitools with ignoring the region', async ({ page, eyes }) => {
  await page.goto('https://app14743.cloudwayssites.com/helloworld/');
  const dynamicContent = page.locator('.fancy.title.primary');
  await eyes.check('Homepage', {
    fully: true,
    matchLevel: 'Strict',
    ignoreRegions: [dynamicContent],
  });
});

• Purpose: Tests the page while ignoring specific dynamic regions.
• ignoreRegions: Excludes certain areas from the visual validation (e.g., areas with dynamic content like dates, ads, or animations).
• fully: true: Captures the entire page for validation.

About dynamic match level

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.

Type of dynamic match level

Dynamic match levels allow for flexible verification of text by matching it against predefined or custom patterns. The default types include:

• TextField: Text inside input fields.
• Number: Numeric values like ZIP codes or phone numbers.
• Date: Validates text as a date in proper format.
• Link: Hyperlinks or URLs.
• Email: Checks for a valid email address format.
• Currency: Recognizes monetary values.

These types ensure accurate validation by focusing on the format rather than the content changes, such as dynamic updates to dates or numbers.

Custom dynamic pattern

To create a custom dynamic pattern we have to follow below steps in Applitools dashboard 

Here are the steps to create a custom dynamic pattern:

1. Open the Settings Window: In the Page Navigator, select Apps & Tests.

In the list of applications on the left, hover over an application and click > Settings.

2. Add a Custom Type: Click Add custom type.

3. Define the Custom Pattern:

Enter a name and a Regex pattern.

4. Save the Custom Pattern:

In the below screenshot you can see we have set a custom pattern for Zip Code. Once the custom pattern is created, its name can be used in the code to reference the pattern.

Click Add will save the entered pattern. 

5. Apply the Settings:

Once all required patterns have been selected, click Apply settings.

Applitools Dashboard: Execute visual testing using the Applitools Playwright SDK

Applitools’ Dashboard is a powerful interface designed to manage and analyze test results efficiently, especially for visual testing and monitoring user interfaces.

Below are the steps that we normally have in the Applitools Dashboard when we execute any visual test case.

Precondition : Run the below command to export the key 

export APPLITOOLS_API_KEY='your_api_key_here'

Once the key is exported, the next step is to execute the test cases using the below command.

npx playwright test --ui tests/visual.spec.js

First Run: Playwright captures and saves a screenshot of the page or specific UI elements. This is known as the base image.

Subsequent Runs: In the next run, Playwright takes a new screenshot and compares it against the base image.

• If there are no differences, the test passes.
• If differences exist, the test fails, flagging the areas where changes occurred.

In the below screenshot in the Applitools Dashboard, you can see all the above four test cases are executed successfully.

Applitools Playwright SDK with Example in Detail

Let’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 ’Hello World’ part is tested. In case there is any change in this component, the test case will fail.

In the below example we have updated the component with the text ‘Happy World’ 

test('Visual test Using Applitools with Updating Component UI', async ({ page, eyes }) => {
await page.goto('https://app14743.cloudwayssites.com/helloworld/');
await page.getByRole('link', { name: '?diff2' }).click();
await eyes.check('Homepage', {
  fully: true,
  matchLevel: 'Strict',
 });
});

When we execute the above code, it will not execute successfully because the UI of the component is changed after clicking on the link ‘diff2.’

To fix the above problem, we have marked it resolved from the Applitools Dashboard. Once we accept the change, it becomes the base image.

Now when we execute the test case again, it gets executed successfully with the updated UI.

When Playwright’s Visual Testing Features Are Useful 

Playwright’s built-in visual testing features are well-suited for scenarios where:

Simple Visual Comparisons:

• Comparing entire pages or specific UI components with baseline images for detecting pixel-level differences.
• Example: Ensuring the homepage layout hasn’t shifted after a CSS update.

Static UIs:

• Testing applications with minimal dynamic or animated content, as these are less prone to false positives caused by animations or transient elements.

Fast Feedback:

• When quick pixel-by-pixel comparisons in CI pipelines are sufficient without advanced AI-powered analysis.
• Example: Smoke testing in a fast-moving development cycle.

Budget-Friendly:

• Playwright’s native screenshot and comparison capabilities don’t require additional tools or subscriptions.

When Playwright’s Visual Testing May Fall Short

Dynamic Content:

• UIs with dynamic or frequently changing elements (e.g., time, randomized content, or animations) can cause false positives due to exact pixel mismatches.
• Example: A dashboard with live-updating graphs.

Complex Visual Changes:

• Playwright’s threshold-based comparison may miss subtle or semantic changes that don’t exceed the defined pixel difference threshold.
• Example: Slightly altered typography or colour changes.

Ignored Regions:

• While Playwright allows element-specific testing, ignoring specific dynamic regions within a larger page requires custom logic.
• Example: Excluding advertisements or live widgets from visual comparison.

How Applitools Handles Situations Better

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. 

Dynamic Content Handling:

• Match Levels: Applitools’ AI-powered matchLevel options (e.g., Strict, Layout, Content) allow intelligent comparison by focusing on structure and ignoring irrelevant pixel differences.
• Example: Testing a real-time dashboard with dynamic data but a consistent layout.

Ignored Regions:

• Applitools allows you to define ignored regions to exclude specific parts of a page from comparison (e.g., ads or timestamps).
• Example: Excluding a “current time” widget from visual testing.

Advanced Visual Validation:

• Features like dynamic regions and AI-based semantic analysis help detect visual regressions that go beyond pixel-by-pixel differences.
• Example: Identifying a button misalignment that might not be detected by Playwright’s threshold settings.

Visual Testing Across Components:

• Allows you to target specific regions or components for testing without manually cropping or capturing screenshots.
• Example: Testing the styling of a navigation bar or modal dialog.

Conclusion

Playwright’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 .

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.

About the Author

Kailash Pathak (Applitools Ambassador | Cypress Ambassador)

Senior QA Lead Manager with over 15 years of experience in QA engineering and automation. Kailash holds certifications including PMI-ACP®, ITIL®, PRINCE2 Practitioner®, ISTQB, and AWS (CFL).

As an active speaker and workshop conductor, Kailash shares his expertise through blogs on platforms like Medium, Dzone, Talent500, The Test Tribe, and his personal site https://qaautomationlabs.com/

The post Leveraging Applitools for Seamless Visual Testing in Playwright appeared first on AI-Powered End-to-End Testing | Applitools.

Testing workflows just got an upgrade! Autonomous 2.1 simplifies end-to-end testing by offering faster test creation and maintenance while expanding mobile support. This release focuses on improving the efficiency and flexibility of your testing processes with features designed to simplify workflows, enhance modularity, and provide greater control.

Let’s explore the highlights of this release and how they can benefit your end-to-end testing. 

Key Features in Autonomous 2.1

Modular Test Design

Create a test once and reuse it across multiple workflows, eliminating the need to duplicate steps. This not only saves time but also ensures consistency and reduces the risk of errors. By enhancing reusability, this feature significantly accelerates test creation and simplifies maintenance, particularly for workflows shared across teams.

Use case example: Faster test authoring in Banking

For financial institutions, reusing a shared “User Login” test across workflows like “Fund Transfer,” “Loan Application,” and “Account Overview” simplifies test maintenance and ensures consistency. Autonomous 2.1 empowers teams to avoid recreating login steps for each flow, saving time and enhancing reliability.

Simplify Test Maintenance

Easily modularize your testing process by extracting repeated steps into standalone tests. This feature simplifies maintenance and improves by allowing your team to maintain one test and apply those updates to wherever you may be reusing extracted test flows. With fewer errors and a more streamlined test design, your team can focus on delivering quality faster.

Learn how to build no-code, autonomous end-to-end tests and explore some of these new features in our upcoming webinar, Building No-Code Autonomous End-End Tests

Record Assertions

Record assertions directly within your tests to ensure critical content is displayed accurately, without requiring manual scripting. This capability is especially valuable for localization efforts, enabling teams to validate translated content on multilingual websites. By reducing setup complexity, testers can achieve faster and more accurate validations.

Use case example: Maintain compliance with localization

On multilingual websites, recording assertions ensures translated content (e.g., terms and conditions, error messages) is displayed correctly. This is crucial for maintaining legal compliance and providing a seamless user experience in different languages.

Make Responsive Testing Easier

Ensure cross-device compatibility by configuring display viewport sizes—such as mobile, tablet, or even a custom size—directly in your custom flow tests. This ensures accurate validations across devices, making it ideal for e-commerce businesses and other industries prioritizing multi-device compatibility. Streamlining these configurations reduces setup time and ensures your users have a seamless experience across platforms and devices.

Pro tip: While Applitools Ultrafast Grid lets you run the same test across multiple browsers and devices, we recommend creating separate tests for specific screen sizes when unique screen elements, like a hamburger menu, appear only on certain viewports.

Flexibility in Test Configuration

We’ve decoupled the application and plan from individual tests, offering greater flexibility and a more intuitive workflow for configuring tests independently. You can now run tests ad-hoc—even trigger test execution via the REST API—and configure run properties like parameters, browsers, devices, and concurrency limits. This change not only enhances the user experience but also lays the groundwork for advanced capabilities in future releases, ensuring a scalable and adaptable testing environment.

And There’s More…

Autonomous 2.1 lets you navigate more intuitively with an updated interface reflecting application hierarchy and copy tests across applications while preserving reusable flows. For added security, sensitive test data like passwords is now encrypted and masked, and TOTP support for 2FA enables secure workflows with Time-Based One-Time Passwords.

Try Autonomous 2.1 for Free With Your Team

With Autonomous 2.1, you’ll experience faster test creation and simplified maintenance, particularly for workflows reused across multiple teams or applications. This release represents a significant step toward more efficient, scalable, and user-friendly testing processes.

Try out Autonomous 2.1 for free with your team and see how it can revolutionize your testing efforts.

The post Introducing Autonomous 2.1: Speed Up Testing with Modular Test Design appeared first on AI-Powered End-to-End Testing | Applitools.

Efficient, reliable visual testing is essential for teams working with Playwright. Applitools’ updated Playwright SDK simplifies integration, reduces setup time, and offers more powerful reporting. Let’s check out the new features and how they streamline your testing.

What’s New in Applitools Playwright SDK?

The updated SDK introduces improvements that let you set up and run visual tests more efficiently:

• Test Fixtures: Minimizes repetitive setup code
• CLI Onboarding: A new CLI that speeds up initial setup, and an example Visual AI test
• Config Object Setup: Auto-inserts Eyes configuration in playwright.config.js/ts
• Custom HTML Reporter: Extends Playwright’s report to include Eyes checkpoint images

Join the Playwright Visual Testing Best Practices webinar led by software architect and international speaker Cory House. Discover best practices for visual testing in Playwright to enhance UI consistency, swiftly resolve issues, and ensure seamless user experiences across platforms.

Using Test Fixtures for Simplified Visual Testing

Test fixtures streamline visual testing by automating many of the functions necessary for setup. The SDK now automatically handles Eyes.open() and Eyes.close() functions as well as the collection of all test results. With these automatic integrations, you can focus directly on creating test cases without the need for redundant code.

Enhanced Reporting with the Custom HTML Reporter

The HTML reporter is designed to make analyzing test results more intuitive. It integrates Eyes checkpoint images directly into Playwright’s report. You can approve or reject baselines all within the report without having to navigate to the Eyes dashboard. This enhanced reporting setup provides clear visual insights that make it easy to understand test outcomes without extra steps.

Advanced API Usage for Custom Testing

The SDK also supports advanced API usage for complex testing needs. This lets you create custom configurations and expand test cases for specific UI components. As your project grows, this flexibility enables you to scale visual tests seamlessly and ensure thorough visual validation across different scenarios.

Backward Compatibility and Migration Tips

The SDK also maintains backward compatibility, making it easy to transition from the previous SDK while retaining existing configurations. You are welcome to start running a few tests in both SDKs to verify functionality and gradually implement the new SDK on simpler tests before migrating critical ones.

Getting Started with the Playwright SDK

Getting started with the SDK is straightforward. First, install the SDK with npm install @applitools/eyes-playwright. Next, use the CLI tool to enter your API key with npx eyes-playwright setup, automatically updating the environment. The SDK sets up configurations and imports for you, even adding a Visual AI demo test in Applitools Eyes that you can execute right away.

The latest Applitools Playwright SDK provides a faster, simpler, and more insightful visual testing experience. Download the SDK, try the demo test, and see firsthand how it can enhance your Playwright testing workflow.

The post How to Use the Updated Applitools’ Playwright SDK for Efficient Visual Testing appeared first on AI-Powered End-to-End Testing | Applitools.

Nowadays companies are investing a lot of money into QA efforts to increase the quality of the software products being released. However, the traditional QA method is not only time-consuming and ineffective but also often disappointing in its results. This triggers inefficiency, additional expenses, and ultimately, higher risk for delivering the end product with visual or functional issues. The pressure to release frequently and stay ahead of the competition can lead to insufficient testing resulting in bugs and other issues that negatively affect the user experience.

Today’s users require software that has functional capabilities, better graphics and is easier to use. To meet these expectations, a lot of testing needs to be done for the application’s visuals and user interface. This is because as the software development life cycle progresses the testing teams are put under pressure as development teams release products faster.

In this blog, we will explore the challenges of testing modern applications and how these challenges can be addressed by utilizing the AI-powered testing tool, Applitools Autonomous.

You will see detailed examples of how Applitools Autnonmous addresses different types of testing like functional, visual, and API testing.

Challenges In Testing Modern Applications

Below are some of the challenges we often face while testing modern applications.

Too Many Scenarios

Modern applications are highly complex, with hundreds of end-to-end scenarios that need to be tested across a vast array of screens, devices, and browsers. 

Too Many Screens & Devices

In modern applications, users access digital content on a wide variety of devices, browsers, and screen sizes, each with its own unique characteristics. Manually verifying that an application looks and functions correctly across all these environments is nearly impossible without automated assistance. Traditional testing methods cannot scale to meet this demand, often resulting in inconsistent user experiences and missed visual bugs.

Constant UI Changes

In dynamic development environments, user interfaces (UIs) are constantly evolving. Even minor changes to the UI can require updates to test scripts. This constant maintenance burden can slow down the development process and lead to outdated or ineffective tests.

Different Skill Sets

Teams often consist of members with varying technical skills, leading to the use of different tools and approaches to testing. This creates silos within the organization, where engineers and non-technical testers might not collaborate effectively. So far we have seen the challenges in testing modern applications.

Types of Testing Using Applitools Autonomous

Applitools Autonomous, powered by Applitools’ proven Visual AI, offers a game-changing solution that allows teams to automate and streamline testing across various dimensions. In this blog, we’ll explore the types of testing you can perform using Applitools Autonomous and how it simplifies the testing process.

Full Website Testing

One of the key features of Applitools Autonomous is its ability to conduct a Full Website Test with minimal effort. Simply by entering your website’s URL, Autonomous crawls the sitemap and automatically creates a test suite covering every web application page.

Benefits of Full Website Testing:

• Comprehensive Test Coverage: Automatically creates tests that span the entire site.
• Visual AI Validation: Screenshots are taken and compared in real time to identify visual discrepancies.
• Technical Issues Detection: Automatically detects issues like HTTP errors, timeouts, and structural changes (added/removed pages).
• Cross-Environment Consistency: Ensures your website renders consistently across all environments.

With just a URL input, Applitools Autonomous handles the heavy lifting of testing, giving teams complete coverage across all environments.

URL List Testing

If you don’t need to test your entire website, or if you want to focus on specific pages, Applitools offers URL List Testing. This allows you to upload a list of important URLs that you want to validate across different browsers and devices.

Benefits of URL List Testing:

• Custom Test Plans: Create targeted test plans for critical or specific parts of your website.
• Visual and Functional Validation: Detect visual differences, server errors, and loading failures.
• Quick Setup: Simply upload a CSV, XLS, or sitemap file to initiate the testing process.

This method gives you granular control over which parts of your web application are tested, ensuring the most important areas receive detailed attention.

Custom Flow Testing

For complex workflows, Applitools Autonomous offers Custom Flow Testing, which allows you to simulate end-user actions across your site. For example, you can test user journeys like logging in, adding items to a cart, and checking out — with every action captured step by step.

Benefits of Custom Flow Testing:

• Workflow Validation: Ensure that user flows, from login to checkout, function correctly.
• Real-Time Interaction: Record steps in an interactive browser, which are automatically converted into plain English for easy review.
• Dynamic Content Testing: Easily handle personalized content and dynamic data using Visual AI, ensuring accuracy even with fluctuating data.

Custom Flow Testing is ideal for complex, multi-step processes, such as eCommerce workflows or user registration flows.

Cross-Browser and Device Testing

Cross-browser testing can be a significant bottleneck in the development process, but Applitools Autonomous eliminates this pain point. It replicates browsers in seconds, cutting down the time required for Cross-Browser and Device Testing by up to 90%.

Benefits of Cross-Browser Testing:

• Fast Replication: Save time by reducing cross-browser testing time by up to 90%.
• Consistent Testing: Validate how your site performs across multiple browsers and devices with minimal effort.

By reducing the time spent on browser replication, teams can focus on identifying and resolving any browser-specific issues faster.

API Testing

Applitools Autonomous doesn’t just stop at visual testing—it also enables API Testing. You can initiate HTTP requests directly in your tests, manage application states, and store responses for use in later test steps.

Benefits of API Testing:

• Seamless Integration: Initiate API calls and validate responses as part of your testing workflow.
• State Management: Manage application states before or after the UI flow without complex logic.

API Testing combined with visual validation ensures that your web app’s functionality works correctly and efficiently across the board.

Example of Testing Using Applitools Autonomous

In the below section, you will see the different types of testing you can perform using Applitools Autonomous.

Full Website Testing

In full website testing, users provide the URL they want to scan and specify the test environments where they want to execute the scan. Additionally, users can set optional settings such as a maximum number of URLs and select a custom flow to run before the test. Once these steps are completed, the website is ready to be scanned.

For example, let’s look at the site https://dan.sandbox.applitools.com/e-commerce.

Steps to Create a Full Website Test

1. Navigate to Test Management
   • In the navigation bar, go to Test management > Tests.
   • Click Create a new test and then select Create a full website test.

2. Enter the URL: In the URL field, input the website homepage in the format https://www.example.com/.
   
   Alternatively, you can enter the full path to the sitemap or a sub-directory, such as https://dan.sandbox.applitools.com/e-commerce/type/books.
   
   If a sub-directory is specified, Autonomous will use the sitemap in the root directory to identify URLs within the sub-directory. If the sub-directory has its own sitemap, provide the full path to that sitemap.

3. Default Test Environments: The test will use the below environments by default, each defining a browser, operating system, and screen size. You can click on an environment to remove it from the test. After creating the test, you can add or modify environments in the test plan.
   • Chromium, Linux, 1440 x 900
   • Chromium, Linux, 360 x 780
   • Microsoft Edge, Windows, 1080 x 1920
4. Optional Settings:
   • Set the Limit: To limit the number of URLs in the initial test run, click on Optional settings and select Set a max number of URLs to include in the test, then enter the desired number of URLs.
     
     This helps the first test run quickly and get preliminary results. This setting only applies to the first run; future runs will include all URLs in the sitemap, with new URLs marked as “New” in the results.
     
     Note: If you have a trial account, note that there is a limit to the number of tests you can include in a full website test.
   • Custom Flow and Authentication: To enter basic authentication or run a custom flow before each URL opens, click on Optional settings and choose Select a custom flow to run before this test.
     
     You can select Basic authentication and enter a username and password. This adds an authentication-encoded string in each URL, ensuring the username and password are included.
5. Click the Next Button: Once the above steps are completed, your website is ready to be scanned.
   
   Once you click the Next button, Autonomous can then develop baseline data at every screen on the website. These are the initial test images which are in most cases used to identify changes in subsequent test iterations. The maximum count of baselines to be generated is obtained by multiplying the count of URLs in the test by the count of environments.
   
   You can see baseline data is created for every screen in the screenshot below.

6. Execute the Test: Once the baselines have been created, click Run Test. Autonomous will run the test to create a checkpoint for each screen and then compare the checkpoint to the baseline determining any issues and if the screen has changed.
7. Execution report: Once the execution is complete, click Review Results to view all test results on the Results page.
   
   Clicking on the Results tab on the left side lets you see the details of the Pass and Fail test cases. In the screenshot, we can see one test case failed. When we tried to find out the reason it was discovered that this test case was failing because of the 404 error screenshot attached below.
   
   This lets us automatically find technical issues, pages that were added or removed from the website, visual disparities, and unexpected alterations on any of the pages.

URL List Test

A URL list test allows users to create a list of URLs with combinations that will be used for testing. This is especially useful when you have no sitemap, want to crawl specific URLs in your domain, or need to crawl URLs of other domains too.

While setting up your URL list test you should create a file with the URL to be tested and check if all of them are properly loaded. The list should be in CSV, XLS, TXT, or a sitemap .xml file format. The sitemap .xml should only contain the URLs you are going to test—not all URLs on your site.

Steps to Create a URL List Test in Applitools Autonomous

1. Navigate to Test Management: In the navigation bar go to Test Management > Tests.
2. Create a New Test: Click on Create a new test and select the URL list from the dropdown.

3. Enter Test Details:
   • Test Name: Enter a name for the test. This will appear in the list of tests.
   • Description: (Optional) Add a description of the test.
   • Application: Select the application the test should be associated with. Every test must be linked to an application. If you have an existing full website test or another test linked to the same application, associate this test accordingly. For more details, refer to the “Applications” section in the platform documentation.
   • Plan: Choose the associated plans. Plans define the schedule, environment, and test parameters. A test can belong to multiple plans, and the list of available plans will depend on the application associated with the test. For more details, refer to the “Plans” section.

4. Run a Flow Before Each Step (Optional): If you need to perform an action (such as entering authentication credentials or closing a popup) before each step, click Select a flow to run before the screen URLs. For more details, see the “Flow to Run Before Steps” section of the documentation.
5. Import URLs: Click Import URL list to upload a comma-separated text file, CSV, or XML file with the list of URLs you want to test.
   
   Alternatively, enter a single URL and click Add URL to manually add URLs one by one.
6. Set Match Level: The default match level for all URLs is set to Strict. If you want to change the match level for a particular URL, click the area to the right of the URL and select the desired match level from the dropdown.
7. Advanced Settings: To configure additional advanced settings for the test or individual URLs, refer to the Advanced Test Settings section for further customization options.
8. Finalize and Run: Once the configuration is complete, choose one of the following actions:
   • Create (or Update): Saves the test to the associated plans without running it.
   • Create & run > Create & run test: Saves and runs the test as a single instance without executing any other tests in the plan. You will be asked to choose a plan to determine the test environments. You can view the results on the Results page, and the test will be listed as “Run without a plan.”
   • Create & run > Create test & run plan: Saves the test and executes all associated plans, including all tests within those plans. Results can be viewed on the Results or Plans pages.

Custom Flow Testing

The Autonomous Applitools Custom Flow Test is an intelligent and streamlined way to automate end-to-end testing of specific workflows on a website. This feature enables testers to design a sequence of actions or user scenarios, for instance, login, adding items to a shopping cart, and navigating to a checkout page while at the same time, every action is recorded for evaluation purposes.

Key Components of Autonomous Custom Flow Test

• Interactive Browser: Autonomous provides an interactive Chrome-based browser that allows users to manually interact with the application. Testers can perform actions like clicking buttons, filling in forms, scrolling, or navigating between pages.
  
  The interactive browser records every action in real time and automatically translates them into test steps, simplifying the test creation process.

• User Action Steps: Go to Test Management > Tests in the navigation bar. Click on Create a new test and select Custom Flow from the dropdown.
  
  
  The below screen will then open when you click on Custom flow:
  
  
  In the screenshot below, you can see the recorded steps resulting from using the interactive browser:
  
  
  Actions performed in the browser, such as clicking or typing, are captured as plain English commands. These steps can be easily added, modified, or deleted.
  
  For instance, a step might read: “Enter “standard_user” as username”, Enter “secret_sauce” as password, and  “Click on the Login button.” Autonomous also offers auto-suggestions to ensure that the commands are valid, reducing the risk of errors and speeding up the creation of test scripts.
• UI Validation Steps: Visual validation is a core feature of the Autonomous test. At key points in the workflow, Autonomous takes screenshots to validate the user interface. These visual checkpoints help ensure that there are no unexpected visual changes (known as visual diffs) between test runs.
  
  Screenshots act as baselines and provide insights into the accuracy of the UI across different devices and resolutions.
  
  In the below screenshot, you can see that after logging into the application we are visually verifying the page.
  

Use Cases of Custom Flow Testing

Let’s take the example of https://www.saucedemo.com/ where a user may perform the actions below. 

• Login into the application with Username and Password
• Click on Add to cart against the product “Sauce Labs Backpack”
• After adding the item to the cart place the order 
• Finally, verify the confirmation message

For the given use case, we have two options to write the test script:

• Manually add user actions: This involves explicitly defining each user action in the script or code.
• Record the steps: This option allows the user’s interactions to be captured automatically by recording the steps as they are performed.

Both approaches can be utilized based on the specific requirement or convenience. In the screenshot below you can see the above use case is recorded.

Debug or Modify a Test

In the screenshot below you can see we can perform various actions by clicking on any existing action. The user has clicked on an action (likely Step 7, clicking a button with a CSS selector) that reveals a dropdown menu providing options such as:

• Run next steps: Executes the remaining steps in the test from the selected point onward.
• Set as current step: Marks the selected step as the starting point for future test execution.
• Run until here: Runs the test from the beginning up to the selected step, stopping just before it.
• View execution result: Displays the outcome of the selected step, including logs or screenshots, if applicable.
• Edit step: Allows modification of the selected step, such as changing input values or actions.
• Duplicate: Creates a copy of the selected step, useful for repeating actions with minor adjustments.

Previewing Test Steps in the Interactive Browser

This approach saves time during the test construction process because it enables previewing of the test steps as one proceeds with the development of the test script in an interactive browser.

When in an interactive browser running a test there is an option where you get to see the screen as it was before each step was performed and after.

How to Preview a Test Step

Place the mouse pointer over an icon before one or several particular test steps, and you will be provided with a thumbnail of the screen. For a more detailed view of the screen, navigate to the icon on the toolbar to open the full-size picture preview.

On the top of the preview window, you can find information such as the step number, command run, and its status—pass or fail.

Use the icons behind the worksample Click on Action to see the screen before the step and Outcome to see the screen after the step. When viewing the action window the element clicked on during the step is highlighted in pink.

Running the Test from the Start

To start the test from the first step you can just press the “Run” button or “Rerun test from start” which is above the list of the steps.

Once started, Autonomous will go through each step one by one while taking a screenshot of the application at every step. If the browser is not already connected, then the Run will also create the connection before the test is carried out. This way it can be ensured all the steps are performed correctly and also shows the status of a particular step.

• icon indicates that the step was successful
• icon shows that Autonomous couldn’t process the step, and the test will stop at that point without continuing further

During the test, you can pause or stop it at any time by clicking the Pause or Stop buttons.

API Test

Applitools Autonomous is not limited to functional and visual testing. It can also be used for API automation. Supporting all CRUD operations, it allows you to execute standard HTTP actions like GET, POST, PUT, and DELETE in your tests. This adds versatility to its API testing capabilities.

Autonomous also enables you to validate test operations that cannot be confirmed via the UI, such as verifying form submissions through backend records. Additionally, it ensures backend APIs expose the correct endpoints, function as expected, and return proper responses, headers, and cookies.

GET Requests

For GET requests let’s take an example of https://gorest.co.in/

Navigate to Test Management: In the navigation bar, go to Test Management > Tests. Click on Create a new test and select the Custom Flow from the dropdown.

Use Case 1: API Response With Positive Validation

Objective: Hit the API endpoint and verify the following:

• response.status (HTTP status code)
• response.body[0].title (Title of the first object in the response body)
• response.body[0].id (ID of the first object in the response body)

In the screenshot below you can see all the above validations have passed.

You can then hover over a response value to view options to copy the following information to the clipboard:

• Copy Property Value: Copies the actual value from the response, e.g.,{“id“:157394,”user_id“:7436337,”title“:”Vulgus enim alius comis et officia.”,”body“:”Tametsi suscipit reiciendis. “}
• Copy Property Accessor: Copies the accessor to retrieve the value programmatically, e.g., {response.body.0}
• Copy Property Checkpoints: Copies a formatted checkpoint to use in a test, e.g., verify that {response.body.0.id} is 157394 and verify that {response.body.0.user_id} is 7436337

Use Case 2: API Response With Negative Validation

Objective: Hit the API endpoint and verify the following:

• response.status (HTTP status code)
• response.body[0].title (Title of the first object in the response body)
• response.body[0].id (ID of the first object in the response body)

In the screenshot below you can see title validation is failing when we are verifying the title of the first object.

POST Requests

For POST requests let’s take an example of the site https://reqres.in/api/users

Use Case 1: API Response With Creating User

Objective: Hit the API endpoint https://reqres.in/api/users

• Pass the body in the request 

{

    “name”: “morpheus”,

    “job”: “leader”

}

POST https://reqres.in/api/users with header “Content-Type: applitcation/json” and header “Accept: application/json” and body ‘{     “name”: “morpheus”,     “job”: “leader” }’

• Verify the status 201

In the screenshot below you can see test case is passed and a new record is created with the status “201”.

Use Case 2: API Response With Registering User – successful

Objective: Hit the API endpoint https://reqres.inhttps//reqres.in/api/register

• Pass the body in the request 

{

 “email”: “eve.holt@reqres.in”, 

“password”: “pistol” 

}

POST to https://reqres.in/api/register with header “Content-Type: application/json” and body ‘{     “email”: “eve.holt@reqres.in”,     “password”: “pistol” }’

• Verify the status 200
• Verify ‘token’ is generated

Summary

In the rapidly evolving software industry, companies are pouring resources into quality assurance to ensure smooth product launches. However, traditional QA methods are often too slow, costly, and ineffective, which can lead to bugs, poor user experiences, and product defects.

However, AI-powered tools like Applitools Autonomous offer a powerful solution to these challenges. By automating functional, visual, and API testing, Applitools enhances testing efficiency and effectiveness, ensuring higher-quality releases while reducing the risks of user dissatisfaction.

About the Author

Kailash Pathak (Applitools Ambassador | Cypress Ambassador)

Senior QA Lead Manager with over 15 years of experience in QA engineering and automation. Kailash holds certifications including PMI-ACP®, ITIL®, PRINCE2 Practitioner®, ISTQB, and AWS (CFL).

As an active speaker and workshop conductor, Kailash shares his expertise through blogs on platforms like Medium, Dzone, LambdaTest, Talent500, The Test Tribe, and his personal site https://qaautomationlabs.com/

The post Comprehensive Testing with Applitools Autonomous: A Deep Dive appeared first on AI-Powered End-to-End Testing | Applitools.

The demand for high-quality software in the fast-paced tech environment has never been greater. Since companies spend more on QA to make sure their products are not buggy and look good, traditional testing is not enough. Test cases are manual and take time, automation also has its limits, especially when it comes to user interfaces with complex and fast-changing elements. AI-driven software testing comes into play, in this case revolutionizing the way quality is ensured.

Applitools Autonomous is a leading AI-based testing platform that reduces the time and effort required to create, maintain, and run tests. The most effective way of using it is as a tool in visual and functional testing and a valid scalable solution for contemporary applications.

In this blog, we will explore AI-driven testing, what are the challenges of testing modern applications, and how an AI-powered testing tool, like Applitools Autonomous, is helpful in testing applications.

About AI-Driven Testing

The phrase “AI-driven testing” describes the usage of artificial intelligence techniques to help the software testing process. Organizations can leverage machine learning, natural language processing, and other types of artificial intelligence technologies to streamline their testing processes, saving time and resources and optimizing the delivery of high-quality software.

AI-Driven Testing Key Concepts

Automation of Test Creation

The manual script writing of traditional testing can be slow, and prone to errors. This is automated with AI-driven testing in which test cases are automatically generated from the application’s structure, user flows, and user behaviors. For example, Applitools Autonomous can scan an application’s sitemap and spin up comprehensive test suites without you having to do any manual input.

Visual Validation

Visual validation is the strong point of AI-driven testing, making sure the UI functions and looks good on every device and browser. AI can also detect visual discrepancies and changes to the UI that certainly wouldn’t be picked up by standard testing methods.

Dynamic Test Maintenance

Test cases inevitably grow outdated, and applications are always in flux—that can mean a lot of work to keep them up to date. Testing platforms driven by artificial intelligence automatically adapt the tests to complement changes within the application’s UI or functionality. It reduces the burden of maintenance for QA teams and keeps testing relevant and efficient.

Predictive Analytics

Because AI can analyze historical test data to predict potential problem areas in an application, teams can concentrate their testing resources on applications’ high-risk areas. This predictive ability helps an organization’s resources get allocated better and cuts down on the likelihood of critical bugs slipping through the cracks.

Natural Language Processing (NLP)

NLP is often part of AI-driven testing tools that enable users to create test cases based on plain language text. This feature makes it easier to test so that non-technical team members can collaborate on testing with technical team members.

Challenges In Testing Modern Applications

Below are some of the challenges that we often face while testing modern applications.

Too Many Scenarios

Modern applications are highly complex, with hundreds of end-to-end scenarios that need to be tested across a vast array of screens, devices, and browsers. 

Too Many Screens & Devices

In Modern applications, users access digital content on a wide variety of devices, browsers, and screen sizes, each with its own unique characteristics. Manually verifying that an application looks and functions correctly across all these environments is nearly impossible without automated assistance. Traditional testing methods cannot scale to meet this demand, often resulting in inconsistent user experiences and missed visual bugs.

Constant UI Changes

In dynamic development environments, user interfaces (UIs) are constantly evolving. Even minor changes to the UI can require updates to test scripts. This constant maintenance burden can slow down the development process and lead to outdated or ineffective tests.

Different Skill Sets

Teams often consist of members with varying technical skills, leading to the use of different tools and approaches to testing. This creates silos within the organization, where engineers and non-technical testers might not collaborate effectively.

So far we have seen the challenges in testing modern applications. Now let’s see how we can leverage AI to take over the heavy lifting in testing using Applitools Autonomous.

About Applitools Autonomous

Before we dive into Applitools Autonomous, it’s important to understand what autonomous testing is. Let’s use a car analogy to differentiate between manual, automated, and autonomous testing.

Manual testing is like driving a car with a manual transmission, where the driver is fully engaged in controlling the accelerator, brake, and clutch. Every action requires constant attention and input from the driver.

Automated testing, on the other hand, is like driving a car with an automatic transmission. While the clutch is handled automatically, the driver still needs to manage the accelerator, brake, steering wheel, etc. It reduces the manual effort but still requires active engagement.

Autonomous testing is like a self-driving car. Here, you just input your destination, and the car takes over, driving you to your destination while you focus on other things. Similarly, autonomous testing aims to eliminate human intervention, but we’re not fully there just yet. Just like self-driving cars are still evolving, fully autonomous testing is a future goal we are working towards.

Applitools Autonomous With AI

Applitools Autonomous revolutionizes the testing process by bringing the intelligence and precision of top QA professionals to an unprecedented scale through AI. 

As the first autonomous testing platform, Applitools Autonomous lightens the load on your development team by automating the entire testing lifecycle—from test creation and execution to maintenance and reporting.

Applitools Autonomous is an autonomous testing platform designed to automate and enhance the entire software testing process.

Here’s a breakdown of how it works:

• Automated Test Creation: Applitools Autonomous intelligently scans your application’s sitemap to automatically generate comprehensive test cases for every URL. This ensures that your application is thoroughly tested across all pages, eliminating the need for manual test script writing.

• AI-Driven Visual Assertions: The platform applies advanced visual AI to monitor and track changes at both functional and visual levels. Whether it’s a minor UI adjustment or a significant functional update, Applitools Autonomous ensures that any deviation is detected and addressed to maintain the highest standards of user experience.

• Continuous and Scalable Testing: With Applitools Autonomous, your tests can be seamlessly integrated into your CI/CD pipeline or scheduled to run periodically. This means your application is continuously tested, providing real-time feedback and enabling faster, more reliable releases. The AI-driven approach ensures scalability, making it possible to manage even the most complex applications with ease.

• Dynamic Test Updates: As your application evolves, the platform automatically updates tests to reflect changes in the UI or functionality. This reduces the need for manual maintenance and keeps your tests relevant and effective.
• Test Results Analysis: After running tests, the platform provides detailed reports, highlighting any issues found. These reports include screenshots, logs, and other relevant data to make it easier to diagnose and fix problems.

Types of Testing with Applitools Autonomous

Applitools Autonomous allows for different types of testing, all powered by its Visual AI:

• Full Website Testing: Enter your website URL, and Applitools autonomously crawls and tests every page for both functional and visual consistency.
• Functional Testing: Ensure that user flows work as expected with AI validating both the logic and appearance of your UI elements.
• Visual Testing: Identify visual differences and UI discrepancies across devices to provide a consistent user experience.
• Regression Testing: Compare current test runs with historical data to catch any regressions introduced by new changes.
• API Testing: Automate API validation to ensure backend services work seamlessly with the UI.

Key Benefits of Applitools Autonomous and My Thoughts

Applitools Autonomous has some strong features that make it worth looking into if you’re trying to streamline your testing process. Here’s my take on the key benefits:

Automatic Test Case Generation

One thing I found impressive is how Applitools generates test cases automatically by crawling your site’s sitemap. It saves a lot of manual work, which can really make a difference when you’re managing multiple test scenarios. The fact that you can describe workflows in plain English is a nice touch, making it easier for non-technical folks to get involved.

Faster Test Creation

The speed of test creation is something that stood out to me. Applitools Autonomous claims to generate tests up to 10 times faster, and in practice, it does seem significantly quicker than traditional methods. The ability to instantly validate thousands of elements and group similar errors together really helps to keep things moving efficiently.

AI-Driven UI Validation

Visual AI is one of the more compelling features. It does a great job of catching both visual and functional issues across different devices and browsers. This kind of coverage is essential if you’re dealing with a variety of platforms and need consistent performance and appearance across all of them.

Proactive Bug Detection

I also like how you can schedule tests or integrate them into a CI/CD pipeline. This means you can catch bugs early on, which is always a plus. Dealing with issues earlier in the process tends to save time and money down the line, and the proactive nature of this feature is a big win.

Generative AI for Expanded Coverage

By scanning the root domain, Applitools builds out Visual AI scans for each page. This feature is really useful for getting broader test coverage without much manual effort, something I think teams dealing with large-scale applications will appreciate.

NLP Test Builder

The Natural Language Processing (NLP) test builder is another feature that caught my eye. It allows anyone on the team to create tests by describing steps in plain English, which makes the tool accessible to non-technical members. It definitely lowers the barrier to collaboration, which is always a plus.

Faster Test Execution

Running tests at scale can be a pain, but Applitools Autonomous handles this well with its DOM replication technology. It cuts down on test execution time, which makes it easier to test across multiple browsers and devices efficiently.

Automated Test Maintenance

One of the more practical benefits is automated test maintenance. As your UI changes, the tests update themselves, which minimizes the need for manual updates. This reduces the ongoing workload and keeps your tests relevant without constant tweaking.

Dashboards and Insights

Lastly, the dashboard is quite intuitive. It consolidates all your test results and provides a clear breakdown, making it easier to analyze outcomes and resolve issues quickly. The actionable insights offered by Applitools help speed up decision-making and improve overall application quality.

Applications Suited for Testing Using Applitools Autonomous

Applitools Autonomous is designed to enhance the testing process across a wide variety of applications, making it an ideal choice for different sectors and use cases. Here are some of the types of applications that are particularly well-suited for testing with Applitools Autonomous:

• Web Applications
  Applitools Autonomous can help web applications in particular, and those with dynamic user interfaces in general, in a big way. What’s more, this platform is capable of carrying out full website tests, to ensure that not only every page on the website is working as anticipated, but the brand appears as intended across all browsers and devices.
  
  Example: A social media platform like Facebook requires constant updates to its features and UI in some way. By automating testing, we can be sure that the user interface stays consistent across browsers and devices—e.g. post creation, messaging, and notifications—with Applitools.
• Mobile Applications
  Because users have access to the same application on different mobile devices, testing responsive design, testing functionality or both are absolutely necessary. The main thing that Applitools Autonomous shines at is validating mobile apps so that they always have a clear, smooth experience across various screen sizes and orientations.
  
  Example: Instagram is dependent on visual appearance and relies on mobile applications. Applitools Autonomous is able to validate that images load correctly (or the user interface adapts to different devices) and that the app’s functionality is still in check after an update.
• Ecommerce Platforms
  Ecommerce applications need to be very well tested to make sure a user can smoothly navigate around, make purchases, and get correct information. The Applitools Autonomous engine can be expanded to verify the visual aspects of the platform and the functional flows (e.g. shopping cart, payment process…) as well.
  
  Example: There are several features that Amazon has to validate: product search, shopping cart functionality, and payment process. Using Applitools we can address these problems by automating the visual and functional testing of all elements to make sure that everything does work seamlessly and the users all get a consistent user experience across different devices.
• SaaS Products
  Examples of software as a service (SaaS) applications are constantly delivering new features and enhancements. Autonomous from Applitools helps you make sure existing functionality does not break while validating the user interface against any visual differences in a regression backlog.
  
  Example: CRM tools such as Salesforce are always busy introducing new features. Applitools Autonomous can run regression tests that run automatically to verify that new updates do not break existing functionalities and that the user interface is still friendly for the user.
• Healthcare Applications
  In the healthcare sector, applications must be user-friendly and reliable. Applitools Autonomous can validate that interfaces are intuitive and that crucial functionalities, such as patient records or appointment scheduling, work without issues.
  
  Example: Applitools Autonomous ensures that crucial functionalities, such as appointment scheduling and medical record access, are tested for both usability and visual consistency.

Conclusion

In a rapidly evolving tech landscape, the need for high-quality software has become paramount. As traditional testing methods struggle to keep pace with the increasing complexity of applications, AI-driven testing solutions like Applitools Autonomous emerge as game-changers. This platform not only streamlines the testing process through automation but also enhances the quality of software by leveraging advanced AI techniques.

About the Author

Kailash Pathak (Applitools Ambassador | Cypress Ambassador)

Senior QA Lead Manager with over 15 years of experience in QA engineering and automation. Kailash holds certifications including PMI-ACP®, ITIL®, PRINCE2 Practitioner®, ISTQB, and AWS (CFL).

As an active speaker and workshop conductor, he shares his expertise through blogs on platforms like Medium, Dzone, LambdaTest, Talent500, The Test Tribe, and his personal site https://qaautomationlabs.com/

The post AI-Driven Testing with Applitools Autonomous: What You Need to Know appeared first on AI-Powered End-to-End Testing | Applitools.

Applitools knows that you know how crucial it is to deliver flawless user experiences without spending time managing unnecessary test failures or constant updates. 

The latest Applitools Eyes release introduces new features designed to make your visual testing more efficient and faster. These features will make it easier to manage your tests, reduce manual intervention, and improve your test coverage–whether you’re part of a QA team, a developer, or a test engineer. 

Let’s dive into the top three features of Applitools Eyes 10.20.

Dynamic Match Level

Smart Handling of Variations

With Applitools Eyes 10.20, managing visual test results just got easier thanks to the new dynamic match level. This feature allows users to specify certain patterns—like dates, numbers, or email addresses—that can change without triggering test failures. It identifies specific text patterns that commonly vary, such as timestamps or transaction IDs, and ignores them during test execution.

By default, the system provides patterns like dates, phone numbers, and currency values, but users can also create custom patterns using RegEx. This level of flexibility is especially beneficial for those of you dealing with extremely dynamic content, such as real-time stock market data or dynamic ad targeting, where some elements should not cause a test to fail.

Example Use Case: Insurance policy numbers often follow specific formats but vary between users or transactions. During visual testing, these dynamically generated numbers can trigger false positives. With the new dynamic match level, you can now ignore the variability in policy numbers while still validating the rest of the content and UI.

For instance, a health insurance company has an online portal where customers can view their policies. Each policy is identified by a unique policy number formatted as “POL-XX-YYY” where “XX” and “YYY” are randomly generated for each customer. Testing tools that cannot handle identifying content patterns would cause visual tests to fail unnecessarily every time the policy number changes. However, using Dynamic Match Level lets this health insurance company’s visual testing ignore the “POL-XX-YYY” format in tests ensuring the system validates only significant UI changes.

Dynamic Region Selection

Precision with Less Effort

In addition to manually drawing regions, visual validation can now be anchored directly to DOM elements. As the page content changes now, Applitools Eyes adapts the validation region, ensuring tests don’t break due to layout shifts or content variations. Dynamic region selection allows you to set visual test regions by simply selecting elements on a web page instead of manually drawing regions, saving you time and improving accuracy.

The new dynamic method uses the underlying DOM structure, allowing for automatic region adjustments as the page content changes. If the layout or size of the elements shift, Applitools Eyes automatically adapts to the change without breaking the tests.

Why it matters: This feature is particularly useful for those of you who have apps with extremely dynamic content, where visual elements often change. Enterprise SaaS to media outlets will see the benefits of using dynamic region selection since they no longer have to worry about small shifts in UI elements, reducing the need for constant manual updates and cutting down test maintenance time significantly.

Insights Dashboards

Quantify Your Testing Success

One of the more analytical features added to Applitools Eyes 10.20 is the new Insights Dashboards for testing ROI, which provide insights into the effectiveness of your automated maintenance efforts. These dashboards display critical data on how much time you’ve saved using Applitools’ automated visual testing and maintenance tools.

The dashboards break down the number of visual validation results automatically accepted by Applitools and track the time saved through automated maintenance. This is based on the assumption that manually reviewing a page takes about two and a half minutes. By quantifying this, the dashboard helps you understand the real-world impact of automating your visual testing workflow.

Pro tip: With Insights Dashboards, you can highlight specific wins, such as reducing manual test reviews or cutting test maintenance time. If you notice test maintenance time decreasing steadily, it’s a good sign your visual testing strategy is becoming more efficient. This data can be shared during quarterly business reviews with leadership or when advocating for further automation resources.

Additional Improvements

The 10.20 release also introduces faster load times on the “Tests Requiring Attention” page—especially beneficial for teams working with large test suites. The enhanced GitHub integration means you can track baseline merges directly within the baseline history page, minimizing manual effort and improving workflow efficiency. Visit the Applitools Eyes 10.20 release notes to see everything that’s included.

To Wrap Up…

One of the biggest hurdles in the day-to-day work for anyone involved in QA is dealing with flaky tests caused by constantly changing text, like dates or order numbers, and shifting UI elements, like buttons that move slightly depending on screen size. Your users expect flawless experiences. 

The Applitools Eyes 10.20 release is packed with features that simplify and streamline the visual testing process, from dynamic region selection to enhanced match levels and improved performance. These updates will help your team reduce manual test maintenance, increase test coverage, and measure the ROI of your testing efforts more effectively. Whether you’re managing complex web applications or handling high volumes of test data, these features are designed to make your workflow faster and more efficient.

The post Easier Test Maintenance for Dynamic Content with Applitools Eyes 10.20 appeared first on AI-Powered End-to-End Testing | Applitools.

We’re excited to announce a major upgrade to the Applitools Intelligent Testing Platform: Autonomous 2.0! Packed with powerful new features and enhancements, Autonomous 2.0 enables any team member – regardless of coding skills – to create, execute, and analyze automated tests.

One of our goals with our AI-powered end-to-end testing platform is to provide a flexible test authoring experience that ranges from fully autonomous to describing steps in plain English with AI assistance to no-code recording to coding in your preferred language and framework. This gives your teams the most comprehensive test creation options of any tool on the market while enabling them to leverage any existing tests and automation they’ve built out. We believe utilizing AI in test creation, validation, maintenance, and analysis is the only way to maximize test coverage for complex, modern apps and keep pace with new code deployments – especially now with AI coding assistants.

Autonomous 2.0 is delivering on that goal in a way that no other AI-powered testing platform can: by combining new GenAI technology and proven no-code approaches with our own Visual AI that we’ve iterated on for over 10 years and trained with over 4 billion application images. It’s proven AI testing technology that’s been catching and pinpointing visual and functional bugs for our customers for years. Add in self-healing and ultrafast, stable execution over thousands of combinations of browsers, devices, and screen sizes, and you see why Applitools Intelligent Testing Platform is unmatched in AI-powered end-to-end testing.

What’s New in Autonomous 2.0?

AI-Assisted Interactive Custom Flow Authoring

With AI-assisted interactive custom flow authoring, you can write test steps in plain English, record them in an interactive browser, and debug in real-time – all on the same screen (no browser extension needed). Test steps are output in plain English that can be edited later, and all written steps are checked by our  auto-correcting language model, ensuring smooth, efficient test authoring without the hassle of syntax errors.

Expanded Functional and API Testing Capabilities

Everything you can do with coded tests can now be done by describing the test steps in plain English. That includes Visual AI assertions, comprehensive functional assertions, HTTP request initiations, and effortless dynamic data handling. This upgrade significantly boosts your functional and API testing capabilities, all without having to write a single line of code.

Easier Results Analysis and Test Maintenance

Analyzing test results and maintaining tests is now easier than ever. Our improved UX provides a seamless experience, from high-level analysis of complete test plans to detailed breakdowns of individual test steps. Plus, our platform automatically adjusts baseline regions following application changes, reducing the need for manual adjustments.

Feature Highlights of Autonomous 2.0

Interactive Custom Flow Test Authoring

• No-Code Test Authoring: Record UI interactions in an interactive browser and describe them in plain English.
• Real-Time Debugging: Identify and fix issues on the fly with our interactive debugging tool.
• No Local Installation: Author and debug tests on the same infrastructure they’ll execute on.

Language Model Enhancements

• Auto-Correct and Simplify: Our language model auto-corrects and simplifies step descriptions for better readability and consistency.
• Break Down Complex Commands: Simplifies complex commands into more manageable steps.

Functional Data Assertions

• Verify Dynamic Data: Combine visual and functional assertions (non-visual) to verify text, numeric values, element visibility, and more.
• Boolean Operators: Use logical operators to create more robust test conditions.

API Call Initiation

• HTTP Requests: Initiate HTTP requests with custom headers and cookies, and store responses for use in later test steps.
• Application State Management: Reset application states before or after test execution without complex UI flows.

Enhanced Results Review Experience

• Improved UX: Enjoy an interactive summary of test statuses, detailed issue breakdowns, visual diffs, and more.

Ready for an AI-assisted testing challenge?

We’re confident that Autonomous can enable any of your team members to create, execute, and analyze tests. Don’t believe us? Have any member of your team who doesn’t write automated tests today sign up for a free trial of Autonomous (e.g. manual testers, designers, product owners, business analysts), and see what they can contribute to your test coverage. Guaranteed you’ll be amazed!

The post Autonomous 2.0 is here! AI-Assisted Interactive Authoring and More appeared first on AI-Powered End-to-End Testing | Applitools.