From e6ff784437f2e74ace0ae621b370da20e74627f1 Mon Sep 17 00:00:00 2001 From: Dag Olav Prestegarden Date: Mon, 22 Oct 2018 15:56:22 +0200 Subject: [PATCH] Slides --- testcafe-presentation.md | 334 +++++++++++++++++++++++++++++++++++++ tests/setup.test.js | 12 ++ tests/todo-0-setup.test.js | 8 + 3 files changed, 354 insertions(+) create mode 100644 testcafe-presentation.md create mode 100644 tests/setup.test.js create mode 100644 tests/todo-0-setup.test.js diff --git a/testcafe-presentation.md b/testcafe-presentation.md new file mode 100644 index 0000000..9106861 --- /dev/null +++ b/testcafe-presentation.md @@ -0,0 +1,334 @@ +--- +title: TestCafé - Faggruppemøte 2018-10-23 +author: Børge Antonsen, Dag Olav Prestegarden +patat: + wrap: true + margins: + left: 3 + right: 3 + pandocExtensions: + - patat_extensions + - autolink_bare_uris +... + +# TestCafé + +## Agenda + +. . . + +* Hva er TestCafé + +. . . + +* Intro: Installasjon og kommandolinje + +. . . + +* Dypdykk: Test-API + * Oppgaver + +. . . + +* Ekstramateriell: Annen funksjonalitet + * Remote testclient + * Reporting + * Screenshotting + + +## TestCafé + +http://devexpress.github.io/testcafe/ + +. . . + +**Ikke denne:** https://testcafe.devexpress.com/ + +Dette er en eldre, komersiell versjon. GitHub-versjonen som er fri programvare har nytt API og er ikke kompatibel. + +Det jobbes med en ny komersiell versjon basert på denne. Som mellom annet vil komme med funksjonalitet man finner på nettsiden til den gamle, slik som GUI-basert opprettelse av tester. + + +## Hva gjør TestCafé + +. . . + +* UI testing + +. . . + +Lar oss programatisk skrive tester mot den kjørende applikasjonen. + +. . . + +I motsetning til unit-test-rammeverk som kjører på node e.l. og tester kodesnutter krever TestCafé at applikasjonen er tilgjengelig på HTTP. + +I motsetning til Selenium et.al. trenger man ikke webdrivere. + +## Hva gjør TestCafé cont. + +Vi trenger ikke å kunne kjøre koden selv i testprosessen, dette gjøres av browseren som laster inn siden og får injectet testene. + +. . . + +Dette gjør at vi også kan teste vilkårlige applikasjoner på nettet. + + +## Denne tilnærmingen gir oss + +. . . + +Test av applikasjonen "ferdig oppsatt" - ikke bare enkeltdeler + +. . . + +Tester på ferdig produkt, slipper å sette opp DOM/context bare for testene sin del + +. . . + +Teste i flere browsere + +. . . + +Noen spørsmålsstillinger om hvordan vi skal sette opp miljøet for testformål. + +* Hvordan håndterer vi state over tid? +* Kan vi lett kjøre opp systemet kun for tester, eller tester vi mot systest e.l.? +* Hvordan kan vi stubbe backend og integrasjoner i appen vår? + + +# Komme i gang + +## Kodebase til i dag + +. . . + +Last ned vha. git +`git clone https://gitea.bitnexus.net/boranton/testcafe-workshop.git` + +. . . + +Installer dependencies +`npm ci` ev `npm i` + + +## Installere testcafe + +Vanligvis ville jeg anbefalt å innstallere som en dependency i systemet: +`npm install testcafe --save-dev` + +Dette er allerede gjort i kodebasen vår. + +. . . + +Men i dag skal vi ekseperimentere litt mer med kommandolinjeverktøyene. Så vi kjører en global installasjon for å få `testcafe` på PATHen vår. + +`npm install -g testcafe` + +(Ikke nødvendig, du kan bruke node_modules/.bin/testcafe) + +## Vår første test + +Ligger her: +`tests/setup.test.js` + +Innhold: +```javascript +import { Selector } from 'testcafe'; + +fixture("Testing setup") + .page("https://google.com"); + +test("google bouvet", async t => { + await t + .typeText("#lst-ib", "Bouvet") + .wait(3000) + .pressKey("enter") + .wait(3000) +}); +``` + +Børge kommer inn på APIet senere. + + +## Tilgjengelige browsere + +`testcafe -b` + +Gir en liste over tilgjengelige browsere. + +Når jeg skriver "chrome" - skriv din foretrukne browser som er tilgjengelig fra denne lista. + + +## Kjør test mot Google + +`testcafe chrome tests/setup.test.js` + + +## Appen vår + +TodoMVC VanillaJS + +Start app +`npm run dev` + + +## Vår første test av applikasjonen vår + +Testfil for lokal app, ligger her: `tests/todo-0-setup.test.js` +```javascript +import { Selector } from 'testcafe'; + +fixture("Testing setup") + .page("http://localhost:8080/"); + +test("Should have some content", async t => { + await t.expect(Selector("body").innerText).notEql(""); +}); +``` + + +## Vi kjører! + +Vi må ha appen tilgjengelig på urlen vi oppgav over. + +Dette kan vi gjøre ved å kjøre den fra npm som vist tidligere. + +. . . + +eller... + +. . . + +`testcafe chrome tests/setup.test.js --app 'npm run dev'` + + +## Windows (CMD)? + +`testcafe edge tests/setup.test.js --app ^"npm run dev"` + +Legg merke til: + + * Double quote + * ^ som escaping av stringen + +. . . + +Ennå verre blir det når man skal skrive inn kommandoer i `package.json`. Da må man også escape quotes. (Merk, man kan ikke bruke single quotes). Et innslag i scripts-blokka blir da: +`"testcafe": "testcafe edge tests/setup.test.js --app ^\"npm run dev\""` + +*Derfor - for alle eksempler fra nå av: Husk å kompensere for dette om du er på Windows* + + +# Oppgaver + + +## Flere browsere + +`testcafe chrome,firefox tests/setup.test.js --app 'npm run dev'` + + +## Remote browsers + +`testcafe remote:2 tests/setup.test.js --app 'npm run dev'` + + +## QR-code + +`--qr-code` + +Gjør det lettere å teste på mobil etc. + +. . . + +`testcafe remote:2 tests/setup.test.js --app 'npm run dev' --qr-code` + + +## Screenshots + +TestCafe kan ta screenshot av siden hver gang en test feiler. + +`testcafe chrome tests/setup.test.js --app 'npm run dev' -s screenshots -S` + +Konfigurer med `-s ` og `-p ` (${BROWSER}, ${OS} etc.) + + +# Flere oppgaver + + +## Reports + +Built ins: + +- spec - used by default +- list +- minimal +- xUnit +- JSON + +Pluggbare: + +HTML og andre formater kan lastes ned vha. npm. + +http://devexpress.github.io/testcafe/documentation/using-testcafe/common-concepts/reporters.html +http://devexpress.github.io/testcafe/documentation/extending-testcafe/reporter-plugin/ + + +## Reports cont. + +La oss bruke xUnit-formaterte rapporter som er støttet av de fleste byggesystemer + +`testcafe chrome tests/setup.test.js --app 'npm run dev' -r xunit` + + +## Reports - output til fil + +`testcafe chrome tests/setup.test.js --app 'npm run dev' -r xunit:tests.xml` + + +## Reports - mange formater + +`testcafe chrome tests/setup.test.js --app 'npm run dev' -r spec,xunit:tests.xml` + +Merk: Bare en reporter kan sende til stdout. Alle andre må ha definert et filnavn. + + +## Videre konfigurasjon + +Ellers mye som kan konfigureres av timeouts o.l. Se + +`testcafe --help` + +og dokumentasjonssidene på + +http://devexpress.github.io/testcafe/documentation/ + +Programmerings-APIet kan også konfigurere mange av de samme parameterene. + + +## Annet artig: Docker + +Docker-image: `testcafe/testcafe` - kommer med chromium og firefox. + +`docker run -v ${TEST_FOLDER}:/tests -it testcafe/testcafe ${TESTCAFE_ARGS}` + +Enkel måte og kjøre chromium-/firefox-tester på en headless byggeserver? Ikke utprøvd av oss. + +## Annet artig: Browser providers + +Enkelt API som må implementeres. + +Required: + +* openBrowser(id, url, browserName) +* closeBrowser(id) + +Optional: + +init, dispose, resize, maximize, takeScreenshot, isValidBrowserName, listBrowsers, canResize, isValidName, getBrowserList + +Burde gjøre det ganske greit å lage providers for browsere som ikke er støttet. + + + +# Takk for oss diff --git a/tests/setup.test.js b/tests/setup.test.js new file mode 100644 index 0000000..b361740 --- /dev/null +++ b/tests/setup.test.js @@ -0,0 +1,12 @@ +import { Selector } from 'testcafe'; + +fixture("Testing setup") + .page("https://google.com"); + +test("google bouvet", async t => { + await t + .typeText("#lst-ib", "Bouvet") + .wait(3000) + .pressKey("enter") + .wait(3000) +}); diff --git a/tests/todo-0-setup.test.js b/tests/todo-0-setup.test.js new file mode 100644 index 0000000..ab7c2dc --- /dev/null +++ b/tests/todo-0-setup.test.js @@ -0,0 +1,8 @@ +import { Selector } from 'testcafe'; + +fixture("Testing setup") + .page("http://localhost:8080/"); + +test("Should have some content", async t => { + await t.expect(Selector("body").innerText).notEql(""); +});