test: roll to folio@0.4.0-alpha6 (#6366)

package.json

@@ -87,7 +87,7 @@
     "eslint-plugin-notice": "^0.9.10",
     "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^6.1.0",
-    "folio": "=0.4.0-alpha4",
+    "folio": "=0.4.0-alpha6",
     "formidable": "^1.2.2",
     "html-webpack-plugin": "^4.4.1",
     "ncp": "^2.0.0",

tests/browsercontext-device.spec.ts

@@ -18,9 +18,7 @@
 import { browserTest as it, expect } from './config/browserTest';
 
 it.describe('device', () => {
-  it.beforeEach(async ({browserName}) => {
-    it.skip(browserName === 'firefox');
-  });
+  it.skip(({ browserName }) => browserName === 'firefox');
 
   it('should work', async ({playwright, browser, server}) => {
     const iPhone = playwright.devices['iPhone 6'];

tests/browsercontext-proxy.spec.ts

@@ -18,9 +18,8 @@ import { browserTest as it, expect } from './config/browserTest';
 import type { Browser } from '../index';
 
 let browser: Browser;
-it.beforeEach(async ({ browserType, browserOptions }) => {
-  if (!browser)
-    browser = await browserType.launch({ ...browserOptions, proxy: { server: 'per-context' } });
+it.beforeAll(async ({ browserType, browserOptions }) => {
+  browser = await browserType.launch({ ...browserOptions, proxy: { server: 'per-context' } });
 });
 it.afterAll(async () => {
   await browser.close();

tests/browsercontext-viewport-mobile.spec.ts

@@ -18,9 +18,7 @@
 import { browserTest as it, expect } from './config/browserTest';
 
 it.describe('mobile viewport', () => {
-  it.beforeEach(async ({ browserName }) => {
-    it.skip(browserName === 'firefox');
-  });
+  it.skip(({ browserName }) => browserName === 'firefox');
 
   it('should support mobile emulation', async ({playwright, browser, server}) => {
     const iPhone = playwright.devices['iPhone 6'];

tests/browsercontext-viewport.spec.ts

@@ -19,10 +19,8 @@ import { test as it, expect } from './config/pageTest';
 import { browserTest } from './config/browserTest';
 import { verifyViewport } from './config/utils';
 
-it.beforeEach(async ({ isElectron, isAndroid }) => {
-  it.skip(isAndroid, 'Default viewport is null');
-  it.skip(isElectron, 'Default viewport is null');
-});
+it.skip(({ isAndroid }) => isAndroid, 'Default viewport is null');
+it.skip(({ isElectron }) => isElectron, 'Default viewport is null');
 
 it('should get the proper default viewport size', async ({page, server}) => {
   await verifyViewport(page, 1280, 720);

tests/browsertype-launch-server.spec.ts

@@ -18,9 +18,7 @@
 import { playwrightTest as it, expect } from './config/browserTest';
 
 it.describe('launch server', () => {
-  it.beforeEach(async ({ mode}) => {
-    it.skip(mode !== 'default');
-  });
+  it.skip(({ mode}) => mode !== 'default');
 
   it('should work', async ({browserType, browserOptions}) => {
     const browserServer = await browserType.launchServer(browserOptions);

tests/chromium/chromium.spec.ts

@@ -20,11 +20,9 @@ import { playwrightTest } from '../config/browserTest';
 import http from 'http';
 
 pageTest.describe('chromium', () => {
-  pageTest.beforeEach(async ({ browserName, isElectron, isAndroid }) => {
-    pageTest.skip(browserName !== 'chromium');
-    pageTest.skip(isAndroid);
-    pageTest.skip(isElectron);
-  });
+  pageTest.skip(({ browserName }) => browserName !== 'chromium');
+  pageTest.skip(({ isAndroid }) => isAndroid);
+  pageTest.skip(({ isElectron }) => isElectron);
 
   pageTest('should create a worker from a service worker', async ({page, server}) => {
     const [worker] = await Promise.all([
@@ -85,9 +83,7 @@ pageTest.describe('chromium', () => {
 });
 
 playwrightTest.describe('chromium', () => {
-  playwrightTest.beforeEach(async ({ browserName }) => {
-    playwrightTest.skip(browserName !== 'chromium');
-  });
+  playwrightTest.skip(({ browserName }) => browserName !== 'chromium');
 
   playwrightTest('should close service worker together with the context', async ({browserType, browserOptions, server}) => {
     const browser = await browserType.launch(browserOptions);

tests/chromium/css-coverage.spec.ts

@@ -17,9 +17,7 @@
 import { test as it, expect } from '../config/pageTest';
 
 it.describe('CSS Coverage', () => {
-  it.beforeEach(async ({ browserName }) => {
-    it.skip(browserName !== 'chromium');
-  });
+  it.skip(({ browserName }) => browserName !== 'chromium');
 
   it('should work', async function({page, server}) {
     await page.coverage.startCSSCoverage();

tests/chromium/js-coverage.spec.ts

@@ -17,10 +17,8 @@
 import { test as it, expect } from '../config/pageTest';
 
 it.describe('JS Coverage', () => {
-  it.beforeEach(async ({ browserName, isElectron }) => {
-    it.skip(browserName !== 'chromium');
-    it.fixme(isElectron);
-  });
+  it.skip(({ browserName }) => browserName !== 'chromium');
+  it.fixme(({ isElectron }) => isElectron);
 
   it('should work', async function({page, server}) {
     await page.coverage.startJSCoverage();

tests/chromium/launcher.spec.ts

@@ -16,9 +16,7 @@
 
 import { playwrightTest as it, expect } from '../config/browserTest';
 
-it.beforeEach(async ({ browserName }) => {
-  it.skip(browserName !== 'chromium');
-});
+it.skip(({ browserName }) => browserName !== 'chromium');
 
 it('should throw with remote-debugging-pipe argument', async ({browserType, browserOptions, mode}) => {
   it.skip(mode !== 'default');

tests/chromium/oopif.spec.ts

@@ -14,41 +14,42 @@
  * limitations under the License.
  */
 
-import { playwrightTest as it, expect } from '../config/browserTest';
-import type { Browser, Page } from '../../index';
+import { playwrightTest, expect } from '../config/browserTest';
+import type { Page } from '../../index';
+
+const it = playwrightTest.extend({
+  async beforeAll({ browserType, browserOptions, browserName }) {
+    const browser = await browserType.launch({
+      ...browserOptions,
+      args: browserName === 'chromium' ? (browserOptions.args || []).concat(['--site-per-process']) : browserOptions.args,
+    });
+    this.browser = browser;
+    return { browser };
+  },
+  async beforeEach() {
+    const page = await this.browser.newPage() as Page;
+    this.page = page;
+    return { page };
+  },
+  async afterEach() {
+    await this.page.close();
+  },
+  async afterAll() {
+    await this.browser.close();
+  },
+});
 
 it.describe('oopif', () => {
-  let browser: Browser;
-  let page: Page;
-
-  it.beforeEach(async ({ browserName, browserType, browserOptions }) => {
-    it.skip(browserName !== 'chromium');
-
-    if (!browser) {
-      browser = await browserType.launch({
-        ...browserOptions,
-        args: (browserOptions.args || []).concat(['--site-per-process'])
-      });
-    }
-    page = await browser.newPage();
-  });
-
-  it.afterEach(async () => {
-    await page.close();
-  });
-
-  it.afterAll(async () => {
-    await browser.close();
-  });
+  it.skip(({ browserName }) => browserName !== 'chromium');
 
-  it('should report oopif frames', async function({server}) {
+  it('should report oopif frames', async function({page, browser, server}) {
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
     expect(await countOOPIFs(browser)).toBe(1);
     expect(page.frames().length).toBe(2);
     expect(await page.frames()[1].evaluate(() => '' + location.href)).toBe(server.CROSS_PROCESS_PREFIX + '/grid.html');
   });
 
-  it('should handle oopif detach', async function({server}) {
+  it('should handle oopif detach', async function({page, browser, server}) {
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
     expect(await countOOPIFs(browser)).toBe(1);
     expect(page.frames().length).toBe(2);
@@ -61,7 +62,7 @@ it.describe('oopif', () => {
     expect(detachedFrame).toBe(frame);
   });
 
-  it('should handle remote -> local -> remote transitions', async function({server}) {
+  it('should handle remote -> local -> remote transitions', async function({page, browser, server}) {
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
     expect(page.frames().length).toBe(2);
     expect(await countOOPIFs(browser)).toBe(1);
@@ -80,7 +81,7 @@ it.describe('oopif', () => {
     expect(await countOOPIFs(browser)).toBe(1);
   });
 
-  it('should get the proper viewport', async ({server}) => {
+  it('should get the proper viewport', async ({page, browser, server}) => {
     it.fixme();
 
     expect(page.viewportSize()).toEqual({width: 1280, height: 720});
@@ -101,7 +102,7 @@ it.describe('oopif', () => {
     expect(await oopif.evaluate(() => 'ontouchstart' in window)).toBe(false);
   });
 
-  it('should expose function', async ({server}) => {
+  it('should expose function', async ({page, browser, server}) => {
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
     expect(page.frames().length).toBe(2);
     expect(await countOOPIFs(browser)).toBe(1);
@@ -113,7 +114,7 @@ it.describe('oopif', () => {
     expect(result).toBe(36);
   });
 
-  it('should emulate media', async ({server}) => {
+  it('should emulate media', async ({page, browser, server}) => {
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
     expect(page.frames().length).toBe(2);
     expect(await countOOPIFs(browser)).toBe(1);
@@ -123,7 +124,7 @@ it.describe('oopif', () => {
     expect(await oopif.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true);
   });
 
-  it('should emulate offline', async ({server}) => {
+  it('should emulate offline', async ({page, browser, server}) => {
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
     expect(page.frames().length).toBe(2);
     expect(await countOOPIFs(browser)).toBe(1);
@@ -133,7 +134,7 @@ it.describe('oopif', () => {
     expect(await oopif.evaluate(() => navigator.onLine)).toBe(false);
   });
 
-  it('should support context options', async ({server, playwright}) => {
+  it('should support context options', async ({browser, server, playwright}) => {
     const iPhone = playwright.devices['iPhone 6'];
     const context = await browser.newContext({ ...iPhone, timezoneId: 'America/Jamaica', locale: 'fr-CH', userAgent: 'UA' });
     const page = await context.newPage();
@@ -155,7 +156,7 @@ it.describe('oopif', () => {
     await context.close();
   });
 
-  it('should respect route', async ({server}) => {
+  it('should respect route', async ({page, browser, server}) => {
     let intercepted = false;
     await page.route('**/digits/0.png', route => {
       intercepted = true;
@@ -167,21 +168,21 @@ it.describe('oopif', () => {
     expect(intercepted).toBe(true);
   });
 
-  it('should take screenshot', async ({server}) => {
+  it('should take screenshot', async ({page, browser, server}) => {
     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()).toMatchSnapshot('screenshot-oopif.png', { threshold: 0.3 });
   });
 
-  it('should load oopif iframes with subresources and route', async function({server}) {
+  it('should load oopif iframes with subresources and route', async function({page, browser, server}) {
     await page.route('**/*', route => route.continue());
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
     expect(await countOOPIFs(browser)).toBe(1);
   });
 
-  it('should report main requests', async function({server}) {
+  it('should report main requests', async function({page, browser, server}) {
     const requestFrames = [];
     page.on('request', r => requestFrames.push(r.frame()));
     const finishedFrames = [];
@@ -219,7 +220,7 @@ it.describe('oopif', () => {
     expect(finishedFrames[2]).toBe(grandChild);
   });
 
-  it('should support exposeFunction', async function({server}) {
+  it('should support exposeFunction', async function({page, browser, server}) {
     await page.context().exposeFunction('dec', a => a - 1);
     await page.exposeFunction('inc', a => a + 1);
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
@@ -231,7 +232,7 @@ it.describe('oopif', () => {
     expect(await page.frames()[1].evaluate(() => window['dec'](4))).toBe(3);
   });
 
-  it('should support addInitScript', async function({server}) {
+  it('should support addInitScript', async function({page, browser, server}) {
     await page.context().addInitScript(() => window['bar'] = 17);
     await page.addInitScript(() => window['foo'] = 42);
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
@@ -243,7 +244,7 @@ it.describe('oopif', () => {
     expect(await page.frames()[1].evaluate(() => window['bar'])).toBe(17);
   });
   // @see https://github.com/microsoft/playwright/issues/1240
-  it('should click a button when it overlays oopif', async function({server}) {
+  it('should click a button when it overlays oopif', async function({page, browser, server}) {
     await page.goto(server.PREFIX + '/button-overlay-oopif.html');
     expect(await countOOPIFs(browser)).toBe(1);
     await page.click('button');
@@ -275,7 +276,7 @@ it.describe('oopif', () => {
     await browser.close();
   });
 
-  it('ElementHandle.boundingBox() should work', async function({server}) {
+  it('ElementHandle.boundingBox() should work', async function({page, browser, server}) {
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
     await page.$eval('iframe', iframe => {
       iframe.style.width = '500px';
@@ -298,7 +299,7 @@ it.describe('oopif', () => {
     expect(await handle2.boundingBox()).toEqual({ x: 100 + 42, y: 50 + 17, width: 50, height: 50 });
   });
 
-  it('should click', async function({server}) {
+  it('should click', async function({page, browser, server}) {
     await page.goto(server.PREFIX + '/dynamic-oopif.html');
     await page.$eval('iframe', iframe => {
       iframe.style.width = '500px';

tests/chromium/session.spec.ts

@@ -18,9 +18,7 @@ import { test as it, expect } from '../config/pageTest';
 import { browserTest } from '../config/browserTest';
 
 it.describe('session', () => {
-  it.beforeEach(async ({ browserName }) => {
-    it.skip(browserName !== 'chromium');
-  });
+  it.skip(({ browserName }) => browserName !== 'chromium');
 
   it('should work', async function({page}) {
     const client = await page.context().newCDPSession(page);
@@ -95,9 +93,7 @@ it.describe('session', () => {
 });
 
 browserTest.describe('session', () => {
-  browserTest.beforeEach(async ({ browserName }) => {
-    browserTest.skip(browserName !== 'chromium');
-  });
+  browserTest.skip(({ browserName }) => browserName !== 'chromium');
 
   browserTest('should not break page.close()', async function({browser}) {
     const context = await browser.newContext();

tests/chromium/tracing.spec.ts

@@ -19,9 +19,7 @@ import fs from 'fs';
 import path from 'path';
 
 it.describe('tracing', () => {
-  it.beforeEach(async ({ browserName }) => {
-    it.skip(browserName !== 'chromium');
-  });
+  it.skip(({ browserName }) => browserName !== 'chromium');
 
   it('should output a trace', async ({browser, server}, testInfo) => {
     const page = await browser.newPage();

tests/cli/cli-codegen-1.spec.ts

@@ -18,10 +18,8 @@ import { cliTest as test, expect } from '../config/cliTest';
 import * as http from 'http';
 
 test.describe('cli codegen', () => {
-  test.beforeEach(async ({ mode, browserName, headful }) => {
-    test.skip(mode !== 'default');
-    test.fixme(browserName === 'firefox' && headful, 'Focus is off');
-  });
+  test.skip(({ mode }) => mode !== 'default');
+  test.fixme(({ browserName, headful }) => browserName === 'firefox' && headful, 'Focus is off');
 
   test('should click', async ({ page, openRecorder }) => {
     const recorder = await openRecorder();

tests/cli/cli-codegen-2.spec.ts

@@ -19,9 +19,7 @@ import * as http from 'http';
 import * as url from 'url';
 
 test.describe('cli codegen', () => {
-  test.beforeEach(async ({ mode }) => {
-    test.skip(mode !== 'default');
-  });
+  test.skip(({ mode }) => mode !== 'default');
 
   test('should contain open page', async ({ openRecorder }) => {
     const recorder = await openRecorder();