{"id":13998590,"url":"https://github.com/testing-library/testing-library-recorder-extension","last_synced_at":"2025-06-15T09:35:40.535Z","repository":{"id":56861931,"uuid":"522423164","full_name":"testing-library/testing-library-recorder-extension","owner":"testing-library","description":"Testing Library Extension for Chrome DevTools Recorder","archived":false,"fork":false,"pushed_at":"2023-04-26T10:36:58.000Z","size":1177,"stargazers_count":150,"open_issues_count":18,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-03T20:46:28.578Z","etag":null,"topics":["chrome-extensions","developer-tools","javascript","testing","testing-library"],"latest_commit_sha":null,"homepage":"https://chrome.google.com/webstore/detail/testing-library-recorder/pnobfbfcnoeealajjgnpeodbkkhgiici?utm_source=github\u0026utm_medium=referral","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/testing-library.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":"nickmccurdy"}},"created_at":"2022-08-08T05:56:57.000Z","updated_at":"2025-04-24T00:35:54.000Z","dependencies_parsed_at":"2024-04-12T11:22:07.777Z","dependency_job_id":"5139de73-6356-4d16-a783-fc6b6645a9cc","html_url":"https://github.com/testing-library/testing-library-recorder-extension","commit_stats":{"total_commits":97,"total_committers":3,"mean_commits":"32.333333333333336","dds":"0.020618556701030966","last_synced_commit":"e9cd3d9f15e364c9c0fae3d2cfc6ad92e3806347"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/testing-library/testing-library-recorder-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Ftesting-library-recorder-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Ftesting-library-recorder-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Ftesting-library-recorder-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Ftesting-library-recorder-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/testing-library","download_url":"https://codeload.github.com/testing-library/testing-library-recorder-extension/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Ftesting-library-recorder-extension/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259522193,"owners_count":22870454,"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":["chrome-extensions","developer-tools","javascript","testing","testing-library"],"created_at":"2024-08-09T19:01:48.372Z","updated_at":"2025-06-15T09:35:40.512Z","avatar_url":"https://github.com/testing-library.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eTesting Library Recorder Extension\u003c/h1\u003e\n\n\u003ca href=\"https://joypixels.com/profiles/emoji/1f419\"\u003e\n  \u003cimg\n    height=\"80\"\n    width=\"80\"\n    alt=\"octopus\"\n    src=\"other/octopus.png\"\n  /\u003e\n\u003c/a\u003e\n\n\u003cp\u003eTesting Library Extension for Chrome DevTools Recorder\u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003c!-- prettier-ignore-start --\u003e\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![version][version-badge]][extension]\n[![downloads][downloads-badge]][extension]\n[![MIT License][license-badge]][license]\n[![PRs Welcome][prs-badge]][prs]\n[![Code of Conduct][coc-badge]][coc]\n[![Discord][discord-badge]][discord]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n\u003c!-- prettier-ignore-end --\u003e\n\nExport tests from the DevTools Recorder panel to Testing Library test scripts\nusing Jest.\n\nOpen a recording and click export to use the Testing Library script option.\n\n![Screenshot](https://user-images.githubusercontent.com/927220/185593628-0beda94a-ec08-40a5-9c93-cf9ecb70527e.png)\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Usage](#usage)\n  - [Exporting entire workflows](#exporting-entire-workflows)\n  - [Exporting individual steps](#exporting-individual-steps)\n  - [Installing dependencies](#installing-dependencies)\n  - [Running tests](#running-tests)\n  - [Troubleshooting](#troubleshooting)\n- [Supported Chrome Recorder Step Types](#supported-chrome-recorder-step-types)\n- [Example](#example)\n  - [Recording](#recording)\n  - [Test Output](#test-output)\n- [Inspiration](#inspiration)\n- [Issues](#issues)\n  - [🐛 Bugs](#-bugs)\n  - [💡 Feature Requests](#-feature-requests)\n  - [❓ Questions](#-questions)\n- [License](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Usage\n\n### Exporting entire workflows\n\n1. Start or open a recording using the DevTools Recorder panel\n2. Click `Export as a Testing Library script` in the toolbar\n3. Save file as `{testName}.test.{ts,js}`\n\n### Exporting individual steps\n\n1. Start or open a recording using the DevTools Recorder panel\n2. Click `Copy as a Testing Library script` in the dropdown or right-click menu\n3. Paste into an existing file\n\n### Installing dependencies\n\n```\nnpm install --save-dev jest jest-environment-jsdom jest-environment-url @testing-library/dom @testing-library/user-event @testing-library/jest-dom\n```\n\n```\nyarn add --dev jest jest-environment-jsdom jest-environment-url @testing-library/dom @testing-library/user-event @testing-library/jest-dom\n```\n\n### Running tests\n\n```\njest\n```\n\n### [Troubleshooting](https://goo.gle/devtools-recorder-reference#extension-troubleshooting)\n\n## Supported Chrome Recorder Step Types\n\n| Type                | Output                                                                                               |\n| ------------------- | ---------------------------------------------------------------------------------------------------- |\n| `change`            | `await userEvent.type(element, 'value')`                                                             |\n| `click`             | `await userEvent.click(element)`                                                                     |\n| `click` (right)     | `await userEvent.click(element, {buttons: 2})`                                                       |\n| `hover`             | `await userEvent.hover(element)`                                                                     |\n| `doubleClick`       | `await userEvent.dblClick(element)`                                                                  |\n| `keyDown`           | `await userEvent.keyboard('{Key\u003e}')`                                                                 |\n| `keyUp`             | `await userEvent.keyboard('{/Key}')`                                                                 |\n| `navigate` \\*       | `expect(location.href).toBe('https://example.com/')` `expect(document.title).toBe('Example Domain')` |\n| `waitForElement`    | `await waitFor(() =\u003e element)`                                                                       |\n| `waitForExpression` | `await waitFor(() =\u003e expression)`                                                                    |\n\n\\* Only one `navigate` step is allowed per test because `jest-environment-url`\nmust load pages since `jsdom` does not support navigation. Without any\n`navigate` steps, you'll need to edit your test to manually load the DOM.\n\n## Example\n\n### Recording\n\n```json\n{\n  \"title\": \"Example\",\n  \"steps\": [\n    {\n      \"type\": \"navigate\",\n      \"url\": \"https://example.com/\",\n      \"assertedEvents\": [\n        {\n          \"type\": \"navigation\",\n          \"url\": \"https://example.com/\",\n          \"title\": \"Example Domain\"\n        }\n      ]\n    },\n    {\n      \"type\": \"waitForElement\",\n      \"selectors\": [\n        [\"aria/More information...\"],\n        [\"body \u003e div \u003e p:nth-child(3) \u003e a\"],\n        [\"xpath//html/body/div/p[2]/a\"],\n        [\"text/More information...\"]\n      ]\n    }\n  ]\n}\n```\n\n### Test Output\n\n```js\n/**\n * @jest-environment url\n * @jest-environment-options { \"url\": \"https://example.com/\" }\n */\nconst {screen, waitFor} = require('@testing-library/dom')\nconst {default: userEvent} = require('@testing-library/user-event')\nrequire('@testing-library/jest-dom')\n\ntest('Example', async () =\u003e {\n  expect(location.href).toBe('https://example.com/')\n  expect(document.title).toBe('Example Domain')\n  await waitFor(() =\u003e screen.getByText('More information...'))\n})\n```\n\n## Inspiration\n\n- [Puppeteer Replay examples](https://github.com/puppeteer/replay/tree/main/examples)\n- [Cypress Recorder Extension](https://github.com/cypress-io/cypress-recorder-extension)\n\n## Issues\n\nLooking to contribute? Look for the [Good First Issue][good-first-issue] label.\n\n### 🐛 Bugs\n\nPlease file an issue for bugs, missing documentation, or unexpected behavior.\n\n[**See Bugs**][bugs]\n\n### 💡 Feature Requests\n\nPlease file an issue to suggest new features. Vote on feature requests by adding\na 👍. This helps maintainers prioritize what to work on.\n\n[**See Feature Requests**][requests]\n\n### ❓ Questions\n\nFor questions related to using the library, please visit a support community\ninstead of filing an issue on GitHub.\n\n- [Discord][discord]\n- [Stack Overflow][stackoverflow]\n\n## License\n\n[MIT](LICENSE)\n\n\u003c!-- prettier-ignore-start --\u003e\n[build-badge]: https://img.shields.io/github/workflow/status/testing-library/testing-library-recorder-extension/validate?logo=github\u0026style=flat-square\n[build]: https://github.com/testing-library/testing-library-recorder-extension/actions?query=workflow%3Avalidate\n[coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/testing-library-recorder-extension.svg?style=flat-square\n[coverage]: https://codecov.io/github/testing-library/testing-library-recorder-extension\n[version-badge]: https://img.shields.io/chrome-web-store/v/pnobfbfcnoeealajjgnpeodbkkhgiici?style=flat-square\n[extension]: https://chrome.google.com/webstore/detail/testing-library-recorder/pnobfbfcnoeealajjgnpeodbkkhgiici\n[downloads-badge]: https://img.shields.io/chrome-web-store/users/pnobfbfcnoeealajjgnpeodbkkhgiici?style=flat-square\n[license-badge]: https://img.shields.io/github/license/testing-library/testing-library-recorder-extension?style=flat-square\n[license]: https://github.com/testing-library/testing-library-recorder-extension/blob/main/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: https://makeapullrequest.com\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/testing-library/testing-library-recorder-extension/blob/main/CODE_OF_CONDUCT.md\n[bugs]: https://github.com/testing-library/testing-library-recorder-extension/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Acreated-desc+label%3Abug\n[requests]: https://github.com/testing-library/testing-library-recorder-extension/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement\n[good-first-issue]: https://github.com/testing-library/testing-library-recorder-extension/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement+label%3A%22good+first+issue%22\n[github-watch-badge]: https://img.shields.io/github/watchers/testing-library/testing-library-recorder-extension.svg?style=social\n[github-watch]: https://github.com/testing-library/testing-library-recorder-extension/watchers\n[github-star-badge]: https://img.shields.io/github/stars/testing-library/testing-library-recorder-extension.svg?style=social\n[github-star]: https://github.com/testing-library/testing-library-recorder-extension/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20Testing%20Library%20Recorder%20Extension%20by%20%40TestingLib%20https%3A%2F%2Fgithub.com%2Ftesting-library%2Ftesting-library-recorder-extension%20%F0%9F%91%8D\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/testing-library/testing-library-recorder-extension.svg?style=social\n[discord-badge]: https://img.shields.io/discord/723559267868737556.svg?color=7389D8\u0026labelColor=6A7EC2\u0026logo=discord\u0026logoColor=ffffff\u0026style=flat-square\n[discord]: https://discord.gg/testing-library\n[stackoverflow]: https://stackoverflow.com/questions/tagged/testing-library\n\u003c!-- prettier-ignore-end --\u003e\n","funding_links":["https://github.com/sponsors/nickmccurdy"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftesting-library%2Ftesting-library-recorder-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftesting-library%2Ftesting-library-recorder-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftesting-library%2Ftesting-library-recorder-extension/lists"}