Slik slipper du manuell testing med Puppeteer

Er du en utvikler som sitter i et stort team med hjelp av testutviklere som skriver automatiske tester, er kanskje ikke denne artikkelen noe for deg.

Er du derimot en av disse testutviklerne, eller en utvikler i et team uten tilgang til slike? Ja, da kan denne artikkelen redde deg fra den åndelige døden når prosjektlederen tvinger deg til å kjøre manuell testing.

Vi i SpareBank 1 Forsikring sitt team for melding av skader er et tverrfunksjonelt «two pizza sized team» (Jeff Bezos) uten tilgang på testere. Vi har en håndfull veldig komplekse applikasjoner vi utvikler, og for å kjenne oss trygge når vi produksjonssetter uten å gjennomføre regresjonstester, har vi nesten full testdekning — i alle fall når det gjelder tester av grensesnitt og interaksjon. 😉

For disse testene bruker vi end-to-end-biblioteket Puppeteer fra Google. De fleste har kanskje hørt snakk om Selenium WebDriver, som er noe liknende. Puppeteer er et Node-bibliotek som gir et høynivå API for å kontrollere headless (eller non-headless) Chrome eller Chromium gjennom DevTools-protokollen.

I motsetning til Selenium er Puppeteer rask! Men fortvil ikke, timefakturerende konsulent, den har en innstilling for slow motion, som gjør at du kan få den ekte Selenium-følelsen, eller få tid til å debugge i sanntid og drikke fem kopper ☕ mens testene kjøres.

Kom i gang

Det er veldig enkelt og rett fram å komme i gang med Puppeteer.

Installere:

npm install --save-dev puppeteer

Skriv tester (example.js):

const puppeteer = require('puppeteer'); 
(async () => { 
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://sparebank1.no');
  await browser.close();
})();

Kjør tester:

node example.js

Puppeteer har et rikt API med det meste av brukerinteraksjon du kan trenge å teste – som click, tap, type og focus. Du kan også ta skjermdumper og eksportere dem til PDF. Det er veldig stabilt, og bug-fritt. Vi har bare opplevd noen små forskjeller når testene kjøres på forskjellige operativsystemer. For eksempel har vi hatt problemer med tastaturnavigasjon i select-bokser på Mac.

Alternativer

I tillegg til Puppeteer finnes det mange andre biblioteker, rammeverk og test-suiter – nedenfor lister vi opp en håndfull. Men hittil er vi så fornøyde med Puppeteer at vi ikke har hatt behov for å vurdere noe alternativ fullt ut.

Brorparten av feil skyldes dessuten ikke en spesifikk nettleser, så støtte for Chrome anser vi som godt nok. Eventuelle spesielle tilfeller trengs det uansett ofte fortsatt et menneske for å oppdage.

De alternativene vi synes virker mest interessante, er Cypress og TestCafé. I motsetning til Puppeteer tilbyr de visuelle grensesnitt, som gjør at de kan brukes uten teknisk kompetanse når testene er skrevet.

• Puppeteer (pris: gratis; operativsystem: Linux, Mac, Windows; nettleser: Chrome)
• Selenium ( pris : gratis; operativsystem: Linux, Mac, Windows; nettleser : Chrome, Firefox, Internet Explorer, Opera, Safari)
• TestComplete ( pris : €7463; operativsystem: Windows; nettleser : Chrome, Edge, Firefox, Internet Explorer)
• TestCafé ( pris : $499; operativsystem: Linux, Mac, Windows; nettleser : Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)
• Cypress ( pris : gratis*; operativsystem: Linux, Mac, Windows; nettleser : Chrome)

Erfaringer

Ved å være tidlige brukere av Puppeteer, har vi gjort oss disse erfaringene:

• Del opp testene så de kan kjøre separat, uten at hele applikasjonen testes.
• Bruk spesifikke CSS-selectors for testene (gjerne prefixet med .test eller .e2e-). Da blir det åpenbart hva dette er og hvordan det skal tas videre når du gjør endringer i koden.
• Kontroller resultatene av interkasjoner med en test runner – velg det du selv liker best, som Jest, AVA og Tape.
• Puppeteer er til stor nytte! Og er du usikker, kan du prøve uten noe oppsett.

Universell utforming

Når du har dine end-to-end-tester på plass vil jeg også slå et slag for automatisert testing av universell utforming, med biblioteket Axe Core. Det gir deg en solid grunn å stå på, og gir deg mindre behov for også slik manuell testing.

Axe Core har gode eksempler på implementasjon i flere ulike testrammeverk.

Eksempel med Axe Core:

const puppeteer = require('puppeteer');
const test = require('tape');
const axeCore = require('axe-core');
let browser, page;
test('setup', async t => {
  browser = await puppeteer.launch();
  page = await browser.newPage();
  await page.goto('https://www.sparebank1.no/');
  t.end();
});
test('no violations', async t => {
  t.plan(1);
  const axeRun = await page.evaluateHandle(`
    ${axeCore.source}
    axe.run()
  `);
  const axeResult = await axeRun.jsonValue();
  t.equal(axeResult.violations.length, 0);
});
test('teardown', async t => {
  browser.close();
  t.end(); 
});

Lykke til! 😀