Choices/.github/actions-scripts/puppeteer.js
Konstantin Vyatkin dddba5b35b [TEST] Automatic screenshots comparing and error checking in IE11, Firefox and Chrome (#715)
* taking screenshots

* let's try

* save artifacts

* better exceptiosn

* try to install geskodriver

* fix edge name

* add check for safari

* check os

* try this

* again

* fix syntax

* try this

* try firefox on windows

* and again

* handle error

* and again

* try older macos

* add firefox screenshot

* switch back env

* switch back env

* add IE screenshot

* try sudo for safari

* try not install nuget

* try more

* more

* try this

* install firefox

* add chrome

* increase threshold

* add firefox-darwin

* push

* fixing

* let's go

* increase threeshold

* again

* try safari tp

* tap cask versions

* fix conditions

* try like this

* last run

* increase threshold

* reenable macos firefox

* last try for safari

* rename screenshots to snapshots

* check console

* console workarounds

* fix safari misspleings

* logging is not supported by everyone

* maximize and set rect

* errors only for Chrome

* remove safari for now

* try to decrease threshold

* cleanup

* increase threeshold

* sleep more and increase threeshold

* add pupeeter

* handle errors

* build

* add prettier end of line

* add gitattributes

* add png to binary

* more attributest

* limit run

* run on chages to snapshots

* hey!

* make artifacts named as snapshots

* just for fun: we don't need express here

* update pupeeter snapshot

* no audit

* don't wait for quit?

* try more IE capabilities

* add wait timeout

* use server.js
2019-11-02 11:18:19 +00:00

89 lines
2.3 KiB
JavaScript

const { readFileSync, writeFileSync, mkdirSync } = require('fs');
const path = require('path');
const { once } = require('events');
const puppeteer = require('puppeteer');
const pixelmatch = require('pixelmatch');
const { PNG } = require('pngjs');
const server = require('../../server');
async function test() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
let error;
let pixelDifference;
if (!server.listening) await once(server, 'listening');
try {
page.on('console', msg => {
if (msg.type() === 'error') throw new Error(msg.text());
});
page.on('pageerror', err => {
throw err;
});
await page.goto(`http://127.0.0.1:${server.address().port}`, {
waitUntil: 'networkidle2',
});
await page.setViewport({ width: 640, height: 1000 });
await page.click('label[for="choices-single-custom-templates"]');
await page.keyboard.press('ArrowDown');
await page.keyboard.press('ArrowDown');
const snapshotName = `puppeteer-${process.platform}.png`;
const artifactsPath = 'screenshot';
mkdirSync(artifactsPath, { recursive: true });
const imageBuffer = await page.screenshot({
path: path.join(artifactsPath, snapshotName),
fullPage: true,
});
// compare with snapshot
const screenshot = PNG.sync.read(imageBuffer);
const snapshot = PNG.sync.read(
readFileSync(path.resolve(__dirname, `./__snapshots__/${snapshotName}`)),
);
const { width, height } = screenshot;
const diff = new PNG({ width, height });
pixelDifference = pixelmatch(
screenshot.data,
snapshot.data,
diff.data,
width,
height,
{
threshold: 0.6,
},
);
writeFileSync(path.join(artifactsPath, 'diff.png'), PNG.sync.write(diff));
} catch (err) {
console.error(err);
error = err;
} finally {
await Promise.all([
browser.close(),
new Promise(resolve => server.close(resolve)),
]);
}
if (pixelDifference > 200) {
console.error(
`Snapshot is different from screenshot by ${pixelDifference} pixels`,
);
process.exit(1);
}
if (error) process.exit(1);
}
process.on('unhandledRejection', err => {
console.error(err);
process.exit(1);
});
process.once('uncaughtException', err => {
console.error(err);
process.exit(1);
});
setImmediate(test);