Skip to content

Latest commit

 

History

History
58 lines (41 loc) · 2.25 KB

README.md

File metadata and controls

58 lines (41 loc) · 2.25 KB

Visual testing for PIXI applications

This repository contains ...

To access the replication package for the paper "Automatically Detecting Visual Bugs in HTML5 <canvas> Games", please download the source from the p1 tag, or view the code on the paper_1 branch.

Prerequisites

Python (v3.4+)

Download and install the latest version of Python from this link. After installing Python, ensure Python's package manager (Pip) is installed by running the command:

python3 -m pip install ---upgrade pip

Node.js

Using the instructions found at this link, first install Node Version Manager (nvm), and then use nvm to install Node and Node Package Manager (npm).

Installation

  1. Download the latest release from the releases page
  2. Unzip the folder and place it inside your test directory
  3. Open the folder in your terminal and run the command ./install.sh

Note: Initial installation may take a long time due to Python dependencies

Usage

  1. Collect snapshots by instrumenting automated test scripts
  2. Run visual tests on collected snapshots with Python script
  • Snapshot name needs to be known on both ends

1. Collecting snapshots

  • instrument your test code to capture snapshots, which are pairs of (screenshot, scene graph)

e.g.

import { chromium } from 'playwright-core'
import { PixiSamplerAPI } from 'pixi-visual-test/pixi-sampler/src/PixiSamplerAPI'

(() => {
     myTest();
})()

async function myTest() {
    const browser = await chromium.launch();
    const page = browser.newPage();
    sampler = new PixiSamplerAPI(page, 'test/snapshots')
    // navigate to page, wait for canvas, and then inject the sampler into the webpage
    await page.goto("https://localhost:8000")
    await page.waitForSelector("canvas");
    await sampler.startExposing();
    // can now take snapshots of the Pixi application
    await sampler.takeSnapshot('my_snapshot');
}

2. Running visual tests

Run python3 sprite_similarity test/snapshots/<name_of_snapshot>