### Install Playwright

Source: https://applitools.com/docs/eyes/playwright

Install Playwright in your project if it's not already installed. This command initializes Playwright and sets up the necessary browser binaries and configurations.

```bash
npm init playwright@latest
```

--------------------------------

### Clone Example Repository

Source: https://applitools.com/docs/eyes/playwright

Clone the Applitools Eyes Playwright fixture example repository from GitHub to your local machine. This repository contains pre-configured examples for using Applitools Eyes with Playwright fixtures.

```bash
git clone https://github.com/applitools/example-eyes-playwright-fixture.git
cd example-eyes-playwright-fixture
```

--------------------------------

### Install Applitools Eyes SDK for Playwright

Source: https://applitools.com/docs/eyes/playwright

Install the Applitools Eyes SDK for Playwright as a development dependency in your project. This package provides the necessary tools for integrating visual testing capabilities.

```bash
npm install -D @applitools/eyes-playwright
```

--------------------------------

### Run Interactive CLI Setup

Source: https://applitools.com/docs/eyes/playwright

Execute the Applitools Eyes CLI setup tool to configure your project. This tool automates project configuration, modifies imports, adds settings to playwright.config.ts, and includes a demo test.

```bash
npx eyes-setup
```

--------------------------------

### Complete Visual Test Example - Playwright

Source: https://applitools.com/docs/eyes/playwright/api/defining-regions

A comprehensive example demonstrating a full visual test workflow using Applitools Eyes Playwright. It includes initial page navigation, performing a full visual check, interacting with the page, and conducting subsequent visual checks with ignored and floating regions.

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

test('Full Visual Test', async ({ page, eyes }) => {
  await page.goto('https://example.com');

  // Perform initial visual check
  await eyes.check('Home Page', {
    fully: true,
    matchLevel: 'Strict',
  });

  // Interact with the page
  await page.click('#login-button');
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password');
  await page.click('#submit');

  // Perform visual check after interaction
  await eyes.check('Dashboard', {
    fully: true,
    matchLevel: 'Layout',
    ignoreRegions: [page.locator('.dynamic-banner')],
    floatingRegions: [
      {
        region: page.locator('.notification'),
        maxUpOffset: 15,
        maxDownOffset: 15,
        maxLeftOffset: 10,
        maxRightOffset: 10,
      },
    ],
  });
});
```

--------------------------------

### Run Playwright Tests

Source: https://applitools.com/docs/eyes/playwright

Execute your Playwright tests, including those with Applitools visual checkpoints, using the Playwright test runner. This command will run the tests and generate reports.

```bash
npx playwright test <name_of_test_file.spec.ts>
```

--------------------------------

### Import Applitools Test Fixture

Source: https://applitools.com/docs/eyes/playwright

In your Playwright test files, import the `test` object from the Applitools Eyes Playwright fixture. This ensures that your tests are set up to use Applitools' visual testing capabilities.

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

--------------------------------

### Set Global Match Level in Playwright Configuration

Source: https://applitools.com/docs/eyes/playwright/core-concepts

This example demonstrates how to set the global match level for Applitools Eyes within the Playwright configuration file. This setting applies to all visual checks unless overridden per test.

```typescript
use: {
  eyesConfig: {
    matchLevel: 'Dynamic',
  },
};

```

--------------------------------

### Set Applitools API Key Environment Variable

Source: https://applitools.com/docs/eyes/playwright

Set your Applitools API key as an environment variable named APPLITOOLS_API_KEY. This is the recommended method for securely providing your API key to the Eyes SDK, avoiding hardcoding it in configuration files.

```bash
export APPLITOOLS_API_KEY='your_api_key_here'
```

--------------------------------

### Show Playwright Test Report

Source: https://applitools.com/docs/eyes/playwright

Open the Playwright HTML report to view test results, including visual test outcomes. This report provides a lightweight alternative to the Applitools Dashboard for reviewing test results.

```bash
npx playwright show-report
```

--------------------------------

### Execute Visual Test with Complex Checkpoint Configuration

Source: https://applitools.com/docs/eyes/playwright/api/eyes-check

A complete example of a Playwright test case utilizing various checkpoint options to perform a robust visual validation.

```javascript
test('Visual Test with Regions', async ({ page, eyes }) => {
  await page.goto('https://example.com');
  
  await eyes.check('Main Page', {
    fully: true,
    matchLevel: 'Strict',
    ignoreRegions: [page.locator('.dynamic-content')],
    layoutRegions: [page.locator('.sidebar')],
    floatingRegions: [
      {
        region: page.locator('.floating-ad'),
        maxUpOffset: 10,
        maxDownOffset: 10,
        maxLeftOffset: 5,
        maxRightOffset: 5,
      },
    ],
    accessibilityRegions: [
      {
        region: page.locator('.important-heading'),
        type: 'BoldText',
      },
    ],
    hooks: {
      beforeCaptureScreenshot:
        "document.querySelector('.modal').style.display = 'none';",
    },
    waitBeforeCapture: 1000,
  });
});
```

--------------------------------

### Add Visual Checkpoint with Eyes.check()

Source: https://applitools.com/docs/eyes/playwright

Add a visual checkpoint to your Playwright test using the `eyes.check()` method. This command captures a screenshot of the specified page or element and compares it against a baseline image for visual differences.

```javascript
test('My first visual test', async ({ page, eyes }) => {
  await page.goto('https://example.com');
  // Visual check
  await eyes.check('Homepage', {
    fully: true,
    matchLevel: 'Dynamic',
  });
});
```

--------------------------------

### Configure Authentication and Server Settings

Source: https://applitools.com/docs/eyes/playwright/api/common-configuration

Sets the API key for account authentication and the server URL for connecting to cloud or on-premises instances. It is recommended to use environment variables for the API key to ensure security.

```typescript
apiKey: 'YOUR_API_KEY',
serverUrl: 'https://eyesapi.applitools.com',
```

--------------------------------

### Configure Visual Comparison Settings

Source: https://applitools.com/docs/eyes/playwright/api/common-configuration

Defines how visual differences are detected, including match levels and whether to ignore displacements in the UI.

```typescript
matchLevel: 'Strict',
ignoreDisplacements: true,
```

--------------------------------

### Manage Branching and Baselines

Source: https://applitools.com/docs/eyes/playwright/api/common-configuration

Sets the current and parent branch names to manage baseline branching within version control systems.

```typescript
branchName: 'feature/login-page',
parentBranchName: 'main',
```

--------------------------------

### Enable Accessibility Validation in Playwright Tests

Source: https://applitools.com/docs/eyes/playwright/advanced-usage

Integrate automated accessibility validation into your Playwright tests using Applitools Eyes. This example shows how to enable checks for WCAG compliance levels and versions with a simple configuration.

```typescript
test('Accessibility test with Applitools', async ({ page, eyes }) => {
  await page.goto('https://example.com');

  // Enable accessibility validation
  await eyes.check('Accessibility Test', {
    accessibilitySettings: {
      level: 'AA', // Choose 'AA' or 'AAA'
      guidelinesVersion: 'WCAG_2_1', // Choose 'WCAG_2_0' or 'WCAG_2_1'
    },
  });
});
```

--------------------------------

### Configure Ultrafast Grid Options

Source: https://applitools.com/docs/eyes/playwright/api/runner-configuration

Provides additional options for Ultrafast Grid rendering, such as disabling headless Chrome or controlling the Adopted StyleSheets polyfill.

```javascript
visualGridOptions: {
  chromeHeadless: false,
  polyfillAdoptedStyleSheets: true,
},
```

--------------------------------

### Configure UFG Browsers

Source: https://applitools.com/docs/eyes/playwright/api/runner-configuration

Defines the browsers, devices, and viewport sizes for cross-browser testing with the Ultrafast Grid. Supports desktop browsers, mobile emulation, and iOS devices.

```javascript
browsersInfo: [
  { name: 'chrome', width: 800, height: 600 },
  { name: 'firefox', width: 1024, height: 768 },
],
```

```javascript
{
  chromeEmulationInfo: {
    deviceName: 'iPad 7th Gen',
    screenOrientation: 'landscape',
  },
},
```

```javascript
{
  iosDeviceInfo: {
    deviceName: 'iPad (7th generation)',
    iosVersion: 'latest',
    screenOrientation: 'portrait',
  },
},
```

```javascript
browsersInfo: [
  { name: 'chrome', width: 800, height: 600 },
  { name: 'firefox', width: 1024, height: 768 },
  {
    iosDeviceInfo: {
      deviceName: 'iPhone 16',
      screenOrientation: 'portrait',
    },
  },
],
```

--------------------------------

### Enable Layout Breakpoints for UFG

Source: https://applitools.com/docs/eyes/playwright/api/runner-configuration

Enables responsive design testing at specified breakpoints for the Ultrafast Grid. Breakpoints can be inferred from CSS or provided as an array of widths.

```javascript
layoutBreakpoints: [320, 768, 1024],
```

--------------------------------

### Configure Browser Viewport Size

Source: https://applitools.com/docs/eyes/playwright/api/common-configuration

Sets the viewport dimensions for the browser during test execution. This can influence the rendering of web pages and the resources loaded. For the Ultrafast Grid, viewport sizes are determined by `browsersInfo`.

```javascript
viewportSize: { width: 1280, height: 720 }
```

--------------------------------

### Configure UFG Concurrency

Source: https://applitools.com/docs/eyes/playwright/api/runner-configuration

Sets the maximum number of visual tests and resources to fetch concurrently in the Ultrafast Grid. Defaults are 5 for both test and fetch concurrency.

```javascript
testConcurrency: 10,
```

```javascript
fetchConcurrency: 5,
```

--------------------------------

### Configure Exception Handling for Visual Differences

Source: https://applitools.com/docs/eyes/playwright/api/common-configuration

Controls whether exceptions are thrown when visual differences are detected. Options include throwing after each test, after all tests, or disabling exceptions. This setting impacts how visual regressions are reported and handled during test execution.

```javascript
failTestsOnDiff: 'afterEach'
```

--------------------------------

### Configure Responsive Design with Ultrafast Grid (Playwright)

Source: https://applitools.com/docs/eyes/playwright/advanced-usage

This configuration snippet shows how to specify different viewport sizes for responsive design testing using the Applitools Ultrafast Grid in Playwright. It includes configurations for desktop, iOS, and Android devices.

```typescript
eyesConfig: {
  browsersInfo: [
    { name: 'chrome', width: 1440, height: 900 }, // Desktop
    { iosDeviceInfo: {deviceName: 'iPad (7th generation)'} },
    { chromeEmulationInfo: {deviceName: 'Pixel 4 XL'} },
  ],
}
```

--------------------------------

### Implement Visual Testing in Page Object Models with Playwright

Source: https://applitools.com/docs/eyes/playwright/integration-with-playwright

Shows how to inject the Applitools Eyes instance into a Page Object Model class to perform visual checkpoints. The LoginPage class encapsulates navigation, interaction, and visual verification logic, which is then utilized in a standard Playwright test.

```javascript
// page-objects/LoginPage.js
class LoginPage {
  constructor(eyes, page) {
    this.eyes = eyes;
    this.page = page;
    this.usernameInput = page.locator('#username');
    this.passwordInput = page.locator('#password');
    this.loginButton = page.locator('#login');
  }

  async navigate() {
    await this.page.goto('https://example.com/login');
  }

  async login(username, password) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }

  async verifyLoginPage() {
    await this.eyes.check('Login Page', {
      fully: true,
    });
  }
}

module.exports = { LoginPage };
```

```javascript
// tests/login.test.js
import { test } from '@applitools/eyes-playwright/fixture';
const { LoginPage } = require('../page-objects/LoginPage');

test('Login page visual test using eyes.check()', async ({ page, eyes }) => {
  const loginPage = new LoginPage(eyes, page);
  await loginPage.navigate();

  // Visual checkpoint within the page object
  await loginPage.verifyLoginPage();
});
```

--------------------------------

### Configure global Applitools settings in Playwright

Source: https://applitools.com/docs/eyes/playwright/integration-with-playwright

Shows how to define global Applitools configurations within the playwright.config.ts file. This includes setting the application name and defining the failure behavior when visual differences are detected.

```typescript
// playwright.config.ts  
import { EyesFixture } from '@applitools/eyes-playwright/fixture';  
export default defineConfig<EyesFixture>({
  use: {  
    eyesConfig: {  
      appName: 'My App',  
      failTestsOnDiff: 'afterEach', // Options: 'afterEach', 'afterAll', false  
    },  
  },  
});
```

--------------------------------

### Run Playwright Tests with Ultrafast Grid

Source: https://applitools.com/docs/eyes/playwright/advanced-usage

This command initiates the execution of Playwright tests. When configured with Applitools Eyes and the Ultrafast Grid, this command will run the tests across all specified browsers and devices in parallel.

```bash
npx playwright test
```

--------------------------------

### Configure Global Applitools Eyes Settings in Playwright

Source: https://applitools.com/docs/eyes/playwright/core-concepts

Apply Applitools Eyes settings across all Playwright tests by defining `eyesConfig` within the `playwright.config.ts` file. This allows for centralized management of visual testing configurations.

```typescript
import { defineConfig, TestInfo } from '@playwright/experimental-playwright-core';
import { EyesFixture } from '@applitools/eyes-playwright';

export default defineConfig<EyesFixture>({
  use: {
    eyesConfig: {
      appName: 'My App',
      failTestsOnDiff: 'afterEach',
      sendDom: true,
      batch: { name: 'Release 1.0 Tests' },
      testName: (testInfo: TestInfo) => `My test ${testInfo.title}`
    },
  },
});
```

--------------------------------

### Identify Tests and Applications

Source: https://applitools.com/docs/eyes/playwright/api/common-configuration

Configures metadata for grouping tests in the Applitools Dashboard, including application names, test names, and custom properties.

```typescript
appName: 'My Application',
testName: 'Login Page Test',
// Or using a function:
testName: (testInfo) => `Test: ${testInfo.title}`,
properties: [
  { name: 'Environment', value: 'Staging' },
  { name: 'Version', value: '1.0.0' },
],
```

--------------------------------

### Configure Screenshot Capture Behavior

Source: https://applitools.com/docs/eyes/playwright/api/advanced-configuration

Settings to manage screenshot timing, element visibility, and DOM data transmission.

```javascript
waitBeforeScreenshots: 1000,
saveNewTests: true,
hideCaret: true,
hideScrollbars: true,
sendDom: true
```

--------------------------------

### Configure Test Metadata and Branching

Source: https://applitools.com/docs/eyes/playwright/api/advanced-configuration

Settings to define the test display name and manage baseline branch comparisons.

```javascript
displayName: 'Login Page Visual Test',
// Or using a function:
displayName: (testInfo) => `Visual Test - ${testInfo.title}`,

baselineBranchName: 'main'
```

--------------------------------

### Configure Batch Settings

Source: https://applitools.com/docs/eyes/playwright/api/common-configuration

Groups related tests together in the Applitools Dashboard using batch identifiers and notification settings.

```typescript
batch: {
  id: 'batch-id-123',
  name: 'Regression Tests',
  notifyOnCompletion: true,
},
```

--------------------------------

### Configure Proxy Settings

Source: https://applitools.com/docs/eyes/playwright/api/common-configuration

Defines proxy server credentials and connection details required for network access to the Applitools Eyes server.

```typescript
proxy: {
  url: 'http://proxy.example.com:8080',
  username: 'proxyUser',
  password: 'proxyPass',
},
```

--------------------------------

### Importing Applitools Eyes Fixtures

Source: https://applitools.com/docs/eyes/playwright/api/eyes-check

Demonstrates how to import the test and expect fixtures from @applitools/eyes-playwright/fixture to enable visual testing capabilities within Playwright tests.

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

test('Visual Test', async ({ page, eyes }) => {
  // Your test code...
});

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

--------------------------------

### Configure Cross-Browser Testing with Ultrafast Grid (Playwright)

Source: https://applitools.com/docs/eyes/playwright/advanced-usage

This configuration sets up the Applitools Ultrafast Grid for cross-browser testing within a Playwright project. It specifies an array of browser and device configurations to run tests against.

```typescript
// playwright.config.ts
export default defineConfig<EyesFixture>({
  use: {
    eyesConfig: {
      type: 'ufg',
      browsersInfo: [
        { name: 'chrome', width: 800, height: 600 },
        { name: 'firefox', width: 1024, height: 768 },
        {
          name: 'safari',
          width: 375,
          height: 667,
          deviceScaleFactor: 2,
          isMobile: true,
        },
      ],
    },
  },
});
```

--------------------------------

### Configure SDK Logging

Source: https://applitools.com/docs/eyes/playwright/api/advanced-configuration

Configures logging output for Applitools Eyes using objects or dynamic functions.

```javascript
// Object configuration
logConfig: {
  type: 'console',
  level: 'info',
},

// Function configuration
logConfig: (testInfo) => ({
  type: 'file',
  level: 'debug',
  filename: `logs/eyes-${testInfo.title}.log`,
})
```

--------------------------------

### Screenshot Multiple Pages with Playwright and Applitools Eyes

Source: https://applitools.com/docs/eyes/playwright/api/eyes-check

This code snippet demonstrates how to capture screenshots of the initial page, a newly opened tab, and the initial page again within a single Applitools Eyes session using Playwright fixtures. It utilizes `page.waitForEvent('popup')` to handle new tab creation and `expect(page).toHaveScreenshot()` for visual assertions.

```typescript
import { test, expect } from '@applitools/eyes-playwright/fixture'

test('Multiple windows in one Eyes session using Fixtures', async ({ page, context, eyes }) => {
  await page.goto('https://the-internet.herokuapp.com/windows');

  // Screenshot of initial page
  await expect(page).toHaveScreenshot('Initial Page', { fullPage: true });

  // Wait for new tab to open
  const [newTab] = await Promise.all([
    page.waitForEvent('popup'),
    page.click('//a[normalize-space()="Click Here"]')
  ]);

  await newTab.waitForLoadState('load');

  // Screenshot of new tab
  await expect(newTab).toHaveScreenshot('New Tab Page', { fullPage: true });

  // Screenshot of initial page again
  await expect(page).toHaveScreenshot('Initial Page Back Again', { fullPage: true });
});

```

--------------------------------

### Configure Classic Runner Viewport

Source: https://applitools.com/docs/eyes/playwright/api/runner-configuration

Sets the viewport size for visual tests when using the Classic runner. This affects the dimensions of the captured screenshots locally.

```javascript
viewportSize: { width: 1280, height: 720 },
```

--------------------------------

### Configure Visual Matching and Comparison

Source: https://applitools.com/docs/eyes/playwright/api/advanced-configuration

Settings to control how visual differences are detected, including pattern matching, caret handling, and match timeouts.

```javascript
ignoreGitMergeBase: false,
ignoreCaret: true,
enablePatterns: true,
matchTimeout: 2000
```

--------------------------------

### Select Runner Type

Source: https://applitools.com/docs/eyes/playwright/api/runner-configuration

Specifies the runner type for visual tests. 'ufg' enables cross-browser testing via the Ultrafast Grid, while 'classic' performs local testing.

```javascript
type: 'ufg',
```

--------------------------------

### Configure Advanced Checkpoint Hooks and Timing

Source: https://applitools.com/docs/eyes/playwright/api/eyes-check

Shows how to inject JavaScript hooks before screenshot capture and manage wait times to ensure the page is in a stable state.

```javascript
hooks: {
  beforeCaptureScreenshot: "document.querySelector('#ad-banner').style.display = 'none';",
},

waitBeforeCapture: 500,
waitBeforeCapture: async () => { /* custom logic */ }
```

--------------------------------

### Responsive Design Testing with Classic Runner (Playwright)

Source: https://applitools.com/docs/eyes/playwright/advanced-usage

This Playwright test demonstrates responsive design testing using the Classic runner. It sets different viewport sizes to simulate various devices and performs visual checks at each size.

```typescript
test('Responsive design test', async ({ page, eyes }) => {
  await page.setViewportSize({ width: 320, height: 568 }); // iPhone SE size
  await page.goto('https://example.com');

  // Visual check for mobile view
  await eyes.check('Homepage');

  // Change viewport size for tablet
  await page.setViewportSize({ width: 768, height: 1024 }); // iPad size

  // Visual check for tablet view
  await eyes.check('Homepage');
});
```

--------------------------------

### Configure Scroll Root Element

Source: https://applitools.com/docs/eyes/playwright/api/advanced-configuration

Defines the element used for full-page scrolling during screenshot capture using selectors or Playwright locators.

```javascript
scrollRootElement: '#main-content',
// Or using a Playwright locator:
scrollRootElement: page.locator('#main-content')
```

--------------------------------

### Configure failTestsOnDiff in Playwright

Source: https://applitools.com/docs/eyes/playwright/core-concepts

Sets the behavior for test execution when visual differences are detected. Options include 'afterEach' or 'afterAll' to throw exceptions.

```typescript
// playwright.config.ts
use: {
  eyesConfig: {
    failTestsOnDiff: 'afterEach',
  },
};
```

--------------------------------

### Configure Checkpoint Regions and Match Levels

Source: https://applitools.com/docs/eyes/playwright/api/eyes-check

Demonstrates how to define various regions for visual comparison, including ignored, layout, and floating regions, as well as setting accessibility requirements.

```javascript
ignoreRegions: [
  page.locator('.dynamic-banner'),
  { x: 100, y: 200, width: 300, height: 50 },
],

layoutRegions: [page.locator('.sidebar')],
floatingRegions: [
  {
    region: page.locator('.floating-button'),
    maxUpOffset: 10,
    maxDownOffset: 10,
    maxLeftOffset: 5,
    maxRightOffset: 5,
  },
],

accessibilityRegions: [
  {
    region: page.locator('.important-text'),
    type: 'LargeText',
  },
]
```

--------------------------------

### Configure Classic Runner Stitch Mode

Source: https://applitools.com/docs/eyes/playwright/api/runner-configuration

Determines the method used for stitching screenshots when capturing full-page images with the Classic runner. Options include 'Scroll' and 'CSS'.

```javascript
stitchMode: 'Scroll',
```

--------------------------------

### Configure Ultrafast Grid and Responsive Breakpoints

Source: https://applitools.com/docs/eyes/playwright/api/eyes-check

Configures rendering options for the Ultrafast Grid, including responsive layout breakpoints and browser-specific rendering settings.

```javascript
layoutBreakpoints: [320, 768, 1024],

visualGridOptions: {
  chromeHeadless: false,
  polyfillAdoptedStyleSheets: true,
}
```

--------------------------------

### Performing Visual Checkpoints with eyes.check

Source: https://applitools.com/docs/eyes/playwright/api/eyes-check

Shows how to use the eyes.check method to capture visual snapshots of pages. Supports multiple checkpoints and configuration options like full-page screenshots and match levels.

```TypeScript
test('Multiple checkpoints', async ({ page, eyes }) => {
  await page.goto('https://example.com');

  // Check the home page
  await eyes.check('Home Page', {
    fully: true,
  });

  // Navigate and check another page
  await page.click('.dashboard-link');
  await eyes.check('Dashboard', {
    matchLevel: 'Layout',
  });
});
```

--------------------------------

### Configure Applitools Eyes in Playwright

Source: https://applitools.com/docs/eyes/playwright/api/overview

Demonstrates how to integrate Applitools Eyes into the Playwright configuration file by defining the eyesConfig object within the use property.

```typescript
import { defineConfig } from '@playwright/test';
import { EyesFixture } from '@applitools/eyes-playwright/fixture';

export default defineConfig<EyesFixture>({
  reporter: '@applitools/eyes-playwright/reporter',
  use: {
    eyesConfig: {
      appName: 'My App',
      matchLevel: 'Strict',
      type: 'ufg',
      batch: { name: 'Regression Tests' },
    },
  },
});
```

--------------------------------

### Configure Playwright for Applitools Enhanced HTML Report

Source: https://applitools.com/docs/eyes/playwright/integration-with-playwright

Configure your 'playwright.config.ts' file to use the Applitools Eyes reporter. This involves importing 'EyesFixture' and setting the 'reporter' option to '@applitools/eyes-playwright/reporter'. This enables an enhanced HTML report with visual testing insights.

```typescript
// playwright.config.ts
import { defineConfig } from '@playwright/test';
import { EyesFixture } from '@applitools/eyes-playwright/fixture';

export default defineConfig<EyesFixture>({
  // Other Playwright configurations...
  reporter: '@applitools/eyes-playwright/reporter',
  // Additional configurations...
});
```

--------------------------------

### Define Callback for Post-Test Result Processing

Source: https://applitools.com/docs/eyes/playwright/api/common-configuration

A callback function that receives test results after all tests have completed. This is useful for custom reporting, logging, or performing additional actions based on the overall test outcomes. The default behavior is to not execute any callback.

```javascript
afterAll: async (results) => {
  for (const result of results) {
    console.log(`Test: ${result.testResults.name}, URL: ${result.testResults.url}`);
  }
}
```

--------------------------------

### Configure Ultrafast Grid Concurrency in Playwright

Source: https://applitools.com/docs/eyes/playwright/advanced-usage

Adjust the 'testConcurrency' setting in your Playwright configuration to control the number of concurrent Ultrafast Grid renderings. This helps balance speed and resource consumption based on your needs and account limits.

```typescript
eyesConfig: {
  testConcurrency: 10, // Adjust based on your needs and account limits
}
```

--------------------------------

### Perform element-level visual check with Applitools Eyes

Source: https://applitools.com/docs/eyes/playwright/integration-with-playwright

Demonstrates how to use the eyes.check() method to perform a visual checkpoint on a specific DOM element. It allows for custom match levels such as 'Layout' to control comparison strictness.

```typescript
test('Element visual test using eyes.check()', async ({ page, eyes }) => {  
  await page.goto('https://example.com');  
  
  const navbar = page.locator('.navbar');  
  
  // Visual checkpoint of a specific element  
  await eyes.check('Navbar', {  
    region: navbar,  
    matchLevel: 'Layout',  
  });  
});
```

--------------------------------

### Configure Dynamic Match Level Globally in Playwright

Source: https://applitools.com/docs/eyes/playwright/advanced-usage

Sets the 'Dynamic' match level globally for all visual tests in Playwright. This helps automatically detect and ignore dynamically changing content as long as its pattern remains consistent. No specific dependencies are required beyond the Applitools Eyes SDK for Playwright.

```typescript
// playwright.config.ts  
export default defineConfig<EyesFixture>({
  use: {
    eyesConfig: {
      matchLevel: 'Dynamic',
    },
  },
});

```

--------------------------------

### Configure Custom Batch Names in Playwright

Source: https://applitools.com/docs/eyes/playwright/core-concepts

Allows grouping of related tests under a custom batch name in the Applitools Dashboard for better organization.

```typescript
// playwright.config.ts
use: {
  eyesConfig: {
    batch: { name: 'Release 1.0 Tests' },
  },
};
```

--------------------------------

### Configure Layout Match Level Globally in Playwright

Source: https://applitools.com/docs/eyes/playwright/advanced-usage

Sets the 'Layout' match level globally for all visual tests in Playwright. This focuses on structural consistency, ignoring content changes, which is useful for pages with varying text or images but a stable layout. No specific dependencies are required beyond the Applitools Eyes SDK for Playwright.

```typescript
// playwright.config.ts  
export default defineConfig<EyesFixture>({
  use: {
    eyesConfig: {
      matchLevel: 'Layout',
    },
  },
});

```

--------------------------------

### Override Applitools Eyes settings in tests

Source: https://applitools.com/docs/eyes/playwright/api/overview

Shows how to override global Applitools configuration settings for specific test suites using the test.use method provided by the Applitools fixture.

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

test.use({
  eyesConfig: {
    matchTimeout: 5000,
    ignoreCaret: false,
    logConfig: {
      level: 'debug',
    },
  },
});

test('Visual test with overridden settings', async ({ page, eyes }) => {
  // Test code...
});
```

--------------------------------

### Component Visual Testing with Applitools Eyes Playwright

Source: https://applitools.com/docs/eyes/playwright/advanced-usage

Perform visual testing on individual UI components using Applitools Eyes within your Playwright tests. This snippet demonstrates capturing a visual snapshot of a specific component identified by a locator.

```typescript
test('Component test', async ({ page, eyes }) => {
  await page.goto('https://example.com/component');

  // Visual check of the component
  const component = page.locator('#my-component');
  await eyes.check('My Component', {
    region: component,
  });
});
```

--------------------------------

### Configure Classic Runner Stitch Overlap

Source: https://applitools.com/docs/eyes/playwright/api/runner-configuration

Specifies the overlap in pixels between stitched parts when using 'Scroll' mode for full-page screenshots in the Classic runner. Defaults to 50 pixels.

```javascript
stitchOverlap: 50,
```

--------------------------------

### Define Multiple Regions - Playwright

Source: https://applitools.com/docs/eyes/playwright/api/defining-regions

Specify multiple regions within arrays for options like `ignoreRegions`, `layoutRegions`, etc. This allows for defining several areas on the page that should be treated collectively, such as ignoring multiple dynamic banners or footer elements.

```javascript
await eyes.check('Interactive Elements', {
  ignoreRegions: [
    page.locator('.dynamic-banner'),
    '#footer',
    { x: 50, y: 100, width: 200, height: 150 },
  ],
});
```

--------------------------------

### Define Regions with Playwright Locators - Playwright

Source: https://applitools.com/docs/eyes/playwright/api/defining-regions

Utilize Playwright's locator methods to define regions for visual checks. This provides a robust way to select elements, supporting various strategies like role, text, and test ID. It enables dynamic and reliable element targeting.

```javascript
await eyes.check('Main Content', {
  region: page.locator('.main-content'),
});

// Using various locator methods
await eyes.check('Interactive Elements', {
  ignoreRegions: [
    page.locator('role=button'),
    page.locator('text=Login'),
    page.getByTestId('submit-button'),
  ],
});
```

--------------------------------

### eyes.check Method Syntax

Source: https://applitools.com/docs/eyes/playwright/api/eyes-check

The syntax definition for the eyes.check method, which accepts an optional name for the checkpoint and an options object for configuration.

```TypeScript
await eyes.check(name?, options?);
```

--------------------------------

### Apply Layout Match Level Per Test in Playwright

Source: https://applitools.com/docs/eyes/playwright/advanced-usage

Applies the 'Layout' match level to a specific test case in Playwright. This ensures that only the structure and layout are validated for that particular test, ignoring content variations. Requires the Playwright test runner and Applitools Eyes SDK.

```typescript
test('Dynamic content test', async ({ page, eyes }) => {
  await page.goto('https://example.com');

  // Visual check with Layout match level
  await eyes.check('Dynamic Content Page', {
    matchLevel: 'Layout',
  });
});

```