{"id":4250063,"date":"2019-06-17T13:06:05","date_gmt":"2019-06-17T13:06:05","guid":{"rendered":"https:\/\/www.deptagency.com\/insight\/how-to-manage-visual-regression-across-mac-and-pc-environments\/"},"modified":"2019-06-17T13:06:05","modified_gmt":"2019-06-17T13:06:05","slug":"how-to-manage-visual-regression-across-mac-and-pc-environments","status":"publish","type":"article","link":"https:\/\/www.deptagency.com\/en-nl\/insight\/how-to-manage-visual-regression-across-mac-and-pc-environments\/","title":{"rendered":"How to manage visual regression across Mac and PC environments"},"content":{"rendered":"
\n\t\n\t<\/svg>\n\t\t\t\n\t\t\tBack to all articles\t\t<\/span>\n\t\n<\/button>\n\t\tHow to manage visual regression across Mac and PC environments\t<\/h1>\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t<\/picture>\n\t\n\t<\/div>
\n\t\t\t\n\t\n\t
\n\t\tChris Eccles\t\t
\n\t\tArchitect\n\t\t\t<\/div>\n<\/div>\n\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tDate\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t17 June 2019\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n
\n\t
\n\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\n\t\tIf you\u2019ve ever tried to do visual regression testing in multiple environments, no doubt you will have come across issues as Mac and PC font rendering and anti-aliasing are handled differently. And with front and back-end developers and build agents often running on different operating systems, false failures on the tests are commonplace.\t<\/h2>\n\n\n\t\tThis can be fixed by using Docker to run an instance of Chromium, which will allow the same operating system to be ran when generating the screenshots.\t<\/p>\n\n\n\t\tPuppeteer is the official API to control either a remote or local instance of Chrome. This allows the browser to be controlled in a headless way to capture screenshots. This means that the screenshots are being generated through a real implementation of Chrome, and will not suffer from incorrect rendering and false fails.\t<\/p>\n\n\n\t\tUsing Docker you can spin up a container running an instance of Chrome. This can then be remotely used to generate the snapshots. As the snapshots are being generated from within a Docker Container, whenever or wherever they are ran they will generate the same results.\t<\/p>\n\n\n\t\tSee it in action\t<\/h2>\n\n\n\t\tHere we have a Storybook example, which is a way of isolating React components and composing simple test cases for them. Storybook has an add-on that uses these \u2018stories\u2019 and captures them using Puppeteer. This allows baseline example images to be generated. When the tests are ran again, the images are compared to the baseline.\t<\/p>\n\n\n\t\tWe use two Docker containers running through Docker Compose. One handles the running of the Storybook site which the tests will be ran against, and the second is hosting our instance of Chrome. The Storyshot tests are ran from the host PC, not\u00a0 in Docker.\t<\/p>\n\n\n\t\tThe Docker Compose file is setup like:
version: \"3\"
services:
storybook:
build:
context: .
dockerfile: storybook.dockerfile
ports:
- \"9001:9001\"<\/code>\t<\/p>\n\n\n\t\tChromium:
image: browserless\/chrome
ports:
- \"9002:3000\"
links:
- storybook:storybook
depends_on:
- storybook<\/code>\t<\/p>\n\n\n\t\tTo configure the Storyshot tests to use the Docker instances, you need to do the following:\t<\/p>\n\n\n\t\tWithin the initStoryshots method, you need to configure it to point to the Docker-hosted version of Storybook:\t<\/p>\n\n\n\t\tstorybookUrl: ‘http:\/\/storybook:9001’,\t<\/p>\n\n\n\t\tWithin the initStoryshots method you can configure the Puppeteer browser object to be used. This is initialised using a browserWSEndpoint pointing to the Docker Instance of Chrome:\t<\/p>\n\n\n\t\tgetCustomBrowser: async () =>
puppeteer.connect({ browserWSEndpoint: ‘ws:\/\/localhost:9002’ }),\t<\/p>\n\n\n\t\tWith this configuration, tests are ran locally but the images are generated by the Docker container. This successfully runs across multiple operating systems, allowing Mac, Windows and Hosted Build agents to all produce the same screenshots.\t<\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t