Frontend visuaalne testimine: Süvitsi Chromaticu ja Percy integratsioonis

Tänapäeva kiiresti arenevas veebiarenduse maastikus on erinevate brauserite, seadmete ja ekraanisuuruste vahel järjepideva ja visuaalselt atraktiivse kasutajaliidese (UI) tagamine ülioluline. Käsitsi UI testimine on aga aeganõudev, vigadele kalduv ja sageli ei suuda see tuvastada peeni visuaalseid regressioone. Siin tulebki appi frontend visuaalne testimine, pakkudes võimsat lahendust UI kontrollide automatiseerimiseks ja visuaalse terviklikkuse säilitamiseks kogu arendustsükli vältel. See põhjalik juhend uurib kahte juhtivat visuaalse testimise platvormi: Chromatic ja Percy, kirjeldades nende integratsiooni, eeliseid ja parimaid tavasid arendajatele kogu maailmas.

Frontend visuaalse testimise mõistmine

Frontend visuaalne testimine, tuntud ka kui visuaalne regressioonitestimine või ekraanipilditestimine, automatiseerib UI ekraanipiltide võrdlemise baasmääraga, et tuvastada visuaalseid muudatusi. See võimaldab arendajatel tuvastada ootamatuid muutusi UI-s, mis on põhjustatud koodimuudatustest, disainivärskendustest või brauserivärskendustest. See lähenemisviis vähendab oluliselt visuaalselt rikki läinud või ebajärjekindlate kasutajaliideste väljalaskmise riski kasutajatele, parandades lõppkokkuvõttes kasutajakogemust.

Visuaalse testimise eelised

• Varajane veatuvastus: Püüab kinni visuaalsed vead arendustsükli alguses, enne kui need jõuavad tootmisse.
• Parem koodikvaliteet: Julgustab arendajaid kirjutama puhtamat, paremini hooldatavat koodi.
• Kiiremad arendustsüklid: Automatiseerib testimisprotsesse, säästes aega ja ressursse.
• Täiustatud kasutajakogemus: Tagab järjepideva ja visuaalselt atraktiivse UI kõigil platvormidel.
• Vähendatud käsitsi testimise pingutused: Vabastab QA meeskonnad keskendumaks keerukamatele testimisskenaariumidele.
• Suurenenud kindlus väljalasetes: Pakub suuremat kindlust, et UI töötab ootuspäraselt.

Tutvustame Chromatict ja Percy

Chromatic ja Percy on juhtivad pilvepõhised visuaalse testimise platvormid, mis sujuvamaks muudavad visuaalse testimise protsessi. Mõlemad platvormid pakuvad sarnaseid funktsioone, sealhulgas ekraanipiltide loomist, visuaalset võrdlust ja integreerimist populaarsete CI/CD torujuhtmetega. Neil on aga ka unikaalseid funktsioone ja tugevusi. Sukeldume igasse platvormi.

Chromatic

Chromatic, mille on välja töötanud Storybook, on Storybooki ökosüsteemiga tihedalt integreeritud. Storybook on võimas tööriist UI komponentide isoleeritud loomiseks ja dokumenteerimiseks. Chromatic laiendab Storybooki võimalusi, pakkudes visuaalset testimist ja ülevaatuse funktsioone. See lihtsustab UI komponentide testimise protsessi, võimaldades arendajatel luua ekraanipilte komponentidest erinevates olekutes ja konfiguratsioonides. Chromatic võrdleb seejärel neid ekraanipilte baasmääraga, tõstes esile kõik visuaalsed erinevused.

Chromaticu peamised funktsioonid:

• Tihe Storybooki integratsioon: Integreerub sujuvalt Storybookiga komponentipõhise arenduse ja testimise jaoks.
• Automaatne ekraanipiltide loomine: Loob automaatselt UI komponentide ekraanipilte erinevates olekutes.
• Visuaalne võrdlus: Võrdleb ekraanipilte baasmääraga ja tõstab esile visuaalseid muudatusi.
• Ülevaatus ja koostöö: Pakub koostöökeskkonda visuaalsete muudatuste ülevaatamiseks ja heakskiitmiseks.
• CI/CD integratsioon: Integreerub populaarsete CI/CD torujuhtmetega, nagu Jenkins, CircleCI ja GitHub Actions.
• Ligipääsetavuse testimine: Pakub põhjalikke ligipääsetavuse kontrolle.

Percy

Percy, mille omandas BrowserStack, on mitmekülgne visuaalse testimise platvorm, mis toetab erinevaid testimisraamistikke ja arendustöövooge. See võimaldab arendajatel luua ekraanipilte kogu lehekülgedest, konkreetsetest komponentidest või isegi dünaamilisest sisust. Percy keerukad visuaalse võrdluse algoritmiga suudavad tuvastada isegi vähimaid visuaalseid erinevusi. See pakub terviklikku platvormi visuaalsete regressioonide haldamiseks ja UI järjepidevuse tagamiseks.

Percy peamised funktsioonid:

• Platvormideülene tugi: Toetab erinevaid testimisraamistikke, sealhulgas Jest, Cypress ja Selenium.
• Ekraanipiltide loomine: Loob ekraanipilte kogu lehekülgedest, konkreetsetest komponentidest ja dünaamilisest sisust.
• Visuaalne võrdlus: Võrdleb ekraanipilte, kasutades täiustatud visuaalse võrdluse algoritme.
• Koostöö ja ülevaatus: Pakub koostöökeskkonda visuaalsete muudatuste ülevaatamiseks ja heakskiitmiseks.
• CI/CD integratsioon: Integreerub populaarsete CI/CD torujuhtmetega.
• Responsiivse disaini testimine: Toetab responsiivsete disainide testimist erinevates ekraanisuurustes ja seadmetes.
• Brauseri ühilduvuse testimine: Testib erinevate brauserite ja versioonidega.

Visuaalse testimise seadistamine Chromaticuga

Vaatame läbi visuaalse testimise seadistamise Chromaticut kasutades, eeldades, et teil on olemas Storybooki projekt. Järgmised sammud annavad üldise ülevaate; kõige ajakohasema teabe saamiseks vaadake ametlikku Chromaticu dokumentatsiooni. Näide põhineb Reacti ja Storybooki seadistusel; sarnased kontseptsioonid kehtivad ka teiste raamistike kohta.

Eeltingimused

• Komponentidega häälestatud Storybooki projekt.
• Chromaticu konto (tasuta või tasuline).
• Node.js ja npm või yarn installitud.

Installimine ja konfigureerimine

1. Installige Chromatic CLI:

               npm install -g chromatic
               
   
                 
                   Copy
                 
               
             

2. Autentige Chromaticuga:

               chromatic login
               
   
                 
                   Copy
                 
               
             

   See käivitab teid sisse logima oma Chromaticu kontole. Seejärel konfigureeritakse vajalikud seaded.
3. Käivitage Chromatic:

               chromatic
               
   
                 
                   Copy
                 
               
             

   Chromatic ehitab teie Storybooki ja laadib selle üles Chromaticu platvormile. Seejärel tehakse teie komponentidest ekraanipildid ja võrreldakse neid baasmääraga.
4. Vaadake üle ja kiitke heaks muudatused: Chromatic pakub linki Chromaticu liidesele, kus saate ülevaate kõikidest tuvastatud visuaalsetest muudatustest. Seejärel saate muudatused heaks kiita või tagasi lükata.
5. Integreerige CI/CD-ga: Integreerige Chromatic oma CI/CD torujuhtmega (nt GitHub Actions, GitLab CI), et automaatselt testida iga pull requesti. Sammud erinevad sõltuvalt kasutatavast CI/CD teenusest; üksikasjalike juhiste saamiseks vaadake Chromaticu dokumentatsiooni. Näiteks GitHub Actions kasutades saate oma töövoo faili lisada töö, mis käitab Chromaticut pärast ehituse ja üksustestide läbimist.

Näide: Chromaticu integreerimine GitHub Actionsiga

Looge uus töövoo fail (nt .github/workflows/chromatic.yml) järgmise sisuga (kohandage `CHROMATIC_PROJECT_TOKEN` oma projektitokeniga):

            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 }} # Kasutage tokeni salvestamiseks salvestusruumi

            

              
                Copy
              
            
          

See töövoog käivitab Chromaticu iga `main` harusse tehtud pushi ja pull requesti korral. Ärge unustage asendada `CHROMATIC_PROJECT_TOKEN` oma tegeliku Chromaticu projektitokeniga, mis on salvestatud GitHubi salvestusruumi.

Visuaalse testimise seadistamine Perciga

Visuaalse testimise seadistamine Perciga hõlmab sarnaseid samme nagu Chromatic, kuid keskendub integratsioonile teie olemasoleva testimisraamistikuga. Siin on üldine juhend, mille üksikasjalikud juhised sõltuvad teie raamistikust (nt React koos Jestiga, Vue koos Cypressiga).

Eeltingimused

• Percy konto (tasuta või tasuline).
• Testimisraamistik (nt Jest, Cypress, Selenium).
• Node.js ja npm või yarn installitud.

Installimine ja konfigureerimine

1. Installige Percy CLI:

               npm install -D @percy/cli
               
   
                 
                   Copy
                 
               
             

2. Autentige Perciga: Looge Percy platvormil Percy projekt ja hankige oma projekti token. Saate selle tokeni oma CI/CD konfiguratsioonis keskkonnamuutujana (nt `PERCY_TOKEN`) määrata.
3. Integreerige Percy oma testimisraamistikuga:

   See hõlmab Percy käskude lisamist teie testiskriptidele. Täpsed sammud sõltuvad teie testimisraamistikust. Näiteks Cypressi puhul installiksite paketi `@percy/cypress` ja lisate käsu Percy pildisalvestiste tegemiseks. Jestiga kasutate tõenäoliselt otse Percy API-t või spetsiaalset adapterit.

   Näide Cypressi kasutamisel (teie Cypressi testides – nt cypress/integration/my_spec.js):

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

   Ülaltoodud Cypressi näites teeb `cy.percySnapshot('Homepage')` ekraanipildi lehe praegusest seisundist ja laadib selle Percisse üles.

4. Konfigureerige CI/CD integratsioon:

   Oma CI/CD konfiguratsioonis veenduge, et Percy käivitub pärast testide lõpetamist. Tavaliselt määrate keskkonnamuutujaks `PERCY_TOKEN` ja seejärel käivitate Percy CLI käsu.

   Näide GitHub Actionsi kasutamisel (teie töövoo failis):

               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 # Asenda oma testikäsuga
         - name: Percy Snapshot
           if: github.event_name == 'pull_request' # Käivita Percy ainult pull requestide korral
           run: |
             npx percy snapshot --token $PERCY_TOKEN
           env:
             PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}  # Kasutage GitHubi salvestusruumi
   
               
   
                 
                   Copy
                 
               
             

5. Vaadake üle ja kiitke heaks muudatused:

   Percy pakub linki oma platvormile, kus saate ülevaate visuaalsetest erinevustest ja kiita heaks või tagasi lükata muudatused.

Parimad tavad visuaalseks testimiseks

Tõhus visuaalne testimine nõuab läbimõeldud lähenemist. Siin on mõned parimad tavad selle eeliste maksimeerimiseks:

1. Määrake selged baasmäärad

Looge hästi määratletud baasmäär. See on teie UI algne olek, millega võrreldakse kõiki järgnevaid ekraanipilte. Veenduge, et see baasmäär peegeldab täpselt teie rakenduse soovitud visuaalset välimust. Vaadake regulaarselt üle ja värskendage oma baasmäärasid, et need oleksid ajakohased ja kajastaksid käimasolevaid disainimuudatusi.

2. Keskenduge kriitilistele UI elementidele

Prioriseerige kõige kriitilisemate UI elementide ja kasutajategevuste testimine. See hõlmab elemente, mida kasutatakse sageli, avaldavad olulist mõju kasutajakogemusele või on sageli muutuvad. Ei ole vaja iga piksli testimist; keskenduge valdkondadele, mis on teie kasutajate jaoks kõige olulisemad.

3. Testige erinevates keskkondades

Testige oma UI erinevates keskkondades, sealhulgas erinevates brauserites (Chrome, Firefox, Safari, Edge jne), seadmetes (lauaarvutid, tahvelarvutid, nutitelefonid) ja ekraanisuurustes. See aitab tagada, et teie UI renderdub kõigil platvormidel järjepidevalt.

4. Käsitlege dünaamilist sisu

Kui teie UI sisaldab dünaamilist sisu (nt API-dest saadud andmed), peate seda hoolikalt käsitlema. Kaaluge selliseid tehnikaid nagu API vastuste modelleerimine, et luua prognoositavaid testandmeid või kasutada deterministlikke andmekogumeid. Veenduge, et teil on strateegia dünaamilise sisu järjepidevaks haldamiseks erinevate ehituste vahel.

5. Lahendage ebastabiilseid teste

Ebastabiilsed testid on testid, mis läbivad mõnikord ja ebaõnnestuvad teinekord. Need võivad olla pettumuse peamiseks allikaks. Tuvastage ja lahendage ebastabiilsete testide algpõhjused. See võib hõlmata teie testimiskonfiguratsioonide kohandamist, tähtajade pikendamist või testandmete töökindluse parandamist. Kui test ebaõnnestub pidevalt, investeerige aega selle tõrkeotsingusse ja parandusse. Ärge lihtsalt ignoreerige ebaõnnestumisi.

6. Integreerige CI/CD-ga

Integreerige oma visuaalne testimisprotsess oma CI/CD torujuhtmega. See võimaldab teil automaatselt käivitada visuaalseid teste iga koodimuudatuse korral, tagades, et kõik visuaalsed regressioonid püüti kinni arendustsükli alguses. Automatiseerimine on aja säästmise ja inimlike vigade riski vähendamise võti.

7. Kasutage järjepidevat testimiskeskkonda

Veenduge, et teie testimiskeskkond on võimalikult järjepidev teie tootmiskeskkonnaga. See hõlmab samade brauserite, operatsioonisüsteemide ja fontide kasutamist. Järjepidev keskkond parandab teie visuaalsete võrdluste täpsust.

8. Dokumenteerige oma testimisstrateegia

Dokumenteerige oma visuaalne testimisstrateegia, sealhulgas, milliseid komponente testitakse, testimiskeskkondi ja oodatavaid tulemusi. See dokumentatsioon aitab tagada teie testimisprotsessi järjepidevuse ja hooldatavuse aja jooksul. See on eriti oluline uute meeskonnaliikmete tööle rakendamisel või teie UI oluliste muudatuste tegemisel.

9. Prioriseerige ligipääsetavust

Kuigi Chromatic ja Percy pakuvad teatud tasemel ligipääsetavuse kontrolle, prioriseerige ligipääsetavuse testimist. Integreerige ligipääsetavuse kontrollid oma visuaalsetesse testidesse, et tagada oma UI ligipääsetavus kõigile kasutajatele. Vaadake WCAG juhiseid.

10. Vaadake teste regulaarselt üle ja värskendage neid

Kuna teie UI areneb, vaadake regulaarselt üle ja värskendage oma visuaalseid teste. See hõlmab baasmäärade värskendamist, uute testide lisamist uute funktsioonide jaoks ja testide eemaldamist vananenud komponentide jaoks. See tagab, et teie testid jätkavad väärtuse pakkumist.

Õige platvormi valimine: Chromatic vs. Percy

Parim valik Chromaticu ja Percy vahel sõltub teie konkreetsetest vajadustest ja projekti seadistusest:

Kaaluge Chromaticut, kui:

• Kasutate juba Storybooki komponentipõhise arenduse jaoks.
• Soovite tihedat integratsiooni Storybooki funktsioonidega.
• Eelistate sujuvat seadistust ja kasutuslihtsust, eriti kui teil on olemasolev Storybooki seadistus.
• Soovite sisseehitatud ligipääsetavuse kontrolle.

Kaaluge Percyt, kui:

• Kasutate mõnda muud testimisraamistikku kui Storybook, näiteks Jest, Cypress või Selenium.
• Vajate tuge laiemale valikule testimisskenaariumeid.
• Nõutate täiustatud funktsioone, nagu responsiivse disaini testimine või brauseri ühilduvuse testimine.
• Eelistate raamistikust sõltumatumat lahendust.

Mõlemad Chromatic ja Percy on suurepärased valikud visuaalseks testimiseks. Hinnake platvorme oma olemasolevate tööriistade, projekti nõuete ja meeskonna eelistuste alusel. Kaaluge funktsioonide ja võimaluste hindamiseks tasuta prooviversiooni või tasuta plaani alustamist. Paljud meeskonnad kasutavad isegi mõlemat tööriista erinevate projektiosade jaoks.

Täiustatud tehnikad ja integratsioonid

Lisaks põhitõdedele pakuvad visuaalse testimise platvormid täiustatud tehnikaid keerukamatele UI-stseenidele ja integreerimiseks teiste arendustööriistadega.

1. Dünaamilise sisu testimine: API-de modelleerimine

Üks suurimaid väljakutseid visuaalses testimises on dünaamilise sisu haldamine. Selle käsitlemiseks kaaluge API vastuste modelleerimist, et tagada testandmete prognoositavus. See võimaldab teil luua järjepidevaid ekraanipilte ja vältida pidevalt muutuva andmete põhjustatud valepositiivseid või valenegatiivseid tulemusi. Kasutage API kutsete modelleerimiseks selliseid tööriistu nagu Mock Service Worker (MSW) või Jest'i modelleerimise funktsionaalsus.

2. Interaktiivsete UI komponentide testimine

Interaktiivsete UI komponentide (nt rippmenüüd, modiaalid) testimiseks peate sageli simuleerima kasutajategevusi. See võib hõlmata sündmuste (nt klõpsud, hõljumised, klahvivajutused) programmeerimist teie testimisraamistikku kasutades. Sellised tööriistad nagu Cypress võivad kasutajakäitumist otsesemalt simuleerida.

3. Ligipääsetavuse testimise integratsioon

Integreerige ligipääsetavuse testimise tööriistad (nt axe-core) oma visuaalsetesse testidesse. Chromatic ja Percy võivad pakkuda põhjalikke ligipääsetavuse kontrolle; põhjalikuma testimise jaoks kaaluge ligipääsetavuse auditi käitamist oma testimisprotsessi osana ja nende tulemuste integreerimist teie visuaalsete testide tulemustega. See aitab tagada teie UI ligipääsetavuse kõigile kasutajatele. Ligipääsetavus ei tähenda ainult UI ligipääsetavaks muutmist, vaid ka kaasava disaini tagamist erinevate vajadustega kasutajatele.

4. UI komponentide raamatukogud

Visuaalne testimine on eriti kasulik UI komponentide raamatukogudega (nt Material UI, Ant Design) töötamisel. Looge igale komponendile oma raamatukogus visuaalseid teste, et tagada järjepidevus ja vältida visuaalseid regressioone raamatukogu värskendamisel või selle oma projektidesse integreerimisel.

5. Integratsioon disainisüsteemidega

Kui kasutate disainisüsteemi, linkige oma visuaalsed testid oma disainisüsteemi dokumentatsiooniga. See võimaldab teil kiiresti tuvastada kõik visuaalsed ebajärjepidevused teie UI ja teie disainisüsteemi spetsifikatsioonide vahel. Sünkroonige UI komponendid disainisüsteemi komponentidega. See aitab säilitada disaini järjepidevust kõigis teie toodetes.

Ligipääsetavuse kaalutlused

Ligipääsetavus peaks olema teie visuaalse testimisstrateegia põhikomponent. Kuigi Chromatic ja Percy pakuvad mõningaid põhjalikke ligipääsetavuse kontrolle, peaksite oma testimisprotsessi osana rakendama põhjalikke ligipääsetavuse auditeid.

1. Automatiseeritud ligipääsetavuse testimise tööriistad

Kasutage oma CI/CD torujuhtmes automaatseid ligipääsetavuse testimise tööriistu nagu Axe, Lighthouse või Pa11y. Need tööriistad skaneerivad teie UI ligipääsetavuse rikkumiste osas ja pakuvad üksikasjalikke aruandeid kõigi leitud probleemide kohta.

2. Käsitsi ligipääsetavuse testimine

Täiendage automaatset testimist käsitsi testimisega. Tehke käsitsi kontrolle, kasutades ekraanilugejaid (nt JAWS, NVDA, VoiceOver), klaviatuuriga navigeerimist ja värvikontrastianalüsaatoreid, et tuvastada kõik probleemid, mida automaatika võib jätta. Kaaluge ligipääsetavuse konsultantide palkamist täielike auditite tegemiseks.

3. Koodi ülevaatused

Lisage ligipääsetavuse ülevaatused oma koodi ülevaatuse protsessi. Paluge arendajatel üksteise koodi ligipääsetavuse probleemide osas üle vaadata. Harige oma meeskonda ligipääsetavuse parimate tavade osas ja julgustage neid olema arendusprotsessi ajal teadlikud ligipääsetavusest.

Järeldus: Frontend visuaalse testimise tulevik

Frontend visuaalne testimine pole enam luksus, vaid tänapäevase veebiarenduse jaoks hädavajadus. Integreerides oma töövoogu selliseid platvorme nagu Chromatic ja Percy, saate oluliselt parandada oma UI kvaliteeti, järjepidevust ja hooldatavust. Visuaalse testimise platvormide kasutamine peaks kasvama, kuna UI keerukus suureneb ja nõudlus kasutajasõbralike, responsiivsete ja ligipääsetavate veebirakenduste järele jätkub. Kuna veeb areneb jätkuvalt, muutub visuaalne testimine arendusprotsessis veelgi kriitilisemaks.

Järgides selles juhendis välja toodud parimaid tavasid ja püsides kursis visuaalse testimise uusimate edusammudega, saate luua oma kasutajatele kogu maailmas robustsema, usaldusväärsema ja visuaalselt atraktiivsema kasutajakogemuse. Hinnake regulaarselt oma testimisstrateegiat, püsige kursis uute tööriistade ja tehnikatega ning kohanege frontend arenduse maastiku pidevalt muutuvate nõuetega. Pidev täiustamine on visuaalse testimise jätkuva edu jaoks hädavajalik.