DEV Community

Cover image for UI Automation Using Puppeteer
Pinto Infant
Pinto Infant

Posted on

UI Automation Using Puppeteer

#testing #automation

1. Introduction to Puppeteer

  • Puppeteer is a Node.js library developed by Google.
  • Provides a high-level API to control Chrome or Chromium over the DevTools Protocol.
  • Ideal for automating browser tasks such as UI testing, web scraping, PDF generation, etc.

2. Features of Puppeteer

  • Headless browser automation (can also run in headful mode).
  • Full control over page elements (DOM manipulation, navigation, inputs).
  • Screenshot and PDF generation.
  • Simulate user actions (clicks, typing, scrolling).
  • Network interception and monitoring.
  • Useful for testing SPAs (Single Page Applications).

3. Installing Puppeteer 

npm install puppeteer
Enter fullscreen mode Exit fullscreen mode

Installs the library along with a compatible Chromium binary.

4. Basic Script Example 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true }); // or false for UI
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();
Enter fullscreen mode Exit fullscreen mode

5. Common Puppeteer Commands

Action Command
Launch browser puppeteer.launch()
Open new tab browser.newPage()
Navigate to URL page.goto('url')
Type into input page.type(selector, text)
Click a button page.click(selector)
Wait for element page.waitForSelector(selector)
Take screenshot page.screenshot({ path: 'file.png' })
Evaluate JS page.evaluate(fn)
Close browser browser.close()

6. Use Case: Login Automation 

await page.goto('https://example.com/login');
await page.type('#username', 'yourUsername');
await page.type('#password', 'yourPassword');
await page.click('#loginButton');
await page.waitForNavigation();
Enter fullscreen mode Exit fullscreen mode

7. Wait Mechanisms

  • waitForSelector(selector) – Waits for element.
  • waitForNavigation() – Waits for page load/navigation.
  • page.waitForTimeout(ms) – Waits for a fixed delay.
  • Helps synchronize automation with dynamic UI.

8. Handling Alerts/Dialogs 

page.on('dialog', async dialog => {
  console.log(dialog.message());
  await dialog.accept();
});
Enter fullscreen mode Exit fullscreen mode

9. Taking Screenshots & PDFs 

await page.screenshot({ path: 'page.png', fullPage: true });
await page.pdf({ path: 'page.pdf', format: 'A4' });
Enter fullscreen mode Exit fullscreen mode

10. Emulating Devices 

const iPhone = puppeteer.devices['iPhone X'];
await page.emulate(iPhone);
Enter fullscreen mode Exit fullscreen mode

11. Headless vs Headful Mode

  • Headless: No browser window shown; faster; for CI/CD.
  • Headful: Browser UI is visible; helpful for debugging. 
puppeteer.launch({ headless: false }); // To see the browser
Enter fullscreen mode Exit fullscreen mode

12. Advanced Features

  • Intercept network requests: 
  await page.setRequestInterception(true);
  page.on('request', req => {
    if (req.resourceType() === 'image') req.abort();
    else req.continue();
  });
Enter fullscreen mode Exit fullscreen mode
  • Evaluate JavaScript in the browser context: 
  const title = await page.evaluate(() => document.title);
Enter fullscreen mode Exit fullscreen mode
  • Upload a file: 
  const input = await page.$('input[type="file"]');
  await input.uploadFile('/path/to/file.txt');
Enter fullscreen mode Exit fullscreen mode

13. Use Cases

  • UI Testing & Regression Testing
  • Automated Form Submission
  • Capturing Screenshots for UIs
  • Performance Monitoring
  • Web Scraping and Data Extraction
  • PDF generation of dynamic content
  • CI/CD integration for UI flows

14. Pros and Cons

Pros Cons
Headless browser is fast and lightweight High memory usage on large tests
Easy JavaScript API Some browser features unsupported
Active community and documentation Heavier than HTTP-level testing tools
Suitable for modern web apps (SPAs) Needs Chromium; increases package size

15. Puppeteer Alternatives

  • Playwright: Developed by Microsoft; supports multiple browsers (Chromium, Firefox, WebKit).
  • Selenium: Older tool, supports multiple languages.
  • Cypress: Focused on frontend testing, rich GUI.
  • Nightwatch.js: Uses WebDriver API.

16. Best Practices

  • Always use proper wait methods to avoid flaky tests.
  • Run in headful mode when debugging.
  • Use environment variables for sensitive data (e.g., credentials).
  • Combine with Jest, Mocha, or Jasmine for test suites.
  • Use page tracing and console logs for debugging.

Top comments (0)