Skippa manuell testning — med Puppeteer

Är du en utvecklare som sitter i ett stort team med uppbackning av testutvecklare som skriver automatiska tester är denna artikel kanske inget för dig. Är du däremot en av dessa testutvecklare, eller en utvecklare i ett team utan tillgång till detta? Ja då kan denna artikel rädda dig från leda och själslig död när din projektledare tvingar dig att genomföra manuell testning.

En 😎 utvecklare är en kodande utvecklare

Vi i SpareBank 1 Forsikrings team för Meldskade är ett tvärfunktionellt «two 🍕 sized team» (Jeff Bezos) utan tillgång till testare. Vi har en handfull mycket komplexa applikationer vi utvecklar och för att känna oss trygga med att produktionssätta utan att genomföra regressionstester har vi i det närmaste full testtäckning — i alla fall när det gäller tester av gränssnitt och interaktion 😉

För dessa tester använder vi oss av end-to-end biblioteket Puppeteer från Google. De flesta har kanske hört talas om Selenium WebDriver som är något snarlikt. Puppeteer är ett Node bibliotek som tillhandahåller ett högnivå API för att kontrollera headless (eller non-headless) Chrome eller Chromium genom DevTools-protokollet.

{ headless: false }

{ headless: false, devtools: true, slowMo: 250 }

Till skillnad från Selenium är Puppeteer snabbt! Men misströsta ej du timfakturerande konsult, den har en inställning för slow motion som gör att du kan få den där äkta Selenium-känslan eller hinner med att debugga i realtid och dricka fem koppar ☕ medan testerna körs.

Kom igång

Det är också väldigt lätt och rättfram att komma igång med Puppeteer.

Installera:

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();
})();

Kör tester:

node example.js

Puppeteer har ett rikt API med det mesta av användarinteraktion man kan behöva testa — click, tap, type, focus, med mera. Du kan också ta skärmdumpar och exportera till PDF. Det är väldigt stabilt och buggfritt. Vi har bara upplevt vissa små skillnader beroende på vilket operativsystem testerna körs på. Exempelvis har vi haft problem med tangentbordsnavigation i selectboxar på Mac.

Alternativ

Vid sidan av Puppeteer finns också många andra bibliotek, ramverk och testsviter som alternativ — nedan listas en handfull. Hittills är dock vi så nöjda med Puppeteer att vi inte har haft behov av att utvärdera något alternativ fullt ut. Brorparten av fel är dessutom inte beroende av specifik webbläsare utan stöd för Chrome anser vi är gott nog, eventuella särfall behövs ändå oftast en människa för att upptäcka. De alternativ som vi tycker verkar mest intressanta är Cypress och TestCafé. Till skillnad från Puppeteer erbjuder de visuella gränssnitt vilket gör att de kan hanteras utan teknisk kompetens när väl testerna är skrivna.

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

Lärdomar

Genom att vara tidiga brukare av Puppeteer har vi gjort oss dessa lärdomar:

• Dela upp testerna så att de går att köra separat utan att hela applikationen testas
• Använda specifika CSS-selektorer (förslagsvis prefixade med .test- eller .e2e-) för testerna så att det är uppenbart vad detta är och hur det ska tas vidare när man gör ändringar i koden
• Kontrollera resultat av interaktioner med en test runner — välj det du själv gillar Jest, AVA, Tape …
• Framför allt att det är till stor nytta! Är du osäker kan du pröva utan någon uppsättning

Universell utformning

När du väl har dina end-to-end tester på plats skulle jag även vilja slå ett slag för att automatisera testning av universell utformning med hjälp av biblioteket Axe Core. Det ger dig en god solid grund att stå på och minskar behovet även för denna typ av manuell testning. Axe Core har bra exempel på implementation med flera olika testramverk.

Exempel 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(); 
});

Lycka till! 😀

Nästa artikel — Skippa manuell testning med Cypress