feat(playwright): s/puppeteer/playwright (#974)

.circleci/config.yml

@@ -62,7 +62,7 @@ jobs:
             npx addons-linter coilfirefoxextension@coil.com.xpi
       - *save_cache
 
-  coil-extension-puppeteer:
+  coil-extension-playwright:
     docker:
       - image: circleci/node:12.18.2-buster-browsers
     environment:
@@ -72,23 +72,23 @@ jobs:
       - *restore_cache
       - *yarn_install
       - run:
-          name: BROWSER_TYPE=chrome ./test.sh test/puppeteer/logout-test.ts
+          name: BROWSER_TYPE=chrome ./test.sh test/playwright/logout-test.ts
           command: |
             cd packages/coil-extension
             export BROWSER_TYPE=chrome
             [[ $COIL_DOMAIN = "https://coil.com" ]] && build_cmd="build-prod" || build_cmd="build-staging"
             yarn $build_cmd $BROWSER_TYPE
-            xvfb-run -a ./test.sh test/puppeteer/logout-test.ts
+            xvfb-run -a ./test.sh test/playwright/logout-test.ts
       - run:
-          name: BROWSER_TYPE=firefox test.sh test/puppeteer/basic-test.ts
+          name: BROWSER_TYPE=firefox test.sh test/playwright/logout-test.ts
           command: |
             cd packages/coil-extension
             export BROWSER_TYPE=firefox
             [[ $COIL_DOMAIN = "https://coil.com" ]] && build_cmd="build-prod" || build_cmd="build-staging"
             yarn $build_cmd $BROWSER_TYPE
-            xvfb-run -a ./test.sh test/puppeteer/basic-test.ts
+            xvfb-run -a ./test.sh test/playwright/logout-test.ts
 
-  coil-extension-puppeteer-transpile-only:
+  coil-extension-playwright-transpile-only:
     docker:
       - image: circleci/node:12.18.2-buster-browsers
     environment:
@@ -98,22 +98,22 @@ jobs:
       - *restore_cache
       - *yarn_install
       - run:
-          name: BROWSER_TYPE=chrome ./test.sh test/puppeteer/logout-test.ts
+          name: BROWSER_TYPE=chrome ./test.sh test/playwright/logout-test.ts
           command: |
             cd packages/coil-extension
             export BROWSER_TYPE=chrome
             [[ $COIL_DOMAIN = "https://coil.com" ]] && build_cmd="build-prod" || build_cmd="build-staging"
             BUILD_TS=false TS_LOADER_TRANSPILE_ONLY=true yarn $build_cmd $BROWSER_TYPE
-            xvfb-run -a ./test.sh test/puppeteer/logout-test.ts
+            xvfb-run -a ./test.sh test/playwright/logout-test.ts
 
       - run:
-          name: BROWSER_TYPE=firefox test.sh test/puppeteer/basic-test.ts
+          name: BROWSER_TYPE=firefox test.sh test/playwright/logout-test.ts
           command: |
             cd packages/coil-extension
             export BROWSER_TYPE=firefox
             [[ $COIL_DOMAIN = "https://coil.com" ]] && build_cmd="build-prod" || build_cmd="build-staging"
             BUILD_TS=false TS_LOADER_TRANSPILE_ONLY=true yarn $build_cmd $BROWSER_TYPE
-            xvfb-run -a ./test.sh test/puppeteer/basic-test.ts
+            xvfb-run -a ./test.sh test/playwright/logout-test.ts
 
   build-all-package-references-typescript:
     docker:
@@ -233,13 +233,13 @@ workflows:
             branches:
               # Forked pull requests have CIRCLE_BRANCH set to pull/XXX
               ignore: /pull\/[0-9]+/
-      - coil-extension-puppeteer:
+      - coil-extension-playwright:
           context: web-monetization-tests
           filters:
             branches:
               # Forked pull requests have CIRCLE_BRANCH set to pull/XXX
               ignore: /pull\/[0-9]+/
-      - coil-extension-puppeteer-transpile-only:
+      - coil-extension-playwright-transpile-only:
           context: web-monetization-tests
           filters:
             branches:

.prettierrc

@@ -5,3 +5,4 @@ bracketSpacing: true
 singleQuote: true
 trailingComma: none
 arrowParens: avoid
+

README.md

@@ -9,7 +9,7 @@
 Ultimately we want `main` branch to be in a 'good' state at all times, with good test
 coverage, so we can practice CD, pushing the extensions to dev channels.
 
-Currently, we mostly rely on puppeteer tests which don't cover all the test scenarios.  
+Currently, we mostly rely on playwright tests which don't cover all the test scenarios.  
 Therefore, **we must do manual testing before release**, as it's too much of an impediment
 to run through the full manual release checklist on each PR/commit.
 

package.json

@@ -62,7 +62,6 @@
     "@types/copy-webpack-plugin": "^6.0.0",
     "@types/jest": "^26.0.12",
     "@types/node": "12.x",
-    "@types/puppeteer": "^3.0.1",
     "@types/webpack": "^4.41.21",
     "@types/webpack-merge": "^4.1.5",
     "@typescript-eslint/parser": "3.10.x",
@@ -85,8 +84,6 @@
     "lerna": "^3.22.1",
     "lint-staged": "^10.2.13",
     "prettier": "^2.1.1",
-    "puppeteer": "^5.2.1",
-    "puppeteer-firefox": "^0.5.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^26.3.0",
     "ts-loader": "^8.0.3",

packages/coil-extension/docs/release-checklist.md

@@ -106,10 +106,9 @@ make sense.
   - Go to a monetized page and check that the icon "monetized" black and in 'unavailable' state
     - ![image](https://user-images.githubusercontent.com/525211/70715784-8f150d00-1d1d-11ea-8f82-fe116b2e9a16.png)
 
-- [ ] Run the puppeteer [tests](./test.sh) (look at the [circle jobs](../../../.circleci/config.yml))
+- [ ] Run the playwright [tests](./test.sh) (look at the [circle jobs](../../../.circleci/config.yml))
 
   - export BROWSER_TYPE='chrome' # or 'firefox'
-  - logout test currently fails on Firefox due to puppeteer-firefox limitations
 
 - [ ] Go to a [youtube video](https://www.youtube.com/watch?v=l1btEwwRePs),
       manually skip to near end of video, and when autoplay of a video from

packages/coil-extension/package.json

@@ -46,8 +46,8 @@
   "dependencies": {
     "@abraham/reflection": "^0.7.0",
     "@coil/anonymous-tokens": "^0.0.0",
+    "@coil/playwright-utils": "^0.0.0",
     "@coil/polyfill-utils": "^0.0.0",
-    "@coil/puppeteer-utils": "^0.0.0",
     "@dier-makr/inversify": "^0.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
@@ -67,9 +67,7 @@
   },
   "devDependencies": {
     "@types/chrome": "0.0.122",
-    "@types/expect-puppeteer": "^4.4.3",
     "@types/firefox": "^0.0.30",
-    "@types/jest-environment-puppeteer": "^4.3.2",
     "@types/jsonwebtoken": "^8.5.0",
     "@types/long": "^4.0.1",
     "@types/node-fetch": "^2.5.7",
@@ -79,6 +77,7 @@
     "@wext/shipit": "^0.2.1",
     "addons-linter": "^2.1.0",
     "crx-hotreload": "^1.0.4",
+    "playwright": "^1.3.0",
     "web-ext": "^5.0.0"
   }
 }

packages/coil-extension/src/types/commands.ts

@@ -1,6 +1,5 @@
 import { PaymentDetails } from '@web-monetization/polyfill-utils'
 import { MonetizationState } from '@web-monetization/types'
-import { Frame } from 'puppeteer'
 
 import {
   PlayOrPauseState,

packages/coil-extension/test.sh

@@ -10,7 +10,7 @@ CI=${CI:-}
 
 # Logout test logs in, waits for connecting to 3 sites, then logs out
 # and makes sure the stream has closed so is a good default
-TESTFILE=${1-'test/puppeteer/logout-test.ts'}
+TESTFILE=${1-'test/playwright/logout-test.ts'}
 
 if [[ ${DEV} = 'false' ]]
 then
@@ -19,8 +19,11 @@ else
   COMMAND="ts-node-dev -r tsconfig-paths/register -P test/tsconfig.json --respawn --transpile-only"
 fi
 
+# To enable playwright browser logging, see:
+#   https://github.com/microsoft/playwright/issues/1959#issuecomment-619069349
+#   DEBUG=pw:browser* node test.js,
+
 export DEBUG='coil*'
-# This will all get ported to jest, but in the mean time it's useful
 
 # shellcheck disable=SC2086
 yarn $COMMAND \

packages/coil-extension/test/README.md

@@ -1,7 +1,7 @@
-# puppeteer
+# playwright
 
-There are currently some puppeteer scripts, which can be launched via [test.sh](../test.sh) which while aren't very sophisticated are better than nothing!
-Check [env.ts](puppeteer/lib/env.ts) for environment configuration values.
+There are currently some playwright scripts, which can be launched via [test.sh](../test.sh) which while aren't very sophisticated are better than nothing!
+Check [env.ts](../coil-playwright-utils/src/lib/env.ts) for environment configuration values.
 
 ```bash
 # from packages/coil-extension

packages/coil-extension/test/puppeteer/basic-test.ts → packages/coil-extension/test/playwright/basic-test.ts

@@ -3,16 +3,17 @@ import {
   env,
   initBrowserAndLoginFromEnv,
   testMonetization
-} from '@coil/puppeteer-utils'
+} from '@coil/playwright-utils'
 
 import { testUrls } from './testUrls'
 
 async function run() {
-  const { browser } = await initBrowserAndLoginFromEnv()
+  const { context } = await initBrowserAndLoginFromEnv()
+
   let success = true
   for (const [name, url] of Object.entries(testUrls[env.COIL_DOMAIN])) {
     const { success: siteResult } = await testMonetization({
-      browser,
+      context,
       url: url
     })
     if (!siteResult) {
@@ -22,7 +23,7 @@ async function run() {
   }
 
   // noinspection ES6MissingAwait
-  void browser.close()
+  void context.close()
   process.exit(success ? 0 : 1)
 }
 

packages/coil-extension/test/puppeteer/logout-test.ts → packages/coil-extension/test/playwright/logout-test.ts

@@ -3,7 +3,7 @@
   closed after logout.
 */
 
-import { Page } from 'puppeteer'
+import { Page } from 'playwright'
 import {
   debug,
   initBrowserAndLoginFromEnv,
@@ -13,7 +13,7 @@ import {
   timeout,
   isValidStopEvent,
   env
-} from '@coil/puppeteer-utils'
+} from '@coil/playwright-utils'
 import { MonetizationExtendedDocument } from '@web-monetization/types'
 
 import { testUrls } from './testUrls'
@@ -64,7 +64,7 @@ function checkCondition({
 }
 
 async function run() {
-  const { browser, page: coilPage } = await initBrowserAndLoginFromEnv()
+  const { context, page: coilPage } = await initBrowserAndLoginFromEnv()
 
   const results: Record<string, TestPageResults> = {}
   let initSuccess = true
@@ -73,7 +73,7 @@ async function run() {
     debug('opening url to start monetization', site)
     const result = await testMonetization({
       listenStopped: true,
-      browser,
+      context,
       url: urls[site]
     })
     if (!result.success) {

packages/coil-extension/tsconfig.build.json

@@ -42,7 +42,7 @@
       "path": "../web-monetization-wext/tsconfig.build.json"
     },
     {
-      "path": "../coil-puppeteer-utils/tsconfig.build.json"
+      "path": "../coil-playwright-utils/tsconfig.build.json"
     }
   ]
 }

packages/coil-monorepo-upkeep/src/commands/doCheckUpdates.ts

@@ -38,7 +38,7 @@ export function doCheckUpdates() {
       )}`
     )
     const upgraded = JSON.parse(cmd('npx ncu -u --jsonUpgraded', { cwd: path }))
-    // * coil-extension: @types/puppeteer: ^1.19.0
+    // * coil-extension: @types/x: ^1.19.0
     Object.keys(upgraded).forEach(k => {
       lines.push(`* ${packageFolder}: ${k}: ${upgraded[k]}`)
     })

packages/coil-oauth-scripts/package.json

@@ -50,7 +50,7 @@
     "uuid": "^8.3.0"
   },
   "devDependencies": {
-    "@coil/puppeteer-utils": "0.0.0",
+    "@coil/playwright-utils": "^0.0.0",
     "@types/long": "^4.0.1",
     "@types/node-fetch": "^2.5.7",
     "@types/uuid": "^8.3.0"

packages/coil-oauth-scripts/test/fixtures/index.html

@@ -3,7 +3,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="monetization" content="$twitter.xrptipbot.com/sharafian_" />
     <script>
-      // This file will be loaded into puppeteer with no extensions enabled
+      // This file will be loaded into playwright with no extensions enabled
       // by default
       document.monetization = document.createElement('div')
       document.monetization.state = 'pending'

packages/coil-oauth-scripts/test/jest/puppeteer.test.ts → packages/coil-oauth-scripts/test/jest/playwright.test.ts

@@ -4,15 +4,15 @@ import { exec } from 'child_process'
 import { promisify } from 'util'
 import * as pathMod from 'path'
 
-import { env, initBrowser, testMonetization } from '@coil/puppeteer-utils'
+import { env, initBrowser, testMonetization } from '@coil/playwright-utils'
 import * as coilClient from '@coil/client'
-import { Browser } from 'puppeteer'
+import { BrowserContext } from 'playwright'
 
 const fromHere = (path: string) => pathMod.resolve(__dirname, path)
 const readFileAsync = promisify(readFile)
 
 let httpServer: http.Server
-let browser: Browser
+let context: BrowserContext
 
 const log = console.log
 const SCRIPT_PATH = fromHere('../../build/coil-oauth-wm.js')
@@ -53,7 +53,7 @@ async function setUpHttpServer(btpTokenPromise: Promise<string>) {
       res.end(await js)
     }
   })
-  await new Promise<void>((resolve, reject) => {
+  await new Promise<void>(resolve => {
     server.listen(PORT, () => {
       log('listening on', PORT)
       resolve()
@@ -75,7 +75,7 @@ beforeAll(async () => {
     const serverPromise = setUpHttpServer(btpTokenPromise)
     const browserPromise = initBrowser({ loadExtension: false })
 
-    browser = await browserPromise
+    context = await browserPromise
     httpServer = await serverPromise
   } catch (e) {
     log('error in beforeAll', e)
@@ -86,13 +86,13 @@ beforeAll(async () => {
 afterAll(async () => {
   await promisify(httpServer.close.bind(httpServer))
   httpServer.unref()
-  await browser.close()
+  await context.close()
 })
 
 describe('OAuthScripts', () => {
   it('should get a non zero monetizationprogress event', async () => {
     await testMonetization({
-      browser,
+      context,
       url: `http://localhost:${PORT}`,
       newPage: false
     })

packages/coil-oauth-scripts/tsconfig.build.json

@@ -27,7 +27,7 @@
       "path": "../coil-client/tsconfig.build.json"
     },
     {
-      "path": "../coil-puppeteer-utils/tsconfig.build.json"
+      "path": "../coil-playwright-utils/tsconfig.build.json"
     }
   ]
 }

packages/coil-puppeteer-utils/package.json → packages/coil-playwright-utils/package.json

@@ -1,13 +1,13 @@
 {
   "$schema": "../coil-monorepo-upkeep/resources/package-json-schema-nested-overrides.json",
-  "name": "@coil/puppeteer-utils",
+  "name": "@coil/playwright-utils",
   "version": "0.0.0",
   "private": false,
   "keywords": [
     "ilp",
     "web-monetization"
   ],
-  "homepage": "https://github.com/coilhq/web-monetization-projects/tree/main/packages/coil-puppeteer-utils",
+  "homepage": "https://github.com/coilhq/web-monetization-projects/tree/main/packages/coil-playwright-utils",
   "repository": {
     "type": "git",
     "url": "git@github.com:coilhq/web-monetization-projects.git"
@@ -34,9 +34,11 @@
     "@coil/client": "0.0.0",
     "@web-monetization/types": "0.0.0",
     "get-port": "^5.1.1",
+    "tmp": "^0.2.1",
     "web-ext": "^5.0.0"
   },
   "devDependencies": {
-    "@types/get-port": "^4.2.0"
+    "@types/get-port": "^4.2.0",
+    "@types/tmp": "^0.2.0"
   }
 }