test: roll to folio@0.4.0-alpha28 (#6918)

docs/src/test-snapshots.md

@@ -3,7 +3,7 @@ id: test-snapshots
 title: "Visual comparisons"
 ---
 
-Playwright Test includes the ability to produce and visually compare screenshots using `expect(value).toMatchSnapshot()`. On first execution, Playwright test will generate reference screenshots. Subsequent runs will compare against the reference.
+Playwright Test includes the ability to produce and visually compare screenshots using `expect(value).toMatchSnapshot(snapshotName)`. On first execution, Playwright test will generate reference screenshots. Subsequent runs will compare against the reference.
 
 ```js js-flavor=js
 // example.spec.js
@@ -11,7 +11,7 @@ const { test, expect } = require('@playwright/test');
 
 test('example test', async ({ page }) => {
   await page.goto('https://playwright.dev');
-  expect(await page.screenshot()).toMatchSnapshot('optional-snapshot-name.png');
+  expect(await page.screenshot()).toMatchSnapshot('snapshot-name.png');
 });
 ```
 
@@ -21,7 +21,7 @@ import { test, expect } from '@playwright/test';
 
 test('example test', async ({ page }) => {
   await page.goto('https://playwright.dev');
-  expect(await page.screenshot()).toMatchSnapshot('optional-snapshot-name.png');
+  expect(await page.screenshot()).toMatchSnapshot('snapshot-name.png');
 });
 ```
 
@@ -39,7 +39,7 @@ const { test, expect } = require('@playwright/test');
 
 test('example test', async ({ page }) => {
   await page.goto('https://playwright.dev');
-  expect(await page.screenshot()).toMatchSnapshot({ threshold: 0.2 });
+  expect(await page.screenshot()).toMatchSnapshot('home.png', { threshold: 0.2 });
 });
 ```
 
@@ -49,11 +49,11 @@ import { test, expect } from '@playwright/test';
 
 test('example test', async ({ page }) => {
   await page.goto('https://playwright.dev');
-  expect(await page.screenshot()).toMatchSnapshot({ threshold: 0.2 });
+  expect(await page.screenshot()).toMatchSnapshot('home.png', { threshold: 0.2 });
 });
 ```
 
-Apart from screenshots, `expect(value).toMatchSnapshot()` can also be used to compare text, png and jpeg images, or arbitrary binary data. Playwright Test auto-detects the content type and uses the appropriate comparison algorithm.
+Apart from screenshots, `expect(value).toMatchSnapshot(snapshotName)` can also be used to compare text, png and jpeg images, or arbitrary binary data. Playwright Test auto-detects the content type and uses the appropriate comparison algorithm.
 
 Here we compare text content against the reference.
 
@@ -63,7 +63,7 @@ const { test, expect } = require('@playwright/test');
 
 test('example test', async ({ page }) => {
   await page.goto('https://playwright.dev');
-  expect(await page.textContent('.hero__title')).toMatchSnapshot();
+  expect(await page.textContent('.hero__title')).toMatchSnapshot('hero.txt');
 });
 ```
 
@@ -73,8 +73,8 @@ import { test, expect } from '@playwright/test';
 
 test('example test', async ({ page }) => {
   await page.goto('https://playwright.dev');
-  expect(await page.textContent('.hero__title')).toMatchSnapshot();
+  expect(await page.textContent('.hero__title')).toMatchSnapshot('hero.txt');
 });
 ```
 
-Snapshots are stored next to the test file, in a separate directory. For example, `my.spec.js` file will produce and store snapshots in the `my.spec.js-snapshots` directory. You should commit this directory to your version control (e.g. `git`), and review any changes to it.
+Snapshots are stored next to the test file, in a separate directory. For example, `my.spec.ts` file will produce and store snapshots in the `my.spec.ts-snapshots` directory. You should commit this directory to your version control (e.g. `git`), and review any changes to it.

package-lock.json

@@ -55,7 +55,7 @@
         "eslint-plugin-notice": "^0.9.10",
         "eslint-plugin-react-hooks": "^4.2.0",
         "file-loader": "^6.1.0",
-        "folio": "=0.4.0-alpha27",
+        "folio": "=0.4.0-alpha28",
         "formidable": "^1.2.2",
         "html-webpack-plugin": "^4.4.1",
         "ncp": "^2.0.0",
@@ -4199,9 +4199,9 @@
       }
     },
     "node_modules/folio": {
-      "version": "0.4.0-alpha27",
-      "resolved": "https://registry.npmjs.org/folio/-/folio-0.4.0-alpha27.tgz",
-      "integrity": "sha512-IjCe0ds6N++F2rVKGHm8lXLqH4smGiwZMP5tylFR7PQykU+i9eGKka1TtxXxhReAH9DMEb3+YRWfzZZdF43MXg==",
+      "version": "0.4.0-alpha28",
+      "resolved": "https://registry.npmjs.org/folio/-/folio-0.4.0-alpha28.tgz",
+      "integrity": "sha512-sbHdEDRXPkkhzHAyRy/tQKTWImNy38cICoii4ox9AGYFVWgF+i4l37AL2cVfJkUEvUqZpq+u4NkuV1cMelV5AA==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.12.13",
@@ -13205,9 +13205,9 @@
       }
     },
     "folio": {
-      "version": "0.4.0-alpha27",
-      "resolved": "https://registry.npmjs.org/folio/-/folio-0.4.0-alpha27.tgz",
-      "integrity": "sha512-IjCe0ds6N++F2rVKGHm8lXLqH4smGiwZMP5tylFR7PQykU+i9eGKka1TtxXxhReAH9DMEb3+YRWfzZZdF43MXg==",
+      "version": "0.4.0-alpha28",
+      "resolved": "https://registry.npmjs.org/folio/-/folio-0.4.0-alpha28.tgz",
+      "integrity": "sha512-sbHdEDRXPkkhzHAyRy/tQKTWImNy38cICoii4ox9AGYFVWgF+i4l37AL2cVfJkUEvUqZpq+u4NkuV1cMelV5AA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.13",

package.json

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

src/cli/fixtures.ts

@@ -21,7 +21,8 @@ import type { PlaywrightTestArgs, PlaywrightTestOptions, PlaywrightWorkerArgs, P
 
 export * from 'folio';
 export const test = folio.test.extend<PlaywrightTestArgs & PlaywrightTestOptions, PlaywrightWorkerArgs & PlaywrightWorkerOptions>({
-  browserName: [ 'chromium', { scope: 'worker' } ],
+  defaultBrowserType: [ 'chromium', { scope: 'worker' } ],
+  browserName: [ ({ defaultBrowserType }, use) => use(defaultBrowserType), { scope: 'worker' } ],
   playwright: [ require('../inprocess'), { scope: 'worker' } ],
   headless: [ undefined, { scope: 'worker' } ],
   channel: [ undefined, { scope: 'worker' } ],
@@ -66,8 +67,8 @@ export const test = folio.test.extend<PlaywrightTestArgs & PlaywrightTestOptions
   viewport: undefined,
   contextOptions: {},
 
-  context: async ({ browserName, browser, screenshot, video, acceptDownloads, bypassCSP, colorScheme, deviceScaleFactor, extraHTTPHeaders, hasTouch, geolocation, httpCredentials, ignoreHTTPSErrors, isMobile, javaScriptEnabled, locale, offline, permissions, proxy, storageState, viewport, timezoneId, userAgent, contextOptions }, use, testInfo) => {
-    testInfo.snapshotSuffix = browserName + '-' + process.platform;
+  context: async ({ browser, screenshot, video, acceptDownloads, bypassCSP, colorScheme, deviceScaleFactor, extraHTTPHeaders, hasTouch, geolocation, httpCredentials, ignoreHTTPSErrors, isMobile, javaScriptEnabled, locale, offline, permissions, proxy, storageState, viewport, timezoneId, userAgent, contextOptions }, use, testInfo) => {
+    testInfo.snapshotSuffix = process.platform;
     if (process.env.PWDEBUG)
       testInfo.setTimeout(0);
 
@@ -148,3 +149,5 @@ export const test = folio.test.extend<PlaywrightTestArgs & PlaywrightTestOptions
   },
 });
 export default test;
+
+export const __baseTest = folio.test;

src/cli/testRunner.ts

@@ -87,18 +87,16 @@ export function addTestCommand(program: commander.CommanderStatic) {
 }
 
 async function runTests(Runner: RunnerType, args: string[], opts: { [key: string]: any }) {
-  if (opts.browser) {
-    const browserOpt = opts.browser.toLowerCase();
-    if (!['all', 'chromium', 'firefox', 'webkit'].includes(browserOpt))
-      throw new Error(`Unsupported browser "${opts.browser}", must be one of "all", "chromium", "firefox" or "webkit"`);
-    const browserNames = browserOpt === 'all' ? ['chromium', 'firefox', 'webkit'] : [browserOpt];
-    defaultConfig.projects = browserNames.map(browserName => {
-      return {
-        name: browserName,
-        use: { browserName },
-      };
-    });
-  }
+  const browserOpt = opts.browser ? opts.browser.toLowerCase() : 'chromium';
+  if (!['all', 'chromium', 'firefox', 'webkit'].includes(browserOpt))
+    throw new Error(`Unsupported browser "${opts.browser}", must be one of "all", "chromium", "firefox" or "webkit"`);
+  const browserNames = browserOpt === 'all' ? ['chromium', 'firefox', 'webkit'] : [browserOpt];
+  defaultConfig.projects = browserNames.map(browserName => {
+    return {
+      name: browserName,
+      use: { browserName },
+    };
+  });
 
   const overrides = overridesFromOptions(opts);
   if (opts.headed)

tests/config/baseTest.ts

@@ -101,7 +101,7 @@ class DefaultMode {
   }
 }
 
-const baseFixtures: folio.Fixtures<{ __baseSetup: void }, BaseOptions & BaseFixtures> = {
+const baseFixtures: folio.Fixtures<{}, BaseOptions & BaseFixtures> = {
   mode: [ 'default', { scope: 'worker' } ],
   browserName: [ 'chromium' , { scope: 'worker' } ],
   channel: [ undefined, { scope: 'worker' } ],
@@ -123,10 +123,6 @@ const baseFixtures: folio.Fixtures<{ __baseSetup: void }, BaseOptions & BaseFixt
   isWindows: [ process.platform === 'win32', { scope: 'worker' } ],
   isMac: [ process.platform === 'darwin', { scope: 'worker' } ],
   isLinux: [ process.platform === 'linux', { scope: 'worker' } ],
-  __baseSetup: [ async ({ browserName }, run, testInfo) => {
-    testInfo.snapshotSuffix = browserName;
-    await run();
-  }, { auto: true } ],
 };
 
 type ServerOptions = {

tests/config/electron.config.ts

@@ -48,7 +48,7 @@ const metadata = {
 };
 
 config.projects.push({
-  name: 'electron',
+  name: 'chromium',  // We use 'chromium' here to share screenshots with chromium.
   use: {
     mode: 'default',
     browserName: 'chromium',
@@ -59,7 +59,7 @@ config.projects.push({
 });
 
 config.projects.push({
-  name: 'electron',
+  name: 'chromium',  // We use 'chromium' here to share screenshots with chromium.
   use: {
     mode: 'default',
     browserName: 'chromium',

tests/headful.spec.ts

@@ -153,7 +153,7 @@ it('focused input should produce the same screenshot', async ({browserType, brow
   it.skip(browserName === 'webkit' && platform === 'linux', 'gtk vs wpe');
   it.skip(!!process.env.CRPATH);
 
-  testInfo.snapshotSuffix = browserName + '-' + platform;
+  testInfo.snapshotSuffix = platform;
 
   const headful = await browserType.launch({...browserOptions, headless: false });
   const headfulPage = await headful.newPage();