Slides

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 <path>` og `-p <name pattern>` (${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

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

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