API-driven website testingusing Puppeteer

Viktor Šulák

About me

• Partner at Touch4IT• Backend developer• DevOps engineer• Innovation seeker

• Software and design house with R&D in Bratislava

• Bringing innovations for big companies and startups

• Mobile apps, web applications, AI, AR, VR

• Bratislava, Praha, Vienna, Glasgow

About Touch4IT

• Mobile apps (iOS, Android)• XCTest, JUnit, Espresso

• Web apps (React, Angular)• Jest, Enzyme, Cypress

Testing at Touch4IT

• API backends (Node)• Jest, Newman

• Presentation webs (Drupal)• ?

• Several domains

• Several languages

• Many subpages

• Several critical subpages

Web test scenario #1

Web test scenario #2

• Designers complain

• Lot of resolutions to fit

• Lot of subpages to test

Web test scenario #3

• Complex forms with different scenarios

• Acceptation testing

• Selenium• Cypress• Puppeteer

• Why not Chrome itself?

Available solutions...

• “Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol”• Open source library• Provides well documented API• Created by the creators of Chrome

Puppeteer

https://pptr.dev/

• Generate screenshots and PDFs of pages• Crawl SPAs• Automate form submission, keyboard input, etc.• Capture a timeline trace• Create an automated testing environment• Test Chrome extensions

Puppeteer features

• Puppeteer launches Chromium (optional)• Puppeteer connects to Chrome / Chromium• Script performs testing using Puppeteer

How it works

• Lot of terms from daily web usage• Human readable• No exceptional programming skills needed

Puppeteer syntax

• Require a library

• Launch a new browser

const pptr = require ('puppeteer');

const browser = await pptr.launch ();

Starting browser

• Open a page• Navigate where you want• Mind page loading time• Mind loading events

const page = await browser.newPage ();

await page.goto ('https://www.example.com/1', {timeout: 30000,waitUntil: 'domcontentloaded'

});

Opening page

• Set detailed attributes of viewport• Reload the page to ensure

correct render

await page.setViewport ({width: 375,height: 667,deviceScaleFactor: 2,isMobile: true,hasTouch: true

});

// or

await page.emulate ( devices[ "iPhone 8" ] );

await page.reload ({timeout: 30000,waitUntil: 'domcontentloaded'

});

Specifying resolution

• Screenshot of currently opened page

• Supports .jpg and .png

await page.screenshot ({path: './screenshot.jpg',fullPage: false,type: 'jpeg'

});

Making screenshots

• Elements can by searchedby identifiers (e.g. class or id)• Attributes or content can be

tested

const hostname = page.$eval ('a#test', link => {return link.hostname

});

expect (hostname).toBe ('example.com');

Evaluating element properties

• Detect page loading times• Output file can be parsed• Can be used to detect big

resources or slow assets

await page.tracing.start ({path: 'trace.json'

});

await page.goto ('http://www.example.com');

await page.tracing.stop ();

Timeline tracing

• Pages can be closed separately• Browser closing closes pages

await page.close ();

await browser.close ();

Closing browser

• Sometimes harder to choose method • evaluate, $eval, $$eval

• Big web pages need special care

• 100vh height breaks screenshots

Challenges using Puppeteer

• Driven by Jest, Mocha, etc.

• Navigate to pages - test cases• Assert status code• Assert element attributes and content• Evaluate loading times

Integration with testing suite

• Launched from Gitlab CI

• Tests pass or fail• Generate screenshots• Repopulate render cache

CI Integration

• Navigate to 'touch4it.com'• Check blog is linked to Medium• Navigate to 'touch4it.sk'• Check blog is linked to 'touch4it.sk/blog'

• Check language switcher links

• Make screenshots for designers to check

CI Integration - real-lifeexample

Visual diff - design to screenshot

https://github.com/mapbox/pixelmatch

• Custom higher-level library• Our open-source project on GitHub• Our usually used functionality• Set up for easier screenshotting• Set up for easier elements assessing• Set up to use most popular resolutions

Use Puppeteer easier

https://github.com/touch4it/puppeteer

• Puppetry• Codeless tool to create tests• Tests created in UI or by recording• Uses Jest and Puppeteer• Tests can be exported for CI usage

Use Puppeteer even easier

https://puppetry.app/

Puppetry

+ Using recent Chrome to test

+ Lot of well documented features

+ Self-explaining naming

+ Ability to test pages from CI

+ Can attach to your Chrome

- Using recent Chrome to test

- Not a complete testing suite

- Still no other browsers

Pros and cons of Puppeteer