@applitools/eyes-playwright

What is @applitools/eyes-playwright?

@applitools/eyes-playwright is a package that integrates Applitools' visual testing capabilities with Playwright, a popular browser automation library. It allows developers to perform visual testing and cross-browser testing to ensure that web applications render correctly across different devices and browsers.

What are @applitools/eyes-playwright's main functionalities?

Visual Testing

This feature allows you to perform visual testing by capturing screenshots of web pages and comparing them against a baseline to detect visual differences. The code sample demonstrates how to integrate Applitools Eyes with Playwright to perform a visual check on a webpage.

const { chromium } = require('playwright');
const { Eyes, Target } = require('@applitools/eyes-playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  const eyes = new Eyes();

  try {
    await eyes.open(page, 'Demo App', 'Smoke Test');
    await page.goto('https://example.com');
    await eyes.check('Main Page', Target.window());
    await eyes.close();
  } finally {
    await browser.close();
    await eyes.abortIfNotClosed();
  }
})();

Cross-Browser Testing

This feature enables cross-browser testing by running visual tests across different browsers such as Chromium, Firefox, and WebKit. The code sample shows how to iterate over multiple browser types to perform visual checks on each.

const { chromium, firefox, webkit } = require('playwright');
const { Eyes, Target } = require('@applitools/eyes-playwright');

(async () => {
  const browsers = [chromium, firefox, webkit];
  for (const browserType of browsers) {
    const browser = await browserType.launch();
    const page = await browser.newPage();
    const eyes = new Eyes();

    try {
      await eyes.open(page, 'Demo App', `Cross-Browser Test - ${browserType.name()}`);
      await page.goto('https://example.com');
      await eyes.check('Main Page', Target.window());
      await eyes.close();
    } finally {
      await browser.close();
      await eyes.abortIfNotClosed();
    }
  }
})();

Other packages similar to @applitools/eyes-playwright

cypress

Cypress is a front-end testing tool built for the modern web. It provides a fast, easy, and reliable testing for anything that runs in a browser. While Cypress is primarily focused on end-to-end testing, it also offers visual testing capabilities through plugins like cypress-image-snapshot. Compared to @applitools/eyes-playwright, Cypress is more focused on providing a comprehensive testing framework with built-in features for assertions and mocking.

puppeteer

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. It is similar to Playwright in terms of browser automation but does not natively support visual testing. However, it can be combined with visual testing tools like Percy or BackstopJS to achieve similar functionality to @applitools/eyes-playwright.

webdriverio

WebdriverIO is a test automation framework that allows you to run tests based on the WebDriver protocol and Appium automation technology. It supports visual regression testing through plugins like wdio-visual-regression-service. Compared to @applitools/eyes-playwright, WebdriverIO offers a broader range of testing capabilities, including mobile testing, but requires additional setup for visual testing.

README

Applitools Eyes SDK for Playwright

Resources

• Quick start
• API reference