Forenklet Test af Ionic Apps: Din Komplette Guide

I den hastigt udviklende verden af mobilapplikationsudvikling er behovet for robuste og effektive testmetoder mere presserende end nogensinde. Hybridapplikationer, der er bygget med frameworks som Ionic, tilbyder en attraktiv løsning ved at muliggøre udvikling til flere platforme fra en enkelt kodebase. Men denne alsidighed medfører også unikke testudfordringer. Denne artikel dykker ned i, hvordan Ionic Framework strømliner og forenkler processen for automatiseret test, især inden for end-to-end (E2E) test, og præsenterer Ionics seneste initiativer til at styrke testkulturen i fællesskabet.

Hvad Er Ionic Framework?

Ionic er et kraftfuldt open source-framework, der har etableret sig som et af de mest populære valg til udvikling af hybridapplikationer. Det udnytter styrken fra Apache Cordova eller, mere moderne, Capacitor, samt populære webudviklingsframeworks som Angular, React og Vue, til at skabe fuldt funktionelle og funktionsrige mobilapplikationer ved hjælp af velkendte webteknologier som HTML, CSS og JavaScript.

Kernen i Ionic er evnen til at transformere en enkelt kodebase skrevet i disse websprog til en fuldt fungerende mobilapplikation, der kan implementeres native på iOS, Android og Windows, samt som en progressiv webapp (PWA). Denne tværplatformskarakteristika er en enorm fordel, da den reducerer den tid, ressourcer og ekspertise, der normalt kræves for at udvikle separate apps til hver platform. Applikationens native funktionalitet og adgang til enhedens API'er implementeres gennem Cordova eller den mere moderne og understøttede Capacitor, som er designet til hurtigere opdagelse, løsning og frigivelse af sikkerheds- og funktionalitetsproblemer.

Hvorfor Er Test af Ionic Apps Nødvendig?

At forstå vigtigheden af test er afgørende for succesfuld app-udvikling. For Ionic-applikationer, der sigter mod at levere en ensartet oplevelse på tværs af diverse enheder og operativsystemer, er en streng testpraksis uundværlig. Her er de primære årsager til, at test af Ionic apps er så vigtig:

• Sikring af Tværplatformskonsistens: Ionic-apps skal fungere fejlfrit og se ens ud på både iOS og Android. Test sikrer, at brugergrænsefladen, funktionaliteten og brugeroplevelsen er konsistent uanset platform.
• Kvalitetssikring: Komplekse apps kan indeholde fejl. Test er afgørende for at identificere og rette fejl tidligt i udviklingscyklussen, hvilket garanterer en høj standard for kvalitet og brugertilfredshed.
• Ydeevneoptimering: Test handler ikke kun om at finde fejl, men også om at sikre, at appen kører optimalt. Dette inkluderer vurdering af hastighed, responsivitet og ressourceforbrug, hvilket er kritisk for en flydende brugeroplevelse.
• Forbedring af Brugeroplevelsen (UX): En veltestet app er en brugervenlig app. Test hjælper med at afdække og løse eventuelle brugervenlighedsproblemer, hvilket sikrer, at appen er intuitiv og nem at navigere i.
• Risikoreduktion: Ved at opdage og adressere problemer tidligt minimerer test risici forbundet med app-udrulning. Dette sparer tid og ressourcer på lang sigt og beskytter brandets omdømme.
• Overholdelse og Sikkerhed: Især for apps, der håndterer følsomme brugerdata, er sikkerhedstest afgørende for at overholde regler og beskytte mod sårbarheder.

I sidste ende er omfattende test en investering i appens succes, der sikrer en fejlfri oplevelse for slutbrugeren og opfylder forretningsmæssige mål.

End-to-End (E2E) Test i Ionic Framework

End-to-end (E2E) test er en kritisk form for test, der simulerer en brugers interaktion med applikationen fra start til slut. I Ionic Framework-konteksten involverer E2E-test typisk eksterne værktøjer for at evaluere interaktionerne mellem forskellige komponenter i appen og derved simulere brugeradfærd i scenarier, der ligner den virkelige verden.

Hvordan Appium Fungerer

Et af de mest anvendte værktøjer til E2E-test af hybrid apps er Appium. Appium fungerer som en server implementeret i Node.js, der opererer som en REST API-webserver. Den etablerer forbindelser med klientenheder, lytter efter kommandoer, udfører disse kommandoer på den målrettede mobile enhed og svarer med en HTTP-respons. Den underliggende protokol, der bruges af Appium, er en udvidelse af Selenium JSON wire protocol, et bredt adopteret webautomatiseringsværktøj.

For at udføre Appium-tests skal man først initiere en webdriver-session og konfigurere de nødvendige opsætninger. De specifikke opsætningsparametre afhænger af mobilens enhedstype og yderligere kriterier, såsom at angive sproget, der skal indstilles i den testede app, eller om appdata skal cachelagres mellem tests. Denne samling af regler, der omtales som Desired Capabilities, skal defineres, før man påbegynder tests, hvilket sikrer korrekt udførelse af testprocessen.

Ionics Strategi for Robust E2E Test

Mange teams kæmper i dag med at opbygge robuste E2E-tests for deres apps, og giver ofte op på at teste deres native app overhovedet eller bruger en web-only løsning, der ikke giver en tilstrækkelig test af den endelige produktions-native app, der vil køre i brugernes hænder.

Hos Ionic er der i 2022 lanceret et stort initiativ for at hjælpe teams med at opbygge og skalere robuste E2E-tests for deres Ionic- og Capacitor/Cordova-apps. Det første skridt på denne rejse var frigivelsen af en reference-Ionic-app med indbygget E2E-test, der bruger det, Ionic anser for at være den bedste stack til opbygning af Web Native E2E-tests.

Skabelse af en Stærkere Testkultur

Ionic har observeret en mangfoldighed af tilgange til test og en bred vifte af testkulturer blandt teams, der bygger missionskritiske apps på Ionic-stacken. Ofte bruger QA-teams sprog som Java eller Python til at skrive tests mod apps, der er skrevet i JavaScript eller native sprog, uden Ionic-specifikke hjælpeprogrammer til at gøre testskrivning lettere. Der ses også en vækst i app-udviklingsteams, der skriver deres egne E2E-tests, næsten udelukkende i JavaScript/TypeScript, men mange af disse teams bruger web-only testværktøjer som Cypress eller Playwright, som ikke kan teste den native app.

En betydelig del af teams skriver slet ikke E2E-tests. Ionics mål er at skabe en stærkere testkultur i Ionic-fællesskabet ved at gøre det meget lettere at skrive og administrere E2E-tests på Ionic/Capacitor-stacken. Bedre, mere pålidelige apps vil gavne både Ionic-teams og deres brugere, og der er meget mere arbejde at gøre for at hjælpe teams med at gøre E2E-test lettere og mere tilgængelige.

Til det formål er der samlet en reference-app, der bruger en meningsfuld stack af testværktøjer for at hjælpe teams med at komme i gang med at skrive E2E-tests.

Den Anbefalede Ionic E2E Stack

Den Ionic E2E-stack bygger på nogle seriøse testgiganter: WebdriverIO og Appium. Disse værktøjer er utroligt kraftfulde og gør det muligt for udviklere at opbygge E2E-tests, der kører på web, iOS, Android og mange andre platforme.

• WebdriverIO leverer et JavaScript-testforfatningsbibliotek og et orkestreringslag for forskellige testtjenester.
• Appium leverer native testkørsel for iOS og Android.

Selvom disse værktøjer er kraftfulde, kan de være vanskelige at konfigurere og skrive tests med, især for de typer Web Native apps, som udviklere, der bruger Ionic-stacken, bygger. For at gøre dette lettere kommer Ionic-projektet med en forudkonfigureret opsætning og nogle nyttige indbyggede hjælpefunktioner og utilities, der skal gøre det meget lettere at komme i gang med at skrive E2E-tests for dine apps.

Nøglefunktioner i Ionic's Test-Helpers

Ionics langsigtede mål er at gøre native og Web Native E2E-test lettere ved at tage disse kraftfulde værktøjer og levere en række praktiske hjælpefunktioner, der er fokuseret på Ionic- og Capacitor (eller Cordova)-apps. Her er nogle af de indbyggede meninger og hjælpefunktioner i reference-appen:

Page Object Pattern

Alle tests i dette eksempel følger Page Object Pattern. Kort sagt bruger dette mønster to filer, når en side testes: et Page-objekt, der indeholder egenskaber og metoder, der eksponerer enhver funktionalitet, en test skal udføre mod en side, og en Spec-fil, der interagerer med Page-objektet for at skrive testpåstande mod det. Dette mønster forbedrer testbarhed og vedligeholdelse.

Udviklingstilstand (Develop Mode)

En af udfordringerne ved at opbygge E2E-tests er den langsomme udviklings-/testcyklus. Et af Ionics generelle mål er, at du skal kunne bygge størstedelen af din app direkte i browseren for den hurtigste udviklingscyklus på mobilmarkedet i dag, og Ionic mener, at E2E-tests ikke bør være anderledes.

Derfor er der indbygget en praktisk udviklingstilstand, der kører tests i Chrome (ved hjælp af chromedriver, så kun Chrome understøttes i øjeblikket) for hurtig testudvikling. For at bruge denne funktion, start først en udviklingsserver for din app (f.eks. ved hjælp af ionic serve), og kør derefter:

SERVE_PORT=8100 npm run ionic-e2e:develop

Hvor portnummeret for den lokale udviklingsserver (8100 er standard Ionic Angular-porten) angives.

Native Builds

En anden udfordring er at bygge og levere native binære filer til de lokale WebdriverIO- og Appium-tjenester. For at gøre dette lettere er der leveret to kommandoer, der bygger iOS- og Android-binære filer til lokal test og gør dem tilgængelige for at blive detekteret af testrunneren:

npm run ionic-e2e:build:ios npm run ionic-e2e:build:android

Kørsel af Tests

For at køre tests, brug følgende kommandoer:

npm run ionic-e2e:run:ios npm run ionic-e2e:run:android npm run ionic-e2e:run:web

Dette vil bruge de ovenfor byggede binære filer til at køre på iOS og Android.

Ionic Komponent-Helpers

Endelig er en af de ting, som teams ofte kæmper med, når de bygger E2E-tests omkring Ionic-apps, at Ionic har en række ydeevne- og brugeroplevelsesteknikker, såsom offscreen-sider, der kan forvirre traditionelle testbiblioteker. For at omgå dette skriver QA- og ingeniørteams ofte skrøbelige, versionsspecifikke vælgere for at finde og interagere med elementer, hvilket skaber ustabile tests eller en afhængighed af specifikke versioner af Ionic UI-biblioteket, hvilket ikke er ideelt.

For at gøre dette lettere er der leveret komponent-helpers for en række kerne Ionic UI-komponenter for at gøre dem lettere at interagere med. For eksempel gør IonicSelect-komponenten det lettere at interagere med ion-select-komponenter i tests:

import { IonicSelect } from '../helpers'; class MyPage { get locationSelect() { return new IonicSelect('ion-select') } }

Og derefter i test-spec'en interageres der med denne select-komponent, først åbnes den, derefter vælges det andet element, og derefter aktiveres OK-knappen:

import About from '../pageobjects/about.page'; describe('about', () => { it('Should switch location', async () => { const location = await About.locationSelect; await location.open(); await location.select(1); await location.ok(); }); });

Fremtidige Planer: Bibliotek, CLI og Cloud Testing

Ionic E2E-eksempelappen er kun begyndelsen. Den langsigtede plan er at skabe en E2E-testoplevelse, der gør test af dine apps på tværs af hele dit team og din organisation meget lettere. En del af dette er et bibliotek og CLI-værktøj, der er under udvikling, og som giver en meget mere strømlinet oplevelse ved hjælp af de meninger og koncepter i E2E-eksemplet. Dette vil også hjælpe med automatisk at konfigurere dit miljø til test mod enheder og simulatorer/emulatorer samt generere nye tests baseret på strukturen af din app.

Der arbejdes også på en fuldt integreret cloud testing-platform drevet af Ionics Appflow cloud-produkt. Den cloud-baserede oplevelse forventes at være en betydelig udvikling inden for cloud E2E-test for Ionic-udviklere, da den fokuserer udelukkende på de specifikke teknologier, som Ionic-udviklere bruger.

Sammenligning med Andre Testværktøjer

Der er mange testværktøjer på markedet, så hvordan adskiller denne stack sig, og hvorfor valgte Ionic den?

Den største forskel, der gjorde det nødvendigt at skabe denne løsning, er behovet for en løsning, der tester din faktiske native app og den web app, der er inde i den. Dette udelukker en hel række gode projekter som Cypress, Puppeteer og Playwright, fordi de kun tester din web app. Dette kan være tilstrækkeligt for nogle projekter, men for korrekt QA af Web Native apps er det ikke.

På den native side har man værktøjer som XCUITest for iOS og UIAutomator2 for Android, men disse værktøjer er platforms-specifikke og tester ikke din web app, så de kan ikke bruges alene. Dette efterlader værktøjer som Appium og dem, der er bygget omkring WebDriver-protokollen. Disse værktøjer har den fordel, at de tester flere platforme og har et robust sæt plugins og funktioner, der er nyttige for Web Native apps. I WebDriver-verdenen er WebdriverIO det bedste JS-fokuserede projekt, og Appium det bedste native tværplatforms-testværktøj. Ionic har derefter fokuseret på at gøre oplevelsen fremragende for Ionic-udviklere ved at levere hjælpefunktioner ovenpå disse værktøjer.

Generel Automatisering af Ionic Test med Cloud-baserede Platforme

Udover Ionics specifikke E2E-stack er der bredere muligheder for at automatisere Ionic-test, især ved hjælp af skybaserede platforme. En sådan tilgang tilbyder skalerbarhed, tilgængelighed og et bredt udvalg af testmiljøer. En af de førende platforme inden for dette felt er Testsigma, kendt for sine omfattende testløsninger til Ionic-applikationer.

Sådan Automatiseres Ionic Test med Testsigma:

1. Vælg en Cloud-baseret Testautomatiseringsplatform: Vælg en platform som Testsigma, der understøtter Ionic-apps og tilbyder en bred vifte af enhedsemulatorer, realtids-testfunktioner og integrationsmuligheder.
2. Opsæt Dit Testmiljø: Konfigurer platformen til at emulere forskellige enheder, operativsystemer og netværksforhold, der ligner dine slutbrugeres.
3. Upload Din Ionic Applikation: Upload din Ionic-applikation til cloudplatformen, enten direkte fra dit repository eller via filupload.
4. Skriv og Automatiser Dine Testcases: Udvikl omfattende testcases for funktionalitet, UI, ydeevne og sikkerhed, der dækker en bred vifte af brugercenarier.
5. Udfør Dine Tests: Udnyt platformens automatiseringsfunktioner til at køre dine tests effektivt, især ved et stort antal testcases.
6. Kør Tests på Tværs af Forskellige Enheder og Miljøer: Udfør tests på en bred vifte af enheder og OS-versioner samtidigt for at sikre tværplatformskompatibilitet.
7. Analyser Testresultater: Gennemgå detaljerede rapporter fra platformen for at identificere og fejlfinde eventuelle problemer.
8. Gentag og Gentest: Brug indsigt fra testresultaterne til at forbedre appen, og gentest for at sikre, at problemer er løst og ingen nye er opstået.
9. Kontinuerlig Test: Integrer test i din CI/CD pipeline for at sikre, at appen løbende testes, når nye ændringer foretages, og dermed opretholde kvaliteten over tid.

Brug af en cloud-baseret platform som Testsigma strømliner testprocessen og giver en fleksibel og effektiv tilgang til at sikre kvaliteten af dine Ionic-applikationer.

Andre Måder at Udføre Ionic Test På

Udover cloud-baserede platforme er der flere andre effektive metoder til Ionic-test, der kan anvendes afhængigt af projektets behov:

• Lokal Test: Test udføres på fysiske enheder eller emulatorer, der styres direkte af udviklingsteamet. Dette giver øjeblikkelig feedback og er ideelt til tidlig debugging.
• Open Source Test-Frameworks: For Angular-baserede Ionic-apps er der frameworks som Karma og Jasmine (til enheds- og integrationstest), Protractor (til E2E-test i en rigtig browser) og Jest (kendt for sin hastighed og enkelhed, især for JavaScript-fokuserede apps).
• Appium: Som nævnt tidligere er Appium også et fremragende valg til generel mobilapp-automatisering, der simulerer brugerinteraktioner på både iOS og Android.

Oversigt over Testtyper og Værktøjer

Brug af Cypress med Ionic Apps

Cypress er et populært webtestværktøj, der kan bruges med Ionic-apps under udvikling, da Ionic-apps kører som moderne webapps i en browser. Dette giver nogle fordele:

• Fordele: Ingen enhedsspecifik konfiguration er påkrævet, og man kan direkte tilgå og manipulere applikationens tilstand for mere effektiv test.
• Begrænsninger: Da det er et web-only værktøj, kan man ikke direkte teste native enhedsfunktionalitet som kamera eller fingeraftryksgodkendelse.

For at gøre tests mobile i Cypress kan man konfigurere viewport-indstillingen. For mere granulær kontrol kan cy.viewport()-kommandoen bruges. Man kan også tilgå app-lagring (f.eks. Ionic Storage) for at styre appens tilstand, som at omgå en onboarding-tutorial. Simulering af mobiladfærd, som swipe-bevægelser, kan opnås ved at udløse mussebegivenheder som mousedown, mousemove og mouseup.

Konklusion

Ionic Testing er en uundværlig del af udviklingen af høj kvalitets Ionic-applikationer. Uanset om det gøres via cloud-baserede testautomatiseringsplatforme som Testsigma, lokal test, eller ved brug af frameworks som Jasmine, Karma, Protractor, Jest og Appium, tilbyder hver metode unikke fordele for at sikre, at din app fungerer fejlfrit på tværs af alle platforme.

Ionics proaktive indsats for at levere en reference-app og dedikerede hjælpeværktøjer til E2E-test med WebdriverIO og Appium, samt deres planer for et bibliotek, CLI-værktøj og en cloud-testplatform, understreger en forpligtelse til at forenkle og forbedre testoplevelsen for udviklere. Målet med Ionic Testing strækker sig ud over blot at finde fejl; det handler om at skabe en robust, brugervenlig og højtydende applikation, der skiller sig ud i det konkurrenceprægede digitale landskab.

Ved at omfavne disse teststrategier kan udviklere og teams bygge Ionic-applikationer, der ikke kun opfylder, men overgår brugerforventninger, hvilket sikrer både appens succes og en fremragende brugeroplevelse.

Ofte Stillede Spørgsmål

Hvilke værktøjer er bedst til Ionic test?

Valget af værktøjer afhænger af testtypen og projektets specifikke behov. Nogle af de bedste valg inkluderer:

• Testsigma: En førende skybaseret platform for end-to-end UI-automatisering, ideel til omfattende tværplatforms-test.
• Karma og Jasmine: Populære open source-frameworks for enheds- og integrationstest i Angular-baserede Ionic-apps.
• Protractor: Et E2E-testframework designet til Angular-apps, der kører tests i en rigtig browser og simulerer brugerinteraktioner.
• Jest: Et hurtigt og enkelt JavaScript-testframework, velegnet til Ionic-apps med fokus på JavaScript-udvikling.
• Appium: Et fremragende valg til tværplatforms-E2E-test på både iOS- og Android-enheder, der simulerer brugerinteraktioner.
• WebdriverIO: Et kraftfuldt JavaScript-testforfatningsbibliotek, der bruges sammen med Appium i Ionics anbefalede E2E-stack.
• Cypress: Kan bruges til test af Ionic-apps i browseren, men med begrænsninger for native enhedsfunktionalitet.

Hvad er forskellen mellem E2E og enhedstest?

Enhedstest (Unit Testing) fokuserer på at teste de mindste isolerbare dele af din kode, såsom individuelle funktioner eller komponenter, for at sikre, at de fungerer korrekt i isolation. Målet er at validere logikken i en specifik enhed uden eksterne afhængigheder. End-to-End (E2E) Test simulerer derimod en fuld brugeroplevelse ved at teste hele applikationsflowet fra start til slut, herunder interaktioner mellem forskellige komponenter, databaser, netværk og eksterne tjenester. E2E-test verificerer, at hele systemet fungerer som forventet fra brugerens perspektiv.

Kan jeg bruge Cypress til at teste Ionic apps?

Ja, du kan bruge Cypress til at teste Ionic-apps, især under udviklingen, da Ionic-apps kører som standard webapplikationer i en browser. Cypress er fremragende til at teste web-specifik funktionalitet, brugergrænseflade og brugerflows i browseren. Det er nemt at sætte op og giver hurtig feedback. Dog er der en vigtig begrænsning: Cypress kan ikke direkte teste native enhedsfunktionalitet (f.eks. kamera, GPS, fingeraftryksscanner) eller den specifikke opførsel af appen, når den er bygget som en ægte native app til iOS eller Android. Til fuld native og hybrid app-test er værktøjer som Appium og WebdriverIO mere velegnede, da de kan interagere med native komponenter og enhedens API'er.

Hvis du vil læse andre artikler, der ligner Forenklet Test af Ionic Apps: Din Komplette Guide, kan du besøge kategorien Mobil.