Drive Browser tests with playwright

.github/workflows/ci.yml

@@ -7,6 +7,7 @@ jobs:
 
     runs-on: ubuntu-latest
 
+
     steps:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
@@ -18,6 +19,7 @@ jobs:
         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
 
     - run: yarn install
+    - run: yarn run playwright install --with-deps
     - run: yarn build
 
     - name: Set Chrome Version
@@ -29,8 +31,21 @@ jobs:
     - name: Lint
       run: yarn lint
 
-    - name: Test
-      run: yarn test
+    - name: Unit Test
+      run: yarn test:unit
+
+    - name: Chrome Test
+      run: yarn test:browser --project=chrome
+
+    - name: Firefox Test
+      run: yarn test:browser --project=firefox
+
+    - name: Upload test results
+      if: always()
+      uses: actions/upload-artifact@v2
+      with:
+        name: playwright-report
+        path: playwright-report
 
     - name: Publish dev build
       run: .github/scripts/publish-dev-build '${{ secrets.DEV_BUILD_GITHUB_TOKEN }}'

CONTRIBUTING.md

@@ -34,21 +34,46 @@ Once you are done developing the feature or bug fix you have 2 options:
 2. Run a local webserver and checkout your changes manually
 
 ### Testing
-The library is tested by running the test suite (found in: `src/tests/*`) against headless browsers. The browsers are setup in `intern.json` check it out to see the used browser environments.
+The library is tested by running the test suite (found in: `src/tests/*`) against headless browsers. The browsers are setup in [intern.json](./intern.json) and [playwright.config.ts](./playwright.config.ts). Check them out to see the used browser environments.
 
 To override the ChromeDriver version, declare the `CHROMEVER` environment
 variable.
 
+First, install the drivers to test the suite in browsers:
+
+``bash
+yarn playwright install  --with-deps
+```
+
 The tests are using the compiled version of the library and they are themselves also compiled. To compile the tests and library and watch for changes:
 
 ```bash
 yarn watch
 ```
 
-To run the tests:
+To run the unit tests:
+
+```bash
+yarn test:unit
+```
+
+To run the browser tests:
+
+```bash
+yarn test:browser
+```
+
+To run the browser suite against a particular browser (one of
+`chrome|firefox`), pass the value as the `--project=$BROWSER` flag:
 
 ```bash
-yarn test
+yarn test:browser --project=chrome
+```
+
+To run the browser tests in a "headed" browser, pass the `--headed` flag:
+
+```bash
+yarn test:browser --project=chrome --headed
 ```
 
 ### Test files
@@ -58,14 +83,23 @@ The html files needed for the tests are stored in: `src/tests/fixtures/`
 
 ### Run single test
 
-To focus on single test grep for it:
-```javascript
-yarn test --grep TEST_CASE_NAME
+To focus on single test, pass its file path:
+
+```bas
+yarn test:browser TEST_FILE
 ```
 
-Where the `TEST_CASE_NAME` is the name of test you want to run. For example:
-```javascript
-yarn test --grep 'triggers before-render and render events'
+Where the `TEST_FILE` is the name of test you want to run. For example:
+
+```base
+yarn test:browser src/tests/functional/drive_tests.ts
+```
+
+To execute a particular test, append `:LINE` where `LINE` is the line number of
+the call to `test("...")`:
+
+```bash
+yarn test:browser src/tests/functional/drive_tests.ts:11
 ```
 
 ### Local webserver

intern.json

@@ -1,6 +1,5 @@
 {
   "suites": "dist/tests/unit.js",
-  "functionalSuites": "dist/tests/functional.js",
   "environments": [
     {
       "browserName": "chrome",

package.json

@@ -35,12 +35,14 @@
     "access": "public"
   },
   "devDependencies": {
+    "@playwright/test": "^1.22.2",
     "@rollup/plugin-node-resolve": "13.1.3",
     "@rollup/plugin-typescript": "8.3.1",
     "@types/multer": "^1.4.5",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
     "arg": "^5.0.1",
+    "chai": "~4.3.4",
     "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -58,10 +60,15 @@
     "build:win": "tsc --noEmit false --declaration true --emitDeclarationOnly true --outDir dist/types & rollup -c",
     "watch": "rollup -wc",
     "start": "node src/tests/runner.js serveOnly",
-    "test": "NODE_OPTIONS=--inspect node src/tests/runner.js",
-    "test:win": "SET NODE_OPTIONS=--inspect & node src/tests/runner.js",
+    "test": "yarn test:unit && yarn test:browser",
+    "test:browser": "playwright test",
+    "test:unit": "NODE_OPTIONS=--inspect node src/tests/runner.js",
+    "test:unit:win": "SET NODE_OPTIONS=--inspect & node src/tests/runner.js",
     "prerelease": "yarn build && git --no-pager diff && echo && npm pack --dry-run && echo && read -n 1 -p \"Look OK? Press any key to publish and commit v$npm_package_version\" && echo",
     "release": "npm publish && git commit -am \"$npm_package_name v$npm_package_version\" && git push",
     "lint": "eslint . --ext .ts"
+  },
+  "engines": {
+    "node": ">= 14"
   }
 }

playwright.config.ts

@@ -0,0 +1,27 @@
+import { type PlaywrightTestConfig, devices } from "@playwright/test"
+
+const config: PlaywrightTestConfig = {
+  projects: [
+    {
+      name: "chrome",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+  ],
+  testDir: "./src/tests/functional",
+  testMatch: /.*_tests\.ts/,
+  webServer: {
+    command: "yarn start",
+    url: "http://localhost:9000/src/tests/fixtures/test.js",
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
+  use: {
+    baseURL: "http://localhost:9000/",
+  },
+}
+
+export default config

rollup.config.js

@@ -30,28 +30,6 @@ export default [
     }
   },
 
-  {
-    input: "src/tests/functional/index.ts",
-    output: [
-      {
-        file: "dist/tests/functional.js",
-        format: "cjs",
-        sourcemap: true
-      }
-    ],
-    plugins: [
-      resolve(),
-      typescript()
-    ],
-    external: [
-      "http",
-      "intern"
-    ],
-    watch: {
-      include: "src/tests/**"
-    }
-  },
-
   {
     input: "src/tests/unit/index.ts",
     output: [

src/tests/fixtures/test.js

@@ -1,4 +1,22 @@
 (function(eventNames) {
+  function serializeToChannel(object, returned = {}) {
+    for (const key in object) {
+      const value = object[key]
+
+      if (value instanceof URL) {
+        returned[key] = value.toJSON()
+      } else if (value instanceof Element) {
+        returned[key] = value.outerHTML
+      } else if (typeof value == "object") {
+        returned[key] = serializeToChannel(value)
+      } else {
+        returned[key] = value
+      }
+    }
+
+    return returned
+  }
+
   window.eventLogs = []
 
   for (var i = 0; i < eventNames.length; i++) {
@@ -9,7 +27,7 @@
   function eventListener(event) {
     const skipped = document.documentElement.getAttribute("data-skip-event-details") || ""
 
-    eventLogs.push([event.type, skipped.includes(event.type) ? {} : event.detail, event.target.id])
+    eventLogs.push([event.type, serializeToChannel(skipped.includes(event.type) ? {} : event.detail), event.target.id])
   }
   window.mutationLogs = []
 

src/tests/functional/async_script_tests.ts

@@ -1,20 +1,20 @@
-import { TurboDriveTestCase } from "../helpers/turbo_drive_test_case"
+import { test } from "@playwright/test"
+import { assert } from "chai"
+import { readEventLogs, visitAction } from "../helpers/page"
 
-export class AsyncScriptTests extends TurboDriveTestCase {
-  async setup() {
-    await this.goToLocation("/src/tests/fixtures/async_script.html")
-  }
+test.beforeEach(async ({ page }) => {
+  await page.goto("/src/tests/fixtures/async_script.html")
+  await readEventLogs(page)
+})
 
-  async "test does not emit turbo:load when loaded asynchronously after DOMContentLoaded"() {
-    const events = await this.eventLogChannel.read()
-    this.assert.deepEqual(events, [])
-  }
+test("test does not emit turbo:load when loaded asynchronously after DOMContentLoaded", async ({ page }) => {
+  const events = await readEventLogs(page)
 
-  async "test following a link when loaded asynchronously after DOMContentLoaded"() {
-    this.clickSelector("#async-link")
-    await this.nextBody
-    this.assert.equal(await this.visitAction, "advance")
-  }
-}
+  assert.deepEqual(events, [])
+})
 
-AsyncScriptTests.registerSuite()
+test("test following a link when loaded asynchronously after DOMContentLoaded", async ({ page }) => {
+  await page.click("#async-link")
+
+  assert.equal(await visitAction(page), "advance")
+})