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-devOnce you have the package installed, you need to initialize your playwright script with the recorder:
import { chromium } from "playwright";
import initializeRecorder from "playwright-session";
(async () => {
const browser = await chromium.launch();
// 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 initializeRecorder(
browser,
"vuetify-session-events"
);
await page.goto("https://vuetifyjs.com/en/");
await page.evaluate(() => console.log("Adding sample console log 1"));
await page.evaluate(() => console.warn("Adding sample console log 2"));
await page.evaluate(() => console.info("Adding sample console log 3"));
await page.evaluate(() => console.error("Adding sample console log 4"));
await page.evaluate(() => console.debug("Adding sample console log 5"));
await page.click('a[href="https://github.com/en/getting-started/quick-start/"]');
await page.click('text="UI Components"');
await page.click('text="Form inputs & controls"');
await page.click('text="Forms"');
await page.waitForSelector('#usage .v-example input[type="text"]');
const inputs = await page.$$('#usage .v-example input[type="text"]');
await page.click("#usage h2");
// Adding timeouts here, to show down Playwright,
// and make recorded session a bit smoother.
await new Promise((r) => setTimeout(r, 1000));
await inputs[0].fill("Welcome");
await new Promise((r) => setTimeout(r, 500));
await inputs[1].fill("To");
await new Promise((r) => setTimeout(r, 500));
await inputs[2].fill("Playwright-Session");
await new Promise((r) => setTimeout(r, 3000));
await browser.close();
})();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.
*/
export default async function initializeRecorder(
browser: ChromiumBrowser,
sessionFilePath: string = undefined,
contextOpts: any = undefined
): Promise<InitializeRecorderResponse>;
/**
* Recorder is extending browser methods, and returns both page & context objects for further modifications.
*/
type InitializeRecorderResponse = {
page: Page;
context: ChromiumBrowserContext;
};