diff --git a/docs/api.md b/docs/api.md index 33dcf9434d647..c0f722f62ab81 100644 --- a/docs/api.md +++ b/docs/api.md @@ -1298,18 +1298,18 @@ await browser.close(); #### page.screenshot([options]) - `options` <[Object]> Options object which might have the following properties: - `path` <[string]> The file path to save the image to. The screenshot type will be inferred from file extension. If `path` is a relative path, then it is resolved relative to [current working directory](https://nodejs.org/api/process.html#process_process_cwd). If no path is provided, the image won't be saved to the disk. - - `type` <"png"|"jpeg"> Specify screenshot type, defaults to 'png'. + - `type` <"png"|"jpeg"> Specify screenshot type, defaults to `png`. - `quality` <[number]> The quality of the image, between 0-100. Not applicable to `png` images. - - `fullPage` <[boolean]> When true, takes a screenshot of the full scrollable page. Defaults to `false`. - - `clip` <[Object]> An object which specifies clipping region of the page. Should have the following fields: + - `fullPage` <[boolean]> When true, takes a screenshot of the full scrollable page, instead of the currently visibvle viewport. Defaults to `false`. + - `clip` <[Object]> An object which specifies clipping of the resulting image. Should have the following fields: - `x` <[number]> x-coordinate of top-left corner of clip area - `y` <[number]> y-coordinate of top-left corner of clip area - `width` <[number]> width of clipping area - `height` <[number]> height of clipping area - - `omitBackground` <[boolean]> Hides default white background and allows capturing screenshots with transparency. Defaults to `false`. + - `omitBackground` <[boolean]> Hides default white background and allows capturing screenshots with transparency. Not applicable to `jpeg` images. Defaults to `false`. - returns: <[Promise]<[Buffer]>> Promise which resolves to buffer with the captured screenshot. -> **NOTE** Screenshots take at least 1/6 second on OS X. See https://crbug.com/741689 for discussion. +> **NOTE** Screenshots take at least 1/6 second on Chromium OS X and Chromium Windows. See https://crbug.com/741689 for discussion. #### page.select(selector, value, options) - `selector` <[string]> A selector to query frame for. @@ -2483,13 +2483,12 @@ If `key` is a single character and no modifier keys besides `Shift` are being he #### elementHandle.screenshot([options]) - `options` <[Object]> Screenshot options. - `path` <[string]> The file path to save the image to. The screenshot type will be inferred from file extension. If `path` is a relative path, then it is resolved relative to [current working directory](https://nodejs.org/api/process.html#process_process_cwd). If no path is provided, the image won't be saved to the disk. - - `type` <"png"|"jpeg"> Specify screenshot type, defaults to 'png'. + - `type` <"png"|"jpeg"> Specify screenshot type, defaults to `png`. - `quality` <[number]> The quality of the image, between 0-100. Not applicable to `png` images. - - `omitBackground` <[boolean]> Hides default white background and allows capturing screenshots with transparency. Defaults to `false`. + - `omitBackground` <[boolean]> Hides default white background and allows capturing screenshots with transparency. Not applicable to `jpeg` images. Defaults to `false`. - returns: <[Promise]<|[Buffer]>> Promise which resolves to buffer with the captured screenshot. -This method scrolls element into view if needed, and then uses [page.screenshot](#pagescreenshotoptions) to take a screenshot of the element. -If the element is detached from DOM, the method throws an error. +This method scrolls element into view if needed before taking a screenshot. If the element is detached from DOM, the method throws an error. #### elementHandle.scrollIntoViewIfNeeded() - returns: <[Promise]> Resolves after the element has been scrolled into view. diff --git a/src/chromium/crPage.ts b/src/chromium/crPage.ts index ed0a8633165f6..fd70da0338b0e 100644 --- a/src/chromium/crPage.ts +++ b/src/chromium/crPage.ts @@ -417,16 +417,6 @@ export class CRPage implements PageDelegate { await this._browser._closePage(this._page); } - async getBoundingBoxForScreenshot(handle: dom.ElementHandle): Promise { - const rect = await handle.boundingBox(); - if (!rect) - return rect; - const { layoutViewport: { pageX, pageY } } = await this._client.send('Page.getLayoutMetrics'); - rect.x += pageX; - rect.y += pageY; - return rect; - } - canScreenshotOutsideViewport(): boolean { return false; } @@ -435,10 +425,23 @@ export class CRPage implements PageDelegate { await this._client.send('Emulation.setDefaultBackgroundColorOverride', { color }); } - async takeScreenshot(format: 'png' | 'jpeg', options: types.ScreenshotOptions, viewportSize: types.Size): Promise { + async takeScreenshot(format: 'png' | 'jpeg', documentRect: types.Rect | undefined, viewportRect: types.Rect | undefined, quality: number | undefined): Promise { + const { visualViewport } = await this._client.send('Page.getLayoutMetrics'); + if (!documentRect) { + documentRect = { + x: visualViewport.pageX + viewportRect!.x, + y: visualViewport.pageY + viewportRect!.y, + ...helper.enclosingIntSize({ + width: viewportRect!.width / visualViewport.scale, + height: viewportRect!.height / visualViewport.scale, + }) + }; + } await this._client.send('Page.bringToFront', {}); - const clip = options.clip ? { ...options.clip, scale: 1 } : undefined; - const result = await this._client.send('Page.captureScreenshot', { format, quality: options.quality, clip }); + // When taking screenshots with documentRect (based on the page content, not viewport), + // ignore current page scale. + const clip = { ...documentRect, scale: viewportRect ? visualViewport.scale : 1 }; + const result = await this._client.send('Page.captureScreenshot', { format, quality, clip }); return platform.Buffer.from(result.data, 'base64'); } diff --git a/src/firefox/ffPage.ts b/src/firefox/ffPage.ts index dcbfc71a3f232..ad5d60ba3a562 100644 --- a/src/firefox/ffPage.ts +++ b/src/firefox/ffPage.ts @@ -317,15 +317,6 @@ export class FFPage implements PageDelegate { await this._session.send('Page.close', { runBeforeUnload }); } - async getBoundingBoxForScreenshot(handle: dom.ElementHandle): Promise { - const frameId = handle._context.frame._id; - const response = await this._session.send('Page.getBoundingBox', { - frameId, - objectId: handle._remoteObject.objectId, - }); - return response.boundingBox; - } - canScreenshotOutsideViewport(): boolean { return true; } @@ -335,11 +326,22 @@ export class FFPage implements PageDelegate { throw new Error('Not implemented'); } - async takeScreenshot(format: 'png' | 'jpeg', options: types.ScreenshotOptions, viewportSize: types.Size): Promise { + async takeScreenshot(format: 'png' | 'jpeg', documentRect: types.Rect | undefined, viewportRect: types.Rect | undefined, quality: number | undefined): Promise { + if (!documentRect) { + const context = await this._page.mainFrame()._utilityContext(); + const scrollOffset = await context.evaluate(() => ({ x: window.scrollX, y: window.scrollY })); + documentRect = { + x: viewportRect!.x + scrollOffset.x, + y: viewportRect!.y + scrollOffset.y, + width: viewportRect!.width, + height: viewportRect!.height, + }; + } + // TODO: remove fullPage option from Page.screenshot. + // TODO: remove Page.getBoundingBox method. const { data } = await this._session.send('Page.screenshot', { mimeType: ('image/' + format) as ('image/png' | 'image/jpeg'), - fullPage: options.fullPage, - clip: options.clip, + clip: documentRect, }).catch(e => { if (e instanceof Error && e.message.includes('document.documentElement is null')) e.message = kScreenshotDuringNavigationError; @@ -349,7 +351,7 @@ export class FFPage implements PageDelegate { } async resetViewport(): Promise { - await this._session.send('Page.setViewportSize', { viewportSize: null }); + assert(false, 'Should not be called'); } async getContentFrame(handle: dom.ElementHandle): Promise { diff --git a/src/helper.ts b/src/helper.ts index e02b4be845e04..c4c7b25990a18 100644 --- a/src/helper.ts +++ b/src/helper.ts @@ -17,6 +17,7 @@ import { TimeoutError } from './errors'; import * as platform from './platform'; +import * as types from './types'; export const debugError = platform.debug(`pw:error`); @@ -266,6 +267,18 @@ class Helper { const rightHalf = maxLength - leftHalf - 1; return string.substr(0, leftHalf) + '\u2026' + string.substr(this.length - rightHalf, rightHalf); } + + static enclosingIntRect(rect: types.Rect): types.Rect { + const x = Math.floor(rect.x + 1e-3); + const y = Math.floor(rect.y + 1e-3); + const x2 = Math.ceil(rect.x + rect.width - 1e-3); + const y2 = Math.ceil(rect.y + rect.height - 1e-3); + return { x, y, width: x2 - x, height: y2 - y }; + } + + static enclosingIntSize(size: types.Size): types.Size { + return { width: Math.floor(size.width + 1e-3), height: Math.floor(size.height + 1e-3) }; + } } export function assert(value: any, message?: string): asserts value { diff --git a/src/page.ts b/src/page.ts index afce4164932f3..e664b0d578aa4 100644 --- a/src/page.ts +++ b/src/page.ts @@ -54,11 +54,10 @@ export interface PageDelegate { authenticate(credentials: types.Credentials | null): Promise; setFileChooserIntercepted(enabled: boolean): Promise; - getBoundingBoxForScreenshot(handle: dom.ElementHandle): Promise; canScreenshotOutsideViewport(): boolean; + resetViewport(): Promise; // Only called if canScreenshotOutsideViewport() returns false. setBackgroundColor(color?: { r: number; g: number; b: number; a: number; }): Promise; - takeScreenshot(format: string, options: types.ScreenshotOptions, viewportSize: types.Size): Promise; - resetViewport(oldSize: types.Size): Promise; + takeScreenshot(format: string, documentRect: types.Rect | undefined, viewportRect: types.Rect | undefined, quality: number | undefined): Promise; isElementHandle(remoteObject: any): boolean; adoptElementHandle(handle: dom.ElementHandle, to: dom.FrameExecutionContext): Promise>; diff --git a/src/platform.ts b/src/platform.ts index ae6c2574ada73..97200f0db90f3 100644 --- a/src/platform.ts +++ b/src/platform.ts @@ -234,9 +234,9 @@ export function urlMatches(urlString: string, match: types.URLMatch | undefined) return match(url); } -export function pngToJpeg(buffer: Buffer): Buffer { +export function pngToJpeg(buffer: Buffer, quality?: number): Buffer { assert(isNode, 'Converting from png to jpeg is only supported in Node.js'); - return jpeg.encode(png.PNG.sync.read(buffer)).data; + return jpeg.encode(png.PNG.sync.read(buffer), quality).data; } function nodeFetch(url: string): Promise { diff --git a/src/screenshotter.ts b/src/screenshotter.ts index 772af2f7ccb09..dcec2d562611c 100644 --- a/src/screenshotter.ts +++ b/src/screenshotter.ts @@ -16,7 +16,7 @@ */ import * as dom from './dom'; -import { assert } from './helper'; +import { assert, helper } from './helper'; import * as types from './types'; import { Page } from './page'; import * as platform from './platform'; @@ -40,108 +40,120 @@ export class Screenshotter { const originalViewportSize = this._page.viewportSize(); let viewportSize = originalViewportSize; if (!viewportSize) { - const maybeViewportSize = await this._page.evaluate(() => { + const context = await this._page.mainFrame()._utilityContext(); + viewportSize = await context.evaluate(() => { if (!document.body || !document.documentElement) - return; + return null; return { width: Math.max(document.body.offsetWidth, document.documentElement.offsetWidth), height: Math.max(document.body.offsetHeight, document.documentElement.offsetHeight), }; }); - if (!maybeViewportSize) + if (!viewportSize) throw new Error(kScreenshotDuringNavigationError); - viewportSize = maybeViewportSize; } return { viewportSize, originalViewportSize }; } + private async _fullPageSize(): Promise { + const context = await this._page.mainFrame()._utilityContext(); + const fullPageSize = await context.evaluate(() => { + if (!document.body || !document.documentElement) + return null; + return { + width: Math.max( + document.body.scrollWidth, document.documentElement.scrollWidth, + document.body.offsetWidth, document.documentElement.offsetWidth, + document.body.clientWidth, document.documentElement.clientWidth + ), + height: Math.max( + document.body.scrollHeight, document.documentElement.scrollHeight, + document.body.offsetHeight, document.documentElement.offsetHeight, + document.body.clientHeight, document.documentElement.clientHeight + ), + }; + }); + if (!fullPageSize) + throw new Error(kScreenshotDuringNavigationError); + return fullPageSize; + } + async screenshotPage(options: types.ScreenshotOptions = {}): Promise { const format = validateScreeshotOptions(options); return this._queue.postTask(async () => { const { viewportSize, originalViewportSize } = await this._originalViewportSize(); - let overridenViewportSize: types.Size | null = null; - if (options.fullPage && !this._page._delegate.canScreenshotOutsideViewport()) { - const fullPageRect = await this._page.evaluate(() => { - if (!document.body || !document.documentElement) - return null; - return { - width: Math.max( - document.body.scrollWidth, document.documentElement.scrollWidth, - document.body.offsetWidth, document.documentElement.offsetWidth, - document.body.clientWidth, document.documentElement.clientWidth - ), - height: Math.max( - document.body.scrollHeight, document.documentElement.scrollHeight, - document.body.offsetHeight, document.documentElement.offsetHeight, - document.body.clientHeight, document.documentElement.clientHeight - ), - }; - }); - if (!fullPageRect) - throw new Error(kScreenshotDuringNavigationError); - overridenViewportSize = fullPageRect; - await this._page.setViewportSize(overridenViewportSize); - } else if (options.clip) { - options.clip = trimClipToViewport(viewportSize, options.clip); + + if (options.fullPage) { + const fullPageSize = await this._fullPageSize(); + let documentRect = { x: 0, y: 0, width: fullPageSize.width, height: fullPageSize.height }; + let overridenViewportSize: types.Size | null = null; + const fitsViewport = fullPageSize.width <= viewportSize.width && fullPageSize.height <= viewportSize.height; + if (!this._page._delegate.canScreenshotOutsideViewport() && !fitsViewport) { + overridenViewportSize = fullPageSize; + await this._page.setViewportSize(overridenViewportSize); + } + if (options.clip) + documentRect = trimClipToSize(options.clip, documentRect); + return await this._screenshot(format, documentRect, undefined, options, overridenViewportSize, originalViewportSize); } - return await this._screenshot(format, options, viewportSize, overridenViewportSize, originalViewportSize); + const viewportRect = options.clip ? trimClipToSize(options.clip, viewportSize) : { x: 0, y: 0, ...viewportSize }; + return await this._screenshot(format, undefined, viewportRect, options, null, originalViewportSize); }).catch(rewriteError); } async screenshotElement(handle: dom.ElementHandle, options: types.ElementScreenshotOptions = {}): Promise { const format = validateScreeshotOptions(options); - const rewrittenOptions: types.ScreenshotOptions = { ...options }; return this._queue.postTask(async () => { - let maybeBoundingBox = await this._page._delegate.getBoundingBoxForScreenshot(handle); - assert(maybeBoundingBox, 'Node is either not visible or not an HTMLElement'); - let boundingBox = maybeBoundingBox; + const { viewportSize, originalViewportSize } = await this._originalViewportSize(); + + await handle.scrollIntoViewIfNeeded(); + let boundingBox = await handle.boundingBox(); + assert(boundingBox, 'Node is either not visible or not an HTMLElement'); assert(boundingBox.width !== 0, 'Node has 0 width.'); assert(boundingBox.height !== 0, 'Node has 0 height.'); - boundingBox = enclosingIntRect(boundingBox); - - const { viewportSize, originalViewportSize } = await this._originalViewportSize(); let overridenViewportSize: types.Size | null = null; - if (!this._page._delegate.canScreenshotOutsideViewport()) { - if (boundingBox.width > viewportSize.width || boundingBox.height > viewportSize.height) { - overridenViewportSize = { - width: Math.max(viewportSize.width, boundingBox.width), - height: Math.max(viewportSize.height, boundingBox.height), - }; - await this._page.setViewportSize(overridenViewportSize); - } + const fitsViewport = boundingBox.width <= viewportSize.width && boundingBox.height <= viewportSize.height; + if (!this._page._delegate.canScreenshotOutsideViewport() && !fitsViewport) { + overridenViewportSize = helper.enclosingIntSize({ + width: Math.max(viewportSize.width, boundingBox.width), + height: Math.max(viewportSize.height, boundingBox.height), + }); + await this._page.setViewportSize(overridenViewportSize); await handle.scrollIntoViewIfNeeded(); - maybeBoundingBox = await this._page._delegate.getBoundingBoxForScreenshot(handle); - assert(maybeBoundingBox, 'Node is either not visible or not an HTMLElement'); - boundingBox = enclosingIntRect(maybeBoundingBox); + boundingBox = await handle.boundingBox(); + assert(boundingBox, 'Node is either not visible or not an HTMLElement'); + assert(boundingBox.width !== 0, 'Node has 0 width.'); + assert(boundingBox.height !== 0, 'Node has 0 height.'); } - if (!overridenViewportSize) - rewrittenOptions.clip = boundingBox; - - return await this._screenshot(format, rewrittenOptions, viewportSize, overridenViewportSize, originalViewportSize); + const context = await this._page.mainFrame()._utilityContext(); + const scrollOffset = await context.evaluate(() => ({ x: window.scrollX, y: window.scrollY })); + const documentRect = { ...boundingBox }; + documentRect.x += scrollOffset.x; + documentRect.y += scrollOffset.y; + return await this._screenshot(format, helper.enclosingIntRect(documentRect), undefined, options, overridenViewportSize, originalViewportSize); }).catch(rewriteError); } - private async _screenshot(format: 'png' | 'jpeg', options: types.ScreenshotOptions, viewportSize: types.Size, overridenViewportSize: types.Size | null, originalViewportSize: types.Size | null): Promise { + private async _screenshot(format: 'png' | 'jpeg', documentRect: types.Rect | undefined, viewportRect: types.Rect | undefined, options: types.ElementScreenshotOptions, overridenViewportSize: types.Size | null, originalViewportSize: types.Size | null): Promise { const shouldSetDefaultBackground = options.omitBackground && format === 'png'; if (shouldSetDefaultBackground) await this._page._delegate.setBackgroundColor({ r: 0, g: 0, b: 0, a: 0}); - const buffer = await this._page._delegate.takeScreenshot(format, options, overridenViewportSize || viewportSize); + const buffer = await this._page._delegate.takeScreenshot(format, documentRect, viewportRect, options.quality); if (shouldSetDefaultBackground) await this._page._delegate.setBackgroundColor(); - if (options.path) - await platform.writeFileAsync(options.path, buffer); - if (overridenViewportSize) { + assert(!this._page._delegate.canScreenshotOutsideViewport()); if (originalViewportSize) await this._page.setViewportSize(originalViewportSize); else - await this._page._delegate.resetViewport(viewportSize); + await this._page._delegate.resetViewport(); } - + if (options.path) + await platform.writeFileAsync(options.path, buffer); return buffer; } } @@ -162,13 +174,17 @@ class TaskQueue { } } -function trimClipToViewport(viewportSize: types.Size, clip: types.Rect | undefined): types.Rect | undefined { - if (!clip) - return clip; - const p1 = { x: Math.min(clip.x, viewportSize.width), y: Math.min(clip.y, viewportSize.height) }; - const p2 = { x: Math.min(clip.x + clip.width, viewportSize.width), y: Math.min(clip.y + clip.height, viewportSize.height) }; +function trimClipToSize(clip: types.Rect, size: types.Size): types.Rect { + const p1 = { + x: Math.max(0, Math.min(clip.x, size.width)), + y: Math.max(0, Math.min(clip.y, size.height)) + }; + const p2 = { + x: Math.max(0, Math.min(clip.x + clip.width, size.width)), + y: Math.max(0, Math.min(clip.y + clip.height, size.height)) + }; const result = { x: p1.x, y: p1.y, width: p2.x - p1.x, height: p2.y - p1.y }; - assert(result.width && result.height, 'Clipped area is either empty or outside the viewport'); + assert(result.width && result.height, 'Clipped area is either empty or outside the resulting image'); return result; } @@ -197,7 +213,6 @@ function validateScreeshotOptions(options: types.ScreenshotOptions): 'png' | 'jp assert(Number.isInteger(options.quality), 'Expected options.quality to be an integer'); assert(options.quality >= 0 && options.quality <= 100, 'Expected options.quality to be between 0 and 100 (inclusive), got ' + options.quality); } - assert(!options.clip || !options.fullPage, 'options.clip and options.fullPage are exclusive'); if (options.clip) { assert(typeof options.clip.x === 'number', 'Expected options.clip.x to be a number but found ' + (typeof options.clip.x)); assert(typeof options.clip.y === 'number', 'Expected options.clip.y to be a number but found ' + (typeof options.clip.y)); @@ -209,14 +224,6 @@ function validateScreeshotOptions(options: types.ScreenshotOptions): 'png' | 'jp return format; } -function enclosingIntRect(rect: types.Rect): types.Rect { - const x = Math.floor(rect.x + 1e-3); - const y = Math.floor(rect.y + 1e-3); - const x2 = Math.ceil(rect.x + rect.width - 1e-3); - const y2 = Math.ceil(rect.y + rect.height - 1e-3); - return { x, y, width: x2 - x, height: y2 - y }; -} - export const kScreenshotDuringNavigationError = 'Cannot take a screenshot while page is navigating'; function rewriteError(e: any) { if (typeof e === 'object' && e instanceof Error && e.message.includes('Execution context was destroyed')) diff --git a/src/webkit/wkPage.ts b/src/webkit/wkPage.ts index ee0b7f1f3a998..e9adfb2eb674d 100644 --- a/src/webkit/wkPage.ts +++ b/src/webkit/wkPage.ts @@ -488,12 +488,8 @@ export class WKPage implements PageDelegate { }).catch(debugError); } - getBoundingBoxForScreenshot(handle: dom.ElementHandle): Promise { - return handle.boundingBox(); - } - canScreenshotOutsideViewport(): boolean { - return false; + return true; } async setBackgroundColor(color?: { r: number; g: number; b: number; a: number; }): Promise { @@ -501,18 +497,20 @@ export class WKPage implements PageDelegate { await this._session.send('Page.setDefaultBackgroundColorOverride', { color }); } - async takeScreenshot(format: string, options: types.ScreenshotOptions, viewportSize: types.Size): Promise { - const rect = options.clip || { x: 0, y: 0, width: viewportSize.width, height: viewportSize.height }; - const result = await this._session.send('Page.snapshotRect', { ...rect, coordinateSystem: options.fullPage ? 'Page' : 'Viewport' }); + async takeScreenshot(format: string, documentRect: types.Rect | undefined, viewportRect: types.Rect | undefined, quality: number | undefined): Promise { + // TODO: documentRect does not include pageScale, while backend considers it does. + // This brakes mobile screenshots of elements or full page. + const rect = (documentRect || viewportRect)!; + const result = await this._session.send('Page.snapshotRect', { ...rect, coordinateSystem: documentRect ? 'Page' : 'Viewport' }); const prefix = 'data:image/png;base64,'; let buffer = platform.Buffer.from(result.dataURL.substr(prefix.length), 'base64'); if (format === 'jpeg') - buffer = platform.pngToJpeg(buffer); + buffer = platform.pngToJpeg(buffer, quality); return buffer; } - async resetViewport(oldSize: types.Size): Promise { - await this._pageProxySession.send('Emulation.setDeviceMetricsOverride', { ...oldSize, fixedLayout: false, deviceScaleFactor: 0 }); + async resetViewport(): Promise { + assert(false, 'Should not be called'); } async getContentFrame(handle: dom.ElementHandle): Promise { diff --git a/test/assets/overflow-large.html b/test/assets/overflow-large.html new file mode 100644 index 0000000000000..3d76f830d5248 --- /dev/null +++ b/test/assets/overflow-large.html @@ -0,0 +1,22 @@ + + + + + diff --git a/test/golden-chromium/screenshot-element-mobile.png b/test/golden-chromium/screenshot-element-mobile.png new file mode 100644 index 0000000000000..c2c3ddca298ab Binary files /dev/null and b/test/golden-chromium/screenshot-element-mobile.png differ diff --git a/test/golden-chromium/screenshot-mobile-clip.png b/test/golden-chromium/screenshot-mobile-clip.png new file mode 100644 index 0000000000000..e0b7ed42f19f7 Binary files /dev/null and b/test/golden-chromium/screenshot-mobile-clip.png differ diff --git a/test/golden-chromium/screenshot-mobile-fullpage.png b/test/golden-chromium/screenshot-mobile-fullpage.png new file mode 100644 index 0000000000000..bb975e20efeb9 Binary files /dev/null and b/test/golden-chromium/screenshot-mobile-fullpage.png differ diff --git a/test/golden-webkit/screenshot-mobile-clip.png b/test/golden-webkit/screenshot-mobile-clip.png new file mode 100644 index 0000000000000..fd3a8600b53fb Binary files /dev/null and b/test/golden-webkit/screenshot-mobile-clip.png differ diff --git a/test/screenshot.spec.js b/test/screenshot.spec.js index 9249557ddded9..66f3b35778f99 100644 --- a/test/screenshot.spec.js +++ b/test/screenshot.spec.js @@ -43,6 +43,21 @@ module.exports.describe = function({testRunner, expect, product, FFOX, CHROMIUM, }); expect(screenshot).toBeGolden('screenshot-clip-rect.png'); }); + it('should clip rect with fullPage', async({page, server}) => { + await page.setViewportSize({width: 500, height: 500}); + await page.goto(server.PREFIX + '/grid.html'); + await page.evaluate(() => window.scrollBy(150, 200)); + const screenshot = await page.screenshot({ + fullPage: true, + clip: { + x: 50, + y: 100, + width: 150, + height: 100, + }, + }); + expect(screenshot).toBeGolden('screenshot-clip-rect.png'); + }); it('should clip elements to the viewport', async({page, server}) => { await page.setViewportSize({width: 500, height: 500}); await page.goto(server.PREFIX + '/grid.html'); @@ -67,7 +82,7 @@ module.exports.describe = function({testRunner, expect, product, FFOX, CHROMIUM, height: 100 } }).catch(error => error); - expect(screenshotError.message).toBe('Clipped area is either empty or outside the viewport'); + expect(screenshotError.message).toBe('Clipped area is either empty or outside the resulting image'); }); it('should run in parallel', async({page, server}) => { await page.setViewportSize({width: 500, height: 500}); @@ -164,6 +179,22 @@ module.exports.describe = function({testRunner, expect, product, FFOX, CHROMIUM, expect(screenshot).toBeGolden('screenshot-mobile.png'); await context.close(); }); + it.skip(FFOX)('should work with a mobile viewport and clip', async({browser, server}) => { + const context = await browser.newContext({viewport: { width: 320, height: 480, isMobile: true }}); + const page = await context.newPage(); + await page.goto(server.PREFIX + '/overflow.html'); + const screenshot = await page.screenshot({ clip: { x: 10, y: 10, width: 100, height: 150 } }); + expect(screenshot).toBeGolden('screenshot-mobile-clip.png'); + await context.close(); + }); + it.skip(FFOX).fail(WEBKIT)('should work with a mobile viewport and fullPage', async({browser, server}) => { + const context = await browser.newContext({viewport: { width: 320, height: 480, isMobile: true }}); + const page = await context.newPage(); + await page.goto(server.PREFIX + '/overflow-large.html'); + const screenshot = await page.screenshot({ fullPage: true }); + expect(screenshot).toBeGolden('screenshot-mobile-fullpage.png'); + await context.close(); + }); it('should work for canvas', async({page, server}) => { await page.setViewportSize({width: 500, height: 500}); await page.goto(server.PREFIX + '/screenshots/canvas.html'); @@ -339,7 +370,7 @@ module.exports.describe = function({testRunner, expect, product, FFOX, CHROMIUM, 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'); + expect(screenshotError.message).toContain('Node is detached'); }); it('should not hang with zero width/height element', async({page, server}) => { await page.setContent('
'); @@ -353,6 +384,16 @@ module.exports.describe = function({testRunner, expect, product, FFOX, CHROMIUM, const screenshot = await elementHandle.screenshot(); expect(screenshot).toBeGolden('screenshot-element-fractional.png'); }); + it.skip(FFOX).fail(WEBKIT)('should work with a mobile viewport', async({browser, server}) => { + const context = await browser.newContext({viewport: { width: 320, height: 480, isMobile: true }}); + const page = await context.newPage(); + 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-mobile.png'); + await context.close(); + }); it('should work for an element with an offset', async({page}) => { await page.setContent('
'); const elementHandle = await page.$('div'); diff --git a/test/test.js b/test/test.js index 9301130654f3f..1f067902afe90 100644 --- a/test/test.js +++ b/test/test.js @@ -87,7 +87,7 @@ if (process.env.BROWSER === 'firefox') { ...require('../lib/events').Events, ...require('../lib/chromium/events').Events, }; - missingCoverage = ['browserContext.setGeolocation', 'elementHandle.scrollIntoViewIfNeeded', 'page.setOfflineMode']; + missingCoverage = ['browserContext.setGeolocation', 'page.setOfflineMode']; } else if (process.env.BROWSER === 'webkit') { product = 'WebKit'; events = require('../lib/events').Events;