45ab3e0332
This adds a proof-of-concept of `puppeteer-firefox`. This consists of two parts: - `//experimental/juggler` - patches to apply to Firefox. - `//experimental/puppeteer-firefox` - front-end code to be merged with Puppeteer. As things become more stable, we'll gradually move it out of the experimental folder.
233 lines
8.9 KiB
JavaScript
233 lines
8.9 KiB
JavaScript
/**
|
|
* Copyright 2018 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.
|
|
*/
|
|
|
|
module.exports.addTests = function({testRunner, expect, product}) {
|
|
const {describe, xdescribe, fdescribe} = testRunner;
|
|
const {it, fit, xit} = testRunner;
|
|
const {beforeAll, beforeEach, afterAll, afterEach} = testRunner;
|
|
|
|
const FFOX = product === 'firefox';
|
|
const CHROME = product === 'chromium';
|
|
|
|
describe('Page.screenshot', function() {
|
|
it('should work', async({page, server}) => {
|
|
await page.setViewport({width: 500, height: 500});
|
|
await page.goto(server.PREFIX + '/grid.html');
|
|
const screenshot = await page.screenshot();
|
|
expect(screenshot).toBeGolden('screenshot-sanity.png');
|
|
});
|
|
it('should clip rect', async({page, server}) => {
|
|
await page.setViewport({width: 500, height: 500});
|
|
await page.goto(server.PREFIX + '/grid.html');
|
|
const screenshot = await page.screenshot({
|
|
clip: {
|
|
x: 50,
|
|
y: 100,
|
|
width: 150,
|
|
height: 100
|
|
}
|
|
});
|
|
expect(screenshot).toBeGolden('screenshot-clip-rect.png');
|
|
});
|
|
it('should work for offscreen clip', async({page, server}) => {
|
|
await page.setViewport({width: 500, height: 500});
|
|
await page.goto(server.PREFIX + '/grid.html');
|
|
const screenshot = await page.screenshot({
|
|
clip: {
|
|
x: 50,
|
|
y: 600,
|
|
width: 100,
|
|
height: 100
|
|
}
|
|
});
|
|
expect(screenshot).toBeGolden('screenshot-offscreen-clip.png');
|
|
});
|
|
it('should run in parallel', async({page, server}) => {
|
|
await page.setViewport({width: 500, height: 500});
|
|
await page.goto(server.PREFIX + '/grid.html');
|
|
const promises = [];
|
|
for (let i = 0; i < 3; ++i) {
|
|
promises.push(page.screenshot({
|
|
clip: {
|
|
x: 50 * i,
|
|
y: 0,
|
|
width: 50,
|
|
height: 50
|
|
}
|
|
}));
|
|
}
|
|
const screenshots = await Promise.all(promises);
|
|
expect(screenshots[1]).toBeGolden('grid-cell-1.png');
|
|
});
|
|
it('should take fullPage screenshots', async({page, server}) => {
|
|
await page.setViewport({width: 500, height: 500});
|
|
await page.goto(server.PREFIX + '/grid.html');
|
|
const screenshot = await page.screenshot({
|
|
fullPage: true
|
|
});
|
|
expect(screenshot).toBeGolden('screenshot-grid-fullpage.png');
|
|
});
|
|
it('should run in parallel in multiple pages', async({page, server, browser}) => {
|
|
const N = 2;
|
|
const pages = await Promise.all(Array(N).fill(0).map(async() => {
|
|
const page = await browser.newPage();
|
|
await page.goto(server.PREFIX + '/grid.html');
|
|
return page;
|
|
}));
|
|
const promises = [];
|
|
for (let i = 0; i < N; ++i)
|
|
promises.push(pages[i].screenshot({ clip: { x: 50 * i, y: 0, width: 50, height: 50 } }));
|
|
const screenshots = await Promise.all(promises);
|
|
for (let i = 0; i < N; ++i)
|
|
expect(screenshots[i]).toBeGolden(`grid-cell-${i}.png`);
|
|
await Promise.all(pages.map(page => page.close()));
|
|
});
|
|
(FFOX ? xit : it)('should allow transparency', async({page, server}) => {
|
|
await page.setViewport({ width: 100, height: 100 });
|
|
await page.goto(server.EMPTY_PAGE);
|
|
const screenshot = await page.screenshot({omitBackground: true});
|
|
expect(screenshot).toBeGolden('transparent.png');
|
|
});
|
|
(FFOX ? xit : it)('should render white background on jpeg file', async({page, server}) => {
|
|
await page.setViewport({ width: 100, height: 100 });
|
|
await page.goto(server.EMPTY_PAGE);
|
|
const screenshot = await page.screenshot({omitBackground: true, type: 'jpeg'});
|
|
expect(screenshot).toBeGolden('white.jpg');
|
|
});
|
|
it('should work with odd clip size on Retina displays', async({page, server}) => {
|
|
const screenshot = await page.screenshot({
|
|
clip: {
|
|
x: 0,
|
|
y: 0,
|
|
width: 11,
|
|
height: 11,
|
|
}
|
|
});
|
|
expect(screenshot).toBeGolden('screenshot-clip-odd-size.png');
|
|
});
|
|
it('should return base64', async({page, server}) => {
|
|
await page.setViewport({width: 500, height: 500});
|
|
await page.goto(server.PREFIX + '/grid.html');
|
|
const screenshot = await page.screenshot({
|
|
encoding: 'base64'
|
|
});
|
|
expect(Buffer.isBuffer(screenshot)).toBe(false);
|
|
expect(Buffer.from(screenshot, 'base64')).toBeGolden('screenshot-sanity.png');
|
|
});
|
|
});
|
|
|
|
describe('ElementHandle.screenshot', function() {
|
|
it('should work', async({page, server}) => {
|
|
await page.setViewport({width: 500, height: 500});
|
|
await page.goto(server.PREFIX + '/grid.html');
|
|
await page.evaluate(() => window.scrollBy(50, 100));
|
|
const elementHandle = await page.$('.box:nth-of-type(3)');
|
|
const screenshot = await elementHandle.screenshot();
|
|
expect(screenshot).toBeGolden('screenshot-element-bounding-box.png');
|
|
});
|
|
it('should take into account padding and border', async({page, server}) => {
|
|
await page.setViewport({width: 500, height: 500});
|
|
await page.setContent(`
|
|
something above
|
|
<style>div {
|
|
border: 2px solid blue;
|
|
background: green;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
<div></div>
|
|
`);
|
|
const elementHandle = await page.$('div');
|
|
const screenshot = await elementHandle.screenshot();
|
|
expect(screenshot).toBeGolden('screenshot-element-padding-border.png');
|
|
});
|
|
it('should capture full element when larger than viewport', async({page, server}) => {
|
|
await page.setViewport({width: 500, height: 500});
|
|
|
|
await page.setContent(`
|
|
something above
|
|
<style>
|
|
div.to-screenshot {
|
|
border: 1px solid blue;
|
|
width: 600px;
|
|
height: 600px;
|
|
margin-left: 50px;
|
|
}
|
|
::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
</style>
|
|
<div class="to-screenshot"></div>
|
|
`);
|
|
const elementHandle = await page.$('div.to-screenshot');
|
|
const screenshot = await elementHandle.screenshot();
|
|
expect(screenshot).toBeGolden('screenshot-element-larger-than-viewport.png');
|
|
|
|
expect(await page.evaluate(() => ({ w: window.innerWidth, h: window.innerHeight }))).toEqual({ w: 500, h: 500 });
|
|
});
|
|
it('should scroll element into view', async({page, server}) => {
|
|
await page.setViewport({width: 500, height: 500});
|
|
await page.setContent(`
|
|
something above
|
|
<style>div.above {
|
|
border: 2px solid blue;
|
|
background: red;
|
|
height: 1500px;
|
|
}
|
|
div.to-screenshot {
|
|
border: 2px solid blue;
|
|
background: green;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
<div class="above"></div>
|
|
<div class="to-screenshot"></div>
|
|
`);
|
|
const elementHandle = await page.$('div.to-screenshot');
|
|
const screenshot = await elementHandle.screenshot();
|
|
expect(screenshot).toBeGolden('screenshot-element-scrolled-into-view.png');
|
|
});
|
|
it('should work with a rotated element', async({page, server}) => {
|
|
await page.setViewport({width: 500, height: 500});
|
|
await page.setContent(`<div style="position:absolute;
|
|
top: 100px;
|
|
left: 100px;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: green;
|
|
transform: rotateZ(200deg);"> </div>`);
|
|
const elementHandle = await page.$('div');
|
|
const screenshot = await elementHandle.screenshot();
|
|
expect(screenshot).toBeGolden('screenshot-element-rotate.png');
|
|
});
|
|
it('should fail to screenshot a detached element', async({page, server}) => {
|
|
await page.setContent('<h1>remove this</h1>');
|
|
const elementHandle = await page.$('h1');
|
|
await page.evaluate(element => element.remove(), elementHandle);
|
|
const screenshotError = await elementHandle.screenshot().catch(error => error);
|
|
expect(screenshotError.message).toBe('Node is either not visible or not an HTMLElement');
|
|
});
|
|
(CHROME ? xit : it)('should not hang with zero width/height element', async({page, server}) => {
|
|
await page.setContent('<div style="width: 0; height: 0"></div>');
|
|
const div = await page.$('div');
|
|
await div.screenshot();
|
|
});
|
|
});
|
|
};
|
|
|