Visuell Frontend-testing: En Dypdykk i Chromatic og Percy Integrasjon

I dagens fartsfylte webutviklingslandskap er det avgjørende å sikre et konsistent og visuelt tiltalende brukergrensesnitt (UI) på tvers av ulike nettlesere, enheter og skjermstørrelser. Manuell UI-testing er imidlertid tidkrevende, feilutsatt og klarer ofte ikke å fange opp subtile visuelle regresjoner. Det er her visuell frontend-testing kommer inn, og tilbyr en kraftig løsning for å automatisere UI-kontroller og opprettholde visuell integritet gjennom hele utviklingssyklusen. Denne omfattende guiden utforsker to ledende visuelle testplattformer: Chromatic og Percy, og beskriver deres integrasjon, fordeler og beste praksis for utviklere over hele verden.

Forstå Visuell Frontend-testing

Visuell frontend-testing, også kjent som visuell regresjonstesting eller skjermbildetesting, automatiserer prosessen med å sammenligne UI-skjermbilder mot en grunnlinje for å oppdage visuelle endringer. Det lar utviklere identifisere uventede endringer i brukergrensesnittet forårsaket av kodeendringer, designoppdateringer eller nettleseroppdateringer. Denne tilnærmingen reduserer risikoen for å frigjøre visuelt ødelagte eller inkonsistente brukergrensesnitt til brukere, og forbedrer dermed brukeropplevelsen.

Fordelene med Visuell Testing

• Tidlig Feildeteksjon: Fanger opp visuelle feil tidlig i utviklingssyklusen, før de når produksjon.
• Forbedret Kodekvalitet: Oppmuntrer utviklere til å skrive renere, mer vedlikeholdbar kode.
• Raskere Utviklingssykluser: Automatiserer testprosesser, og sparer tid og ressurser.
• Forbedret Brukeropplevelse: Sikrer et konsistent og visuelt tiltalende brukergrensesnitt på tvers av alle plattformer.
• Redusert Manuell Testing: Frigjør QA-team til å fokusere på mer komplekse testscenarier.
• Økt Tillit til Lanseringer: Gir større sikkerhet for at brukergrensesnittet fungerer som forventet.

Introduserer Chromatic og Percy

Chromatic og Percy er ledende skybaserte visuelle testplattformer som effektiviserer den visuelle testprosessen. Begge plattformene tilbyr lignende funksjonaliteter, inkludert skjermbildegenerering, visuell sammenligning og integrasjon med populære CI/CD-pipelines. De har imidlertid også unike funksjoner og styrker. La oss dykke ned i hver plattform.

Chromatic

Chromatic, utviklet av Storybook, er dypt integrert med Storybook-økosystemet. Storybook er et kraftig verktøy for å bygge og dokumentere UI-komponenter isolert. Chromatic utvider Storybooks funksjoner ved å tilby visuell testing og gjennomgangsfunksjoner. Det forenkler prosessen med å teste UI-komponenter ved å la utviklere ta skjermbilder av komponenter i forskjellige tilstander og konfigurasjoner. Chromatic sammenligner deretter disse skjermbildene mot en grunnlinje, og fremhever eventuelle visuelle forskjeller.

Nøkkelfunksjoner i Chromatic:

• Tett Storybook-integrasjon: Integreres sømløst med Storybook for komponentdrevet utvikling og testing.
• Automatisk Skjermbildegenerering: Genererer automatisk skjermbilder av UI-komponenter i forskjellige tilstander.
• Visuell Sammenligning: Sammenligner skjermbilder mot en grunnlinje og fremhever visuelle endringer.
• Gjennomgang og Samarbeid: Gir et samarbeidsgrensesnitt for å gjennomgå og godkjenne visuelle endringer.
• CI/CD-integrasjon: Integreres med populære CI/CD-pipelines, som Jenkins, CircleCI og GitHub Actions.
• Tilgjengelighetstesting: Gir grunnleggende tilgjengelighetskontroller.

Percy

Percy, anskaffet av BrowserStack, er en allsidig visuell testplattform som støtter ulike testrammeverk og utviklingsarbeidsflyter. Det lar utviklere ta skjermbilder av hele sider, spesifikke komponenter eller til og med dynamisk innhold. Percys sofistikerte visuelle sammenligningsalgoritmer kan oppdage selv de minste visuelle avvik. Det tilbyr en omfattende plattform for å administrere visuelle regresjoner og sikre UI-konsistens.

Nøkkelfunksjoner i Percy:

• Kryssplattformstøtte: Støtter ulike testrammeverk, inkludert Jest, Cypress og Selenium.
• Skjermbildegenerering: Tar skjermbilder av hele sider, spesifikke komponenter og dynamisk innhold.
• Visuell Sammenligning: Sammenligner skjermbilder ved hjelp av avanserte visuelle sammenligningsalgoritmer.
• Samarbeid og Gjennomgang: Gir et samarbeidsgrensesnitt for å gjennomgå og godkjenne visuelle endringer.
• CI/CD-integrasjon: Integreres med populære CI/CD-pipelines.
• Responsiv Designtesting: Støtter testing av responsive design på tvers av forskjellige skjermstørrelser og enheter.
• Nettleserkompatibilitetstesting: Tester mot forskjellige nettlesere og versjoner.

Sette Opp Visuell Testing med Chromatic

La oss gå gjennom prosessen med å sette opp visuell testing ved hjelp av Chromatic, forutsatt at du har et Storybook-prosjekt satt opp. Følgende trinn gir en generell oversikt; se den offisielle Chromatic-dokumentasjonen for de mest oppdaterte instruksjonene. Eksemplet er basert på et React og Storybook-oppsett; lignende konsepter gjelder for andre rammeverk.

Forutsetninger

• Et Storybook-prosjekt satt opp med komponenter.
• En Chromatic-konto (gratis eller betalt).
• Node.js og npm eller yarn installert.

Installasjon og Konfigurasjon

1. Installer Chromatic CLI:

               npm install -g chromatic
               
   
                 
                   Copy
                 
               
             

2. Autentiser med Chromatic:

               chromatic login
               
   
                 
                   Copy
                 
               
             

   Dette vil be deg om å logge inn på Chromatic-kontoen din. Den vil deretter sette opp den nødvendige konfigurasjonen.
3. Kjør Chromatic:

               chromatic
               
   
                 
                   Copy
                 
               
             

   Chromatic vil bygge Storybook og laste den opp til Chromatic-plattformen. Den vil deretter ta skjermbilder av komponentene dine og sammenligne dem mot en grunnlinje.
4. Gjennomgå og Godkjenn Endringer: Chromatic vil gi en lenke til Chromatic-grensesnittet, der du kan gjennomgå eventuelle visuelle endringer som er oppdaget. Du kan deretter godkjenne eller avvise endringene.
5. Integrer med CI/CD: Integrer Chromatic i din CI/CD-pipeline (f.eks. GitHub Actions, GitLab CI) for automatisert testing på hver pull request. Trinnene varierer basert på CI/CD-tjenesten du bruker; se Chromatic-dokumentasjonen for detaljerte instruksjoner. For eksempel, ved å bruke GitHub actions, kan du legge til en jobb i arbeidsflytfilen som kjører Chromatic etter at bygg- og enhetstestene dine er bestått.

Eksempel: Integrere Chromatic med GitHub Actions

Opprett en ny arbeidsflytfil (f.eks. .github/workflows/chromatic.yml) med følgende innhold (juster `CHROMATIC_PROJECT_TOKEN` til prosjekttokenet ditt):

            name: Chromatic

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  chromatic-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Publish to Chromatic
        run: |
          npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # Use a secret to store the token

            

              
                Copy
              
            
          

Denne arbeidsflyten vil utløse Chromatic på hver push og pull request til `main`-grenen. Husk å erstatte `CHROMATIC_PROJECT_TOKEN` med ditt faktiske Chromatic-prosjekttoken lagret som en GitHub-hemmelighet.

Sette Opp Visuell Testing med Percy

Å sette opp visuell testing med Percy innebærer lignende trinn som Chromatic, men fokuserer på integrasjon med ditt eksisterende testrammeverk. Her er en generell veiledning, med spesifikke instruksjoner avhengig av rammeverket ditt (f.eks. React med Jest, Vue med Cypress).

Forutsetninger

• En Percy-konto (gratis eller betalt).
• Et testrammeverk (f.eks. Jest, Cypress, Selenium).
• Node.js og npm eller yarn installert.

Installasjon og Konfigurasjon

1. Installer Percy CLI:

               npm install -D @percy/cli
               
   
                 
                   Copy
                 
               
             

2. Autentiser med Percy: Opprett et Percy-prosjekt i Percy-plattformen og skaff deg prosjektets token. Du vil sette dette tokenet som en miljøvariabel (f.eks. `PERCY_TOKEN`) i CI/CD-konfigurasjonen din.
3. Integrer Percy med testrammeverket ditt:

   Dette innebærer å legge til Percy-kommandoer i testskriptene dine. De nøyaktige trinnene varierer avhengig av testrammeverket ditt. For eksempel, med Cypress, vil du installere `@percy/cypress`-pakken og legge til en kommando for å ta Percy-snapshots. Med Jest vil du sannsynligvis bruke Percy API direkte eller en dedikert adapter.

   Eksempel ved bruk av Cypress (i Cypress-testene dine - f.eks. cypress/integration/my_spec.js):

               it('should render the homepage', () => {
     cy.visit('/');
     cy.percySnapshot('Homepage');
   });
               
   
                 
                   Copy
                 
               
             

   I Cypress-eksemplet ovenfor tar cy.percySnapshot('Homepage') et skjermbilde av gjeldende tilstand på siden og laster det opp til Percy.

4. Konfigurer CI/CD-integrasjon:

   I CI/CD-konfigurasjonen din må du sørge for at Percy kjører etter at testene dine er fullført. Du vil vanligvis sette miljøvariabelen `PERCY_TOKEN` og deretter kjøre Percy CLI-kommandoen.

   Eksempel ved bruk av en GitHub Actions (i arbeidsflytfilen din):

               jobs:
     test:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
         - name: Set up Node.js
           uses: actions/setup-node@v3
           with:
             node-version: 18
         - name: Install dependencies
           run: npm ci
         - name: Run tests
           run: npm test # Replace with your test command
         - name: Percy Snapshot
           if: github.event_name == 'pull_request' # Only run Percy on pull requests
           run: |
             npx percy snapshot --token $PERCY_TOKEN
           env:
             PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}  # Use a GitHub secret
   
               
   
                 
                   Copy
                 
               
             

5. Gjennomgå og Godkjenn Endringer:

   Percy vil gi en lenke til plattformen sin, der du kan gjennomgå de visuelle forskjellene og godkjenne eller avvise endringene.

Beste Praksis for Visuell Testing

Effektiv visuell testing krever en gjennomtenkt tilnærming. Her er noen beste fremgangsmåter for å maksimere fordelene:

1. Definer Klare Grunnlinjer

Etabler en veldefinert grunnlinje. Dette er den opprinnelige tilstanden til brukergrensesnittet ditt, som alle fremtidige skjermbilder vil bli sammenlignet med. Forsikre deg om at denne grunnlinjen nøyaktig gjenspeiler det ønskede visuelle utseendet til applikasjonen din. Gjennomgå og oppdater grunnlinjene dine regelmessig for å sikre at de er oppdaterte og gjenspeiler pågående designendringer.

2. Fokuser på Kritiske UI-elementer

Prioriter testing av de mest kritiske UI-elementene og brukerflytene. Dette inkluderer elementer som brukes hyppig, har en betydelig innvirkning på brukeropplevelsen eller er utsatt for endringer. Ikke føl behovet for å teste hver eneste piksel; fokuser på områder som betyr mest for brukerne dine.

3. Test på Tvers av Ulike Miljøer

Test brukergrensesnittet ditt på tvers av en rekke miljøer, inkludert forskjellige nettlesere (Chrome, Firefox, Safari, Edge osv.), enheter (stasjonære, nettbrett, smarttelefoner) og skjermstørrelser. Dette vil bidra til å sikre at brukergrensesnittet ditt gjengis konsekvent på tvers av alle plattformer.

4. Håndter Dynamisk Innhold

Hvis brukergrensesnittet ditt inneholder dynamisk innhold (f.eks. data hentet fra APIer), må du håndtere dette nøye. Vurder teknikker som å spotte API-svar for å lage forutsigbare testdata eller bruke deterministiske datasett. Sørg for at du har en strategi for å administrere dynamisk innhold konsekvent på tvers av forskjellige bygg.

5. Adresser Ustabil Tester

Ustabil tester er tester som består noen ganger og mislykkes andre ganger. Disse kan være en stor kilde til frustrasjon. Identifiser og adresser de underliggende årsakene til ustabile tester. Dette kan innebære å justere testkonfigurasjonene dine, øke tidsavbrudd eller forbedre påliteligheten til testdataene dine. Hvis en test konsekvent ikke består, invester tid i å feilsøke og fikse problemet. Ikke bare ignorer feil.

6. Integrer med CI/CD

Integrer den visuelle testprosessen din i CI/CD-pipelinen din. Dette lar deg automatisk kjøre visuelle tester på hver kodeendring, og sikrer at eventuelle visuelle regresjoner fanges opp tidlig i utviklingssyklusen. Automatisering er nøkkelen til å spare tid og redusere risikoen for menneskelige feil.

7. Bruk et Konsistent Testmiljø

Sørg for at testmiljøet ditt er så konsistent som mulig med produksjonsmiljøet ditt. Dette inkluderer bruk av de samme nettleserne, operativsystemene og skriftene. Et konsistent miljø vil forbedre nøyaktigheten av de visuelle sammenligningene dine.

8. Dokumenter Teststrategien Din

Dokumenter teststrategien din, inkludert hvilke komponenter som testes, testmiljøene og de forventede resultatene. Denne dokumentasjonen vil bidra til å sikre at testprosessen din er konsistent og vedlikeholdbar over tid. Dette er spesielt viktig for å introdusere nye teammedlemmer eller når du gjør betydelige endringer i brukergrensesnittet.

9. Prioriter Tilgjengelighet

Mens Chromatic og Percy tilbyr et visst nivå av tilgjengelighetskontroll, prioriter tilgjengelighetstesting. Integrer tilgjengelighetskontroller i de visuelle testene dine for å sikre at brukergrensesnittet ditt er tilgjengelig for alle brukere. Se på WCAG-retningslinjene.

10. Gjennomgå og Oppdater Tester Regelmessig

Etter hvert som brukergrensesnittet ditt utvikler seg, må du regelmessig gjennomgå og oppdatere de visuelle testene dine. Dette inkluderer å oppdatere grunnlinjer, legge til nye tester for nye funksjoner og fjerne tester for utdaterte komponenter. Dette sikrer at testene dine fortsetter å gi verdi.

Velge Riktig Plattform: Chromatic vs. Percy

Det beste valget mellom Chromatic og Percy avhenger av dine spesifikke behov og prosjektoppsett:

Vurder Chromatic hvis:

• Du allerede bruker Storybook for komponentdrevet utvikling.
• Du vil ha en tett integrasjon med Storybooks funksjoner.
• Du foretrekker et strømlinjeformet oppsett og brukervennlighet, spesielt hvis du har et eksisterende Storybook-oppsett.
• Du vil ha innebygde tilgjengelighetskontroller.

Vurder Percy hvis:

• Du bruker et testrammeverk annet enn Storybook, for eksempel Jest, Cypress eller Selenium.
• Du trenger støtte for et bredere spekter av testscenarier.
• Du trenger avanserte funksjoner som responsiv designtesting eller nettleserkompatibilitetstesting.
• Du foretrekker en mer rammeverksagnostisk løsning.

Både Chromatic og Percy er utmerkede valg for visuell testing. Evaluer plattformene basert på dine eksisterende verktøy, prosjektkrav og teampreferanser. Vurder å starte med en gratis prøveperiode eller gratis plan for å evaluere funksjonene og mulighetene. Mange team bruker til og med begge verktøyene for forskjellige deler av prosjektet.

Avanserte Teknikker og Integrasjoner

Utover det grunnleggende tilbyr visuelle testplattformer avanserte teknikker for å imøtekomme mer komplekse UI-scenarier og integrasjoner med andre utviklingsverktøy.

1. Testing av Dynamisk Innhold: Spotting av APIer

En av de største utfordringene med visuell testing er å administrere dynamisk innhold. For å håndtere dette, vurder å spotte API-svar for å sikre at testdataene er forutsigbare. Dette lar deg ta konsistente skjermbilder og forhindre falske positiver eller negativer forårsaket av data som endres kontinuerlig. Utnytt verktøy som Mock Service Worker (MSW) eller Jests spottefunksjonalitet for å spotte API-kall.

2. Testing av Interaktive UI-komponenter

For testing av interaktive UI-komponenter (f.eks. nedtrekksmenyer, modaler), må du ofte simulere brukerinteraksjoner. Dette kan innebære å utløse hendelser programmatisk (f.eks. klikk, svever, tastaturinndata) ved hjelp av testrammeverket ditt. Verktøy som Cypress kan simulere brukeratferd mer direkte.

3. Tilgjengelighetstesting Integrasjon

Integrer tilgjengelighetstestingsverktøy (f.eks. axe-core) i de visuelle testene dine. Chrome og Percy kan gi grunnleggende tilgjengelighetskontroller; for mer avansert testing, vurder å kjøre en tilgjengelighetsrevisjon som en del av testpipelinen din og integrere disse resultatene med de visuelle testresultatene dine. Å gjøre dette vil bidra til å sikre at brukergrensesnittet ditt er tilgjengelig for alle brukere. Tilgjengelighet handler ikke bare om å gjøre brukergrensesnittet tilgjengelig, men å sikre inkluderende design for brukere med ulike behov.

4. UI-komponentbiblioteker

Visuell testing er spesielt nyttig når du arbeider med UI-komponentbiblioteker (f.eks. Material UI, Ant Design). Opprett visuelle tester for hver komponent i biblioteket ditt for å sikre konsistens og forhindre visuelle regresjoner når du oppdaterer biblioteket eller integrerer det i prosjektene dine.

5. Integrering med Designsystemer

Hvis du bruker et designsystem, koble de visuelle testene dine til designsystemdokumentasjonen din. Dette lar deg raskt identifisere eventuelle visuelle uoverensstemmelser mellom brukergrensesnittet ditt og designsystemets spesifikasjoner. Synkroniser UI-komponentene med designsystemkomponentene. Dette vil bidra til å opprettholde designkonsistens på tvers av produktene dine.

Tilgjengelighetshensyn

Tilgjengelighet bør være en kjernekomponent i din visuelle teststrategi. Mens Chromatic og Percy tilbyr noen grunnleggende tilgjengelighetskontroller, bør du implementere omfattende tilgjengelighetsrevisjoner som en del av testprosessen din.

1. Automatiserte Tilgjengelighetstestingsverktøy

Bruk automatiserte tilgjengelighetstestingsverktøy som Axe, Lighthouse eller Pa11y i CI/CD-pipelinen din. Disse verktøyene skanner brukergrensesnittet ditt for brudd på tilgjengelighet og gir detaljerte rapporter om eventuelle problemer som er funnet.

2. Manuell Tilgjengelighetstesting

Suppler automatisert testing med manuell testing. Utfør manuelle kontroller ved hjelp av skjermlesere (f.eks. JAWS, NVDA, VoiceOver), tastaturnavigering og fargekontrastanalysatorer for å identifisere eventuelle problemer som automatiserte verktøy kan gå glipp av. Vurder å ansette tilgjengelighetskonsulenter for å utføre fullstendige revisjoner.

3. Kodegjennomganger

Inkluder tilgjengelighetsgjennomganger i kodegjennomgangsprosessen din. La utviklere gjennomgå hverandres kode for tilgjengelighetsproblemer. Utdann teamet ditt om beste praksis for tilgjengelighet, og oppmuntre dem til å være oppmerksomme på tilgjengelighet gjennom hele utviklingsprosessen.

Konklusjon: Fremtiden for Visuell Frontend-testing

Visuell frontend-testing er ikke lenger en luksus, men en nødvendighet for moderne webutvikling. Ved å integrere plattformer som Chromatic og Percy i arbeidsflyten din, kan du betydelig forbedre kvaliteten, konsistensen og vedlikeholdbarheten til brukergrensesnittet ditt. Bruken av visuelle testplattformer er satt til å vokse etter hvert som UI-kompleksiteten øker og etterspørselen etter brukervennlige, responsive og tilgjengelige webapplikasjoner fortsetter. Etter hvert som nettet fortsetter å utvikle seg, vil visuell testing bli enda viktigere i utviklingsprosessen.

Ved å følge de beste fremgangsmåtene som er skissert i denne guiden og holde deg oppdatert med de siste fremskrittene innen visuell testing, kan du bygge en mer robust, pålitelig og visuelt tiltalende brukeropplevelse for brukerne dine over hele verden. Vurder teststrategien din regelmessig, hold deg oppdatert med nye verktøy og teknikker, og tilpass deg de stadig skiftende kravene i frontend-utviklingslandskapet. Kontinuerlig forbedring er avgjørende for fortsatt suksess innen visuell testing.