--- 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