https://github.com/spurreiter/puppeteer-recording-helpers

Test helpers for playback of puppeteer recordings from Chrome Devtool Recorder
https://github.com/spurreiter/puppeteer-recording-helpers

Last synced: 3 months ago
JSON representation

Test helpers for playback of puppeteer recordings from Chrome Devtool Recorder

• Host: GitHub
• URL: https://github.com/spurreiter/puppeteer-recording-helpers
• Owner: spurreiter
• License: unlicense
• Created: 2022-09-11T06:33:00.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-24T19:09:05.000Z (over 1 year ago)
• Last Synced: 2025-02-07T14:44:37.904Z (3 months ago)
• Language: JavaScript
• Size: 3.95 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# puppeteer-recording-helpers

> Test helpers for playback of puppeteer recordings from Chrome Devtool Recorder.

E.g. for use with test frameworks like [mocha][], [jest][], [ava][], ...

# install 

````

npm init -y

npm install -D puppeteer puppeteer-recording-helpers

````

# usage 

1. open Chrome browser and open Developer Tools 

   - "CTRL + Shift + I" (Windows/ Linux)

   - "CMD + option + I" (Mac) 

2. open Tab "Recorder" and start recording

   ![Open Recorder Tab](./docs/1-recorder.png)

3. Execute your click flow...

   ![Record Click Flow](./docs/2-click.png)

3. Export as puppeteer script

   ![Export script](./docs/3-export.png)

4. Extract the click steps from the exported script and enhance with provided helpers.  

    ```js

    import { openBrowser } from 'puppeteer-recording-helpers'

    ;(async () => {

    const { browser, page, timeout } = openBrowser()

    const messages = consoleLog(page)

    // >>>snip>>> copy the contents from Chrome Devtools Recording

    {

      const targetPage = page

      await targetPage.setViewport({ width: 800, height: 600 })

    }

    {

      const targetPage = page

      const promises = []

      promises.push(targetPage.waitForNavigation())

      await targetPage.goto('https://todomvc.com/examples/react/#/')

      await Promise.all(promises)

    }

    // ...

    browser.close()

    // <<