How to use Puppeteer for headless browser testing in Node.js



Image not found!!

Puppeteer is a Node library that provides a high-level API to control headless browsers or full browsers over the DevTools Protocol. It is commonly used for web scraping, automated testing of pages, taking screenshots, generating PDFs, and more. Here's a basic guide on how to use Puppeteer for headless browser testing in Node.js:

Step 1: Install Puppeteer

Make sure you have Node.js installed on your machine. You can install Puppeteer using npm:

bash
npm install puppeteer

Step 2: Write a Basic Script

Create a new Node.js script and use Puppeteer to interact with a headless browser. Here's a simple example that opens a browser, navigates to a website, takes a screenshot, and closes the browser:

javascript
const puppeteer = require('puppeteer');

(async () => {
  // Launch a headless browser
  const browser = await puppeteer.launch();

  // Open a new page
  const page = await browser.newPage();

  // Navigate to a website
  await page.goto('https://example.com');

  // Take a screenshot
  await page.screenshot({ path: 'example.png' });

  // Close the browser
  await browser.close();
})();

Step 3: Run the Script

Save your script with a .js extension (e.g., test.js) and run it using Node.js:

bash
node test.js

This script will launch a headless browser, open the specified website (in this case, "https://example.com"), take a screenshot, save it as example.png, and then close the browser.

Additional Puppeteer Usage

Interacting with the Page

You can interact with the page by evaluating scripts, clicking elements, typing text, etc. For example:

javascript
// Type text into an input field
await page.type('input[name="username"]', 'your_username');

// Click a button
await page.click('button[type="submit"]');

Handling Navigation and Waiting

Puppeteer provides methods to wait for certain conditions, such as navigation to complete or an element to be present:

javascript
// Wait for navigation to complete
await page.waitForNavigation();

// Wait for an element to be present in the DOM
await page.waitForSelector('h1');

Headless vs. Headful

You can launch Puppeteer in headless or headful mode. Headless mode doesn't display the browser UI, which is useful for automated tasks. To launch in headful mode (with UI), modify the puppeteer.launch() line:

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

These are just basic examples, and Puppeteer offers a wide range of functionalities. Refer to the official Puppeteer documentation for more detailed information and examples

Category List