//As a Codex designer and engineer, I want to rely on automated visual regression testing to detect and prevent unwanted visual alterations resulting from applying changes to components or tokens. //
Following T308447 we decided to add tests for Codex components to [[ https://github.com/wikimedia/pixel | Pixel ]], the visual regression testing tool developed and currently maintained by the Web team. See T308447#8498764 for the investigation summary.
From its [[ https://github.com/wikimedia/pixel/#readme | README ]]:
> Pixel is a visual regression tool for MediaWiki developers/QA engineers that helps you replace manual testing with automated tests that catch web ui regressions before users see them. It currently integrates BackstopJS, MediaWiki-Docker, and Docker under the hood.
>
> Check out the hourly reports Pixel has generated at https://pixel.wmcloud.org which compare the latest release branch against master, and read T302246 for the motivation behind the tool.
Timeline: Q3 2022-2023. We would like to have this in place before we release CSS-only components (T321351).
-----
Acceptance criteria:
- ~~Fix the Less compiling issue described in T325237 so we can use design tokens within MediaWiki~~ We resolved this in a temporary way via T326591, so this is no longer an issue
- Submit a patch to [[ https://github.com/wikimedia/pixel | Pixel ]] to add Codex components and discuss with the Web team
----
Later:
- Improve the Sandbox page so we can avoid muddying the diff when there are vertical layout or size changes
- Improve the workflow for updating Codex code within the Sandbox
- Add VRT to Codex itself