256 lines
8.1 KiB
JavaScript
256 lines
8.1 KiB
JavaScript
/**
|
|
* @copyright 2018 Julius Härtl <jus@bitgrid.net>
|
|
*
|
|
* @author 2018 Julius Härtl <jus@bitgrid.net>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*
|
|
*/
|
|
|
|
const puppeteer = require('puppeteer');
|
|
const pixelmatch = require('pixelmatch');
|
|
const expect = require('chai').expect;
|
|
const PNG = require('pngjs2').PNG;
|
|
const fs = require('fs');
|
|
const config = require('./config.js');
|
|
|
|
|
|
module.exports = {
|
|
browser: null,
|
|
pageBase: null,
|
|
pageCompare: null,
|
|
lastBase: 0,
|
|
lastCompare: 0,
|
|
init: async function (test) {
|
|
this._outputDirectory = `${config.outputDirectory}/${test.title}`;
|
|
if (!fs.existsSync(config.outputDirectory)) fs.mkdirSync(config.outputDirectory);
|
|
if (!fs.existsSync(this._outputDirectory)) fs.mkdirSync(this._outputDirectory);
|
|
await this.resetBrowser();
|
|
},
|
|
exit: async function () {
|
|
await this.browser.close();
|
|
},
|
|
resetBrowser: async function () {
|
|
if (this.browser) {
|
|
await this.browser.close();
|
|
}
|
|
this.browser = await puppeteer.launch({
|
|
args: ['--no-sandbox', '--disable-setuid-sandbox'],
|
|
headless: config.headless,
|
|
slowMo: config.slowMo,
|
|
});
|
|
this.pageBase = await this.browser.newPage();
|
|
this.pageCompare = await this.browser.newPage();
|
|
this.pageBase.setDefaultNavigationTimeout(60000);
|
|
this.pageCompare.setDefaultNavigationTimeout(60000);
|
|
|
|
const self = this;
|
|
this.pageCompare.on('requestfinished', function() {
|
|
self.lastCompare = Date.now();
|
|
});
|
|
this.pageBase.on('requestfinished', function() {
|
|
self.lastBase = Date.now();
|
|
});
|
|
},
|
|
|
|
awaitNetworkIdle: async function (seconds) {
|
|
var self = this;
|
|
return new Promise(function (resolve, reject) {
|
|
const timeout = setTimeout(function() {
|
|
reject();
|
|
}, 10000)
|
|
const waitForFoo = function() {
|
|
const currentTime = Date.now() - seconds*1000;
|
|
if (self.lastBase < currentTime && self.lastCompare < currentTime) {
|
|
clearTimeout(timeout);
|
|
return resolve();
|
|
}
|
|
setTimeout(waitForFoo, 100);
|
|
};
|
|
waitForFoo();
|
|
|
|
});
|
|
},
|
|
|
|
login: async function (test) {
|
|
test.timeout(20000);
|
|
await this.resetBrowser();
|
|
await Promise.all([
|
|
this.performLogin(this.pageBase, config.urlBase),
|
|
this.performLogin(this.pageCompare, config.urlChange)
|
|
]);
|
|
},
|
|
|
|
performLogin: async function (page, baseUrl) {
|
|
await page.bringToFront();
|
|
await page.goto(baseUrl + '/index.php/login', {waitUntil: 'networkidle0'});
|
|
await page.type('#user', 'admin');
|
|
await page.type('#password', 'admin');
|
|
const inputElement = await page.$('input[type=submit]');
|
|
await inputElement.click();
|
|
await page.waitForNavigation({waitUntil: 'networkidle2'});
|
|
return await page.waitForSelector('#header');
|
|
},
|
|
|
|
takeAndCompare: async function (test, route, action, options) {
|
|
// use Promise.all
|
|
if (options === undefined)
|
|
options = {};
|
|
if (options.waitUntil === undefined) {
|
|
options.waitUntil = 'networkidle0';
|
|
}
|
|
if (options.viewport) {
|
|
if (options.viewport.scale === undefined) {
|
|
options.viewport.scale = 1;
|
|
}
|
|
await Promise.all([
|
|
this.pageBase.setViewport({
|
|
width: options.viewport.w,
|
|
height: options.viewport.h,
|
|
deviceScaleFactor: options.viewport.scale
|
|
}),
|
|
this.pageCompare.setViewport({
|
|
width: options.viewport.w,
|
|
height: options.viewport.h,
|
|
deviceScaleFactor: options.viewport.scale
|
|
})
|
|
]);
|
|
await this.delay(100);
|
|
}
|
|
let fileName = test.test.title
|
|
if (route !== undefined) {
|
|
await Promise.all([
|
|
this.pageBase.goto(`${config.urlBase}${route}`, {waitUntil: options.waitUntil}),
|
|
this.pageCompare.goto(`${config.urlChange}${route}`, {waitUntil: options.waitUntil})
|
|
]);
|
|
}
|
|
await this.pageBase.$eval('body', function (e) {
|
|
$('.live-relative-timestamp').removeClass('live-relative-timestamp').text('5 minutes ago');
|
|
$(':focus').blur();
|
|
});
|
|
await this.pageCompare.$eval('body', function (e) {
|
|
$('.live-relative-timestamp').removeClass('live-relative-timestamp').text('5 minutes ago');
|
|
$(':focus').blur();
|
|
});
|
|
var failed = null;
|
|
try {
|
|
await this.pageBase.bringToFront();
|
|
await action(this.pageBase);
|
|
await this.pageCompare.bringToFront();
|
|
await action(this.pageCompare);
|
|
} catch (err) {
|
|
failed = err;
|
|
}
|
|
await this.awaitNetworkIdle(3);
|
|
await this.pageBase.$eval('body', function (e) {
|
|
$('.live-relative-timestamp').removeClass('live-relative-timestamp').text('5 minutes ago');
|
|
$(':focus').blur();
|
|
});
|
|
await this.pageCompare.$eval('body', function (e) {
|
|
$('.live-relative-timestamp').removeClass('live-relative-timestamp').text('5 minutes ago');
|
|
$(':focus').blur();
|
|
});
|
|
await Promise.all([
|
|
this.pageBase.screenshot({
|
|
path: `${this._outputDirectory}/${fileName}.base.png`,
|
|
fullPage: false,
|
|
}),
|
|
this.pageCompare.screenshot({
|
|
path: `${this._outputDirectory}/${fileName}.change.png`,
|
|
fullPage: false
|
|
})
|
|
]);
|
|
|
|
if (options.runOnly === true) {
|
|
fs.unlinkSync(`${this._outputDirectory}/${fileName}.base.png`);
|
|
fs.renameSync(`${this._outputDirectory}/${fileName}.change.png`, `${this._outputDirectory}/${fileName}.png`);
|
|
}
|
|
|
|
return new Promise(async (resolve, reject) => {
|
|
try {
|
|
if (options.runOnly !== true) {
|
|
await this.compareScreenshots(fileName);
|
|
}
|
|
} catch (err) {
|
|
if (failed) {
|
|
console.log('Failure during takeAndCompare action callback');
|
|
console.log(failed);
|
|
}
|
|
console.log('Failure when comparing images');
|
|
return reject(err);
|
|
}
|
|
if (options.runOnly !== true && failed) {
|
|
console.log('Failure during takeAndCompare action callback');
|
|
console.log(failed);
|
|
failed.failedAction = true;
|
|
return reject(failed);
|
|
}
|
|
return resolve();
|
|
});
|
|
},
|
|
|
|
compareScreenshots: function (fileName) {
|
|
let self = this;
|
|
return new Promise((resolve, reject) => {
|
|
const img1 = fs.createReadStream(`${self._outputDirectory}/${fileName}.base.png`).pipe(new PNG()).on('parsed', doneReading);
|
|
const img2 = fs.createReadStream(`${self._outputDirectory}/${fileName}.change.png`).pipe(new PNG()).on('parsed', doneReading);
|
|
|
|
let filesRead = 0;
|
|
|
|
function doneReading () {
|
|
// Wait until both files are read.
|
|
if (++filesRead < 2) return;
|
|
|
|
// The files should be the same size.
|
|
expect(img1.width, 'image widths are the same').equal(img2.width);
|
|
expect(img1.height, 'image heights are the same').equal(img2.height);
|
|
|
|
// Do the visual diff.
|
|
const diff = new PNG({width: img1.width, height: img2.height});
|
|
const numDiffPixels = pixelmatch(
|
|
img1.data, img2.data, diff.data, img1.width, img1.height,
|
|
{threshold: 0.3});
|
|
if (numDiffPixels > 0) {
|
|
diff.pack().pipe(fs.createWriteStream(`${self._outputDirectory}/${fileName}.diff.png`));
|
|
} else {
|
|
fs.unlinkSync(`${self._outputDirectory}/${fileName}.base.png`);
|
|
fs.renameSync(`${self._outputDirectory}/${fileName}.change.png`, `${self._outputDirectory}/${fileName}.png`);
|
|
}
|
|
|
|
// The files should look the same.
|
|
expect(numDiffPixels, 'number of different pixels').equal(0);
|
|
resolve();
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* Helper function to wait
|
|
* to make sure that initial animations are done
|
|
*/
|
|
delay: async function (timeout) {
|
|
return new Promise((resolve) => {
|
|
setTimeout(resolve, timeout);
|
|
});
|
|
},
|
|
|
|
childOfClassByText: async function (page, classname, text) {
|
|
return page.$x('//*[contains(concat(" ", normalize-space(@class), " "), " ' + classname + ' ")]//text()[normalize-space() = \'' + text + '\']/..');
|
|
},
|
|
|
|
childOfIdByText: async function (page, classname, text) {
|
|
return page.$x('//*[contains(concat(" ", normalize-space(@id), " "), " ' + classname + ' ")]//text()[normalize-space() = \'' + text + '\']/..');
|
|
}
|
|
};
|