Rip-off the Canvas: Turning 2D Games into Testable Websites
summary
A team turns PixiJS canvas games into first-class testable web apps by exposing in-canvas controls to the DOM, then running WebdriverIO + Selenium Grid + Mocha tests in GitHub Actions and Appium for mobile. They overrode PixiJS accessibility manager to fix non-rectangular hit areas, replace earlier tab-based hacks and remove a custom WDIO service. The pipeline scales to >200 runners with up to 5 sessions each, covers ~100 games and 35,000 test cases, and yields faster, less flaky runs. WebdriverIO, Selenium Grid, Appium, OCR and image-comparison are used.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 1:47Project task and context
- 6:20Testing 2D games challenge
- 9:09Potential solutions explored
- 13:24PixiJS accessibility features
- 16:39Making game elements accessible
- 17:41Test assertions for games
- 19:48Automation stack chosen
- 20:30First functional test run
- 23:31Simplifying tests with commands
- 25:19Scaling tests in CI
- 26:42Fixing flaky tests
- 28:27Mobile testing limitations
- 29:49Improved accessibility manager
- 30:56Testing with new solution
- 31:59Mobile test coverage expansion
- 32:44New assertions and features
- 33:49Automation metrics and limits
- 34:52Community contributions
- 35:36Q&A
related talks
48mChallenges in UI Automation and How to Solve Them
19mAutomating Canvas Applications
34mEnd to end testing a world of web, mobile & desktop apps
42mDoing wonders with #webdriver
40mFrontend testing for Wix viewer, case study
45mTesting the web without testers — success or failure
24mAutomated Visual Regression & Accessibility Testing
53mModern Web Testing: Going Beyond Selenium