{"id":16318192,"url":"https://github.com/githubjakob/react-puppeteer-screenshot-test","last_synced_at":"2025-05-13T17:16:23.295Z","repository":{"id":77570435,"uuid":"205248719","full_name":"githubjakob/react-puppeteer-screenshot-test","owner":"githubjakob","description":"Example react application with Puppeteer screenshot comparison test","archived":false,"fork":false,"pushed_at":"2019-08-29T21:15:07.000Z","size":13,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-16T20:28:24.402Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/githubjakob.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-29T20:52:56.000Z","updated_at":"2023-02-14T15:03:30.000Z","dependencies_parsed_at":"2023-03-12T01:04:45.071Z","dependency_job_id":null,"html_url":"https://github.com/githubjakob/react-puppeteer-screenshot-test","commit_stats":{"total_commits":1,"total_committers":1,"mean_commits":1.0,"dds":0.0,"last_synced_commit":"fd6bcfcb27d1b1bb842162dc69f69b4106b25caf"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubjakob%2Freact-puppeteer-screenshot-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubjakob%2Freact-puppeteer-screenshot-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubjakob%2Freact-puppeteer-screenshot-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubjakob%2Freact-puppeteer-screenshot-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/githubjakob","download_url":"https://codeload.github.com/githubjakob/react-puppeteer-screenshot-test/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253990503,"owners_count":21995776,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T22:10:15.158Z","updated_at":"2025-05-13T17:16:23.251Z","avatar_url":"https://github.com/githubjakob.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React screenshot comparison tests with Puppeteer in Bitbucket pipeline\n\nThis project shows how to set up screenshot comparison tests with a \nheadless browser in a bitbucket pipeline for a react application.\n\nThe react application under test uses a rest backend (which is mocked in the pipeline). \n\nScreenshots are taken using Puppeteer and a headless Chrome browser. \nThe screenshots are compared with baseline images using Pixelmatch and a simple helper function. \nIf the actual screenshot matches the baseline image, the test succeeds, otherwise it fails.\n\nThis `README` provides some notes on the general setup and how to run the tests.\n\n## Quick Start\n\nThe project contains configuration for the tests to run in a bitbucket pipeline. \nThe easiest way to run the tests, is to run the bitbucket pipeline locally using `bbrun`.\n\n```\nnpm install -g bbrun\ndocker build -t node-11-browser .\nbbrun --template bitbucket-pipelines.yml\n```\n\nThe run the tests without the bitbucket pipelein, ie. without `bbrun`, you can execute each node command separately:\n\n```\nnpm start\nnpm run mock\nnpm run browsertests:mobile\nnpm run browsertests:desktop\n```\n\n### Tipps\n\nIn case a screenshot is not matching, you can create a diff that shows the non-matching areas.  \nTo enable creating a diff set `writeDiff` to true in `BrowserTestUtils.js`. This works with and without using bbrun\nand is disabled by default.\n\nYou can adjust the threshold of how many non-matching pixels result in a failing test. You can also adjust\nthe threshold used by Pixelmatch to determine when a single pixel is counted as failed. \nSee the constants in `BrowserTestUtils.js` for both thresholds.\n\nFor debugging, you can set `headless` to false in `BrowserTestUtils.js` to have Puppeteer start up a Chrome browser (with GUI)\nfor the tests.\n\n## Test Setup\n\nThe project contains a basic setup for a screenshot comparison test for a react application. Screenshots are \ntaken with Puppeteer and compared with the expected baseline image using Pixelmatch. The backend for \nthe react application is mocked with server-json.\n\n### Take screenshots with Puppeteer\n\n[Puppeteer](https://github.com/GoogleChrome/puppeteer) provides the API to control a headless Chrome browser. \nWith puppeteer we can open pages, navigate, click on links and take the screenshots. `App.test.jsx` contains\na simple testcase using Jest and Puppeteer that open up the homepage and take a screenshot.\n\n### Compare screenshots with Pixelmatch\n\nOnce the screenshot is taken by Puppeteer, we use [Pixelmatch](https://github.com/mapbox/pixelmatch) \nto compare the screenshot with the baseline image. `BrowserTestUtils.js` contains the helper functions to perform the\nscreenshot comparison.\n\nAn alternative to having a customer helper function is using a library like \n[puppeteer-screenshot-tester](https://www.npmjs.com/package/puppeteer-screenshot-tester)\n\n### Mobile and Desktop\n\nWidth and height of the browser viewport are set via env variables. This allows\nfor reusing the same test cases for testing different resolutions. See `package.json` how the two \nnode scripts `npm run browsertests:desktop` and `npm run browsertests:mobile` run the same \ntest but with different env variables `width` and `height` set. See also the folder `src/browsertests/screenshots`\nhow this changes the filename for the baseline images.\n\n### Mocking the backend\n\nOur test react app assumes a backend to retrieve data with rest calls. For the browsertests we need to\nmock the backend. For this we use [server-json](https://github.com/typicode/json-server). \nThe json payload for the rest calls is stored in `backend-mock/db.json`, `backend-mock/routes.json`\nallows to map urls to database entries in `backend-mock/db.json`.\n\n## Bitbucket Setup\n\nThis project includes a `bitbucket-pipelines.yml` that contains the configuration to run the browsertest in a bitbucket pipeline.\n\n### Send react and mock process to background\n\nAn ampersand ('\u0026') is added to the commands so that the process is sent to the background and \nthe commands are run in parallel.\n\nEven though the `npm start` process is now in the background the pipeline will finish \nafter the test has finished, i.e. the non-completing react process in the background does not block the whole pipeline: \nIf the test succeeds  (fails), the whole pipeline step also succeeds (fails).\n\n### Start react without opening browser window\n\nBy default `npm start` opens a browser window. This will make the pipeline crash. \nTherefore, to prevent this, we start react with `BROWSER=none npm start`.\n\n### Docker build image\n\nTo run the puppeteer tests inside a bitbucket pipleine, \nwe need to install the dependencies for Chrome/Puppeteer in the bitbucket build image.\n\n```\napt update \u0026\u0026 apt install -y gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 \\\n libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 \\\n libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 \\\n libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 \\\n libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget\n\n```\n\nWe can do this either directly in the pipeline or create a docker image that we can reuse. The project contains \na `Dockfile` that we can build and that is used in `bitbucket-pipelines.yml`:\n\n```\ndocker build -t node-11-browser .\n```\n\nIt is also possible to use an image provided by CircleCI, e.g. `circleci/node:jessie-browsers`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithubjakob%2Freact-puppeteer-screenshot-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgithubjakob%2Freact-puppeteer-screenshot-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithubjakob%2Freact-puppeteer-screenshot-test/lists"}