I have a React component that renders to a canvas (see "DeckGL"). The component renders data that it gets from the backend. So I'd need to mock API requests, then screenshot contents of the canvas.
yes, i've used vitest browser mode to test canvas operations. it's designed to use 'snapshots' which capture page state, not screenshots, but that can detect visual difference on the canvas.
if you're performing GL operations you'll need to pass options to your browser driver to enable GL (for playwright chromium it's just `--enable-gpu`)
unfortunately, canvas rendering is sensitive enough to platform that you may have trouble matching snapshots between developer machines and/or CI.
Comments
Using this, can I test canvas?
I have a React component that renders to a canvas (see "DeckGL"). The component renders data that it gets from the backend. So I'd need to mock API requests, then screenshot contents of the canvas.
yes, i've used vitest browser mode to test canvas operations. it's designed to use 'snapshots' which capture page state, not screenshots, but that can detect visual difference on the canvas.
if you're performing GL operations you'll need to pass options to your browser driver to enable GL (for playwright chromium it's just `--enable-gpu`)
unfortunately, canvas rendering is sensitive enough to platform that you may have trouble matching snapshots between developer machines and/or CI.