Author: Dennis O'Keeffe

Section: Testing

Puppeteer

Resources

Usage

To test the UI itself, we can use Puppeteer, Chrome's Headless Browser to evaluate on the UI itself. Puppeteer can also be set to have headless: false, allowing the user to record or watch the test on their screen.

const puppeteer = require('puppeteer');

// Test suite
describe('PageHome functionality', () => {
  // Test suite within another test suite - useful for subsectioning tests within a component/page
  describe('Simple Puppeteer UI test for form elements', () => {
    it('firstName and lastName from Puppeteer deep equal expected schema', async () => {
      const expected = {
        firstName: 'Hello',
        lastName: 'World'
      };

      const browser = await puppeteer.launch({ headless: false });
      const page = await browser.newPage();
      await page.goto('http://localhost:3000');
      await page.screenshot({ path: 'example.png' }); // create an example screenshot of current UI state
      await page.type('input[name="firstName"]', 'Hello');
      const firstName = await page.$eval(
        'input[name="firstName"]',
        (el) => el.value
      );

      await page.waitFor(500);
      await page.click('#next');
      await page.waitForSelector('input[name="lastName"]');
      await page.type('input[name="lastName"]', 'World');
      const lastName = await page.$eval(
        'input[name="lastName"]',
        (el) => el.value
      );

      await page.waitFor(500);
      const formData = {
        firstName: firstName,
        lastName: lastName
      };

      await browser.close();

      expect(formData).to.deep.equal(expected); // evauates to true if form fields hold correct value
    });
  });
});
copy

Logging

// output logs
page.on('console', msg => console.log('PAGE LOG:', msg.text()));

// show devtools
const browser = await puppeteer.launch({devtools: true});
copy