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:

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 <canvas> 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 <canvas> has been drawn into:

await workspace.waitForFirstRender();

To take a screenshot, simply call:

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.

2.1 KiB Raw Blame History