Visual Testing
What can it do?
WebdriverIO provides image comparisons on screens, elements or a full-page for
- 🖥️ Desktop browsers (Chrome / Firefox / Safari / Microsoft Edge)
- 📱 Mobile / Tablet browsers (Chrome on Android emulators / Safari on iOS Simulators / Simulators / real devices) via Appium
- 📱 Native Apps (Android emulators / iOS Simulators / real devices) via Appium (🌟 NEW 🌟)
- 📳 Hybrid apps via Appium
through the @wdio/visual-service
which is a lightweight WebdriverIO service.
This allows you to:
- save or compare screens/elements/full-page screens against a baseline
- automatically create a baseline when no baseline is there
- block out custom regions and even automatically exclude a status and or toolbars (mobile only) during a comparison
- increase the element dimensions screenshots
- hide text during website comparison to:
- improve stability and prevent font rendering flakiness
- only focus on the layout of a website
- use different comparison methods and a set of additional matchers for better readable tests
- verify how your website will support tabbing with your keyboard), see also Tabbing through a website
- and much more, see the service and method options
The service is a lightweight module to retrieve the needed data and screenshots for all browsers/devices. The comparison power comes from ResembleJS. If you want to compare images online you can check the online tool.
The methods saveScreen
, saveElement
, checkScreen
, checkElement
and the matchers toMatchScreenSnapshot
and toMatchElementSnapshot
can be used for Native Apps/Context.
Please use the property isHybridApp:true
in your service settings when you want to use it for Hybrid Apps.
Installation
The easiest way is to keep @wdio/visual-service
as a dev-dependency in your package.json
, via:
npm install --save-dev @wdio/visual-service
Usage
@wdio/visual-service
can be used as a normal service. You can set it up in your configuration file with the following:
import path from 'node:path'
// wdio.conf.ts
export const config = {
// ...
// =====
// Setup
// =====
services: [
['visual', {
// Some options, see the docs for more
baselineFolder: path.join(process.cwd(), 'tests', 'baseline'),
formatImageName: '{tag}-{logName}-{width}x{height}',
screenshotPath: path.join(process.cwd(), 'tmp'),
savePerInstance: true,
// ... more options
}]
]
// ...
}
More service options can be found here.
Once set up in your WebdriverIO configuration, you can go ahead and add visual assertions to your tests.