🛑 Note: this library is incomplete, and in active development 🛑
Use at your discretion. This library is already very useful, but is certainly also riddled with bugs.
Getting Started
Watch the video
Details
Prerequisites
@playwright/test
(typescript)
start with a repo with @playwright/test set up, if starting with a new repo see https://playwright.dev/docs/intro
Install
via yarn
yarn add -D @dnvgl/playwright-live-recorder
or npm
npm install -D @dnvgl/playwright-live-recorder
Expose playwright's selectors for use within this library:
if using vscode
create the file.vscode/settings.json
//.vscode/settings.json
{
"playwright.env": {
"PWDEBUG": "console"
},
}
otherwise, set PWDEBUG=console in your shell before executing the test in headed mode
Set the baseURL in playwright.config.ts
to the root url of your webapp, e.g.
//playwright.config.ts
export default defineConfig({
//...
use: {
baseURL: 'https://demo.playwright.dev/todomvc/#/',
//...
How to use
Typescript Code for test
In a playwright test, add the import
import { PlaywrightLiveRecorder } from '@dnvgl/playwright-live-recorder';
and then add this line at the end of the playwright test you want to record into
// recorded lines will be inserted here
await PlaywrightLiveRecorder.start(page, s => eval(s));
Run the test in headed mode
💡 use vscode pluginms-playwright.playwright
and right click the play icon in the margin, clickDebug test
to run headed mode quickly for a single test
💡 create a shortcut key of CTRL+ALT+SHIFT+R for commandTest: Debug Test at Cursor
Test 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.
Newly recorded test lines are inserted into test file.
Browser
Playwright live recorder adds a control bar to the top of the browser page.
- Record mode
⚪ /🔴 can be toggled off/on by clicking the icon, or pressing CTRL+ALT+SHIFT+R- The label on the right is the page object model path+filename
- The first box allows executing code directly within the test context
When record is toggled on a hover tooltip is positioned next to the cursor showing the code that will be generated
💡 if the recorder blocks your testing session, work past it by toggling record off, clicking, then toggling it back on
Recording
With record toggled on, click an element to add it to your test
- If the element is not part of the Page Object Model, you will be prompted to give it a name
- 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
- Press [esc] to skip adding to the page object model, and the code will be added directly to your test
- If the element is part of the Page Object Model, it will already be highlighted salmon color
- Clicking it will add a call to the page object model method to your test
After clicking an element, the test code will be executed and added to your test file
The [Playwright Live Recorder] input box will be filled with the last executed line of code
Modify the code and press enter modify and re-run the last line of the test
💡 This is useful to change a.click()
call to a.fill()
, or to wrap anexpect
around the element you just clicked.
Another powerful workflow is to edit the page object model function, save the file, and re-execute the last line by pressing <enter> in the input box.
You can keep iterating this way until the function implementation is correct.