{"id":19021628,"url":"https://github.com/codementorio/puppeteer-jest-starter","last_synced_at":"2025-04-23T07:55:11.323Z","repository":{"id":51341375,"uuid":"209773467","full_name":"CodementorIO/puppeteer-jest-starter","owner":"CodementorIO","description":"A starter-kit quipped with the minimal requirements for Puppeteer + Jest, making E2E testing a breeze.","archived":false,"fork":false,"pushed_at":"2023-01-04T10:53:38.000Z","size":461,"stargazers_count":17,"open_issues_count":4,"forks_count":3,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-04-23T07:55:10.630Z","etag":null,"topics":["e2e-tests","jest","puppeteer","starter-kit"],"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/CodementorIO.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}},"created_at":"2019-09-20T11:19:52.000Z","updated_at":"2022-08-16T18:12:47.000Z","dependencies_parsed_at":"2023-02-02T09:20:16.707Z","dependency_job_id":null,"html_url":"https://github.com/CodementorIO/puppeteer-jest-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodementorIO%2Fpuppeteer-jest-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodementorIO%2Fpuppeteer-jest-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodementorIO%2Fpuppeteer-jest-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodementorIO%2Fpuppeteer-jest-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodementorIO","download_url":"https://codeload.github.com/CodementorIO/puppeteer-jest-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250395201,"owners_count":21423376,"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":["e2e-tests","jest","puppeteer","starter-kit"],"created_at":"2024-11-08T20:22:50.682Z","updated_at":"2025-04-23T07:55:11.304Z","avatar_url":"https://github.com/CodementorIO.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Puppeteer-Jest Starter\n\n[![CircleCI](https://circleci.com/gh/CodementorIO/puppeteer-jest-starter.svg?style=svg)](https://circleci.com/gh/CodementorIO/puppeteer-jest-starter)\n\nA starter-kit quipped with the minimal requirements for [Puppeteer](https://github.com/GoogleChrome/puppeteer) + [Jest](https://jestjs.io/), making E2E testing a breeze.\n\n## Kicking off:\n\n### Install dependencies:\n\n`$ npm i`\n\n### Run the test:\n\n`$ npm start`\n\n### Run test test in headed Chrome:\n\n`$ npm start:headed`\n\n## What's inside:\n\n### `global.page`\n\n- provide wrapped [`global.page`](https://pptr.dev/#?product=Puppeteer\u0026version=v1.20.0\u0026show=api-class-page) instance so that you can start writting your test case immediately.\n\n### Screenshot for each failed test case\n\n- A screenshot will be taken for each failed test case, put in `screenshots` folder. (`/tmp/screenshots` if `env.CI`)\n- Each file will be named by the spec description\n\n### Failure details for each failed test case\n\n- A `json` file named by the spec description will be generated for each failed test case. Contents in the file include:\n  * The current page url\n  * Spec description\n  * console messages\n\n### Multiple Browsers\n\nSometimes, we'd like to manipulate more than on browsers in a test case. For example, testing two sided chat.\nWe can do that by:\n\n```javascript\nconst { getPageFromBrowser } = require('lib/browserStore')\n\ndescribe('Demo', () =\u003e {\n  it('manipulates multiple browsers', async ()=\u003e {\n    const page2 = await getPageFromBrowser('page2')\n\n    // do something with `global.page` here\n    // and do some other thing to `page2` here\n\n    await page.goto('...')\n    await page2.goto('...')\n  })\n})\n```\n\nwhere the `getPageFromBrowser` works as a browser store providing multiple browser references by `browserName`:\n\n```javascript\npage1 = await getPageFromBrowser('the-name')\npage2 = await getPageFromBrowser('the-name')\n\npage1 === page2 // true\n```\n\n### Wrapped `global.page` with convenient default options and behaviors which can be overwritten easily when needed\n\nFor example, `global.page.goto` is with default option `waitUntil: networkidle0` and fails with readable erorr message if the returning status code is not 200.\nTo overwrite it, just\n\n```javascript\nglobal.page.goto({\n  waitUntil: 'my-other-desired-options',\n  myOtherKey: 'my-other-value'\n})\n```\n\nThe default options/overwritten methods can be modified in `lib/pageWrapper`.\n\n#### Default options/behavior in `global.page`\n\n- `page.goto`: `waitUntil: 'networkidle0'`, guard status `200`\n- `page.waitForSelector`: `visible: true`\n- `page.click`: First `waitForSelector` with `visible: true` then click\n\n### Make it easy to decouple test case with UI detail\n\nIn e2e testing, it's easy to scatter css selectors all around the code base. This makes maintainance when UI changes a nightmare.\nHere we use [`window driver`](https://martinfowler.com/bliki/PageObject.html) layer to mitigate this issue and make the error message more readable at the same time:\n\n**before**\n\n```javascript\nit('is nasty', async () =\u003e {\n  // do payment\n  await page.click('.my-first-css-selector')\n  await page.click('.my-another-css-selector')\n  await page.click('.my-yet-another-css-selector')\n  await page.click('.this-drove-me-crazy')\n})\n```\n\n![](/readme-assest/unreadable-message.png)\n\n**after**\n\n```javascript\nconst { getPageFromBrowser } = require('lib/browserStore')\n\nfunction createPageDriver (page) {\n  return wrapErrorHandler({\n    async doPayment() {\n      // when UI implementation changed, change here\n      await page.click('.my-first-css-selector')\n      await page.click('.my-another-css-selector')\n      await page.click('.my-yet-another-css-selector')\n      await page.click('.this-drove-me-crazy')\n    },\n  }, 'MyDemoPage')\n}\n\nit('is much better', async () =\u003e {\n  // when UI implementation changed, this part won't change if the business logic remains the same\n  const driver = createPageDriver(page)\n  await page.doPayment()\n})\n```\n\n![](/readme-assest/proper-message.png)\n\nBy adding a layer between business logic and UI details, we can abstract out the UI implementation detail there.\n\n### CI setup\n\nCircleCI config is included!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodementorio%2Fpuppeteer-jest-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodementorio%2Fpuppeteer-jest-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodementorio%2Fpuppeteer-jest-starter/lists"}