Playwright-Session
Playwright-Session UI visualizes a recorded Playwright session in a UI containing:
- Video from the session,
- DOM HTML Viewer,
- Network Requests Viewer,
- Console Viewer,
- Playwright actions listed in console view to easily understand what your script was doing,
Recording Session
To record your own Playwright session, start by adding this package to your project:
npm install playwright-session --save-dev
Once you have the package installed, you need to initialize your playwright script with the recorder:
;; async { const browser = await chromium; // Recorder is initalizing required events collection, // to later be able to replay a Playwright session in the UI. // Session file, that can be loaded in the UI, // will be saved to ./vuetify-session-events.ldjson const page context = await ; await page; await page; await page; await page; await page; await page; await page; await page; await page; await page; await page; const inputs = await page; await page; // Adding timeouts here, to show down Playwright, // and make recorded session a bit smoother. await ; await inputs0; await ; await inputs1; await ; await inputs2; await ; await browser;};
Replaying Session
Once you have your session file recorded, head over to the Playwright-Session UI, upload your session file by clicking on the Upload button in the top-left corner of the UI, and play your session. You can also provide a link to your custom session file via a query string parameter like this: https://playwright-session.hotdata.co/?session_url=https://playwright-session.hotdata.co/vuetify-session-events.ldjson.
API
/** * Bootstraps session recording on top of the open browser connection. * Session recording will be saved to a file defined by `sessionFilePath` argument. * Once bootstrapped, this function will return a new BrowserContext & Page. * @param browser ChromiumBrowser Browser instance. * @param [sessionFilePath] [OPTIONAL] Path where session recoeding file should be saved. * Defaults to `${process.cwd()}/playwright-session-events-${new Date().toISOString()}.ldjson`. * @param contextOpts [OPTIONAL] Options that can be passed to `browser.newContext` call, used when creating new BrowserContext. */; /** * Recorder is extending browser methods, and returns both page & context objects for further modifications. */;