Install Plugin

To start visual testing with your existing Playwright tests, leverage the benefits of the Wopee.io . Follow the steps below to install the plugin.

Prerequisites

Visual Studio Code or any other code editor
Wopee.io account

Environment setup

Set Wopee.io API key

Before running the visual test, set up your API key as an environment variable named WOPEE_API_KEY. You may set it from the command line like this:

Linux/MacOSWindows

export WOPEE_API_KEY=your-api-key

set WOPEE_API_KEY=your-api-key

Set `.env` file params

You need to set your own .env file to your project.

This is a sample .env file:

# Mandatory
WOPEE_API_URL=https://api.wopee.io/
WOPEE_PROJECT_UUID=your-project-uuid

Full list of .env file parameters could be found here.

Where to find project UUID and Wopee.io API key?

You can find your project UUID and Wopee.io API key in the project settings screen after navigating to project.

Project UUID

Set GitHub token

We store our npm package in GitHub repository. GitHub do not support anonymous download from their registry so you need to generate your personal GitHub token to download it.

Linux/MacOSWindows

export GITHUB_TOKEN=your-github-token

set GITHUB_TOKEN=your-github-token

Set `.npmrc` file

Create a new file .npmrc in the root of your project and paste the following code:

//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
@wopee-io:registry=https://npm.pkg.github.com

Install dependencies

Install all dependencies:

npm i -D @wopee-io/wopee.pw

Sample test

To run sample test create a new file tests/sample.spec.ts and paste the following code:

import { Wopee } from '@wopee-io/wopee.pw';
import { test } from '@playwright/test';

test.describe('test', () => {
  let wopee: Wopee;
  test.beforeAll(async () => {
    wopee = new Wopee();

    const now = new Date();
    const date = `${now.getDate().toString().padStart(2, '0')}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getFullYear()}`;
    await wopee.startSuite(`test-${date}`);
  });

  test.afterEach(async () => {
    await wopee.stopScenario();
  });

  test('trackImage', async ({ page }) => {
    await page.goto('https://playwright.dev/');

    const screenshot = await page.screenshot({ type: 'png' });
    const imageBase64 = screenshot.toString('base64');

    await wopee.trackImage({
      browser: 'browser',
      comment: 'comment',
      customTags: 'customTags',
      device: 'device',
      imageBase64: imageBase64,
      os: 'os',
      pixelToPixelDiffTolerance: 1.0,
      scenarioName: 'trackImageWithoutStartScenario',
      stepName: 'image-trackImage',
      viewport: 'viewport',
    });
  });

  test('trackFullPageScreenshot', async ({ page }) => {
    await page.goto('https://playwright.dev/');

    await wopee.trackFullPage({
      browser: 'browser',
      comment: 'comment',
      customTags: 'customTags',
      device: 'device',
      os: 'os',
      page: page,
      pixelToPixelDiffTolerance: 1.0,
      scenarioName: 'trackFullPageScreenshotWithoutStartScenario',
      stepName: 'image-trackFullPageScreenshot',
      viewport: 'viewport',
    });
  });

  test('trackElement', async ({ page }) => {
    await page.goto('https://playwright.dev/');

    const element = page.locator('//a[@class="getStarted_Sjon"]');

    await wopee.trackElement({
      browser: 'browser',
      comment: 'comment',
      customTags: 'customTags',
      device: 'device',
      locator: element,
      os: 'os',
      pixelToPixelDiffTolerance: 1.0,
      scenarioName: 'trackElementWithoutStartScenario',
      stepName: 'element',
      viewport: 'viewport',
    });
  });

  test('trackViewport', async ({ page }) => {
    await page.goto('https://playwright.dev/');

    const element = page.locator('//a[@class="getStarted_Sjon"]');

    await wopee.trackElement({
      browser: 'browser',
      comment: 'comment',
      customTags: 'customTags',
      device: 'device',
      locator: element,
      os: 'os',
      pixelToPixelDiffTolerance: 1.0,
      scenarioName: 'trackViewportWithoutStartScenario',
      stepName: 'viewport',
      viewport: 'viewport',
    });
  });
});

Run tests

Run first demo test:

npx playwright test tests/sample.spec.ts