Puppeteer Framework Tutorial: Basics and Setup

Puppeteer is a powerful Node.js library that lets you control Chrome or Chromium browsers using a unproblematic, high-level API. Whether you ’ re automating form submission, taking screenshots, generating PDFs, or testing web apps, Puppeteer create browser undertaking tight, efficient, and developer-friendly.

This tutorial explains the core Puppeteer conception, its architecture, advantages, limitations, and how to care elements using various locators

What is the Puppeteer Framework?

Puppeteer is a NodeJS-based Automation Framework that allows programming through. It & # 8217; s an Open Source and is maintained by Google. Puppeteer fabric allows unmediated communicating with Chrome-based browsers such as while its advanced feature allows working with Firefox (Nightly Build) as easily.

Advantages of the Puppeteer Framework

Here are the advantage of the Puppeteer Framework

• Easy Configuration:Puppeteer is easygoing to configure and set up
• No Webdriver Dependancy:Unlike, Puppeteer doesn & # 8217; t rely on a web driver so that we can expect stable test runs. No more browser/driver incompatibility.
• Faster Executions:Since it directly interact with the browser, Puppeteer is faster and more stable.
• Test Library/Framework Integration:Puppeteer can easily be integrated into the Mocha and.
• Documentation:Puppeteer has good documentation on their API, so it is easygoing to learn and implement
• Browser Support:The Puppeteer framework supports Chrome and Firefox
• Community Support:Since Puppeteer has a Brobdingnagian user base, it has full community support.

Limitations of Puppeteer

Here are the disadvantage of the Puppeteer Framework:

• Puppeteer is a thin housecoat, it & # 8217; s not a accomplished framework-ready automation tool like or Testcafe.
• Browser support is limited to only Chrome and Firefox.
• Programming Language support is limited to Javascript.

Puppeteer Architecture

Puppeteer is a Node.js library that provides a high-level API to control headless (or full) Chrome or Chromium browsers over the DevTools Protocol. It ’ s commonly used for automation, scrape, rendering, testing, and more.

Core Components of Puppeteer Architecture:

1. Puppeteer Node.js API

• It provides user-friendly methods likepage.goto () and page.click (), etc.
• Acts as a wrapper over the Chrome DevTools Protocol (CDP).

2. Protocol (CDP)

• A low-level communicating protocol used to control and audit Chrome or Chromium.
• Puppeteer sends JSON-formatted messages over WebSocket to the browser.

3. Headless Chrome / Chromium

• A browser locomotive that runs without a UI.
• Executes job sent via the protocol like page rendering, meshing interception, screenshots, etc.

4. WebSocket Communication

• Puppeteer connects to Chrome ’ s debugging port over WebSocket.
• JSON bid and reaction are exchanged through this channel.

Flow of Execution in Puppeteer:

1. The developer writes the Puppeteer script using Node.js API.
2. Puppeteer translates commands into Chrome DevTools Protocol (CDP) messages.
3. WebSocket connection sends the messages to Chrome or Chromium.
4. Browser fulfil the task (for example, load a URL or tick a button).
5. Results and events are sent back from the browser to Puppeteer via CDP.
6. Puppeteer handles responses, enabling affirmation, screenshots, scratch, etc.

Talk to an Expert

Puppeteer Element Handling and Locators

Handling component efficiently is a nucleus feature of Puppeteer, enable developers to interact with web pages programmatically. Puppeteer provides assorted methods to locate and manipulate elements usingselectors and locator, making it powerful for task like descriptor filling, clicking push, and evoke information.

Types of Locators in Puppeteer

Puppeteer supports a smorgasbord of locators to identify and target elements on the page:

• CSS Selectors: Uses standard CSS rules to locate ingredient.

Example:

.class, #id, div & gt; p

• XPath: Locates elements based on their hierarchical construction in the DOM.

Example:

//div [@ id='main '] /button

• Text Content (via XPath/JavaScript): Though not directly supported, elements can be selected by schoolbook using XPath.

Example:

// * [textbook () = '' Click Here '']

Attributes:Targets elements based on attributes likename, type, data- *

Example:

[data-test-id= '' submit '']

Nth-child Selectors: Targets elements based on their position within a parent.

Example:

ul & gt; li: nth-child (2)

Custom JavaScript Selectors: Advanced logic can be pen within the browser context utilizepage.evaluate

Example:

document.querySelectorAll (' ... ')

Common Puppeteer Methods to Locate and Interact with Elements

How to Automate Web Scraping using Puppeteer ’ s Headless Browsing?

Automating web scraping with Puppeteer & # 8217; s headless browsing involves several key steps:

Step 1. Install Puppeteer: Begin by installing Node.js and Puppeteer. Puppeteer comes with a bundled version of Chromium, ensuring compatibility. Install it utilize npm:
bash

npm install puppeteer

Step 2. Launching a Headless Browser: Puppeteer allows you to found a browser instance in headless mode, which go without a graphic user interface, making it idealistic for automated tasks.

Here & # 8217; s how to launch a brainless browser:

javascript

const puppeteer = require ('puppeteer '); (async () = & gt; {const browser = await puppeteer.launch ({headless: true}); const page = await browser.newPage (); await page.goto ('https: //example.com '); // Your scraping logic hither await browser.close ();}) ();

Step 3. Navigating and Interacting with Pages: Use Puppeteer & # 8217; s API to pilot to web page and interact with element. For example, to tick a button or extract schoolbook:

javascript

await page.click ('selector '); // Clicks an element matching the selector const textbook = await page. $ eval ('selector ', el = & gt; el.textContent); // Extracts text content

Step 4. Handling Dynamic Content: Many websites load content dynamically using JavaScript. Puppeteer can wait for specific elements to ensure content is amply loaded before proceeding:

javascript

await page.waitForSelector ('selector '); // Waits for the element to appear in the DOM

Step 5. Extracting Data: Once the coveted content is lade, extract data utilise chooser:

javascript

const data = await page. $ $ eval ('selector ', elements = & gt; {return elements.map (el = & gt; el.textContent);});

Step 6. Closing the Browser: After finish the scratch tasks, close the browser instance to free up resource:

javascript

await browser.close ();

Setting up Puppeteer and Jest Automation Tool

This section explains setting up Puppeteer with NodeJS, Javascript, and Jest Framework.

Prerequisites:

• Install NodeJS
• Install Optical Studio Code(Recommended)

Follow these step-by-step direction:

Step 1:Create an empty directory; let ’ s name it puppeteer-demo

Step 2:Open the new created empty directory (puppeteer-demo) in Ocular Studio Code.

Step 3:Open a new end. You should be pointing to the root of the project: puppeteer-demo

Step 4:Enter Command to createpackage.json

npm  init

package.jsonafford the flexibility to create shortcut commands and tracks all dependencies.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

While creating the package.json file, the CLI asks for questions. If you wish to answer, you can reply. Else just hit the ENTER key to set the nonremittal values.

Step 5:Install the puppeteer npm module

From Visual Studio Code Terminal, enrol the command.

npm i puppeteer

Step 6:Install the jest package

Jest provides assertion libraries and configuration for the puppeteer

npm i jest

Step 7:Install jest-puppeteer

Jest-puppeteer provides integration between Puppeteer and jest framework.

npm i jest-puppeteer

Step 8: Create a Jestconfiguration file

In your project root directory, create a file with the namejest.config.js. Copy and paste the below code

module.exports = {preset: 'jest-puppeteer ', testRegex: './ * \\.test\\.js $ ',}

In the above code, is mentioned as preset as jest-puppeteer, and testRegex aid find the set of puppeteer tests inside the project.

Step 9: Create a jest-puppeteercontour file

In your project source directory, create a file with the namejest-puppeteer.config.js. Copy and paste the below codification

// jest-puppeteer.config.js module.exports = {launch: {headless: false, product: 'chrome ', args: [' -- start-maximized '], defaultViewport: {width: 1700, height: 800}}, browserContext: 'default ',}

In the above code,, and the headless modality is turned off. The browser context is set to default.

Step 10:Create a new brochure to place our functional tryout.

Create new leafletex: tests, at your project root directory level.

Step 11:Create a new Puppeteer test file

Inside your& # 8216; examination & # 8217;folder, make a new file (ex: demo.test.js). Copy and paste the below code.

//demo.test.js describe ('Browserstack Demo ', () = & gt; {jest.setTimeout (50000); beforeAll (async () = & gt; {await page.goto ('https: //www.browserstack.com/ ')}) it ('Should Verify Forgot Password ', async () = & gt; {await page.click (' a [href= '' /users/sign_in ''] '); await page.waitForSelector (' # user_email_login '); await page.click (' a [href= '' /users/password/new ''] '); expect page.waitForSelector ('input [id= '' user_email_login ''] '); await page.type ('input [id= '' user_email_login ''] ', 'ok @ example.com ') await page.click ('input [type= '' submit ''] '); wait page.waitForSelector (' p [class= '' bs-alert-text ''] '); const el = await page. $ (' p [class= '' bs-alert-text ''] '); const text = await page.evaluate (el = & gt; el.innerText, el); expect expect (text) .toContain (`` Password reset initiated '');})})

The test scenario covered is as below:

• Navigating to browserstack.com
• From Home, we are clicking the Sign In carte item
• Click on Forgot Password, on the Sign In Page
• Enter email-id and Submit
• Verify the Information Message

Step 12:Configure package.json to run the test

In the package.json file, hunt for & # 8220; scripts & # 8221;, and add the below value

`` playscript '': {'' examination '': `` jest -c ./jest.config.js ''},

Step 13:Execute First Test with Puppeteer

From the Ocular Studio Code Terminal, Enter the below command

npm run exam

Once you enter the above trial, the performance starts, wait until it finishes.

The execution result will be shown in VS Code Terminal

Best Practices for Optimizing your Tests with Puppeteer

To make the most of Puppeteer and ensure your tests are efficient, reliable, and maintainable, consider these best practices:

1. Use Headless Mode for Speed

Run examination in headless mode to minimize resource usage and maximize performance speed.

Use headless: mistakenonly for debugging or visual substantiation.

Example:

const browser = await puppeteer.launch ({headless: true});

2. Implement Explicit Waits

Avoid hard-coded delay like awaitpage.waitForTimeout (). Instead, use Puppeteer ’ s wait methods like:

javascript

await page.waitForSelector ('selector ', {visible: true, timeout: 5000});

This see tests wait only as long as want for factor to load.

3. Leverage Browser Contexts

Use browser contexts to sequestrate session, enabling parallel tests within the like browser representative without interference.

javascript

const context = await browser.createIncognitoBrowserContext (); const page = await context.newPage ();

4. Optimize Selectors

Use efficient and specific selectors (for exemplar, # id, .class) to reduce performance clip and avoid freaky tests.

Avoid overly generic or subordinate selector that can interrupt with minor DOM changes.

Example:

await page.click (' # submit-button '); // Good await page.click ('div & gt; span & gt; a: nth-child (2) '); // Fragile

5. Reuse Browser Instances

Instead of establish a new browser for each test, reuse a single browser instance across multiple tests to salve imagination.

javascript

const browser = await puppeteer.launch (); const page = await browser.newPage ();

6. Capture and Log Errors

Wrap test actions in try-catch blocks to log detailed errors and improve debugging.

javascript

try {await page.click ('.button ');} catch (error) {console.error ('Error clicking button: ', fault);}

7. Use Environment Variables

Store sensitive information like credentials or URLs in environs variables rather of hardcoding them.

javascript

const user = process.env.USERNAME; const passing = process.env.PASSWORD;

8. Use Debugging Tools

Use Puppeteer ’ s built-in debugging options. Slow down execution withslowMofor debugging:

Example:

javascript

puppeteer.launch ({headless: false, slowMo: 50}); Enable verbose logging using the DEBUG environment variable: bash

DEBUG=puppeteer: * node script.js

9. Capture Screenshots and Logs

Take screenshots or save logs on failure to identify issue quickly.

Example:

javascript

await page.screenshot ({path: 'error.png '});

10. Keep Tests Atomic

Write small, focused tests that verify individual functionality. This reduces dependencies and make debug easier.

11. Optimize Resource Usage

Block unnecessary imagination like icon or ads for faster execution:

javascript

await page.setRequestInterception (true); page.on ('request ', req = & gt; {if (['image ', 'stylesheet ', 'font '] .includes (req.resourceType ())) {req.abort ();} else {req.continue ();}});

12. Integrate with CI/CD Pipelines

Automate your tests by integrating Puppeteer with tools like, GitHub Actions, or for consistent performance in your pipeline.

Example:

occupation: trial: runs-on: ubuntu-latest step: - name: Install dependencies run: npm establish - name: Run Puppeteer Tests run: npm trial

13. Update Puppeteer Regularly

Stay updated with the late version of Puppeteer to ensure compatibility with new browser characteristic and bug fixes.

npm update puppeteer

14. Use Page Object Model (POM)

Organize code into reusable components using the Page Object Model for maintainability:

javascript

grade LoginPage {constructor (page) {this.page = page;} async login (username, word) {await this.page.type (' # username ', username); await this.page.type (' # password ', countersign); expect this.page.click (' # login ');}}

Execute a Puppeteer Test on BrowserStack

Browserstack provides thousands of real devices for test execution and supports the Puppeteer framework for flawless test execution. Refer to the for detailed steps.

Step 1:Configure jest-puppeteer.config.js

Once tests execution on your machine are successful, you can execute the same tests on BrowserStack with minor changes listed below

jest-puppeteer.config.js.

In the jest-puppeteer.config.jsfile add capabilities, and connect.

The complete jest-puppeteer.config.js file seem like the one below.

// jest-puppeteer.config.js const caps_chrome = {'browser ': 'chrome ', 'browser_version ': 'latest ', 'os ': 'windows ', 'os_version ': '10 ', 'name ': 'Puppeteer-jest test on Chrome ', 'build ': 'puppeteer-jest-build-2 ', 'browserstack.username ': process.env.BROWSERSTACK_USERNAME || 'your_user_name ', 'browserstack.accessKey ': process.env.BROWSERSTACK_ACCESS_KEY || 'your_access_key'}; module.exports = {launch: {headless: false, product: 'chrome ', args: [' -- start-maximized '], defaultViewport: {breadth: 1700, height: 800}}, browserContext: 'default ', connect: {browserWSEndpoint: ` wss: //cdp.browserstack.com/puppeteer? caps= $ {encodeURIComponent (JSON.stringify (caps_chrome))} `,}}

Documents all different sets of capableness options.

Step 2:Execute your scripts

In Visual Studio Code, Terminal enter the below command

npm run trial

Once you recruit the above dictation, the script begin executing; wait until it discharge.

After completion of execution, you can see the outcome in the Browserstack Dashboard.

Step 3:View the Results in the Browserstack dashboard

Login to Browserstack and navigate to Dashboard,

Choose the build, and you will see the complete snapshot of your test.

Puppeteer vs Selenium: Key Differences

Puppeteer and Selenium are both powerful tools used for browser automation, enabling developers and quizzer to simulate user interactions, automate workflow, and perform.

While both tools share the goal of automating web browser behavior, they differ significantly in their architecture, browser support, lyric compatibility, and use cases. Here are the primary differences between Puppeteer and Selenium.

Puppeteer vs Protractor: Key Differences

Puppeteer and Protractor are both used for automating browser interactions, but they cater to different testing want and have distinct architectural coming.

While Puppeteer offers low-level control over Chromium-based browser, Protractor is built specifically for Angular applications. Here are the key differences:

Puppeteer vs Cypress: Key Differences

Puppeteer and Cypress are both popular instrument in the JavaScript prove ecosystem, but they serve slightly different determination.

Puppeteer is a browser automation library, while Cypress is a full-fledged testing framework focused on developer-friendly end-to-end testing. Here ’ s how they liken:

Conclusion

Accelerate your test automation with for Puppeteer. to expand coverage and deliver high-quality covering faster. With, securely tryout on local servers without compromising on performance or data protection.

Related Guides