How can Puppeteer be used for automated testing?

Puppeteer is a powerful tool developed by Google that allows developers to interact with web pages just like a user would: click on buttons, fill out forms, scroll, etc. Puppeteer is especially useful for automated testing because it allows you to emulate user actions, test your web application in a real browser (Chrome or Chromium), and check if your application behaves as expected.

Below are step by step instructions on how to use Puppeteer for automated testing:

1. Installation To start using Puppeteer, you need to install it via npm (Node Package Manager). Open your terminal or command prompt and type:

npm i puppeteer

1. Creating a Puppeteer Script Create a JavaScript file (e.g., test.js) to include your Puppeteer script.

const puppeteer = require('puppeteer');

async function runTest() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // Navigate to the page you want to test
    await page.goto('https://example.com');

    // Interact with the page or check its contents
    // e.g., Check if the correct h1 title loaded on the page
    const h1Title = await page.$eval('h1', el => el.innerText);
    console.log(h1Title);

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

runTest();

In this example, Puppeteer launches a new browser, opens a new tab, and navigates to 'https://example.com'. It then fetches the inner text of the first h1 element on the page and logs it to the console.

1. Run the Puppeteer Test After you've written your Puppeteer script, you can run it using Node.js. In your terminal or command prompt, navigate to the directory where your script is located and type:

node test.js

1. Using Puppeteer with Testing Libraries You can use Puppeteer in combination with a testing library like Jest to create more complex, robust tests. Jest provides a testing structure and allows you to use matchers to test values.

First, install Jest and Jest-Puppeteer which integrates Puppeteer into Jest:

npm i jest jest-puppeteer

Then, create a Jest test file (e.g., test.spec.js):

const puppeteer = require('puppeteer');

describe('My First Puppeteer Test', () => {
    it('Should load the page', async () => {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();

        await page.goto('https://example.com');
        const title = await page.title();

        expect(title).toBe('Example Domain');

        await browser.close();
    });
});

In this example, Jest provides the describe and it functions to create the test structure, and the expect and toBe functions to check if the page title is 'Example Domain'.

To run the test, execute this command:

npx jest

Jest will automatically find and run all test files in your project.

Remember that this is a basic guide and Puppeteer offers many more features for automated testing, such as handling multiple pages, intercepting and modifying HTTP requests, taking screenshots, generating PDFs, etc. Make sure to check the official Puppeteer documentation for more information.