diff --git a/test/elementhandle.spec.js b/test/elementhandle.spec.js index 12d82c8a..e94b0606 100644 --- a/test/elementhandle.spec.js +++ b/test/elementhandle.spec.js @@ -210,106 +210,6 @@ module.exports.addTests = function({testRunner, expect}) { }); }); - 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 - -
- `); - 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 - -
- `); - 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 - -
-
- `); - 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(`
 
`); - 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('

remove this

'); - 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'); - }); - xit('should not hang with zero width/height element', async({page, server}) => { - await page.setContent('
'); - const div = await page.$('div'); - await div.screenshot(); - }); - }); - describe('ElementHandle.$', function() { it('should query existing element', async({page, server}) => { await page.goto(server.PREFIX + '/playground.html'); diff --git a/test/page.spec.js b/test/page.spec.js index 42ce82bf..8e5cb929 100644 --- a/test/page.spec.js +++ b/test/page.spec.js @@ -1657,112 +1657,6 @@ module.exports.addTests = function({testRunner, expect, headless}) { }); }); - 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, context}) => { - const N = 2; - const pages = await Promise.all(Array(N).fill(0).map(async() => { - const page = await context.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())); - }); - 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'); - }); - 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.from(screenshot, 'base64')).toBeGolden('screenshot-sanity.png'); - }); - }); - describe('Page.select', function() { it('should select single option', async({page, server}) => { await page.goto(server.PREFIX + '/input/select.html'); diff --git a/test/screenshot.spec.js b/test/screenshot.spec.js new file mode 100644 index 00000000..58fffdbb --- /dev/null +++ b/test/screenshot.spec.js @@ -0,0 +1,228 @@ +/** + * 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; + + 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, context}) => { + const N = 2; + const pages = await Promise.all(Array(N).fill(0).map(async() => { + const page = await context.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())); + }); + 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'); + }); + 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.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 + +
+ `); + 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 + +
+ `); + 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 + +
+
+ `); + 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(`
 
`); + 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('

remove this

'); + 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'); + }); + xit('should not hang with zero width/height element', async({page, server}) => { + await page.setContent('
'); + const div = await page.$('div'); + await div.screenshot(); + }); + }); + +}; diff --git a/test/test.js b/test/test.js index 8dbf0900..cea3b1e5 100644 --- a/test/test.js +++ b/test/test.js @@ -155,6 +155,7 @@ describe('Browser', function() { require('./jshandle.spec.js').addTests({testRunner, expect}); require('./network.spec.js').addTests({testRunner, expect}); require('./page.spec.js').addTests({testRunner, expect, headless}); + require('./screenshot.spec.js').addTests({testRunner, expect}); require('./target.spec.js').addTests({testRunner, expect}); require('./tracing.spec.js').addTests({testRunner, expect}); require('./worker.spec.js').addTests({testRunner, expect});