diff --git a/render-wasm/docs/visual_regression_tests.md b/render-wasm/docs/visual_regression_tests.md new file mode 100644 index 000000000..63dcc98f6 --- /dev/null +++ b/render-wasm/docs/visual_regression_tests.md @@ -0,0 +1,53 @@ +# Visual regression tests + +> ⚠️ At the time being, these tests are to be run _locally_. They are not +> executed in CI yet. + +## Run the tests + +The tests are located in their own Playwright project, `render-wasm`. To run them, go to the `frontend` dir and execute Playwright passing the `--project` flag: + +```zsh +cd frontend +npx playwright test --ui --project=render-wasm +``` + +## Write new tests + +You need to add a new spec file to `frontend/playwright/ui/render-wasm-specs` or add a test to one of the existing specs. You can use `shapes.spec.js` as reference. + +Writing the tests is very similar to write any other test for Penpot. However, some helpers have been added to address some issues specific to the new render engine. + +### Step 1: Initialize the page + +There is a page helper, `WasmWorkspacePage` that contains: + +- Automatically setting the right flags to enable the new wasm renderer. +- A helper function to wait for the first render to happen, `waitForFirstRender`. +- A locator for the `` element in the viewport, `canvas`. + +> :⚠️: An await for `waitForFirstRender` is crucial, specially if the render depends on requests that are run in a promise, like fetching images or fonts (even if they are mocked/intercepted!). + +### Step 2: Intercept requests + +The main requests of the API to intercept are: `/get-file` and `/assets/by-file-media-id/` + +If you disable the feature flag `fdata/pointer-map` in your local environment, you will get a JSON response from `/get-file` that does _not_ include fragments, so you will not have to mock `get-file-fragment` too. + +For mocking the assets, a new helper has been added: `mockAsset`. This accepts either an asset ID or an array of IDs. + +### Step 3: Go to workspace and take a screenshot + +After calling `goToWorkspace`, you need to add this to ensure that the `` has been drawn into: + +```js +await workspace.waitForFirstRender(); +``` + +To take a screenshot, simply call: + +```js +await expect(workspace.canvas).toHaveScreenshot(); +``` + +Note that the test will fail the very first time you call it, because it will have no screenshot to compare to. It should work on following runs.