mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-26 17:46:26 +03:00
Joey Parrish
b839340220
This adds our first screenshot-based layout tests and the infrastructure to use WebDriver for screenshots through Karma. This new kind of test will be skipped in any non-WebDriver context. There are many pieces to this system. First, we update the Karma WebDriver launcher to a newly-released version that lets us access the client spec object from the launcher. Second, we build a Karma middleware plugin to respond to HTTP requests from the tests. We handle /screenshot/isSupported and return a bool so tests can be skipped on non-WebDriver launchers. We also handle /screenshot/diff to take the screenshot and compare it to a known-good version. The screenshot is a full-page screenshot, since element screenshots don't work consistently across all the browsers in our test lab. The screenshot is then cropped to a rectangle specified in the request. This rectangle is measured to match a specific element, so in practice, we are screenshotting just one element. Browsers use sub-pixel rendering, effectively rendering at a scale larger than the "pixels" seen by JS. The screenshot comes in at this scale, so the requested cropping rectangle is scaled to match, then the cropped screenshot is scaled down to the JS-measured size. Because of sub-pixel rendering, element offsets can be non-integer numbers. Normally, Karma puts the tests in a iframe, above which is a variable-height banner showing which devices are connected to Karma and what state they are in. So this variation and the lack of integer offsets means we can run into stability issues due to rounding errors. To make offsets consistent and improve stability of the screenshots, this banner is now disabled in our Karma config. The cropping, scaling, and diffing of images is handled Karma-side by a node module called Jimp. Before we start the layout tests for UITextDisplayer, we use a node module in the browser called fontfaceonload to wait for our web fonts to be fully loaded. This module is a polyfill that polls on IE and uses a standard API in modern browsers to wait for our font to load. This is all wrapped into a new test util called waitForFont. Screenshots are stored in test/test/assets/screenshots/ and are organized into folders by platform and browser and named according to an identifier specified by each test case. The new screenshot is written to disk with the suffix "-new", and a diff image is written with the suffix "-diff". When a test fails, we can review the changes in a browser with test/test/assets/screenshots/review.html. The known-good screenshots can be updated with the new tool build/updateScreenshots.py. Change-Id: Ib477fd3c459de466c6dc91e9a60d3e2579164b12