switch from puppeteer to playwright

.eslintignore

@@ -3,4 +3,4 @@ dist
 types
 .build
 .coverage
-.pptr
+.nyc_output

.eslintrc.js

@@ -1,8 +1,8 @@
 const resolve = require('./resolve.config');
-const puppeteerRollupConfig = require('./config/jest-puppeteer.rollup.config.js');
+const browserRollupConfig = require('./config/jest-puppeteer.rollup.config.js');
 
 module.exports = {
-  extends: ['plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'airbnb', 'prettier'],
+  extends: ['plugin:jest-playwright/recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'airbnb', 'prettier'],
   env: {
     browser: true,
     es2020: true,
@@ -73,7 +73,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['*.test.*', `*${puppeteerRollupConfig.js.input}.*`],
+      files: ['*.test.*', `*${browserRollupConfig.js.input}.*`],
       rules: {
         'no-restricted-syntax': 'off',
         '@typescript-eslint/ban-ts-comment': 'off',
@@ -90,16 +90,10 @@ module.exports = {
         'import/no-unresolved': [
           'error',
           {
-            ignore: [`\\./${puppeteerRollupConfig.build}/${puppeteerRollupConfig.html.output}$`, `^@/.*`],
+            ignore: [`\\./${browserRollupConfig.build}/${browserRollupConfig.html.output}$`, `^@/.*`],
           },
         ],
       },
-      globals: {
-        page: true,
-        browser: true,
-        context: true,
-        jestPuppeteer: true,
-      },
     },
     {
       files: ['rollup.config.*'],

.gitignore

@@ -6,7 +6,7 @@ node_modules/
 # generated
 .build/
 .coverage/
-.pptr/
+.nyc_output/
 
 # local env files
 .env.local

.prettierignore

@@ -3,4 +3,4 @@ dist
 types
 .coverage
 .build
-.pptr
+.nyc_output

config/jest-browser.env.js

@@ -0,0 +1,32 @@
+const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment').default;
+const { setupRollupTest, cleanupRollupTest } = require('./jest-browser.rollup.js');
+
+const buildTests = [];
+
+class BrowserRollupEnvironment extends PlaywrightEnvironment {
+  constructor(envConfig, envContext) {
+    super(envConfig, envContext);
+
+    this.watch = (envConfig.displayName.name || '').includes('-dev');
+    this.ctx = envContext;
+    this.cfg = envConfig;
+  }
+
+  async setup() {
+    const { testPath } = this.ctx;
+
+    if (!buildTests.includes(testPath)) {
+      await cleanupRollupTest(testPath, this.cfg.cache);
+      await setupRollupTest(this.cfg.rootDir, this.ctx.testPath, this.cfg.cache && this.cfg.cacheDirectory, this.watch);
+      buildTests.push(testPath);
+    }
+
+    await super.setup();
+  }
+
+  async teardown() {
+    await super.teardown();
+  }
+}
+
+module.exports = BrowserRollupEnvironment;

config/jest-browser.rollup.js

@@ -8,10 +8,10 @@ const rollupPluginHtml = require('@rollup/plugin-html');
 const rollupPluginStyles = require('rollup-plugin-styles');
 const rollupPluginServe = require('rollup-plugin-serve');
 const rollupPluginLivereload = require('rollup-plugin-livereload');
-const deploymentConfig = require('./jest-puppeteer.rollup.config.js');
+const deploymentConfig = require('./jest-browser.rollup.config.js');
 
 const rollupConfigName = 'rollup.config.js';
-const cacheFilePrefix = 'jest-puppeteer-overlayscrollbars-cache-';
+const cacheFilePrefix = 'jest-browser-overlayscrollbars-cache-';
 const cacheEncoding = 'utf8';
 const cacheHash = 'md5';
 
@@ -194,7 +194,7 @@ const setupRollupTest = async (rootDir, testPath, cacheDir, watch) => {
                   rollupPluginStyles(),
                   ...defaultConfig.pipeline,
                   rollupPluginHtml({
-                    title: `Jest-Puppeteer: ${testName}`,
+                    title: `Jest-Browser: ${testName}`,
                     fileName: deploymentConfig.html.output,
                     template: genHtmlTemplateFunc(getHtmlFileContent),
                     meta: [{ charset: 'utf-8' }, { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }],
@@ -327,9 +327,9 @@ const setupRollupTest = async (rootDir, testPath, cacheDir, watch) => {
   }
 };
 
-const cleanupRollupTest = (testPath, cache) => {
+const cleanupRollupTest = async (testPath, cache) => {
   if (!cache) {
-    del(path.resolve(path.dirname(testPath), deploymentConfig.build));
+    await del(path.resolve(path.dirname(testPath), deploymentConfig.build));
   }
 };
 

config/jest-browser.setup.js

@@ -0,0 +1,2 @@
+jest.setTimeout(60000);
+context.setDefaultTimeout(60000);

config/jest-puppeteer.env.js

@@ -1,36 +0,0 @@
-const PuppeteerEnvironment = require('jest-environment-puppeteer');
-// const pti = require('puppeteer-to-istanbul');
-const { setupRollupTest, cleanupRollupTest } = require('./jest-puppeteer.rollup.js');
-
-class PuppeteerRollupEnvironment extends PuppeteerEnvironment {
-  constructor(envConfig, envContext) {
-    super(envConfig, envContext);
-
-    this.watch = envConfig.displayName.name === 'puppeteer-dev';
-    this.ctx = envContext;
-    this.cfg = envConfig;
-  }
-
-  async setup() {
-    // setup
-    await setupRollupTest(this.cfg.rootDir, this.ctx.testPath, this.cfg.cache && this.cfg.cacheDirectory, this.watch);
-    await super.setup();
-
-    // coverage
-    // const { page } = this.global;
-    // await Promise.all([page.coverage.startCSSCoverage(), page.coverage.startJSCoverage()]);
-  }
-
-  async teardown() {
-    // coverage
-    // const { page } = this.global;
-    // const [jsCoverage, cssCoverage] = await Promise.all([page.coverage.stopJSCoverage(), page.coverage.stopCSSCoverage()]);
-    // pti.write([...jsCoverage, ...cssCoverage], { includeHostname: true, storagePath: './.pptr' });
-
-    // cleanup
-    cleanupRollupTest(this.ctx.testPath, this.cfg.cache);
-    await super.teardown();
-  }
-}
-
-module.exports = PuppeteerRollupEnvironment;

config/jest-puppeteer.setup.js

@@ -1,4 +0,0 @@
-const setDefaultOptions = require('expect-puppeteer').setDefaultOptions;
-
-jest.setTimeout(60000);
-setDefaultOptions({ timeout: 60000 });

config/jest-test-server.js

@@ -1,5 +1,5 @@
 const express = require('express');
-const deploymentConfig = require('./jest-puppeteer.rollup.config.js');
+const deploymentConfig = require('./jest-browser.rollup.config.js');
 
 const app = express();
 

config/jest-test-server.loader.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const deploymentConfig = require('./jest-puppeteer.rollup.config.js');
+const deploymentConfig = require('./jest-browser.rollup.config.js');
 
 module.exports = {
   process: (src, filePath) => {

jest-playwright.config.base.js

@@ -1,15 +1,16 @@
 const path = require('path');
 
-const deploymentConfig = path.resolve(__dirname, './config/jest-puppeteer.rollup.config.js');
+const deploymentConfig = path.resolve(__dirname, './config/jest-browser.rollup.config.js');
 const testServerPath = path.resolve(__dirname, './config/jest-test-server.js');
 
 module.exports = {
-  browser: 'chromium',
-  browserContext: 'incognito',
-  launch: {
+  browsers: ['chromium', 'firefox'],
+  collectCoverage: true,
+  launchType: 'LAUNCH',
+  launchOptions: {
     headless: false,
   },
-  server: {
+  serverOptions: {
     command: `node ${testServerPath}`,
     port: deploymentConfig.port,
     launchTimeout: 10000,

jest.config.base.js

@@ -1,11 +1,11 @@
 const path = require('path');
 const resolve = require('./resolve.config');
-const puppeteerRollupConfig = require('./config/jest-puppeteer.rollup.config.js');
+const browserRollupConfig = require('./config/jest-browser.rollup.config.js');
 
 const testServerLoaderPath = path.resolve(__dirname, './config/jest-test-server.loader.js');
 const jsdomSetupFile = path.resolve(__dirname, './config/jest-jsdom.setup.js');
-const puppeteerTestEnvironmentPath = path.resolve(__dirname, './config/jest-puppeteer.env.js');
-const puppeteerSetupFile = path.resolve(__dirname, './config/jest-puppeteer.setup.js');
+const browserTestEnvironmentPath = path.resolve(__dirname, './config/jest-browser.env.js');
+const browserSetupFile = path.resolve(__dirname, './config/jest-browser.setup.js');
 
 // For a detailed explanation regarding each configuration property, visit:
 // https://jestjs.io/docs/en/configuration.html
@@ -19,16 +19,16 @@ const base = {
   testPathIgnorePatterns: ['\\\\node_modules\\\\'],
 };
 
-const pptrBase = {
+const browserBase = {
   ...base,
-  preset: 'jest-puppeteer',
-  setupFilesAfterEnv: ['expect-puppeteer', puppeteerSetupFile],
-  testMatch: ['**/tests/puppeteer/**/*.test.[jt]s?(x)'],
-  testEnvironment: puppeteerTestEnvironmentPath,
-  coveragePathIgnorePatterns: ['/node_modules/', `/${puppeteerRollupConfig.build}/`],
+  preset: 'jest-playwright-preset',
+  setupFilesAfterEnv: [browserSetupFile],
+  testMatch: ['**/tests/browser/**/*.test.[jt]s?(x)'],
+  testEnvironment: browserTestEnvironmentPath,
+  coveragePathIgnorePatterns: ['/node_modules/', `/${browserRollupConfig.build}/`],
   transform: {
     '^.+\\.[jt]sx?$': 'babel-jest',
-    [`^.+${puppeteerRollupConfig.build}.+${puppeteerRollupConfig.html.output}?$`]: testServerLoaderPath,
+    [`^.+${browserRollupConfig.build}.+${browserRollupConfig.html.output}?$`]: testServerLoaderPath,
   },
 };
 
@@ -42,12 +42,18 @@ module.exports = {
       testMatch: ['**/tests/jsdom/**/*.test.[jt]s?(x)'],
     },
     {
-      ...pptrBase,
-      displayName: 'puppeteer',
+      ...browserBase,
+      displayName: {
+        name: 'browser',
+        color: 'white',
+      },
     },
     {
-      ...pptrBase,
-      displayName: 'puppeteer-dev',
+      ...browserBase,
+      displayName: {
+        name: 'browser-dev',
+        color: 'white',
+      },
       collectCoverage: false,
     },
   ],

package.json

@@ -15,13 +15,11 @@
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-typescript": "^5.0.2",
     "@testing-library/dom": "^7.26.3",
-    "@types/expect-puppeteer": "^4.4.3",
     "@types/jest": "^25.2.3",
-    "@types/jest-environment-puppeteer": "^4.3.2",
-    "@types/puppeteer": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
     "babel-jest": "^26.0.1",
+    "babel-plugin-istanbul": "^6.0.0",
     "bufferutil": "^4.0.1",
     "canvas": "^2.6.1",
     "core-js": "^3.6.5",
@@ -31,22 +29,26 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jest": "^23.18.0",
+    "eslint-plugin-jest-playwright": "^0.2.1",
     "eslint-plugin-json": "^2.1.2",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
-    "expect-puppeteer": "^4.4.0",
+    "expect-playwright": "^0.3.1",
     "express": "^4.17.1",
-    "jest": "^26.0.1",
+    "jest": "^26.6.0",
     "jest-dev-server": "^4.4.0",
-    "jest-puppeteer": "^4.4.0",
+    "jest-playwright-preset": "^1.4.5",
     "mkdirp": "^1.0.4",
     "node-sass": "^4.14.1",
+    "playwright": "^1.8.0",
+    "playwright-chromium": "^1.8.0",
+    "playwright-core": "^1.8.0",
+    "playwright-firefox": "^1.8.0",
+    "playwright-webkit": "^1.8.0",
     "prettier": "^2.0.5",
     "prettier-eslint": "^11.0.0",
-    "puppeteer": "^5.2.1",
-    "puppeteer-to-istanbul": "^1.4.0",
     "rollup": "^2.36.1",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-prettier": "^2.1.0",
@@ -62,8 +64,8 @@
   "scripts": {
     "test": "yarn workspaces run test",
     "test:jsdom": "yarn workspaces run test:jsdom",
-    "test:pptr": "yarn workspaces run test:pptr",
-    "test:pptr-dev": "yarn workspaces run test:pptr-dev",
+    "test:browser": "yarn workspaces run test:browser",
+    "test:browser-dev": "yarn workspaces run test:browser-dev",
     "build": "yarn workspaces run build",
     "lint": "npx eslint --fix ."
   }

packages/overlayscrollbars/index_.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>OverlayScrollbars</title>
+  </head>
+
+  <body>
+    <div id="hi">hi</div>
+    <script type="text/javascript" src="./dist_/overlayscrollbars.js"></script>
+  </body>
+</html>

packages/overlayscrollbars/jest-playwright.config.js

@@ -0,0 +1 @@
+module.exports = require('../../jest-playwright.config.base');

packages/overlayscrollbars/jest-puppeteer.config.js

@@ -1 +0,0 @@
-module.exports = require('../../jest-puppeteer.config.base');

packages/overlayscrollbars/package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "test": "jest --coverage --runInBand --detectOpenHandles",
     "test:jsdom": "jest --coverage --runInBand --detectOpenHandles --selectProjects jsdom --testPathPattern",
-    "test:pptr": "jest --coverage --runInBand --detectOpenHandles --selectProjects puppeteer --testPathPattern",
-    "test:pptr-dev": "jest --coverage --runInBand --detectOpenHandles --selectProjects puppeteer-dev --testPathPattern",
+    "test:browser": "jest --coverage --runInBand --detectOpenHandles --selectProjects browser --testPathPattern",
+    "test:browser-dev": "jest --coverage --runInBand --detectOpenHandles --selectProjects browser-dev --testPathPattern",
     "build": "rollup -c"
   }
 }

packages/overlayscrollbars/tests/browser/environment/index.test.ts

@@ -1,3 +1,5 @@
+import 'jest-playwright-preset';
+import 'expect-playwright';
 import { Environment } from 'environment';
 import url from './.build/build.html';
 

packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.test.ts

@@ -1,3 +1,5 @@
+import 'jest-playwright-preset';
+import 'expect-playwright';
 import { Environment } from 'environment';
 import url from './.build/build.html';
 

packages/overlayscrollbars/tests/browser/observers/domObserver/index.test.ts

@@ -1,4 +1,5 @@
-import expectPuppeteer from 'expect-puppeteer';
+import 'jest-playwright-preset';
+import 'expect-playwright';
 import url from './.build/build.html';
 
 describe('DOMObserver', () => {
@@ -7,7 +8,7 @@ describe('DOMObserver', () => {
   });
 
   test('test', async () => {
-    await expectPuppeteer(page).toClick('#start');
-    await expectPuppeteer(page).toMatchElement('#testResult.passed');
+    await page.click('#start');
+    await expect(page).toHaveSelector('#testResult.passed');
   });
 });

packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.test.ts

@@ -1,4 +1,5 @@
-import expectPuppeteer from 'expect-puppeteer';
+import 'jest-playwright-preset';
+import 'expect-playwright';
 import url from './.build/build.html';
 
 describe('SizeObserver', () => {
@@ -7,7 +8,7 @@ describe('SizeObserver', () => {
   });
 
   test('test', async () => {
-    await expectPuppeteer(page).toClick('#start');
-    await expectPuppeteer(page).toMatchElement('#testResult.passed');
+    await page.click('#start');
+    await expect(page).toHaveSelector('#testResult.passed');
   });
 });

packages/overlayscrollbars/tests/browser/observers/trinsicObserver/index.test.ts

@@ -1,4 +1,5 @@
-import expectPuppeteer from 'expect-puppeteer';
+import 'jest-playwright-preset';
+import 'expect-playwright';
 import url from './.build/build.html';
 
 describe('TrinsicObserver', () => {
@@ -7,7 +8,7 @@ describe('TrinsicObserver', () => {
   });
 
   test('test', async () => {
-    await expectPuppeteer(page).toClick('#start');
-    await expectPuppeteer(page).toMatchElement('#testResult.passed');
+    await page.click('#start');
+    await expect(page).toHaveSelector('#testResult.passed');
   });
 });

rollup.config.base.js

@@ -28,6 +28,7 @@ const rollupConfigDefaults = {
 
 const legacyBabelConfig = {
   exclude: isTestEnv ? [/\/core-js\//] : [], // /\/@testing-library\//
+  plugins: isTestEnv ? ['babel-plugin-istanbul'] : [],
   presets: [
     [
       '@babel/preset-env',