How to use Puppeteer as an Acceptance Test

You people maybe confuse Puppeteer is a browser automation. There is no API to assert thing. How can we use it as an acceptance test tool?.

We can integrate it with any javascript testing tool. So they will have abilities to do browser automation and testing. In this article, we will use jest as a Testing Tool.
First, we will install Puppeteer and Jest

yarn init
yarn add puppeteer jest

Add this code to package.json

"scripts": {
  "test": "jest"
}

Then we will use Puppeteer to open Pronto Tools website and check the title is it equal Pronto Tools. Then, check the text on the center of screen is it equal

Tools for Your Growing Business

It’s time to code. Let create file name test.js and put the code below to this file

const puppeteer = require('puppeteer');
describe('Open ProntoTools Website', () => {
  var browser, page;
  var url = 'https://prontotools.io'
beforeEach (async () => {
    browser = await puppeteer.launch({ headless: false });
    page = await browser.newPage();
  })
afterEach (() => {
    browser.close()
  })
test('Title == Pronto Tools', async () => {
    await page.goto(url);
    const title = await page.title();
    expect(title).toBe("Pronto Tools");
  });
test("Center == Tools for Your Growing Business", async () => {
    await page.goto(url);
    const center = await page.$eval('h2.font-34.uppercase > strong', e => e.innerHTML);
    expect(center).toBe("Tools for Your Growing Business");
  });
})

In the first case, we check title by open the website and check title tag is it equal Pronto Tools

The second case, we will open the website and check innerHTML of selector that we interested

In each test case, we will open browser before run test case and close browser after finish test case following beforeEach and afterEach

Finally, we can use yarn test command to run our test suite and get the result

And this is the easy way to use Puppeteer and Jest to make a Browser Automation Test