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

3. Execute your click flow...

4. Export as puppeteer script

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

   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()
   // <<<snip<<<
   
   })()

   See ./test/todomvc.spec.js for modified recording.

6. Run your tests

    npm test
   

helpers

• clearBrowserCache - Clears browser cache, cookies and/or localStorage, sessionStorage
• consoleLog - Collect and/or display browser console log statements and errors
• findElements - Find elements using either CSS Selectors or xPath
• findText - Find text in page
• handleElements - Convert ElementHandle to element attributes
• input - Fill in text into an input element
• navigate - Navigates to an Url
• openBrowser - Open a browser with one tab
• openTab - Open a new tab
• screenshot - Take a screenshot
• waitFor - Wait for timeout in milliseconds
• querySelectorAll - Helper used in puppeteer recordings
• querySelectorsAll - Helper used in puppeteer recordings
• scrollIntoViewIfNeeded - Helper used in puppeteer recordings
• waitForConnected - Helper used in puppeteer recordings
• waitForElement - Helper used in puppeteer recordings
• waitForFunction - Helper used in puppeteer recordings
• waitForInViewport - Helper used in puppeteer recordings
• waitForSelector - Helper used in puppeteer recordings
• waitForSelectors - Helper used in puppeteer recordings

license

The Unlicense

contributing

Any Pull-Request for fixing or enhancing the helpers is welcome.

references

• puppeteer API
• ava
• jest
• mocha