335 lines
6.5 KiB
Markdown
335 lines
6.5 KiB
Markdown
---
|
|
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
|