mirror of
https://github.com/puppeteer/puppeteer
synced 2024-06-14 14:02:48 +00:00
Merge goldentest.js into test.js
This patch introduces a custom jasmine matcher which compares images to golden results. As a result, it becomes possible to incorporate the goldentest.js into test.js. This allows to write tests in a unified way.
This commit is contained in:
Andrey Lushnikov
parent
792456302c
commit
9de48fb51e
@ -5,9 +5,8 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test-puppeteer": "jasmine test/test.js",
|
||||
"test-golden": "jasmine test/goldentest.js",
|
||||
"test-phantom": "python third_party/phantomjs/test/run-tests.py",
|
||||
"test": "npm run test-puppeteer && npm run test-golden && npm run test-phantom",
|
||||
"test": "npm run test-puppeteer && npm run test-phantom",
|
||||
"install": "node install.js"
|
||||
},
|
||||
"author": "The Chromium Authors",
|
||||
|
||||
@ -1,155 +0,0 @@
|
||||
/**
|
||||
* Copyright 2017 Google Inc. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var rm = require('rimraf').sync;
|
||||
var Browser = require('../lib/Browser');
|
||||
var StaticServer = require('./StaticServer');
|
||||
var PNG = require('pngjs').PNG;
|
||||
var pixelmatch = require('pixelmatch');
|
||||
|
||||
var PORT = 8907;
|
||||
var STATIC_PREFIX = 'http://localhost:' + PORT;
|
||||
var GOLDEN_DIR = path.join(__dirname, 'golden');
|
||||
var OUTPUT_DIR = path.join(__dirname, 'output');
|
||||
|
||||
describe('GoldenTests', function() {
|
||||
var browser;
|
||||
var staticServer;
|
||||
var page;
|
||||
|
||||
beforeAll(function() {
|
||||
browser = new Browser();
|
||||
staticServer = new StaticServer(path.join(__dirname, 'assets'), PORT);
|
||||
if (fs.existsSync(OUTPUT_DIR))
|
||||
rm(OUTPUT_DIR);
|
||||
});
|
||||
|
||||
afterAll(function() {
|
||||
browser.close();
|
||||
staticServer.stop();
|
||||
});
|
||||
|
||||
beforeEach(SX(async function() {
|
||||
page = await browser.newPage();
|
||||
}));
|
||||
|
||||
afterEach(function() {
|
||||
page.close();
|
||||
});
|
||||
|
||||
imageTest('screenshot-sanity.png', async function() {
|
||||
await page.setViewportSize({width: 500, height: 500});
|
||||
await page.navigate(STATIC_PREFIX + '/grid.html');
|
||||
return await page.screenshot();
|
||||
});
|
||||
|
||||
imageTest('screenshot-clip-rect.png', async function() {
|
||||
await page.setViewportSize({width: 500, height: 500});
|
||||
await page.navigate(STATIC_PREFIX + '/grid.html');
|
||||
return await page.screenshot({
|
||||
clip: {
|
||||
x: 50,
|
||||
y: 100,
|
||||
width: 150,
|
||||
height: 100
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
imageTest('screenshot-parallel-calls.png', async function() {
|
||||
await page.setViewportSize({width: 500, height: 500});
|
||||
await page.navigate(STATIC_PREFIX + '/grid.html');
|
||||
var promises = [];
|
||||
for (var i = 0; i < 3; ++i) {
|
||||
promises.push(page.screenshot({
|
||||
clip: {
|
||||
x: 50 * i,
|
||||
y: 0,
|
||||
width: 50,
|
||||
height: 50
|
||||
}
|
||||
}));
|
||||
}
|
||||
return await promises[1];
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {string} fileName
|
||||
* @param {function():!Promise} runner
|
||||
*/
|
||||
function imageTest(fileName, runner) {
|
||||
var expectedPath = path.join(GOLDEN_DIR, fileName);
|
||||
var actualPath = path.join(OUTPUT_DIR, fileName);
|
||||
var expected = null;
|
||||
if (fs.existsSync(expectedPath)) {
|
||||
var buffer = fs.readFileSync(expectedPath);
|
||||
expected = PNG.sync.read(buffer);
|
||||
}
|
||||
it(fileName, SX(async function() {
|
||||
var imageBuffer = await runner();
|
||||
if (!imageBuffer || !(imageBuffer instanceof Buffer)) {
|
||||
fail(fileName + ' test did not return Buffer with image.');
|
||||
return;
|
||||
}
|
||||
var actual = PNG.sync.read(imageBuffer);
|
||||
if (!expected) {
|
||||
ensureOutputDir();
|
||||
fs.writeFileSync(addSuffix(actualPath, '-actual'), imageBuffer);
|
||||
fail(fileName + ' is missing in golden results.');
|
||||
return;
|
||||
}
|
||||
if (expected.width !== actual.width || expected.height !== actual.height) {
|
||||
ensureOutputDir();
|
||||
fs.writeFileSync(addSuffix(actualPath, '-actual'), imageBuffer);
|
||||
fail(`Sizes differ: expected image ${expected.width}px X ${expected.height}px, but got ${actual.width}px X ${actual.height}px`);
|
||||
return;
|
||||
}
|
||||
var diff = new PNG({width: expected.width, height: expected.height});
|
||||
var count = pixelmatch(expected.data, actual.data, diff.data, expected.width, expected.height, {threshold: 0.1});
|
||||
if (count > 0) {
|
||||
ensureOutputDir();
|
||||
fs.writeFileSync(addSuffix(actualPath, '-actual'), imageBuffer);
|
||||
fs.writeFileSync(addSuffix(actualPath, '-diff'), PNG.sync.write(diff));
|
||||
fail(fileName + ' mismatch!');
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
function ensureOutputDir() {
|
||||
if (!fs.existsSync(OUTPUT_DIR))
|
||||
fs.mkdirSync(OUTPUT_DIR);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} filePath
|
||||
* @param {string} suffix
|
||||
* @return {string}
|
||||
*/
|
||||
function addSuffix(filePath, suffix) {
|
||||
var dirname = path.dirname(filePath);
|
||||
var ext = path.extname(filePath);
|
||||
var name = path.basename(filePath, ext);
|
||||
return path.join(dirname, name + suffix + ext);
|
||||
}
|
||||
|
||||
// Since Jasmine doesn't like async functions, they should be wrapped
|
||||
// in a SX function.
|
||||
function SX(fun) {
|
||||
return done => Promise.resolve(fun()).then(done).catch(done.fail);
|
||||
}
|
||||
132
test/test.js
132
test/test.js
@ -14,14 +14,22 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var rm = require('rimraf').sync;
|
||||
var Browser = require('../lib/Browser');
|
||||
var StaticServer = require('./StaticServer');
|
||||
var PNG = require('pngjs').PNG;
|
||||
var pixelmatch = require('pixelmatch');
|
||||
|
||||
var PORT = 8907;
|
||||
var STATIC_PREFIX = 'http://localhost:' + PORT;
|
||||
var EMPTY_PAGE = STATIC_PREFIX + '/empty.html';
|
||||
|
||||
var GOLDEN_DIR = path.join(__dirname, 'golden');
|
||||
var OUTPUT_DIR = path.join(__dirname, 'output');
|
||||
var PROJECT_DIR = path.join(__dirname, '..');
|
||||
|
||||
describe('Puppeteer', function() {
|
||||
var browser;
|
||||
var staticServer;
|
||||
@ -30,6 +38,8 @@ describe('Puppeteer', function() {
|
||||
beforeAll(function() {
|
||||
browser = new Browser();
|
||||
staticServer = new StaticServer(path.join(__dirname, 'assets'), PORT);
|
||||
if (fs.existsSync(OUTPUT_DIR))
|
||||
rm(OUTPUT_DIR);
|
||||
});
|
||||
|
||||
afterAll(function() {
|
||||
@ -39,6 +49,7 @@ describe('Puppeteer', function() {
|
||||
|
||||
beforeEach(SX(async function() {
|
||||
page = await browser.newPage();
|
||||
jasmine.addMatchers(customMatchers);
|
||||
}));
|
||||
|
||||
afterEach(function() {
|
||||
@ -196,8 +207,129 @@ describe('Puppeteer', function() {
|
||||
page.navigate(STATIC_PREFIX + '/error.html');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Page.screenshot', function() {
|
||||
it('should work', SX(async function() {
|
||||
await page.setViewportSize({width: 500, height: 500});
|
||||
await page.navigate(STATIC_PREFIX + '/grid.html');
|
||||
var screenshot = await page.screenshot();
|
||||
expect(screenshot).toBeGolden('screenshot-sanity.png');
|
||||
}));
|
||||
|
||||
it('should clip rect', SX(async function() {
|
||||
await page.setViewportSize({width: 500, height: 500});
|
||||
await page.navigate(STATIC_PREFIX + '/grid.html');
|
||||
var screenshot = await page.screenshot({
|
||||
clip: {
|
||||
x: 50,
|
||||
y: 100,
|
||||
width: 150,
|
||||
height: 100
|
||||
}
|
||||
});
|
||||
expect(screenshot).toBeGolden('screenshot-clip-rect.png');
|
||||
}));
|
||||
|
||||
it('should run in parallel', SX(async function() {
|
||||
await page.setViewportSize({width: 500, height: 500});
|
||||
await page.navigate(STATIC_PREFIX + '/grid.html');
|
||||
var promises = [];
|
||||
for (var i = 0; i < 3; ++i) {
|
||||
promises.push(page.screenshot({
|
||||
clip: {
|
||||
x: 50 * i,
|
||||
y: 0,
|
||||
width: 50,
|
||||
height: 50
|
||||
}
|
||||
}));
|
||||
}
|
||||
var screenshot = await promises[1];
|
||||
expect(screenshot).toBeGolden('screenshot-parallel-calls.png');
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
||||
var customMatchers = {
|
||||
toBeGolden: function(util, customEqualityTesters) {
|
||||
return {
|
||||
compare: function(actual, expected) {
|
||||
return compareImageToGolden(actual, expected);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {?Buffer} imageBuffer
|
||||
* @param {string} goldenName
|
||||
* @return {!{pass: boolean, message: (undefined|string)}}
|
||||
*/
|
||||
function compareImageToGolden(imageBuffer, goldenName) {
|
||||
if (!imageBuffer || !(imageBuffer instanceof Buffer)) {
|
||||
return {
|
||||
pass: false,
|
||||
message: 'Test did not return Buffer with image.'
|
||||
};
|
||||
}
|
||||
var expectedPath = path.join(GOLDEN_DIR, goldenName);
|
||||
var actualPath = path.join(OUTPUT_DIR, goldenName);
|
||||
var diffPath = addSuffix(path.join(OUTPUT_DIR, goldenName), '-diff');
|
||||
var helpMessage = 'Output is saved in ' + path.relative(PROJECT_DIR, OUTPUT_DIR);
|
||||
|
||||
if (!fs.existsSync(expectedPath)) {
|
||||
ensureOutputDir();
|
||||
fs.writeFileSync(actualPath, imageBuffer);
|
||||
return {
|
||||
pass: false,
|
||||
message: goldenName + ' is missing in golden results. ' + helpMessage
|
||||
};
|
||||
}
|
||||
var actual = PNG.sync.read(imageBuffer);
|
||||
var expected = PNG.sync.read(fs.readFileSync(expectedPath));
|
||||
if (expected.width !== actual.width || expected.height !== actual.height) {
|
||||
ensureOutputDir();
|
||||
fs.writeFileSync(actualPath, imageBuffer);
|
||||
var message = `Sizes differ: expected image ${expected.width}px X ${expected.height}px, but got ${actual.width}px X ${actual.height}px. `;
|
||||
return {
|
||||
pass: false,
|
||||
message: message + helpMessage
|
||||
};
|
||||
}
|
||||
var diff = new PNG({width: expected.width, height: expected.height});
|
||||
var count = pixelmatch(expected.data, actual.data, diff.data, expected.width, expected.height, {threshold: 0.1});
|
||||
if (count > 0) {
|
||||
ensureOutputDir();
|
||||
fs.writeFileSync(actualPath, imageBuffer);
|
||||
fs.writeFileSync(diffPath, PNG.sync.write(diff));
|
||||
return {
|
||||
pass: false,
|
||||
message: goldenName + ' mismatch! ' + helpMessage
|
||||
};
|
||||
}
|
||||
return {
|
||||
pass: true
|
||||
};
|
||||
}
|
||||
|
||||
function ensureOutputDir() {
|
||||
if (!fs.existsSync(OUTPUT_DIR))
|
||||
fs.mkdirSync(OUTPUT_DIR);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} filePath
|
||||
* @param {string} suffix
|
||||
* @return {string}
|
||||
*/
|
||||
function addSuffix(filePath, suffix) {
|
||||
var dirname = path.dirname(filePath);
|
||||
var ext = path.extname(filePath);
|
||||
var name = path.basename(filePath, ext);
|
||||
return path.join(dirname, name + suffix + ext);
|
||||
}
|
||||
|
||||
|
||||
// Since Jasmine doesn't like async functions, they should be wrapped
|
||||
// in a SX function.
|
||||
function SX(fun) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user