diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index b31741461f..31658c38b7 100644 --- a/.github/workflows/e2e.yml +++ b/.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* diff --git a/packages/zui-player/README.md b/packages/zui-player/README.md index b458eb269d..6b809ad310 100644 --- a/packages/zui-player/README.md +++ b/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,7 +20,7 @@ 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 @@ -28,7 +28,7 @@ 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(); diff --git a/packages/zui-player/helpers/test-app.ts b/packages/zui-player/helpers/test-app.ts index 7af0ebfa89..a279285af0 100644 --- a/packages/zui-player/helpers/test-app.ts +++ b/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;