Playwright videos (#2966)

.github/workflows/e2e.yml

@@ -11,6 +11,15 @@ on:
         description: OS platforms to test on (list of strings in JSON format)"
         default: '["ubuntu-20.04"]'
         required: true
+      video:
+        description: Whether to record videos of Playwright test runs
+        type: choice
+        default: 'true'
+        options:
+        - 'true'
+        - 'false'
+        required: true
+
 jobs:
   run-e2e-tests:
     name: Run e2e tests
@@ -39,12 +48,15 @@ jobs:
         with:
           options: -screen 0 1280x1024x24
           run: ${{ inputs.run-target }}
+        env:
+          VIDEO: ${{ inputs.video }}
       - uses: actions/upload-artifact@v2
         if: failure() && steps.playwright.outcome == 'failure'
         with:
           name: artifacts-${{ matrix.os }}
           path: |
             packages/zui-player/run/playwright-itest
+            packages/zui-player/run/videos
             packages/zui-player/test-results
             /var/log/sys*log*
             /var/log/kern.log*

packages/zui-player/README.md

@@ -8,7 +8,7 @@ The Zui end-to-end test suite uses [Playwright](https://playwright.dev/) as the
 
 When you are writing or debugging tests, you will usually be changing code in zui, then running the tests. To make this workflow streamlined, you will need to start the Zui dev renderer server and watch the main process code for changes.
 
-You can do this with the commaned:
+You can do this with the command:
 
 ```
 nx watch-code zui
@@ -20,15 +20,15 @@ In another terminal instance, you may run your tests like so:
 nx test zui-player
 ```
 
-To run just one of the tests, specify the name of the file in the `tests` directory, e.g., The -g stands for 'grep' and can take a regex pattern argument.
+To run just one of the tests, specify the name of the file in the `tests` directory, e.g., The `-g` stands for 'grep' and can take a regex pattern argument.
 
 ```
 nx test zui-player -g pool-loads.spec.ts
 ```
 
 ## Running Tests in CI
 
-When the tests run in CI, there will not be a dev server running, serving the HTML. Instead, the workflow will build the app and place static html files on the disk. Zui Player will then test agains those files.
+When the tests run in CI, there will not be a dev server running, serving the HTML. Instead, the workflow will build the app and place static html files on the disk. Zui Player will then test against those files.
 
 To simulate this locally, run the following commands:
 
@@ -37,6 +37,16 @@ nx build zui
 NODE_ENV=production nx test zui-player
 ```
 
+## Artifacts
+
+The [user data folder](https://zui.brimdata.io/docs/support/Filesystem-Paths#user-data) at the end of each test run can be found below the `run/playwright-itest` directory.
+
+If you also want Playwright to record each test run, set the environment variable `VIDEO=true` and the videos can be found in the `run/videos` directory.
+
+```
+VIDEO=true NODE_ENV=production nx test zui-player
+```
+
 ## Writing a test
 
 To write an e2e test, create a file called `[my-test].spec.ts` in the `tests` directory.
@@ -70,7 +80,7 @@ These are the four methods you need to know to get most work done.
 ```ts
 await app.click();
 await app.attached();
-await app.detacted();
+await app.detached();
 await app.hidden();
 await app.visible();
 await app.locate();

packages/zui-player/helpers/test-app.ts

@@ -35,7 +35,11 @@ export default class TestApp {
       args: [`--user-data-dir=${userDataDir}`, entry],
       bypassCSP: true,
       timeout: 10000,
-    };
+    } as any;
+
+    if (process.env.VIDEO == 'true') {
+      launchOpts.recordVideo = { dir: path.join('run', 'videos') };
+    }
 
     // @ts-ignore
     if (bin) launchOpts.executablePath = bin;