Puppeteer is a NodeJS library created and maintained by Google, which interacts with any Chromium-based browser. By communicating with the browser through the DevTools protocol, Puppeteer can mimic real user behavior, such as clicking, typing, and basically any other interaction within a browser. Because of these features, it makes Puppeteer, an excellent candidate for topics such as . The most popular framework for browser test automation has been ( ) Selenium. One advantage that Selenium has over Puppeteer is that it supports multiple browser vendors and even mobile devices (through a side-project called Appium). automated browser testing and still is after 10 years As mentioned, Puppeteer only supports Chromium-based browsers because it only knows how to communicate over the DevTools protocol. Chrome, Edge, and Chromium browsers use this protocol for their own Developer Tools, so these browsers are fully compatible with Puppeteer. is becoming a bigger topic in the QA and Automated Testing industry. Many test frameworks such as Jest, WebDriverIO, PyTest, and CodeceptJS provide integration with Puppeteer. Puppeteer testing This means you can write test scripts that do automated UI testing through Puppeteer. Jest Puppeteer Testing Jest is a popular test framework in the NodeJS world. There’s a Jest preset available, called , which provides support for Puppeteer. jest-puppeteer Writing a Jest test with Puppeteer is straightforward: import 'expect-puppeteer'
describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://testingbot.com')
  })

  it('should display "testingbot" text on page', async () => {
    await expect(page).toMatch('testingbot')
  })
}) This simple test case uses Puppeteer under the hood to instruct the browser. It opens a page and then does an assertion. WebdriverIO and Puppeteer WebDriverIO is another popular test framework to do end-to-end testing with Puppeteer. Once installed, you can quickly create your first Puppeteer browser test: import { format } from 'util'
import { remote } from 'webdriverio'

(async () => {
    const browser = await remote({
        capabilities: {
            'wdio:devtoolsOptions': {
                browserWSEndpoint: format(
                    `wss://cloud.testingbot.com?key=%s&secret=%s&browserName=chrome&browserVersion=latest`,
                    `key`,
                    `secret`
                )
            }
        }
    })

    await browser.url('https://testingbot.com')

    const title = await browser.getTitle()
    console.log(title) 

    await browser.deleteSession()
})() The documentation of WebDriverIO is really good and offers various code samples to get up and running fast. Record with Puppeteer In case you don’t want to write tests or use test automation frameworks, you could look into recording your actions within your browser and export them to a Puppeteer script. The Puppeteer Recorder is available in Chrome and can be activated through the Developer tools. Once enabled, it can quickly generate scripts to automate the actions you performed during recording. Summary We’re just getting started with the possibilities that Puppeteer provides and will provide in the future. An alternative to Puppeteer is also gaining traction: a project called , designed by Microsoft, which offers the same functionality but with support for more browser vendors. Playwright

Google

Microsoft

2022 - HackerNoon Contributor of the Year - Microsoft

2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Microsoft

Nominated for 2022 - No No No Nodejs

Too Long; Didn't Read

Making security fun one episode at a time

Mimicking Human Testers: Automated Testing With Puppeteer

Too Long; Didn't Read

Companies Mentioned

Jochen Delabie

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Mimicking Human Testers: Automated Testing With Puppeteer

Too Long; Didn't Read

Companies Mentioned

Jochen Delabie

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES