diff --git a/lib/Page.js b/lib/Page.js index b522727c..591077ed 100644 --- a/lib/Page.js +++ b/lib/Page.js @@ -872,11 +872,11 @@ class Page extends EventEmitter { const screenOrientation = landscape ? { angle: 90, type: 'landscapePrimary' } : { angle: 0, type: 'portraitPrimary' }; await this._client.send('Emulation.setDeviceMetricsOverride', { mobile, width, height, deviceScaleFactor, screenOrientation }); } - - if (options.omitBackground) + const shouldSetDefaultBackground = options.omitBackground && format === 'png'; + if (shouldSetDefaultBackground) await this._client.send('Emulation.setDefaultBackgroundColorOverride', { color: { r: 0, g: 0, b: 0, a: 0 } }); const result = await this._client.send('Page.captureScreenshot', { format, quality: options.quality, clip }); - if (options.omitBackground) + if (shouldSetDefaultBackground) await this._client.send('Emulation.setDefaultBackgroundColorOverride'); if (options.fullPage) diff --git a/package.json b/package.json index c2c5dc24..d7f3abd0 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "cross-env": "^5.0.5", "eslint": "^4.19.1", "esprima": "^4.0.0", + "jpeg-js": "^0.3.4", "minimist": "^1.2.0", "ncp": "^2.0.0", "pixelmatch": "^4.0.2", diff --git a/test/golden-utils.js b/test/golden-utils.js index 15813986..86989ac6 100644 --- a/test/golden-utils.js +++ b/test/golden-utils.js @@ -18,26 +18,30 @@ const fs = require('fs'); const Diff = require('text-diff'); const mime = require('mime'); const PNG = require('pngjs').PNG; +const jpeg = require('jpeg-js'); const pixelmatch = require('pixelmatch'); module.exports = {compare}; const GoldenComparators = { 'image/png': compareImages, + 'image/jpeg': compareImages, 'text/plain': compareText }; + /** * @param {?Object} actualBuffer * @param {!Buffer} expectedBuffer + * @param {!string} mimeType * @return {?{diff: (!Object:undefined), errorMessage: (string|undefined)}} */ -function compareImages(actualBuffer, expectedBuffer) { +function compareImages(actualBuffer, expectedBuffer, mimeType) { if (!actualBuffer || !(actualBuffer instanceof Buffer)) return { errorMessage: 'Actual result should be Buffer.' }; - const actual = PNG.sync.read(actualBuffer); - const expected = PNG.sync.read(expectedBuffer); + const actual = mimeType === 'image/png' ? PNG.sync.read(actualBuffer) : jpeg.decode(actualBuffer); + const expected = mimeType === 'image/png' ? PNG.sync.read(expectedBuffer) : jpeg.decode(expectedBuffer); if (expected.width !== actual.width || expected.height !== actual.height) { return { errorMessage: `Sizes differ: expected image ${expected.width}px X ${expected.height}px, but got ${actual.width}px X ${actual.height}px. ` @@ -93,14 +97,15 @@ function compare(goldenPath, outputPath, actual, goldenName) { }; } const expected = fs.readFileSync(expectedPath); - const comparator = GoldenComparators[mime.getType(goldenName)]; + const mimeType = mime.getType(goldenName); + const comparator = GoldenComparators[mimeType]; if (!comparator) { return { pass: false, - message: 'Failed to find comparator with type ' + mime.getType(goldenName) + ': ' + goldenName + message: 'Failed to find comparator with type ' + mimeType + ': ' + goldenName }; } - const result = comparator(actual, expected); + const result = comparator(actual, expected, mimeType); if (!result) return { pass: true }; ensureOutputDir(); diff --git a/test/golden/white.jpg b/test/golden/white.jpg new file mode 100644 index 00000000..fb9070de Binary files /dev/null and b/test/golden/white.jpg differ diff --git a/test/page.spec.js b/test/page.spec.js index b8f1421f..553d9697 100644 --- a/test/page.spec.js +++ b/test/page.spec.js @@ -1656,6 +1656,12 @@ module.exports.addTests = function({testRunner, expect, headless}) { 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: {