{"id":24836732,"url":"https://github.com/ruifigueira/playwright-crx","last_synced_at":"2025-12-29T23:20:43.838Z","repository":{"id":234035962,"uuid":"703934782","full_name":"ruifigueira/playwright-crx","owner":"ruifigueira","description":"Playwright for chrome extensions","archived":false,"fork":false,"pushed_at":"2025-06-08T16:34:17.000Z","size":34145,"stargazers_count":350,"open_issues_count":10,"forks_count":61,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-06-08T17:31:51.222Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ruifigueira.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-12T07:56:48.000Z","updated_at":"2025-06-06T07:28:21.000Z","dependencies_parsed_at":"2024-09-11T16:44:36.109Z","dependency_job_id":"1ff087aa-44e1-433a-81b5-8ad6d42cb4fc","html_url":"https://github.com/ruifigueira/playwright-crx","commit_stats":null,"previous_names":["ruifigueira/playwright-crx"],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/ruifigueira/playwright-crx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruifigueira%2Fplaywright-crx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruifigueira%2Fplaywright-crx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruifigueira%2Fplaywright-crx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruifigueira%2Fplaywright-crx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruifigueira","download_url":"https://codeload.github.com/ruifigueira/playwright-crx/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruifigueira%2Fplaywright-crx/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018781,"owners_count":26086452,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-01-31T05:04:38.658Z","updated_at":"2025-10-14T10:31:10.208Z","avatar_url":"https://github.com/ruifigueira.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Integrations"],"sub_categories":[],"readme":"# Playwright CRX\n\nThis package contains the [Chrome Extensions](https://developer.chrome.com/docs/extensions/) flavor of the [Playwright](http://github.com/microsoft/playwright) library.\n\nFor that, it relies on [`chrome.debugger`](https://developer.chrome.com/docs/extensions/reference/debugger/) to implement [playwright's `ConnectionTransport`](https://github.com/microsoft/playwright/blob/f8a30fb726bc35d4058a2d010b2ed5f6ca2409a3/packages/playwright-core/src/server/transport.ts#L54) interface.\n\n**NOTE:** If you want to write end-to-end tests, you should use [@playwright/test](https://playwright.dev/docs/intro) instead.\n\n## Recorder / Player\n\n**Note:** This extension is available in [Chrome Web Store](https://chrome.google.com/webstore/detail/playwright-crx/jambeljnbnfbkcpnoiaedcabbgmnnlcd).\n\nA small demo of Playwright CRX recorder and player in action:\n\n![Playwright CRX Recorder / Player](./docs/assets/recorder-player.gif)\n\nIt provides playwright recorder (the same used in `playwright codegen`) bundled as a chrome extension, with no other dependencies.\nThis way, with your normal chrome / chromium / edge browser, you can record playwright scripts in your prefered language.\n\nIn terms of chrome extension functionality, it provides:\n\n- [action button](https://developer.chrome.com/docs/extensions/reference/action/) for attaching current tab into recorder (it opens the recorder if it's closed)\n- [context menu](https://developer.chrome.com/docs/extensions/reference/contextMenus/) for the same purpose\n- [side panel](https://developer.chrome.com/docs/extensions/reference/api/sidePanel) to display the recorder by default (it can be disabled in the options, falling back to a popup window)\n- [command shortcuts](https://developer.chrome.com/docs/extensions/reference/api/commands):\n  - `Alt + Shift + R` starts recording\n  - `Alt + Shift + C` starts inspecting\n- [options page](https://developer.chrome.com/docs/extensions/develop/ui/options-page) to configure:\n  - **Default language** (defaults to **Node Library**)\n  - **TestID Attribute Name** (defaults to `data-testid`)\n  - **Open in Side Panel** (defaults to `true`, and falls back to a popup window if set to `false`) \n- pages must be explicitly attached to be recordable, except if they are opened from already attached pages\n- closing the recorder window will detach all pages and uninstall injected scripts (highlights and event listeners)\n- a player that will run the recorded instructions, in any supported language*\n   - it actually doesn't run Java, Python or C#, but it uses an internal JSONL format to know which instructions it needs to run and how to map them into the current selected code. This way, it can highlight the lines being executed.\n\n## API\n\nIt's possible to use `playwright-crx` as a library to create new chrome extensions.\n\nHere's a simple example of a background service worker for a chrome extension using **playwright-crx**:\n\n```ts\nimport { crx, expect } from 'playwright-crx/test';\n\n// if you don't need assertions, you can reduce the bundle size by importing crx from playwright-crx\n// import { crx } from 'playwright-crx';\n\nchrome.action.onClicked.addListener(async ({ id: tabId }) =\u003e {\n  const crxApp = await crx.start({ slowMo: 500 });\n\n  try {\n    // tries to connect to the active tab, or creates a new one\n    const page = await crxApp.attach(tabId!).catch(() =\u003e crxApp.newPage());\n\n    await page.goto('https://demo.playwright.dev/todomvc/#/');\n    await page.getByPlaceholder('What needs to be done?').click();\n    await page.getByPlaceholder('What needs to be done?').fill('Hello World!');\n    await page.getByPlaceholder('What needs to be done?').press('Enter');\n\n    // assertions work too\n    await expect(page.getByTestId('todo-title')).toHaveText('Hello World!');\n  } finally {\n    // page stays open, but no longer controlled by playwright\n    await crxApp.detach(page);\n    // releases chrome.debugger\n    await crxApp.close();\n  }\n});\n```\n\nA more complete example can be found in `examples/todomvc-crx`.\n\n### Tracing\n\nPlaywright CRX also supports [tracing](https://playwright.dev/docs/api/class-tracing), compatible with [Playwright Trace Viewer](https://trace.playwright.dev).\n\nHere's an example on how to run it:\n\n```ts\nawait page.context().tracing.start({ screenshots: true, snapshots: true });\n\nawait page.goto('https://demo.playwright.dev/todomvc');\nconst newTodo = page.getByPlaceholder('What needs to be done?');\nawait newTodo.fill('buy some cheese');\nawait newTodo.press('Enter');\nawait expect(page.getByTestId('todo-title')).toHaveText('buy some cheese');\n\n// stores in memfs and then reads its data\nawait page.context().tracing.stop({ path: '/tmp/trace.zip' });\nconst data = crx.fs.readFileSync('/tmp/trace.zip');\n\n// opens playwright traceviewer\nconst tracePage = await crxApp.newPage();\nawait tracePage.goto('https://trace.playwright.dev');\nconst [filechooser] = await Promise.all([\n  tracePage.waitForEvent('filechooser'),\n  tracePage.getByRole('button', { name: 'Select file(s)' }).click(),\n]);\n\n// uploads the trace data buffer (file paths from memfs are not supported)\nawait filechooser.setFiles({\n  name: 'trace.zip',\n  mimeType: 'application/zip',\n  buffer: Buffer.from(data),\n});\n```\n\nYou can give it a try with `playwright-crx/examples/todomvc-crx`.\n\n## Build\n\nTo build `playwright-crx`:\n\n```bash\nnpm ci\nnpm run build\n```\n\n## Updating Playwright\n\nPlaywright is nested as a git subtree.\n\nTo update it, just run the following command (replace `v1.48.0` with the desired release tag):\n\n```bash\ngit subtree pull --prefix=playwright git@github.com:microsoft/playwright.git v1.48.0 --squash\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruifigueira%2Fplaywright-crx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruifigueira%2Fplaywright-crx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruifigueira%2Fplaywright-crx/lists"}