{"id":26892000,"url":"https://github.com/dnv-opensource/playwright-live-recorder","last_synced_at":"2025-04-08T03:08:50.950Z","repository":{"id":59498963,"uuid":"533400430","full_name":"dnv-opensource/playwright-live-recorder","owner":"dnv-opensource","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-23T23:23:36.000Z","size":1561,"stargazers_count":36,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-26T18:17:58.314Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dnv-opensource.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2022-09-06T16:02:39.000Z","updated_at":"2025-02-10T04:42:26.000Z","dependencies_parsed_at":"2025-01-22T20:34:00.442Z","dependency_job_id":null,"html_url":"https://github.com/dnv-opensource/playwright-live-recorder","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dnv-opensource%2Fplaywright-live-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dnv-opensource%2Fplaywright-live-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dnv-opensource%2Fplaywright-live-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dnv-opensource%2Fplaywright-live-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dnv-opensource","download_url":"https://codeload.github.com/dnv-opensource/playwright-live-recorder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767234,"owners_count":20992547,"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":"2025-03-31T22:48:49.853Z","updated_at":"2025-04-08T03:08:50.930Z","avatar_url":"https://github.com/dnv-opensource.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### v2.0.57\n* updated readme, recorded demo video\n\n### v2.0.56\n* cli command fix\n\n### v2.0.53\n* Display currently executing lines of code in repl on-screen\n* fix many issues after page navigation (tool only worked for SPAs previously)\n* changed (broken) postinstall to cli command `npx @dnvgl/playwright-live-recorder`\n\n### v2.0.52\n* UI rework\n* Now aware of Page Object Model helper methods\n\n### v2.0.48\n* Live code execution method much simplified and much more robust (todo: write tech doc about this)\n* bugfix: Make page object model tools build correct paths on non-windows filesystems\n\n----\n\n\n![Playwright live recorder infographic](docs/playwright-live-recorder-infographic.png \"Playwright live recorder infographic\")\n\n\n# Getting Started\n\n## Watch the video demonstration\n\n[![Getting Started](https://i.ytimg.com/vi/ys5vczHm9sw/maxresdefault.jpg)](https://youtu.be/ys5vczHm9sw)\n\n\n-----\n## Prerequisites\n\n`@playwright/test` (typescript)\n\nstart with a repo with @playwright/test set up, if starting with a new repo see https://playwright.dev/docs/intro  \n\n## Install\n\n``` bash\nnpm install -D @dnvgl/playwright-live-recorder\n#or\nyarn add -D @dnvgl/playwright-live-recorder\n#or\npnpm add -D @dnvgl/playwright-live-recorder\n```\n\nrun the setup script\n``` bash\nnpx @dnvgl/playwright-live-recorder\n```\n\nEnsure baseURL is set to the root url of your webapp in `playwright.config.ts` e.g.\n``` ts\n//playwright.config.ts\nexport default defineConfig({\n  //...\n  use: {\n    baseURL: 'https://demo.playwright.dev/todomvc/#/',\n    //...\n```\n\n# How to use\n## Typescript Code for test\n\nIn a playwright test, add the import\n``` ts\nimport { PlaywrightLiveRecorder } from '@dnvgl/playwright-live-recorder';\n```\n\nand then add this await line at the end of the playwright test you want to record into\n``` ts\n// note - recorded lines will be inserted here\nawait PlaywrightLiveRecorder.start(page, s =\u003e \u003cundefined\u003eeval(s));\n```\n\nRun the test in headed mode\n\n\u003e 💡 if you're using the vscode plugin `ms-playwright.playwright` it will automatically run in headed mode with PWDEBUG set to console (see modifications to `.vscode/settings.json`)  \n\u003e 💡 if you're running from the command line, set the environment variable `PWDEBUG=console` before running the playwright command, e.g. `playwright test --ui`\n\nTest will run, when `PlaywrightLiveRecorder.start` line is executed lib functionality will be exposed to the browser and all scripts will be loaded in the browser. Test execution waits until browser is closed.  \nNewly recorded test lines are inserted into test file.  \nNewly added page object model files will be created, newly added items are inserted into the page object model files.  \nNewly added or modified test lines above `PlaywrightLiveRecorder.start` are executed upon file save.\n\n## Browser\n\n\u003e ![Playwright live recorder sticky bar](docs/control-bar.png \"Playwright live recorder sticky bar\")  \n\u003e Playwright live recorder adds a control bar to the top of the browser page.  \n\u003e * Record mode ⚪/🔴 can be toggled off/on by clicking the icon, or pressing CTRL+ALT+SHIFT+R  \n\u003e * The label is the page object model path+filename  \n\u003e * the f(x) button displays public helper functions available from your page object model file, click the green ➕ to add an example to the file\n\u003e\n\u003e When record is toggled on a hover tooltip is positioned next to the cursor showing the code that will be generated  \n\u003e\u003e 💡 if the recorder blocks your testing session, work past it by toggling record off, clicking, then toggling it back on\n\n## **Recording**\n\u003e With record toggled on, click an element to add it to your test\n\u003e * If the element is not part of the Page Object Model, you will be prompted to give it a name\n\u003e   * Press enter and the new property will be added to the page object model file, and the element will highlight (default: salmon color), to indicate it's a part of the page object model\n\u003e   * Press [esc] to skip adding to the page object model\n\u003e * If the element is part of the Page Object Model, it will already be highlighted salmon color\n\u003e   * Clicking it will add a call to the page object model method to your test  \n\u003e\n\u003e After clicking an element, the test code will be added and saved to your test file. File changes are automatically re-executed.  \n\u003e You can always modify the text code and save to re-execute changed lines.  \n\u003e\u003e 💡 This is useful to change a `.click()` call to a `.fill()`, or to wrap an `expect` around the element you just clicked.  Save the file and it's re-executed.\n\u003e\u003e Another powerful workflow is to edit the page object model function, save the file, and then add the same line again to the test file to force a re-execute\n\u003e\u003e You can keep iterating this way until the function implementation is correct.  \n\u003e\n\u003e 💡 whenever code lines are executed in the test they'll display overlayed on-screen\n\u003e ![code execute overlay](docs/code-execute-overlay.png \"code execute overlay\")  \n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdnv-opensource%2Fplaywright-live-recorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdnv-opensource%2Fplaywright-live-recorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdnv-opensource%2Fplaywright-live-recorder/lists"}