Xight

Xight is a tool for detecting visual regressions in your applications! It compares two screenshots based on your configurations. You can test cross-browser and responsive!

Playwright and Pixelmatch under the hood

Since Xight is using Playwright under the hood you can test your Applications on Chromium, Firefox and Webkit! Also there are predefined resolutions and you can even add your custom sizes.

Note: Playwright isn't fully stable. If you have issues. Check the Is Playwright Ready Page

Pixelmatch takes two screenshots and compares them pixel by pixel. It even detects antialiasing.

Install

cd <your-project>
npm install xight

Workflow

Xight requires a configuration file in the root directory for creating the testing scenarios. You can easily add a blank configuration file with npx xight init via the CLI. Configure your urls, screen sizes, browsers and selectors like so.

• npx xight reference: Creates a set of scenarios (test cases) based on the configuration file, creates screenshots and saves them. Note: this command always clears the current reference screenshots before taking screenshots
• npx xight test: Creates a set of scenarios and compares them with the reference scenarios. Eventually writes a report with the results
• npx xight build: Builds the report with the latest test frontend to manual check the changes between the two versions
• npx xight serve -p: Serves and opens a report on -p, default: 3000
• npx xight approve: Overwrites the reference scenarios. You can also use the "Approve All" button on the report

Check the Xight CLI with: npx xight -h

Configuration

Configuration file needs some properties to work properly: id: Unique identifier for your test case browser: ["chromium", "firefox", "webkit"] - select at least one viewports: Array of viewports. check the predefined viewports or customize it like so:

{
    "label": custom,
    "height": 751,
    "width": 451
}

scenarios: Array of scenes objects which contains the actual tests

• scenarios[n].type: "url" or "storybook"
• scenarios[n].label: label
• scenarios[n].url: testing url (usually feature-branches)
• scenarios[n].referenceUrl: reference url (usually master-branches)
• scenarios[n].selectors Array of selectors to be screenshotted (e.g. "body", ".header" , "#sectionXYZ")
• scenarios[n].waitForSelector: waits till the selector is loaded
• scenarios[n].removeSelector: Array of selectors to be removed from the page
• scenarios[n].misMatchThreshold Threshold for divergent pixels. Default: 0.1

Scenarios.type: "storybook"

As a scenario type you can use "storybook". You just have to provide the root url of your component library and let Xight do the work for you. Xight will scratch the component refs and names from the application and builds scenes out of it.

Different screenshot sizes

If screenshots are having different dimensions, Xight will take the bigger screenshot and cuts out the smaller one starting at the top left, marks the scenario status as failed. Different dimension diffs will be labeled "Size diff" in the report

Predefined viewports

There are predefined viewports which you can use by name.

small  =  { width: 600, height: 480  };
medium  =  { width: 1440, height: 900  };
large  =  { width: 1920, height: 1080  };
iphoneXr  =  { width: 414, height: 896  };
iphoneXs  =  { width: 375, height: 812  };
iphone8  =  { width: 375, height: 667  };
ipadPro  =  { width: 1024, height: 1366  };
nexus6p  =  { width: 412, height: 732  };
googlePixel3Xl  =  { width: 412, height: 732  };

i.e.

...
viewports: ["medium", "iphoneXr", {label: "customSize", width: 651, height: 899}]
...

Note: Always write width as first parameter in the object because Xight transforms the object to a string and compares them