diff --git a/test/base.fixture.ts b/test/base.fixture.ts index 0714c76a48..6953552f5f 100644 --- a/test/base.fixture.ts +++ b/test/base.fixture.ts @@ -16,6 +16,7 @@ import fs from 'fs'; import path from 'path'; +import os from 'os'; import childProcess from 'child_process'; import { LaunchOptions, BrowserType, Browser, BrowserContext, Page, BrowserServer } from '../index'; import { TestServer } from '../utils/testserver/'; @@ -24,6 +25,9 @@ import { Transport } from '../lib/rpc/transport'; import { setUnderTest } from '../lib/helper'; import { installCoverageHooks } from './runner/coverage'; import { valueFromEnv } from './runner/utils'; +import { registerFixture, registerWorkerFixture} from './runner/fixtures'; + +import {mkdtempAsync, removeFolderAsync} from './utils'; setUnderTest(); // Note: we must call setUnderTest before requiring Playwright @@ -31,13 +35,14 @@ const browserName = process.env.BROWSER || 'chromium'; declare global { interface WorkerState { + asset: (path: string) => string; parallelIndex: number; - http_server: {server: TestServer, httpsServer: TestServer}; defaultBrowserOptions: LaunchOptions; + golden: (path: string) => string; playwright: typeof import('../index'); browserType: BrowserType; browser: Browser; - outputDir: string; + tmpDir: string; } interface FixtureState { toImpl: (rpcObject: any) => any; @@ -53,7 +58,7 @@ registerWorkerFixture('parallelIndex', async ({}, test) => { await test(parseInt(process.env.JEST_WORKER_ID, 10) - 1); }); -registerWorkerFixture('http_server', async ({parallelIndex}, test) => { +registerWorkerFixture('httpService', async ({parallelIndex}, test) => { const assetsPath = path.join(__dirname, 'assets'); const cachedPath = path.join(__dirname, 'assets', 'cached'); @@ -158,21 +163,30 @@ registerFixture('page', async ({context}, test) => { await test(page); }); -registerFixture('server', async ({http_server}, test) => { - http_server.server.reset(); - await test(http_server.server); +registerFixture('server', async ({httpService}, test) => { + httpService.server.reset(); + await test(httpService.server); }); -registerFixture('httpsServer', async ({http_server}, test) => { - http_server.httpsServer.reset(); - await test(http_server.httpsServer); +registerFixture('browserName', async ({}, test) => { + await test(browserName); }); -registerWorkerFixture('outputDir', async ({}, test) => { - const outputDir = path.join(__dirname, 'output-' + browserName); - try { - await fs.promises.mkdir(outputDir, { recursive: true }); - } catch (e) { - } - await test(outputDir); +registerFixture('httpsServer', async ({httpService}, test) => { + httpService.httpsServer.reset(); + await test(httpService.httpsServer); +}); + +registerFixture('tmpDir', async ({}, test) => { + const tmpDir = await mkdtempAsync(path.join(os.tmpdir(), 'playwright-test-')); + await test(tmpDir); + await removeFolderAsync(tmpDir); +}); + +registerWorkerFixture('asset', async ({}, test) => { + await test(p => path.join(__dirname, `assets`, p)); +}); + +registerWorkerFixture('golden', async ({browserName}, test) => { + await test(p => path.join(__dirname, `golden-${browserName}`, p)); }); diff --git a/test/capabilities.spec.ts b/test/capabilities.spec.ts index dad1f11946..6485665c49 100644 --- a/test/capabilities.spec.ts +++ b/test/capabilities.spec.ts @@ -18,7 +18,7 @@ import './base.fixture'; import path from 'path'; import url from 'url'; -const {FFOX, CHROMIUM, WEBKIT, WIN, LINUX, ASSETS_DIR} = testOptions; +const {FFOX, CHROMIUM, WEBKIT, WIN, LINUX} = testOptions; it.fail(WEBKIT && WIN)('Web Assembly should work', async function({page, server}) { await page.goto(server.PREFIX + '/wasm/table2.html'); @@ -51,14 +51,14 @@ it('should respect CSP', async({page, server}) => { expect(await page.evaluate(() => window['testStatus'])).toBe('SUCCESS'); }); -it.fail(WEBKIT && (WIN || LINUX))('should play video', async({page}) => { +it.fail(WEBKIT && (WIN || LINUX))('should play video', async({page, asset}) => { // TODO: the test passes on Windows locally but fails on GitHub Action bot, // apparently due to a Media Pack issue in the Windows Server. // Also the test is very flaky on Linux WebKit. // // Safari only plays mp4 so we test WebKit with an .mp4 clip. const fileName = WEBKIT ? 'video_mp4.html' : 'video.html'; - const absolutePath = path.join(ASSETS_DIR, fileName); + const absolutePath = asset(fileName); // Our test server doesn't support range requests required to play on Mac, // so we load the page using a file url. await page.goto(url.pathToFileURL(absolutePath).href); diff --git a/test/chromium/oopif.spec.ts b/test/chromium/oopif.spec.ts index b3d03d938e..f9fd06a9f4 100644 --- a/test/chromium/oopif.spec.ts +++ b/test/chromium/oopif.spec.ts @@ -14,6 +14,7 @@ * limitations under the License. */ import '../base.fixture'; +import { registerFixture } from '../runner/fixtures'; import { Page, Browser, BrowserContext } from '../..'; const {FFOX, CHROMIUM, WEBKIT} = testOptions; @@ -188,14 +189,14 @@ it.skip(!CHROMIUM)('should respect route', async({sppBrowser, sppPage, server}) expect(intercepted).toBe(true); }); -it.skip(!CHROMIUM)('should take screenshot', async({sppBrowser, sppPage, server}) => { +it.skip(!CHROMIUM)('should take screenshot', async({sppBrowser, sppPage, server, golden}) => { const browser = sppBrowser; const page = sppPage; await page.setViewportSize({width: 500, height: 500}); await page.goto(server.PREFIX + '/dynamic-oopif.html'); expect(page.frames().length).toBe(2); expect(await countOOPIFs(browser)).toBe(1); - expect(await page.screenshot()).toBeGolden('screenshot-oopif.png'); + expect(await page.screenshot()).toMatchImage(golden('screenshot-oopif.png')); }); it.skip(!CHROMIUM)('should load oopif iframes with subresources and request interception', async function({sppBrowser, sppPage, server, context}) { diff --git a/test/chromium/tracing.spec.ts b/test/chromium/tracing.spec.ts index a868e125b9..1c0273c6e0 100644 --- a/test/chromium/tracing.spec.ts +++ b/test/chromium/tracing.spec.ts @@ -14,6 +14,7 @@ * limitations under the License. */ import '../base.fixture'; +import { registerFixture } from '../runner/fixtures'; import fs from 'fs'; import path from 'path'; @@ -24,8 +25,8 @@ declare global { outputFile: string; } } -registerFixture('outputFile', async ({outputDir, parallelIndex}, test) => { - const outputFile = path.join(outputDir, `trace-${parallelIndex}.json`); +registerFixture('outputFile', async ({tmpDir}, test) => { + const outputFile = path.join(tmpDir, `trace.json`); await test(outputFile); if (fs.existsSync(outputFile)) fs.unlinkSync(outputFile); diff --git a/test/defaultbrowsercontext.spec.ts b/test/defaultbrowsercontext.spec.ts index 4a37935cea..ba85cb2a12 100644 --- a/test/defaultbrowsercontext.spec.ts +++ b/test/defaultbrowsercontext.spec.ts @@ -15,6 +15,7 @@ * limitations under the License. */ import './base.fixture'; +import { registerFixture } from './runner/fixtures'; import fs from 'fs'; import path from 'path'; diff --git a/test/download.spec.ts b/test/download.spec.ts index 4031deb8c9..4697be48bb 100644 --- a/test/download.spec.ts +++ b/test/download.spec.ts @@ -18,22 +18,9 @@ import './base.fixture'; import fs from 'fs'; import path from 'path'; import util from 'util'; -import os from 'os'; -import {mkdtempAsync, removeFolderAsync} from './utils'; const {FFOX, CHROMIUM, WEBKIT, HEADLESS} = testOptions; -declare global { - interface FixtureState { - persistentDirectory: string; - } -} -registerFixture('persistentDirectory', async ({}, test) => { - const persistentDirectory = await mkdtempAsync(path.join(os.tmpdir(), 'playwright-test-')); - await test(persistentDirectory); - await removeFolderAsync(persistentDirectory); -}); - beforeEach(async ({server}) => { server.setRoute('/download', (req, res) => { res.setHeader('Content-Type', 'application/octet-stream'); @@ -74,28 +61,28 @@ it('should report downloads with acceptDownloads: true', async({browser, server} await page.close(); }); -it('should save to user-specified path', async({persistentDirectory, browser, server}) => { +it('should save to user-specified path', async({tmpDir, browser, server}) => { const page = await browser.newPage({ acceptDownloads: true }); await page.setContent(`download`); const [ download ] = await Promise.all([ page.waitForEvent('download'), page.click('a') ]); - const userPath = path.join(persistentDirectory, "download.txt"); + const userPath = path.join(tmpDir, "download.txt"); await download.saveAs(userPath); expect(fs.existsSync(userPath)).toBeTruthy(); expect(fs.readFileSync(userPath).toString()).toBe('Hello world'); await page.close(); }); -it('should save to user-specified path without updating original path', async({persistentDirectory, browser, server}) => { +it('should save to user-specified path without updating original path', async({tmpDir, browser, server}) => { const page = await browser.newPage({ acceptDownloads: true }); await page.setContent(`download`); const [ download ] = await Promise.all([ page.waitForEvent('download'), page.click('a') ]); - const userPath = path.join(persistentDirectory, "download.txt"); + const userPath = path.join(tmpDir, "download.txt"); await download.saveAs(userPath); expect(fs.existsSync(userPath)).toBeTruthy(); expect(fs.readFileSync(userPath).toString()).toBe('Hello world'); @@ -106,77 +93,77 @@ it('should save to user-specified path without updating original path', async({p await page.close(); }); -it('should save to two different paths with multiple saveAs calls', async({persistentDirectory, browser, server}) => { +it('should save to two different paths with multiple saveAs calls', async({tmpDir, browser, server}) => { const page = await browser.newPage({ acceptDownloads: true }); await page.setContent(`download`); const [ download ] = await Promise.all([ page.waitForEvent('download'), page.click('a') ]); - const userPath = path.join(persistentDirectory, "download.txt"); + const userPath = path.join(tmpDir, "download.txt"); await download.saveAs(userPath); expect(fs.existsSync(userPath)).toBeTruthy(); expect(fs.readFileSync(userPath).toString()).toBe('Hello world'); - const anotherUserPath = path.join(persistentDirectory, "download (2).txt"); + const anotherUserPath = path.join(tmpDir, "download (2).txt"); await download.saveAs(anotherUserPath); expect(fs.existsSync(anotherUserPath)).toBeTruthy(); expect(fs.readFileSync(anotherUserPath).toString()).toBe('Hello world'); await page.close(); }); -it('should save to overwritten filepath', async({persistentDirectory, browser, server}) => { +it('should save to overwritten filepath', async({tmpDir, browser, server}) => { const page = await browser.newPage({ acceptDownloads: true }); await page.setContent(`download`); const [ download ] = await Promise.all([ page.waitForEvent('download'), page.click('a') ]); - const userPath = path.join(persistentDirectory, "download.txt"); + const userPath = path.join(tmpDir, "download.txt"); await download.saveAs(userPath); - expect((await util.promisify(fs.readdir)(persistentDirectory)).length).toBe(1); + expect((await util.promisify(fs.readdir)(tmpDir)).length).toBe(1); await download.saveAs(userPath); - expect((await util.promisify(fs.readdir)(persistentDirectory)).length).toBe(1); + expect((await util.promisify(fs.readdir)(tmpDir)).length).toBe(1); expect(fs.existsSync(userPath)).toBeTruthy(); expect(fs.readFileSync(userPath).toString()).toBe('Hello world'); await page.close(); }); -it('should create subdirectories when saving to non-existent user-specified path', async({persistentDirectory, browser, server}) => { +it('should create subdirectories when saving to non-existent user-specified path', async({tmpDir, browser, server}) => { const page = await browser.newPage({ acceptDownloads: true }); await page.setContent(`download`); const [ download ] = await Promise.all([ page.waitForEvent('download'), page.click('a') ]); - const nestedPath = path.join(persistentDirectory, "these", "are", "directories", "download.txt"); + const nestedPath = path.join(tmpDir, "these", "are", "directories", "download.txt"); await download.saveAs(nestedPath) expect(fs.existsSync(nestedPath)).toBeTruthy(); expect(fs.readFileSync(nestedPath).toString()).toBe('Hello world'); await page.close(); }); -it('should error when saving with downloads disabled', async({persistentDirectory, browser, server}) => { +it('should error when saving with downloads disabled', async({tmpDir, browser, server}) => { const page = await browser.newPage({ acceptDownloads: false }); await page.setContent(`download`); const [ download ] = await Promise.all([ page.waitForEvent('download'), page.click('a') ]); - const userPath = path.join(persistentDirectory, "download.txt"); + const userPath = path.join(tmpDir, "download.txt"); const { message } = await download.saveAs(userPath).catch(e => e); expect(message).toContain('Pass { acceptDownloads: true } when you are creating your browser context'); await page.close(); }); -it('should error when saving after deletion', async({persistentDirectory, browser, server}) => { +it('should error when saving after deletion', async({tmpDir, browser, server}) => { const page = await browser.newPage({ acceptDownloads: true }); await page.setContent(`download`); const [ download ] = await Promise.all([ page.waitForEvent('download'), page.click('a') ]); - const userPath = path.join(persistentDirectory, "download.txt"); + const userPath = path.join(tmpDir, "download.txt"); await download.delete(); const { message } = await download.saveAs(userPath).catch(e => e); expect(message).toContain('Download already deleted. Save before deleting.'); diff --git a/test/downloads-path.spec.ts b/test/downloads-path.spec.ts index 0c04582b9c..1b7d3eb68f 100644 --- a/test/downloads-path.spec.ts +++ b/test/downloads-path.spec.ts @@ -14,6 +14,7 @@ * limitations under the License. */ import './base.fixture'; +import { registerFixture } from './runner/fixtures'; import path from 'path'; import fs from 'fs'; diff --git a/test/electron/electron.fixture.ts b/test/electron/electron.fixture.ts index a782d48041..11517dafce 100644 --- a/test/electron/electron.fixture.ts +++ b/test/electron/electron.fixture.ts @@ -1,4 +1,21 @@ +/** + * Copyright Microsoft Corporation. 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. + */ + import '../base.fixture'; +import { registerFixture } from '../runner/fixtures'; import {ElectronApplication, ElectronLauncher, ElectronPage} from '../../electron-types'; import path from 'path'; diff --git a/test/elementhandle-screenshot.spec.ts b/test/elementhandle-screenshot.spec.ts index 87c02dd240..3eb8b57f19 100644 --- a/test/elementhandle-screenshot.spec.ts +++ b/test/elementhandle-screenshot.spec.ts @@ -23,16 +23,16 @@ import {PNG} from 'pngjs'; // Firefox headful produces a different image. const ffheadful = FFOX && !HEADLESS; -it.skip(ffheadful)('should work', async({page, server}) => { +it.skip(ffheadful)('should work', async({page, server, golden}) => { await page.setViewportSize({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'); + expect(screenshot).toMatchImage(golden('screenshot-element-bounding-box.png')); }); -it.skip(ffheadful)('should take into account padding and border', async({page}) => { +it.skip(ffheadful)('should take into account padding and border', async({page, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.setContent(`
oooo
@@ -47,10 +47,10 @@ it.skip(ffheadful)('should take into account padding and border', async({page}) `); const elementHandle = await page.$('div#d'); const screenshot = await elementHandle.screenshot(); - expect(screenshot).toBeGolden('screenshot-element-padding-border.png'); + expect(screenshot).toMatchImage(golden('screenshot-element-padding-border.png')); }); -it.skip(ffheadful)('should capture full element when larger than viewport in parallel', async({page}) => { +it.skip(ffheadful)('should capture full element when larger than viewport in parallel', async({page, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.setContent(` @@ -73,12 +73,12 @@ it.skip(ffheadful)('should capture full element when larger than viewport in par const elementHandles = await page.$$('div.to-screenshot'); const promises = elementHandles.map(handle => handle.screenshot()); const screenshots = await Promise.all(promises); - expect(screenshots[2]).toBeGolden('screenshot-element-larger-than-viewport.png'); + expect(screenshots[2]).toMatchImage(golden('screenshot-element-larger-than-viewport.png')); await utils.verifyViewport(page, 500, 500); }); -it.skip(ffheadful)('should capture full element when larger than viewport', async({page}) => { +it.skip(ffheadful)('should capture full element when larger than viewport', async({page, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.setContent(` @@ -100,12 +100,12 @@ it.skip(ffheadful)('should capture full element when larger than viewport', asyn `); const elementHandle = await page.$('div.to-screenshot'); const screenshot = await elementHandle.screenshot(); - expect(screenshot).toBeGolden('screenshot-element-larger-than-viewport.png'); + expect(screenshot).toMatchImage(golden('screenshot-element-larger-than-viewport.png')); await utils.verifyViewport(page, 500, 500); }); -it.skip(ffheadful)('should scroll element into view', async({page}) => { +it.skip(ffheadful)('should scroll element into view', async({page, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.setContent(`
oooo
@@ -126,10 +126,10 @@ it.skip(ffheadful)('should scroll element into view', async({page}) => { `); const elementHandle = await page.$('div.to-screenshot'); const screenshot = await elementHandle.screenshot(); - expect(screenshot).toBeGolden('screenshot-element-scrolled-into-view.png'); + expect(screenshot).toMatchImage(golden('screenshot-element-scrolled-into-view.png')); }); -it.skip(ffheadful)('should scroll 15000px into view', async({page}) => { +it.skip(ffheadful)('should scroll 15000px into view', async({page, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.setContent(`
oooo
@@ -150,10 +150,10 @@ it.skip(ffheadful)('should scroll 15000px into view', async({page}) => { `); const elementHandle = await page.$('div.to-screenshot'); const screenshot = await elementHandle.screenshot(); - expect(screenshot).toBeGolden('screenshot-element-scrolled-into-view.png'); + expect(screenshot).toMatchImage(golden('screenshot-element-scrolled-into-view.png')); }); -it.skip(ffheadful)('should work with a rotated element', async({page}) => { +it.skip(ffheadful)('should work with a rotated element', async({page, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.setContent(`
 
`); const elementHandle = await page.$('div'); const screenshot = await elementHandle.screenshot(); - expect(screenshot).toBeGolden('screenshot-element-rotate.png'); + expect(screenshot).toMatchImage(golden('screenshot-element-rotate.png')); }); it.skip(ffheadful)('should fail to screenshot a detached element', async({page, server}) => { @@ -183,7 +183,7 @@ it.skip(ffheadful)('should timeout waiting for visible', async({page, server}) = expect(error.message).toContain('element is not visible'); }); -it.skip(ffheadful)('should wait for visible', async({page, server}) => { +it.skip(ffheadful)('should wait for visible', async({page, server, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.goto(server.PREFIX + '/grid.html'); await page.evaluate(() => window.scrollBy(50, 100)); @@ -199,43 +199,43 @@ it.skip(ffheadful)('should wait for visible', async({page, server}) => { expect(done).toBe(false); await elementHandle.evaluate(e => e.style.visibility = 'visible'); const screenshot = await promise; - expect(screenshot).toBeGolden('screenshot-element-bounding-box.png'); + expect(screenshot).toMatchImage(golden('screenshot-element-bounding-box.png')); }); -it.skip(ffheadful)('should work for an element with fractional dimensions', async({page}) => { +it.skip(ffheadful)('should work for an element with fractional dimensions', async({page, golden}) => { await page.setContent('
'); const elementHandle = await page.$('div'); const screenshot = await elementHandle.screenshot(); - expect(screenshot).toBeGolden('screenshot-element-fractional.png'); + expect(screenshot).toMatchImage(golden('screenshot-element-fractional.png')); }); -it.skip(FFOX)('should work with a mobile viewport', async({browser, server}) => { +it.skip(FFOX)('should work with a mobile viewport', async({browser, server, golden}) => { 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'); + expect(screenshot).toMatchImage(golden('screenshot-element-mobile.png')); await context.close(); }); -it.skip(FFOX)('should work with device scale factor', async({browser, server}) => { +it.skip(FFOX)('should work with device scale factor', async({browser, server, golden}) => { const context = await browser.newContext({ viewport: { width: 320, height: 480 }, deviceScaleFactor: 2 }); 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-dsf.png'); + expect(screenshot).toMatchImage(golden('screenshot-element-mobile-dsf.png')); await context.close(); }); -it.skip(ffheadful)('should work for an element with an offset', async({page}) => { +it.skip(ffheadful)('should work for an element with an offset', async({page, golden}) => { await page.setContent('
'); const elementHandle = await page.$('div'); const screenshot = await elementHandle.screenshot(); - expect(screenshot).toBeGolden('screenshot-element-fractional-offset.png'); + expect(screenshot).toMatchImage(golden('screenshot-element-fractional-offset.png')); }); it.skip(ffheadful)('should take screenshots when default viewport is null', async({server, browser}) => { @@ -350,7 +350,7 @@ it.skip(ffheadful || WIRE)('should restore viewport after element screenshot and await context.close(); }); -it.skip(ffheadful)('should wait for element to stop moving', async({page, server}) => { +it.skip(ffheadful)('should wait for element to stop moving', async({page, server, golden}) => { await page.setViewportSize({ width: 500, height: 500 }); await page.goto(server.PREFIX + '/grid.html'); const elementHandle = await page.$('.box:nth-of-type(3)'); @@ -359,7 +359,7 @@ it.skip(ffheadful)('should wait for element to stop moving', async({page, server return new Promise(f => requestAnimationFrame(() => requestAnimationFrame(f))); }); const screenshot = await elementHandle.screenshot(); - expect(screenshot).toBeGolden('screenshot-element-bounding-box.png'); + expect(screenshot).toMatchImage(golden('screenshot-element-bounding-box.png')); }); it.skip(ffheadful)('should take screenshot of disabled button', async({page}) => { diff --git a/test/emulation-focus.spec.ts b/test/emulation-focus.spec.ts index 935daa967c..3a46221bb3 100644 --- a/test/emulation-focus.spec.ts +++ b/test/emulation-focus.spec.ts @@ -102,7 +102,7 @@ it('should change document.activeElement', async({page, server}) => { expect(active).toEqual(['INPUT', 'TEXTAREA']); }); -it.skip(FFOX && !HEADLESS)('should not affect screenshots', async({page, server}) => { +it.skip(FFOX && !HEADLESS)('should not affect screenshots', async({page, server, golden}) => { // Firefox headful produces a different image. const page2 = await page.context().newPage(); await Promise.all([ @@ -119,8 +119,8 @@ it.skip(FFOX && !HEADLESS)('should not affect screenshots', async({page, server} page.screenshot(), page2.screenshot(), ]); - expect(screenshots[0]).toBeGolden('screenshot-sanity.png'); - expect(screenshots[1]).toBeGolden('grid-cell-0.png'); + expect(screenshots[0]).toMatchImage(golden('screenshot-sanity.png')); + expect(screenshots[1]).toMatchImage(golden('grid-cell-0.png')); }); it('should change focused iframe', async({page, server}) => { diff --git a/test/fixtures.spec.ts b/test/fixtures.spec.ts index 8ceea67000..fd873c0264 100644 --- a/test/fixtures.spec.ts +++ b/test/fixtures.spec.ts @@ -15,6 +15,7 @@ * limitations under the License. */ import './base.fixture'; +import { registerFixture } from './runner/fixtures'; import path from 'path'; import {spawn, execSync} from 'child_process'; diff --git a/test/frame-goto.spec.ts b/test/frame-goto.spec.ts index a67b2b9d7b..d92a567060 100644 --- a/test/frame-goto.spec.ts +++ b/test/frame-goto.spec.ts @@ -19,7 +19,7 @@ import './base.fixture'; import utils from './utils'; import path from 'path'; import url from 'url'; -const {FFOX, CHROMIUM, WEBKIT, ASSETS_DIR, MAC, WIN} = testOptions; +const {FFOX, CHROMIUM, WEBKIT, MAC, WIN} = testOptions; it('should navigate subframes', async({page, server}) => { await page.goto(server.PREFIX + '/frames/one-frame.html'); diff --git a/test/golden-chromium/grid-cell-1.png b/test/golden-chromium/grid-cell-1.png index 91a1cb8510..2eab11668d 100644 Binary files a/test/golden-chromium/grid-cell-1.png and b/test/golden-chromium/grid-cell-1.png differ diff --git a/test/golden-chromium/screenshot-clip-rect.png b/test/golden-chromium/screenshot-clip-rect.png index ac23b7de50..8c4046910b 100644 Binary files a/test/golden-chromium/screenshot-clip-rect.png and b/test/golden-chromium/screenshot-clip-rect.png differ diff --git a/test/golden-chromium/screenshot-element-bounding-box.png b/test/golden-chromium/screenshot-element-bounding-box.png index 32e05bf05b..c2c3ddca29 100644 Binary files a/test/golden-chromium/screenshot-element-bounding-box.png and b/test/golden-chromium/screenshot-element-bounding-box.png differ diff --git a/test/golden-chromium/screenshot-element-larger-than-viewport.png b/test/golden-chromium/screenshot-element-larger-than-viewport.png index 5fcdb92355..52c1bb2b92 100644 Binary files a/test/golden-chromium/screenshot-element-larger-than-viewport.png and b/test/golden-chromium/screenshot-element-larger-than-viewport.png differ diff --git a/test/golden-chromium/screenshot-element-padding-border.png b/test/golden-chromium/screenshot-element-padding-border.png index 917dd48188..fc34319896 100644 Binary files a/test/golden-chromium/screenshot-element-padding-border.png and b/test/golden-chromium/screenshot-element-padding-border.png differ diff --git a/test/golden-chromium/screenshot-element-rotate.png b/test/golden-chromium/screenshot-element-rotate.png index b6eadf8907..5aab14c4b9 100644 Binary files a/test/golden-chromium/screenshot-element-rotate.png and b/test/golden-chromium/screenshot-element-rotate.png differ diff --git a/test/golden-chromium/screenshot-element-scrolled-into-view.png b/test/golden-chromium/screenshot-element-scrolled-into-view.png index 917dd48188..fc34319896 100644 Binary files a/test/golden-chromium/screenshot-element-scrolled-into-view.png and b/test/golden-chromium/screenshot-element-scrolled-into-view.png differ diff --git a/test/golden-chromium/screenshot-grid-fullpage.png b/test/golden-chromium/screenshot-grid-fullpage.png index d6d38217f7..0354694da1 100644 Binary files a/test/golden-chromium/screenshot-grid-fullpage.png and b/test/golden-chromium/screenshot-grid-fullpage.png differ diff --git a/test/golden-chromium/screenshot-sanity.png b/test/golden-chromium/screenshot-sanity.png index ecab61fe17..122a4f0ae0 100644 Binary files a/test/golden-chromium/screenshot-sanity.png and b/test/golden-chromium/screenshot-sanity.png differ diff --git a/test/page-goto.spec.ts b/test/page-goto.spec.ts index 3ba5d671c3..d3ff22ca91 100644 --- a/test/page-goto.spec.ts +++ b/test/page-goto.spec.ts @@ -19,7 +19,7 @@ import './base.fixture'; import utils from './utils'; import path from 'path'; import url from 'url'; -const {FFOX, CHROMIUM, WEBKIT, ASSETS_DIR, MAC, WIN} = testOptions; +const {FFOX, CHROMIUM, WEBKIT, MAC, WIN} = testOptions; it('should work', async({page, server}) => { await page.goto(server.EMPTY_PAGE); diff --git a/test/page-history.spec.ts b/test/page-history.spec.ts index 5391f83117..33511d164a 100644 --- a/test/page-history.spec.ts +++ b/test/page-history.spec.ts @@ -18,7 +18,7 @@ import './base.fixture'; import path from 'path'; import url from 'url'; -const {FFOX, CHROMIUM, WEBKIT, ASSETS_DIR, MAC, WIN} = testOptions; +const {FFOX, CHROMIUM, WEBKIT, MAC, WIN} = testOptions; it('page.goBack should work', async({page, server}) => { expect(await page.goBack()).toBe(null); @@ -54,9 +54,9 @@ it('page.goBack should work with HistoryAPI', async({page, server}) => { expect(page.url()).toBe(server.PREFIX + '/first.html'); }); -it.fail(WEBKIT && MAC)('page.goBack should work for file urls', async ({page, server}) => { +it.fail(WEBKIT && MAC)('page.goBack should work for file urls', async ({page, server, asset}) => { // WebKit embedder fails to go back/forward to the file url. - const url1 = url.pathToFileURL(path.join(ASSETS_DIR, 'empty.html')).href; + const url1 = url.pathToFileURL(asset('empty.html')).href; const url2 = server.EMPTY_PAGE; await page.goto(url1); await page.setContent(`url2`); diff --git a/test/page-network-idle.spec.ts b/test/page-network-idle.spec.ts index dc6be78cce..c7912da903 100644 --- a/test/page-network-idle.spec.ts +++ b/test/page-network-idle.spec.ts @@ -21,7 +21,7 @@ import path from 'path'; import url from 'url'; import { Frame, Page } from '..'; import { TestServer } from '../utils/testserver'; -const {FFOX, CHROMIUM, WEBKIT, ASSETS_DIR, MAC, WIN} = testOptions; +const {FFOX, CHROMIUM, WEBKIT, MAC, WIN} = testOptions; it('should navigate to empty page with networkidle', async({page, server}) => { const response = await page.goto(server.EMPTY_PAGE, { waitUntil: 'networkidle' }); diff --git a/test/page-screenshot.spec.ts b/test/page-screenshot.spec.ts index 004cb08fe0..b1f1094457 100644 --- a/test/page-screenshot.spec.ts +++ b/test/page-screenshot.spec.ts @@ -17,20 +17,19 @@ import './base.fixture'; import utils from './utils'; -const {FFOX, CHROMIUM, WEBKIT, WIRE, HEADLESS} = testOptions; -import {PNG} from 'pngjs'; +const {FFOX, WEBKIT, HEADLESS} = testOptions; // Firefox headful produces a different image. const ffheadful = FFOX && !HEADLESS; -it.skip(ffheadful)('should work', async({page, server}) => { +it.skip(ffheadful)('should work', async({page, server, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.goto(server.PREFIX + '/grid.html'); const screenshot = await page.screenshot(); - expect(screenshot).toBeGolden('screenshot-sanity.png'); + expect(screenshot).toMatchImage(golden('screenshot-sanity.png')); }); -it.skip(ffheadful)('should clip rect', async({page, server}) => { +it.skip(ffheadful)('should clip rect', async({page, server, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.goto(server.PREFIX + '/grid.html'); const screenshot = await page.screenshot({ @@ -41,10 +40,10 @@ it.skip(ffheadful)('should clip rect', async({page, server}) => { height: 100 } }); - expect(screenshot).toBeGolden('screenshot-clip-rect.png'); + expect(screenshot).toMatchImage(golden('screenshot-clip-rect.png')); }); -it.skip(ffheadful)('should clip rect with fullPage', async({page, server}) => { +it.skip(ffheadful)('should clip rect with fullPage', async({page, server, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.goto(server.PREFIX + '/grid.html'); await page.evaluate(() => window.scrollBy(150, 200)); @@ -57,10 +56,10 @@ it.skip(ffheadful)('should clip rect with fullPage', async({page, server}) => { height: 100, }, }); - expect(screenshot).toBeGolden('screenshot-clip-rect.png'); + expect(screenshot).toMatchImage(golden('screenshot-clip-rect.png')); }); -it.skip(ffheadful)('should clip elements to the viewport', async({page, server}) => { +it.skip(ffheadful)('should clip elements to the viewport', async({page, server, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.goto(server.PREFIX + '/grid.html'); const screenshot = await page.screenshot({ @@ -71,10 +70,10 @@ it.skip(ffheadful)('should clip elements to the viewport', async({page, server}) height: 100 } }); - expect(screenshot).toBeGolden('screenshot-offscreen-clip.png'); + expect(screenshot).toMatchImage(golden('screenshot-offscreen-clip.png')); }); -it.skip(ffheadful)('should throw on clip outside the viewport', async({page, server}) => { +it.skip(ffheadful)('should throw on clip outside the viewport', async({page, server, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.goto(server.PREFIX + '/grid.html'); const screenshotError = await page.screenshot({ @@ -88,7 +87,7 @@ it.skip(ffheadful)('should throw on clip outside the viewport', async({page, ser expect(screenshotError.message).toContain('Clipped area is either empty or outside the resulting image'); }); -it.skip(ffheadful)('should run in parallel', async({page, server}) => { +it.skip(ffheadful)('should run in parallel', async({page, server, golden}) => { await page.setViewportSize({width: 500, height: 500}); await page.goto(server.PREFIX + '/grid.html'); const promises = []; @@ -103,16 +102,16 @@ it.skip(ffheadful)('should run in parallel', async({page, server}) => { })); } const screenshots = await Promise.all(promises); - expect(screenshots[1]).toBeGolden('grid-cell-1.png'); + expect(screenshots[1]).toMatchImage(golden('grid-cell-1.png')); }); -it.skip(ffheadful)('should take fullPage screenshots', async({page, server}) => { +it.skip(ffheadful)('should take fullPage screenshots', async({page, server, golden}) => { await page.setViewportSize({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'); + expect(screenshot).toMatchImage(golden('screenshot-grid-fullpage.png')); }); it.skip(ffheadful)('should restore viewport after fullPage screenshot', async({page, server}) => { @@ -123,7 +122,7 @@ it.skip(ffheadful)('should restore viewport after fullPage screenshot', async({p await utils.verifyViewport(page, 500, 500); }); -it.skip(ffheadful)('should run in parallel in multiple pages', async({page, server, context}) => { +it.skip(ffheadful)('should run in parallel in multiple pages', async({server, context, golden}) => { const N = 5; const pages = await Promise.all(Array(N).fill(0).map(async() => { const page = await context.newPage(); @@ -135,11 +134,11 @@ it.skip(ffheadful)('should run in parallel in multiple pages', async({page, serv promises.push(pages[i].screenshot({ clip: { x: 50 * (i % 2), 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 % 2}.png`); + expect(screenshots[i]).toMatchImage(golden(`grid-cell-${i % 2}.png`)); await Promise.all(pages.map(page => page.close())); }); -it.fail(FFOX)('should allow transparency', async({page}) => { +it.fail(FFOX)('should allow transparency', async({page, golden}) => { await page.setViewportSize({ width: 50, height: 150 }); await page.setContent(`