Visuell frontend-testning: En djupdykning i Chromatic- och Percy-integration

I dagens snabbrörliga webbutvecklingslandskap är det av största vikt att säkerställa ett konsekvent och visuellt tilltalande användargränssnitt (UI) över olika webbläsare, enheter och skärmstorlekar. Manuell UI-testning är dock tidskrävande, felbenägen och misslyckas ofta med att fånga subtila visuella regressioner. Det är här visuell frontend-testning kommer in, och erbjuder en kraftfull lösning för att automatisera UI-kontroller och upprätthålla visuell integritet under hela utvecklingslivscykeln. Denna omfattande guide utforskar två ledande visuella testplattformar: Chromatic och Percy, och beskriver deras integration, fördelar och bästa praxis för utvecklare över hela världen.

Förstå visuell frontend-testning

Visuell frontend-testning, även känd som visuell regressionstestning eller skärmdumpstestning, automatiserar processen att jämföra UI-skärmdumpar mot en baslinje för att upptäcka visuella förändringar. Det tillåter utvecklare att identifiera oväntade förändringar i UI orsakade av kodändringar, designuppdateringar eller webbläsaruppdateringar. Detta tillvägagångssätt minskar avsevärt risken för att släppa visuellt trasiga eller inkonsekventa användargränssnitt till användare, vilket i slutändan förbättrar användarupplevelsen.

Fördelarna med visuell testning

• Tidig feldetektering: Fångar visuella buggar tidigt i utvecklingscykeln, innan de når produktion.
• Förbättrad kodkvalitet: Uppmuntra utvecklare att skriva renare, mer underhållbar kod.
• Snabbare utvecklingscykler: Automatiserar testprocesser, vilket sparar tid och resurser.
• Förbättrad användarupplevelse: Säkerställer ett konsekvent och visuellt tilltalande UI över alla plattformar.
• Minskade manuella testinsatser: Frigör QA-team för att fokusera på mer komplexa testscenarier.
• Ökat förtroende för releaser: Ger större försäkran om att UI fungerar som förväntat.

Introduktion till Chromatic och Percy

Chromatic och Percy är ledande molnbaserade visuella testplattformar som effektiviserar den visuella testprocessen. Båda plattformarna erbjuder liknande funktioner, inklusive skärmdumpsgenerering, visuell jämförelse och integration med populära CI/CD-pipelines. De har dock också unika funktioner och styrkor. Låt oss fördjupa oss i varje plattform.

Chromatic

Chromatic, utvecklat av Storybook, är djupt integrerat med Storybook-ekosystemet. Storybook är ett kraftfullt verktyg för att bygga och dokumentera UI-komponenter isolerat. Chromatic utökar Storybooks kapacitet genom att tillhandahålla visuella test- och granskningsfunktioner. Det förenklar processen att testa UI-komponenter genom att tillåta utvecklare att ta skärmdumpar av komponenter i olika tillstånd och konfigurationer. Chromatic jämför sedan dessa skärmdumpar mot en baslinje och lyfter fram eventuella visuella skillnader.

Nyckelfunktioner i Chromatic:

• Tät Storybook-integration: Integreras sömlöst med Storybook för komponentdriven utveckling och testning.
• Automatisk skärmdumpsgenerering: Genererar automatiskt skärmdumpar av UI-komponenter i olika tillstånd.
• Visuell jämförelse: Jämför skärmdumpar mot en baslinje och lyfter fram visuella förändringar.
• Granskning och samarbete: Tillhandahåller ett samarbetsgränssnitt för att granska och godkänna visuella förändringar.
• CI/CD-integration: Integreras med populära CI/CD-pipelines, som Jenkins, CircleCI och GitHub Actions.
• Tillgänglighetstestning: Ger grundläggande tillgänglighetskontroller.

Percy

Percy, förvärvat av BrowserStack, är en mångsidig visuell testplattform som stöder olika testramverk och utvecklingsflöden. Det tillåter utvecklare att ta skärmdumpar av hela sidor, specifika komponenter eller till och med dynamiskt innehåll. Percys sofistikerade visuella jämförelsealgoritmer kan upptäcka även de minsta visuella avvikelserna. Det erbjuder en omfattande plattform för att hantera visuella regressioner och säkerställa UI-konsistens.

Nyckelfunktioner i Percy:

• Stöd för flera plattformar: Stöder olika testramverk, inklusive Jest, Cypress och Selenium.
• Skärmdumpsgenerering: Tar skärmdumpar av hela sidor, specifika komponenter och dynamiskt innehåll.
• Visuell jämförelse: Jämför skärmdumpar med hjälp av avancerade visuella jämförelsealgoritmer.
• Samarbete och granskning: Tillhandahåller ett samarbetsgränssnitt för att granska och godkänna visuella förändringar.
• CI/CD-integration: Integreras med populära CI/CD-pipelines.
• Responsiv designtestning: Stöder testning av responsiva designer över olika skärmstorlekar och enheter.
• Webbläsarkompatibilitetstestning: Testar mot olika webbläsare och versioner.

Konfigurera visuell testning med Chromatic

Låt oss gå igenom processen att konfigurera visuell testning med Chromatic, förutsatt att du har ett Storybook-projekt konfigurerat. Följande steg ger en allmän översikt; se den officiella Chromatic-dokumentationen för de senaste instruktionerna. Exemplet är baserat på en React- och Storybook-installation; liknande koncept gäller för andra ramverk.

Förutsättningar

• Ett Storybook-projekt konfigurerat med komponenter.
• Ett Chromatic-konto (gratis eller betalt).
• Node.js och npm eller yarn installerat.

Installation och konfiguration

1. Installera Chromatic CLI:

               npm install -g chromatic
               
   
                 
                   Copy
                 
               
             

2. Autentisera med Chromatic:

               chromatic login
               
   
                 
                   Copy
                 
               
             

   Detta kommer att uppmana dig att logga in på ditt Chromatic-konto. Det kommer sedan att konfigurera den nödvändiga konfigurationen.
3. Kör Chromatic:

               chromatic
               
   
                 
                   Copy
                 
               
             

   Chromatic kommer att bygga din Storybook och ladda upp den till Chromatic-plattformen. Den kommer sedan att ta skärmdumpar av dina komponenter och jämföra dem mot en baslinje.
4. Granska och godkänn ändringar: Chromatic kommer att tillhandahålla en länk till Chromatic-gränssnittet, där du kan granska eventuella visuella ändringar som upptäcks. Du kan sedan godkänna eller avvisa ändringarna.
5. Integrera med CI/CD: Integrera Chromatic i din CI/CD-pipeline (t.ex. GitHub Actions, GitLab CI) för automatiserad testning på varje pull request. Stegen varierar beroende på vilken CI/CD-tjänst du använder; se Chromatic-dokumentationen för detaljerade instruktioner. Till exempel, med GitHub-åtgärder kan du lägga till ett jobb i din arbetsflödesfil som kör Chromatic efter att dina bygg- och enhetstester har godkänts.

Exempel: Integrera Chromatic med GitHub Actions

Skapa en ny arbetsflödesfil (t.ex. .github/workflows/chromatic.yml) med följande innehåll (justera `CHROMATIC_PROJECT_TOKEN` till din projekttoken):

            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
              
            
          

Detta arbetsflöde kommer att utlösa Chromatic vid varje push och pull request till `main`-grenen. Kom ihåg att ersätta `CHROMATIC_PROJECT_TOKEN` med din faktiska Chromatic-projekttoken som lagras som en GitHub-hemlighet.

Konfigurera visuell testning med Percy

Att konfigurera visuell testning med Percy innebär liknande steg som Chromatic men fokuserar på integration med ditt befintliga testramverk. Här är en allmän guide, med specifika instruktioner beroende på ditt ramverk (t.ex. React med Jest, Vue med Cypress).

Förutsättningar

• Ett Percy-konto (gratis eller betalt).
• Ett testramverk (t.ex. Jest, Cypress, Selenium).
• Node.js och npm eller yarn installerat.

Installation och konfiguration

1. Installera Percy CLI:

               npm install -D @percy/cli
               
   
                 
                   Copy
                 
               
             

2. Autentisera med Percy: Skapa ett Percy-projekt inom Percy-plattformen och hämta projektets token. Du ställer in denna token som en miljövariabel (t.ex. `PERCY_TOKEN`) i din CI/CD-konfiguration.
3. Integrera Percy med ditt testramverk:

   Detta innebär att du lägger till Percy-kommandon i dina testskript. De exakta stegen varierar beroende på ditt testramverk. Till exempel, med Cypress, skulle du installera `@percy/cypress`-paketet och lägga till ett kommando för att ta Percy-ögonblicksbilder. Med Jest kommer du sannolikt att använda Percy API direkt eller en dedikerad adapter.

   Exempel med Cypress (i dina Cypress-tester - t.ex. cypress/integration/my_spec.js):

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

   I ovanstående Cypress-exempel tar cy.percySnapshot('Homepage') en skärmdump av sidans aktuella tillstånd och laddar upp den till Percy.

4. Konfigurera CI/CD-integration:

   Inom din CI/CD-konfiguration, se till att Percy körs efter att dina tester har slutförts. Du ställer vanligtvis in miljövariabeln `PERCY_TOKEN` och kör sedan Percy CLI-kommandot.

   Exempel med GitHub Actions (i din arbetsflödesfil):

               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. Granska och godkänn ändringar:

   Percy kommer att tillhandahålla en länk till sin plattform, där du kan granska de visuella skillnaderna och godkänna eller avvisa ändringarna.

Bästa praxis för visuell testning

Effektiv visuell testning kräver ett genomtänkt tillvägagångssätt. Här är några bästa praxis för att maximera dess fördelar:

1. Definiera tydliga baslinjer

Etablera en väldefinierad baslinje. Detta är det initiala tillståndet för ditt UI, mot vilket alla framtida skärmdumpar kommer att jämföras. Se till att denna baslinje korrekt återspeglar det önskade visuella utseendet på din applikation. Granska och uppdatera dina baslinjer regelbundet för att säkerställa att de är aktuella och återspeglar pågående designändringar.

2. Fokusera på kritiska UI-element

Prioritera testning av de mest kritiska UI-elementen och användarflödena. Detta inkluderar element som används ofta, har en betydande inverkan på användarupplevelsen eller är benägna att förändras. Känn inte behovet av att testa varje enskild pixel; fokusera på områden som är viktigast för dina användare.

3. Testa över olika miljöer

Testa ditt UI över en mängd olika miljöer, inklusive olika webbläsare (Chrome, Firefox, Safari, Edge, etc.), enheter (stationära datorer, surfplattor, smartphones) och skärmstorlekar. Detta hjälper till att säkerställa att ditt UI återges konsekvent över alla plattformar.

4. Hantera dynamiskt innehåll

Om ditt UI innehåller dynamiskt innehåll (t.ex. data som hämtas från API:er) måste du hantera detta noggrant. Överväg tekniker som att mocka API-svar för att skapa förutsägbar testdata eller använda deterministiska datamängder. Se till att du har en strategi för att konsekvent hantera dynamiskt innehåll över olika byggen.

5. Åtgärda opålitliga tester

Opålitliga tester är tester som klarar sig ibland och misslyckas andra gånger. Dessa kan vara en stor källa till frustration. Identifiera och åtgärda grundorsakerna till opålitliga tester. Detta kan innebära att du justerar dina testkonfigurationer, ökar tidsgränserna eller förbättrar tillförlitligheten för din testdata. Om ett test konsekvent misslyckas med att klara sig, investera tid i att felsöka och åtgärda problemet. Ignorera inte bara fel.

6. Integrera med CI/CD

Integrera din visuella testprocess i din CI/CD-pipeline. Detta gör att du automatiskt kan köra visuella tester vid varje kodändring, vilket säkerställer att eventuella visuella regressioner fångas tidigt i utvecklingscykeln. Automatisering är nyckeln till att spara tid och minska risken för mänskliga fel.

7. Använd en konsekvent testmiljö

Se till att din testmiljö är så konsekvent som möjligt med din produktionsmiljö. Detta inkluderar att använda samma webbläsare, operativsystem och teckensnitt. En konsekvent miljö kommer att förbättra noggrannheten i dina visuella jämförelser.

8. Dokumentera din teststrategi

Dokumentera din visuella teststrategi, inklusive vilka komponenter som testas, testmiljöerna och de förväntade resultaten. Denna dokumentation hjälper till att säkerställa att din testprocess är konsekvent och underhållbar över tid. Detta är särskilt viktigt för att introducera nya teammedlemmar eller när du gör betydande ändringar i ditt UI.

9. Prioritera tillgänglighet

Medan Chromatic och Percy erbjuder en viss nivå av tillgänglighetskontroll, prioritera tillgänglighetstestning. Integrera tillgänglighetskontroller i dina visuella tester för att säkerställa att ditt UI är tillgängligt för alla användare. Titta på WCAG-riktlinjerna.

10. Granska och uppdatera tester regelbundet

När ditt UI utvecklas, granska och uppdatera dina visuella tester regelbundet. Detta inkluderar att uppdatera baslinjer, lägga till nya tester för nya funktioner och ta bort tester för föråldrade komponenter. Detta säkerställer att dina tester fortsätter att ge värde.

Välja rätt plattform: Chromatic vs. Percy

Det bästa valet mellan Chromatic och Percy beror på dina specifika behov och projektkonfiguration:

Överväg Chromatic om:

• Du redan använder Storybook för komponentdriven utveckling.
• Du vill ha en tät integration med Storybooks funktioner.
• Du föredrar en strömlinjeformad installation och användarvänlighet, särskilt om du har en befintlig Storybook-installation.
• Du vill ha inbyggda tillgänglighetskontroller.

Överväg Percy om:

• Du använder ett testramverk annat än Storybook, som Jest, Cypress eller Selenium.
• Du behöver stöd för ett bredare utbud av testscenarier.
• Du behöver avancerade funktioner som responsiv designtestning eller webbläsarkompatibilitetstestning.
• Du föredrar en mer ramverksagnostisk lösning.

Både Chromatic och Percy är utmärkta val för visuell testning. Utvärdera plattformarna baserat på dina befintliga verktyg, projektkrav och teampreferenser. Överväg att börja med en gratis testperiod eller en gratis plan för att utvärdera funktionerna och kapaciteten. Många team använder till och med båda verktygen för olika delar av projektet.

Avancerade tekniker och integrationer

Utöver grunderna erbjuder visuella testplattformar avancerade tekniker för att tillgodose mer komplexa UI-scenarier och integrationer med andra utvecklingsverktyg.

1. Testa dynamiskt innehåll: Mocka API:er

En av de största utmaningarna inom visuell testning är att hantera dynamiskt innehåll. För att hantera detta, överväg att mocka API-svar för att säkerställa att testdata är förutsägbar. Detta gör att du kan ta konsekventa skärmdumpar och förhindra falska positiva eller negativa resultat orsakade av data som ständigt ändras. Använd verktyg som Mock Service Worker (MSW) eller Jests mock-funktionalitet för att mocka API-anrop.

2. Testa interaktiva UI-komponenter

För att testa interaktiva UI-komponenter (t.ex. rullgardinsmenyer, modaler) behöver du ofta simulera användarinteraktioner. Detta kan innebära att du programmatiskt utlöser händelser (t.ex. klick, hovringar, tangentbordsinmatningar) med hjälp av ditt testramverk. Verktyg som Cypress kan simulera användarbeteende mer direkt.

3. Integration av tillgänglighetstestning

Integrera tillgänglighetstestverktyg (t.ex. axe-core) inom dina visuella tester. Chrome och Percy kan ge grundläggande tillgänglighetskontroller; för mer avancerad testning, överväg att köra en tillgänglighetsrevision som en del av din testpipeline och integrera dessa resultat med dina visuella testresultat. Att göra detta hjälper till att säkerställa att ditt UI är tillgängligt för alla användare. Tillgänglighet handlar inte bara om att göra UI tillgängligt, utan om att säkerställa inkluderande design för användare med olika behov.

4. UI-komponentbibliotek

Visuell testning är särskilt användbar när du arbetar med UI-komponentbibliotek (t.ex. Material UI, Ant Design). Skapa visuella tester för varje komponent i ditt bibliotek för att säkerställa konsistens och förhindra visuella regressioner när du uppdaterar biblioteket eller integrerar det i dina projekt.

5. Integrera med designsystem

Om du använder ett designsystem, länka dina visuella tester till din designsystems dokumentation. Detta gör att du snabbt kan identifiera eventuella visuella inkonsekvenser mellan ditt UI och ditt designsystems specifikationer. Synkronisera UI-komponenterna med designsystemskomponenterna. Detta hjälper till att upprätthålla designkonsistens över dina produkter.

Tillgänglighetsöverväganden

Tillgänglighet bör vara en kärnkomponent i din visuella teststrategi. Medan Chromatic och Percy erbjuder några grundläggande tillgänglighetskontroller, bör du implementera omfattande tillgänglighetsrevisioner som en del av din testprocess.

1. Automatiserade verktyg för tillgänglighetstestning

Använd automatiserade verktyg för tillgänglighetstestning som Axe, Lighthouse eller Pa11y inom din CI/CD-pipeline. Dessa verktyg skannar ditt UI efter överträdelser av tillgänglighet och ger detaljerade rapporter om eventuella problem som hittas.

2. Manuell tillgänglighetstestning

Komplettera automatiserad testning med manuell testning. Utför manuella kontroller med skärmläsare (t.ex. JAWS, NVDA, VoiceOver), tangentbordsnavigering och färgkontrastanalysatorer för att identifiera eventuella problem som automatiserade verktyg kan missa. Överväg att anlita tillgänglighetskonsulter för att utföra fullständiga revisioner.

3. Kodgranskningar

Inkorporera tillgänglighetsgranskningar i din kodgranskningsprocess. Låt utvecklare granska varandras kod för tillgänglighetsproblem. Utbilda ditt team om bästa praxis för tillgänglighet och uppmuntra dem att vara uppmärksamma på tillgänglighet under hela utvecklingsprocessen.

Slutsats: Framtiden för visuell frontend-testning

Visuell frontend-testning är inte längre en lyx utan en nödvändighet för modern webbutveckling. Genom att integrera plattformar som Chromatic och Percy i ditt arbetsflöde kan du avsevärt förbättra kvaliteten, konsistensen och underhållbarheten för ditt UI. Användningen av visuella testplattformar förväntas växa i takt med att UI-komplexiteten ökar och efterfrågan på användarvänliga, responsiva och tillgängliga webbapplikationer fortsätter. Allt eftersom webben fortsätter att utvecklas kommer visuell testning att bli ännu viktigare i utvecklingsprocessen.

Genom att följa de bästa praxis som beskrivs i den här guiden och hålla dig uppdaterad med de senaste framstegen inom visuell testning kan du bygga en mer robust, tillförlitlig och visuellt tilltalande användarupplevelse för dina användare över hela världen. Utvärdera regelbundet din teststrategi, håll dig uppdaterad med nya verktyg och tekniker och anpassa dig till de ständigt föränderliga kraven i frontend-utvecklingslandskapet. Kontinuerlig förbättring är avgörande för fortsatt framgång inom visuell testning.