Codex recently upgraded its primary build tool, Vite, to the latest version (see T334434). This seems like a good opportunity for us to perform some real-world browser testing to ensure that the compiled versions of Codex JS and CSS (which are produced by Vite) support the browsers that they are supposed to support.
We have some tools that should make this relatively straightforward to test:
- VueTest extension (which allows us to build demo pages inside MediaWiki using specific versions of Codex)
- PatchDemo tool (which allows us to deploy a public MediaWiki instance containing a specific patch for live testing)
- BrowserStack (online service that gives testers the ability to use multiple browser versions across different operating systems)
Testing Strategy
MediaWiki's Browser Support Matrix specifies 3 levels of support: Grade A, Grade C, and Grade X (unknown). Grade A browsers are expected to have full JS support. Grade C browsers may or may not support JS, but they should support non-JS usage (things should generally look correct, CSS should function correctly, etc). Anything below Grade C should not be tested; we make no promises there.
VueTest provides both JS and CSS-only demo pages, so this gives us a simple way to test how well we are doing for our Grade A and Grade C support commitments.
Grade A support test
Test page: https://patchdemo.wmflabs.org/wikis/96eb6f6d82/wiki/Special:VueTest/codex
Success criteria: Components should work as expected, and should be fully interactive & usable
Browsers to test (based on the Browser Support Matrix "Modern" row):
- Last 3 years' versions of Chrome, Opera, and Edge
- Current and previous Extended Support Release versions of Firefox
- Safari 11.3+
- MobileSafari 11.3+
- Android Browser 5+
Grade C support test
Test page: https://patchdemo.wmflabs.org/wikis/96eb6f6d82/wiki/Special:VueTest/codex/css
Success criteria: This page uses CSS-only components; they will not have as much interactive behavior but things should still look correct. Basic HTML features like <button> elements should behave as expected.
Browsers to test (based on the Browser Support Matrix "Basic" row):
- Chrome 31+
- Opera 18+
- Edge 79+
- Edge Legacy 12+
- Firefox 39+
- Internet Explorer 11
- Safari 9.1+
- Mobile Safari 9+
- Android Browser 5+
Acceptance Criteria
- VueTest patch created containing Codex demo pages built with Vite 4
- PatchDemo instance created that demos this patch:
- Vue component demo page: https://patchdemo.wmflabs.org/wikis/96eb6f6d82/wiki/Special:VueTest/codex
- CSS component demo page: https://patchdemo.wmflabs.org/wikis/96eb6f6d82/wiki/Special:VueTest/codex/css
- JS demo page has been tested against currently-supported Grade A browsers
- CSS demo page has been tested against currently-supported Grade C browsers
- Result summary has been posted here so that further actions can be taken if necessary