npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dnvgl/playwright-live-recorder

v2.0.39

Published

Adds live coding in testing context from browser console when running tests. Provides programmatically configurable recorder.

Downloads

24,965

Readme

🛑 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.


Playwright live recorder infographic

Getting Started

Watch the video

Getting Started


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 plugin ms-playwright.playwright and right click the play icon in the margin, click Debug test to run headed mode quickly for a single test

💡 create a shortcut key of CTRL+ALT+SHIFT+R for command Test: 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. Playwright live recorder sticky bar

  • 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 an expect 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.