Priekšgala vizuālā testēšana: padziļināta izpēte par Chromatic un Percy integrāciju

Mūsdienu strauji mainīgajā tīmekļa izstrādes ainavā ir ārkārtīgi svarīgi nodrošināt konsekventu un vizuāli pievilcīgu lietotāja saskarni (UI) dažādās pārlūkprogrammās, ierīcēs un ekrāna izmēros. Tomēr manuāla UI testēšana ir laikietilpīga, kļūdaina un bieži vien nespēj atklāt smalkas vizuālās regresijas. Šeit nāk talkā priekšgala vizuālā testēšana, piedāvājot spēcīgu risinājumu, lai automatizētu UI pārbaudes un uzturētu vizuālo integritāti visā izstrādes dzīves ciklā. Šis visaptverošais ceļvedis pēta divas vadošās vizuālās testēšanas platformas: Chromatic un Percy, detalizēti aprakstot to integrāciju, priekšrocības un labāko praksi izstrādātājiem visā pasaulē.

Izpratne par priekšgala vizuālo testēšanu

Priekšgala vizuālā testēšana, kas pazīstama arī kā vizuālās regresijas testēšana vai ekrānuzņēmumu testēšana, automatizē procesu, kurā UI ekrānuzņēmumi tiek salīdzināti ar pamatu, lai noteiktu vizuālās izmaiņas. Tas ļauj izstrādātājiem identificēt neparedzētas izmaiņas UI, ko izraisa koda modifikācijas, dizaina atjauninājumi vai pārlūkprogrammu atjauninājumi. Šī pieeja būtiski samazina risku lietotājiem izlaist vizuāli bojātas vai nekonsekventas lietotāja saskarnes, galu galā uzlabojot lietotāja pieredzi.

Vizuālās testēšanas priekšrocības

• Agrīna kļūdu noteikšana: Atklāj vizuālās kļūdas agrīnā izstrādes ciklā, pirms tās sasniedz ražošanu.
• Uzlabota koda kvalitāte: Rosina izstrādātājus rakstīt tīrāku, vieglāk uzturamu kodu.
• Ātrāki izstrādes cikli: Automatizē testēšanas procesus, ietaupot laiku un resursus.
• Uzlabota lietotāja pieredze: Nodrošina konsekventu un vizuāli pievilcīgu UI visās platformās.
• Samazināts manuālās testēšanas apjoms: Atbrīvo kvalitātes nodrošināšanas komandas, lai tās varētu koncentrēties uz sarežģītākiem testēšanas scenārijiem.
• Palielināta paļāvība uz laidieniem: Nodrošina lielāku pārliecību, ka UI darbojas, kā paredzēts.

Iepazīstinām ar Chromatic un Percy

Chromatic un Percy ir vadošās mākoņdatošanas vizuālās testēšanas platformas, kas racionalizē vizuālās testēšanas procesu. Abas platformas piedāvā līdzīgas funkcionalitātes, tostarp ekrānuzņēmumu ģenerēšanu, vizuālo salīdzināšanu un integrāciju ar populārām CI/CD konveijeriem. Tomēr tām ir arī unikālas funkcijas un stiprās puses. Iedziļināsimies katrā platformā.

Chromatic

Chromatic, ko izstrādājis Storybook, ir cieši integrēts Storybook ekosistēmā. Storybook ir spēcīgs rīks UI komponentu veidošanai un dokumentēšanai izolēti. Chromatic paplašina Storybook iespējas, nodrošinot vizuālās testēšanas un pārskatīšanas funkcijas. Tas vienkāršo UI komponentu testēšanas procesu, ļaujot izstrādātājiem uzņemt komponentu ekrānuzņēmumus dažādos stāvokļos un konfigurācijās. Pēc tam Chromatic salīdzina šos ekrānuzņēmumus ar pamatu, izceļot visas vizuālās atšķirības.

Galvenās Chromatic funkcijas:

• Cieša Storybook integrācija: Nevainojami integrējas ar Storybook komponentu vadītai izstrādei un testēšanai.
• Automātiska ekrānuzņēmumu ģenerēšana: Automātiski ģenerē UI komponentu ekrānuzņēmumus dažādos stāvokļos.
• Vizuālā salīdzināšana: Salīdzina ekrānuzņēmumus ar pamatu un izceļ vizuālās izmaiņas.
• Pārskatīšana un sadarbība: Nodrošina sadarbības saskarni vizuālo izmaiņu pārskatīšanai un apstiprināšanai.
• CI/CD integrācija: Integrējas ar populārām CI/CD konveijeriem, piemēram, Jenkins, CircleCI un GitHub Actions.
• Pieejamības testēšana: Nodrošina pamata pieejamības pārbaudes.

Percy

Percy, ko iegādājies BrowserStack, ir daudzpusīga vizuālās testēšanas platforma, kas atbalsta dažādas testēšanas ietvarus un izstrādes darbplūsmas. Tā ļauj izstrādātājiem uzņemt visu lapu, konkrētu komponentu vai pat dinamiska satura ekrānuzņēmumus. Percy sarežģītie vizuālās salīdzināšanas algoritmi spēj noteikt pat vismazākās vizuālās neatbilstības. Tā piedāvā visaptverošu platformu vizuālo regresiju pārvaldībai un UI konsekvences nodrošināšanai.

Galvenās Percy funkcijas:

• Starpplatformu atbalsts: Atbalsta dažādas testēšanas ietvarus, tostarp Jest, Cypress un Selenium.
• Ekrānuzņēmumu ģenerēšana: Uzņem visu lapu, konkrētu komponentu un dinamiska satura ekrānuzņēmumus.
• Vizuālā salīdzināšana: Salīdzina ekrānuzņēmumus, izmantojot uzlabotus vizuālās salīdzināšanas algoritmus.
• Sadarbība un pārskatīšana: Nodrošina sadarbības saskarni vizuālo izmaiņu pārskatīšanai un apstiprināšanai.
• CI/CD integrācija: Integrējas ar populārām CI/CD konveijeriem.
• Responsīvā dizaina testēšana: Atbalsta responsīvā dizaina testēšanu dažādos ekrāna izmēros un ierīcēs.
• Pārlūkprogrammas saderības testēšana: Testē pret dažādām pārlūkprogramām un versijām.

Vizuālās testēšanas iestatīšana ar Chromatic

Iziesim cauri vizuālās testēšanas iestatīšanas procesam, izmantojot Chromatic, pieņemot, ka jums ir iestatīts Storybook projekts. Šīs darbības sniedz vispārīgu pārskatu; jaunākās instrukcijas meklējiet oficiālajā Chromatic dokumentācijā. Piemērs ir balstīts uz React un Storybook iestatīšanu; līdzīgi koncepti attiecas arī uz citiem ietvariem.

Priekšnoteikumi

• Storybook projekts ar iestatītiem komponentiem.
• Chromatic konts (bezmaksas vai maksas).
• Instalēts Node.js un npm vai yarn.

Instalācija un konfigurācija

1. Instalējiet Chromatic CLI:

               npm install -g chromatic
               
   
                 
                   Copy
                 
               
             

2. Autentificēties ar Chromatic:

               chromatic login
               
   
                 
                   Copy
                 
               
             

   Tas liks jums pieteikties savā Chromatic kontā. Pēc tam tiks iestatīta nepieciešamā konfigurācija.
3. Palaidiet Chromatic:

               chromatic
               
   
                 
                   Copy
                 
               
             

   Chromatic izveidos jūsu Storybook un augšupielādēs to Chromatic platformā. Pēc tam tas uzņems jūsu komponentu ekrānuzņēmumus un salīdzinās tos ar pamatu.
4. Pārskatiet un apstipriniet izmaiņas: Chromatic nodrošinās saiti uz Chromatic saskarni, kurā varat pārskatīt visas konstatētās vizuālās izmaiņas. Pēc tam varat apstiprināt vai noraidīt izmaiņas.
5. Integrēt ar CI/CD: Integrējiet Chromatic savā CI/CD konveijerī (piemēram, GitHub Actions, GitLab CI) automatizētai testēšanai katrā "pull request". Darbības atšķiras atkarībā no izmantotā CI/CD pakalpojuma; detalizētas instrukcijas skatiet Chromatic dokumentācijā. Piemēram, izmantojot GitHub darbības, savam darbplūsmas failam varat pievienot uzdevumu, kas palaiž Chromatic pēc tam, kad jūsu būvējums un vienību testi ir veiksmīgi pabeigti.

Piemērs: Chromatic integrēšana ar GitHub Actions

Izveidojiet jaunu darbplūsmas failu (piemēram, .github/workflows/chromatic.yml) ar šādu saturu (pielāgojiet `CHROMATIC_PROJECT_TOKEN` savam projekta marķierim):

            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
              
            
          

Šī darbplūsma iedarbinās Chromatic katrā “push” un “pull request” uz `main` zaru. Atcerieties aizstāt `CHROMATIC_PROJECT_TOKEN` ar savu faktisko Chromatic projekta marķieri, kas saglabāts kā GitHub slepenais atslēga.

Vizuālās testēšanas iestatīšana ar Percy

Vizuālās testēšanas iestatīšana ar Percy ietver līdzīgas darbības kā ar Chromatic, taču koncentrējas uz integrāciju ar jūsu esošo testēšanas ietvaru. Šeit ir vispārīgs ceļvedis, ar konkrētām instrukcijām, kas atkarīgas no jūsu ietvara (piemēram, React ar Jest, Vue ar Cypress).

Priekšnoteikumi

• Percy konts (bezmaksas vai maksas).
• Testēšanas ietvars (piemēram, Jest, Cypress, Selenium).
• Instalēts Node.js un npm vai yarn.

Instalācija un konfigurācija

1. Instalējiet Percy CLI:

               npm install -D @percy/cli
               
   
                 
                   Copy
                 
               
             

2. Autentificēties ar Percy: Izveidojiet Percy projektu Percy platformā un iegūstiet sava projekta marķieri. Šo marķieri iestatīsit kā vides mainīgo (piemēram, `PERCY_TOKEN`) savā CI/CD konfigurācijā.
3. Integrējiet Percy ar savu testēšanas ietvaru:

   Tas ietver Percy komandu pievienošanu jūsu testa skriptiem. Precīzas darbības atšķiras atkarībā no jūsu testēšanas ietvara. Piemēram, ar Cypress, jūs instalētu `@percy/cypress` pakotni un pievienotu komandu, lai uzņemtu Percy momentuzņēmumus. Ar Jest, jūs, visticamāk, izmantosiet Percy API tieši vai specializētu adapteri.

   Piemērs, izmantojot Cypress (jūsu Cypress testos - piemēram, cypress/integration/my_spec.js):

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

   Iepriekš minētajā Cypress piemērā cy.percySnapshot('Homepage') uzņem lapas pašreizējā stāvokļa ekrānuzņēmumu un augšupielādē to Percy.

4. Konfigurējiet CI/CD integrāciju:

   Jūsu CI/CD konfigurācijā pārliecinieties, ka Percy darbojas pēc jūsu testu pabeigšanas. Jūs parasti iestatīsit `PERCY_TOKEN` vides mainīgo un pēc tam palaidīsit Percy CLI komandu.

   Piemērs, izmantojot GitHub Actions (jūsu darbplūsmas failā):

               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. Pārskatiet un apstipriniet izmaiņas:

   Percy nodrošinās saiti uz savu platformu, kurā varat pārskatīt vizuālās atšķirības un apstiprināt vai noraidīt izmaiņas.

Labākā prakse vizuālajā testēšanā

Efektīvai vizuālajai testēšanai nepieciešama pārdomāta pieeja. Šeit ir dažas labākās prakses, lai maksimāli palielinātu tās ieguvumus:

1. Definējiet skaidrus pamatus

Izveidojiet labi definētu pamatu. Tas ir jūsu UI sākotnējais stāvoklis, ar kuru tiks salīdzināti visi nākamie ekrānuzņēmumi. Pārliecinieties, ka šis pamats precīzi atspoguļo jūsu lietojumprogrammas vēlamo vizuālo izskatu. Regulāri pārskatiet un atjauniniet savus pamatus, lai nodrošinātu, ka tie ir aktuāli un atspoguļo notiekošās dizaina izmaiņas.

2. Koncentrējieties uz kritiskajiem UI elementiem

Prioritāti piešķiriet kritiskāko UI elementu un lietotāju plūsmu testēšanai. Tas ietver bieži izmantotus elementus, kas būtiski ietekmē lietotāja pieredzi vai ir pakļauti izmaiņām. Neuzskatiet, ka ir jāpārbauda katrs pikselis; koncentrējieties uz jomām, kas jūsu lietotājiem ir vissvarīgākās.

3. Testēšana dažādās vidēs

Testējiet savu UI dažādās vidēs, tostarp dažādās pārlūkprogrammās (Chrome, Firefox, Safari, Edge utt.), ierīcēs (galddatori, planšetdatori, viedtālruņi) un ekrāna izmēros. Tas palīdzēs nodrošināt, ka jūsu UI tiek attēlots konsekventi visās platformās.

4. Dinamiskā satura apstrāde

Ja jūsu UI satur dinamisku saturu (piemēram, datus, kas iegūti no API), jums tas būs rūpīgi jāapstrādā. Apsveriet tādas metodes kā API atbilžu izsmiešana, lai izveidotu paredzamus testa datus, vai deterministisku datu kopu izmantošana. Pārliecinieties, ka jums ir stratēģija dinamiskā satura konsekventai pārvaldībai dažādās versijās.

5. Nestabilo testu novēršana

Nestabilie testi ir testi, kas dažreiz izdodas un dažreiz neizdodas. Tie var būt liels frustrācijas avots. Identificējiet un novērsiet nestabilo testu pamatcēloņus. Tas var ietvert testēšanas konfigurāciju pielāgošanu, taimautu palielināšanu vai testa datu uzticamības uzlabošanu. Ja tests konsekventi neizdodas, veltiet laiku problēmas atkļūdošanai un novēršanai. Neignorējiet kļūmes.

6. Integrēšana ar CI/CD

Integrējiet savu vizuālās testēšanas procesu savā CI/CD konveijerī. Tas ļauj automātiski veikt vizuālās pārbaudes katrā koda izmaiņā, nodrošinot, ka visas vizuālās regresijas tiek atklātas agrīnā izstrādes ciklā. Automatizācija ir galvenais, lai ietaupītu laiku un samazinātu cilvēka kļūdu risku.

7. Izmantojiet konsekventu testēšanas vidi

Pārliecinieties, ka jūsu testēšanas vide ir pēc iespējas konsekventāka ar jūsu ražošanas vidi. Tas ietver to pašu pārlūkprogrammu, operētājsistēmu un fontu izmantošanu. Konsekventa vide uzlabos jūsu vizuālo salīdzinājumu precizitāti.

8. Dokumentējiet savu testēšanas stratēģiju

Dokumentējiet savu vizuālās testēšanas stratēģiju, tostarp pārbaudītos komponentus, testēšanas vides un paredzamos rezultātus. Šī dokumentācija palīdzēs nodrošināt, ka jūsu testēšanas process laika gaitā ir konsekvents un uzturams. Tas ir īpaši svarīgi jaunu komandas dalībnieku apmācībai vai veicot būtiskas izmaiņas jūsu UI.

9. Prioritāte pieejamībai

Lai gan Chromatic un Percy piedāvā zināmu pieejamības pārbaudes līmeni, prioritāti piešķiriet pieejamības testēšanai. Integrējiet pieejamības pārbaudes savos vizuālajos testos, lai nodrošinātu, ka jūsu UI ir pieejama visiem lietotājiem. Skatiet WCAG vadlīnijas.

10. Regulāri pārskatiet un atjauniniet testus

Attīstoties jūsu UI, regulāri pārskatiet un atjauniniet savus vizuālos testus. Tas ietver pamatu atjaunināšanu, jaunu testu pievienošanu jaunām funkcijām un testu noņemšanu novecojušiem komponentiem. Tas nodrošina, ka jūsu testi turpina nodrošināt vērtību.

Pareizās platformas izvēle: Chromatic pret Percy

Labākā izvēle starp Chromatic un Percy ir atkarīga no jūsu specifiskajām vajadzībām un projekta iestatījumiem:

Apsveriet Chromatic, ja:

• Jūs jau izmantojat Storybook komponentu vadītai izstrādei.
• Jūs vēlaties ciešu integrāciju ar Storybook funkcijām.
• Jūs dodat priekšroku racionalizētai iestatīšanai un lietošanas ērtumam, īpaši, ja jums ir esoša Storybook iestatīšana.
• Jūs vēlaties iebūvētās pieejamības pārbaudes.

Apsveriet Percy, ja:

• Jūs izmantojat citu testēšanas ietvaru, nevis Storybook, piemēram, Jest, Cypress vai Selenium.
• Jums nepieciešams atbalsts plašākam testēšanas scenāriju klāstam.
• Jums nepieciešamas progresīvas funkcijas, piemēram, responsīvā dizaina testēšana vai pārlūkprogrammas saderības testēšana.
• Jūs dodat priekšroku vairāk ietvaram neatkarīgam risinājumam.

Gan Chromatic, gan Percy ir lieliskas izvēles vizuālajai testēšanai. Novērtējiet platformas, pamatojoties uz jūsu esošajiem rīkiem, projekta prasībām un komandas vēlmēm. Apsveriet iespēju sākt ar bezmaksas izmēģinājumu vai bezmaksas plānu, lai novērtētu funkcijas un iespējas. Daudzas komandas pat izmanto abus rīkus dažādām projekta daļām.

Progresīvās tehnikas un integrācijas

Papildus pamatfunkcijām vizuālās testēšanas platformas piedāvā progresīvas metodes, lai apmierinātu sarežģītākus UI scenārijus un integrācijas ar citiem izstrādes rīkiem.

1. Dinamiskā satura testēšana: API imitēšana

Viens no lielākajiem izaicinājumiem vizuālajā testēšanā ir dinamiskā satura pārvaldība. Lai to risinātu, apsveriet API atbilžu imitēšanu, lai nodrošinātu, ka testa dati ir paredzami. Tas ļaus jums uzņemt konsekventus ekrānuzņēmumus un novērst viltus pozitīvos vai negatīvos rezultātus, ko izraisa pastāvīgi mainīgi dati. Izmantojiet tādus rīkus kā Mock Service Worker (MSW) vai Jest imitēšanas funkcionalitāti, lai imitētu API izsaukumus.

2. Interaktīvo UI komponentu testēšana

Interaktīvo UI komponentu (piemēram, nolaižamo izvēlņu, modālo logu) testēšanai bieži ir nepieciešams simulēt lietotāju mijiedarbību. Tas var ietvert notikumu (piemēram, klikšķu, peles kursoru, tastatūras ievades) programmatisku iedarbināšanu, izmantojot jūsu testēšanas ietvaru. Tādi rīki kā Cypress var tiešāk simulēt lietotāju uzvedību.

3. Pieejamības testēšanas integrācija

Integrējiet pieejamības testēšanas rīkus (piemēram, axe-core) savos vizuālajos testos. Chrome un Percy var nodrošināt pamata pieejamības pārbaudes; sarežģītākai testēšanai apsveriet pieejamības audita veikšanu kā daļu no jūsu testēšanas konveijera un integrējiet šos rezultātus ar jūsu vizuālo testu rezultātiem. Tas palīdzēs nodrošināt, ka jūsu UI ir pieejama visiem lietotājiem. Pieejamība nav tikai par UI padarīšanu pieejamu, bet arī par iekļaujoša dizaina nodrošināšanu lietotājiem ar dažādām vajadzībām.

4. UI komponentu bibliotēkas

Vizuālā testēšana ir īpaši noderīga, strādājot ar UI komponentu bibliotēkām (piemēram, Material UI, Ant Design). Izveidojiet vizuālos testus katram komponentam savā bibliotēkā, lai nodrošinātu konsekvenci un novērstu vizuālās regresijas, atjauninot bibliotēku vai integrējot to savos projektos.

5. Integrācija ar dizaina sistēmām

Ja izmantojat dizaina sistēmu, saistiet savus vizuālos testus ar dizaina sistēmas dokumentāciju. Tas ļaus jums ātri identificēt jebkādas vizuālās neatbilstības starp jūsu UI un jūsu dizaina sistēmas specifikācijām. Sinhronizējiet UI komponentus ar dizaina sistēmas komponentiem. Tas palīdzēs uzturēt dizaina konsekvenci jūsu produktos.

Pieejamības apsvērumi

Pieejamībai jābūt jūsu vizuālās testēšanas stratēģijas galvenajai sastāvdaļai. Lai gan Chromatic un Percy piedāvā dažas pamata pieejamības pārbaudes, jums vajadzētu ieviest visaptverošus pieejamības auditus kā daļu no jūsu testēšanas procesa.

1. Automatizētie pieejamības testēšanas rīki

Izmantojiet automatizētos pieejamības testēšanas rīkus, piemēram, Axe, Lighthouse vai Pa11y, savā CI/CD konveijerī. Šie rīki skenē jūsu UI, lai atrastu pieejamības pārkāpumus, un sniedz detalizētus ziņojumus par visām atrastajām problēmām.

2. Manuālā pieejamības testēšana

Papildiniet automatizēto testēšanu ar manuālo testēšanu. Veiciet manuālas pārbaudes, izmantojot ekrāna lasītājus (piemēram, JAWS, NVDA, VoiceOver), tastatūras navigāciju un krāsu kontrasta analizatorus, lai identificētu visas problēmas, kuras automatizētie rīki varētu palaist garām. Apsveriet iespēju nolīgt pieejamības konsultantus, lai veiktu pilnīgas revīzijas.

3. Koda pārbaudes

Iekļaujiet pieejamības pārskatus sava koda pārskatīšanas procesā. Lieciet izstrādātājiem pārskatīt viens otra kodu attiecībā uz pieejamības problēmām. Izglītojiet savu komandu par pieejamības labāko praksi un mudiniet tos ņemt vērā pieejamību visā izstrādes procesā.

Secinājums: Priekšgala vizuālās testēšanas nākotne

Priekšgala vizuālā testēšana vairs nav luksuss, bet gan nepieciešamība mūsdienu tīmekļa izstrādei. Integrējot platformas, piemēram, Chromatic un Percy, savā darbplūsmā, jūs varat ievērojami uzlabot savas UI kvalitāti, konsekvenci un uzturamību. Vizuālās testēšanas platformu izmantošana pieaugs, palielinoties UI sarežģītībai un saglabājoties pieprasījumam pēc lietotājam draudzīgām, responsīvām un pieejamām tīmekļa lietojumprogrammām. Turpinoties tīmekļa attīstībai, vizuālā testēšana kļūs vēl kritiskāka izstrādes procesā.

Ievērojot šajā ceļvedī izklāstītās labākās prakses un esot informētam par jaunākajiem vizuālās testēšanas sasniegumiem, jūs varat izveidot stabilāku, uzticamāku un vizuāli pievilcīgāku lietotāja pieredzi saviem lietotājiem visā pasaulē. Regulāri novērtējiet savu testēšanas stratēģiju, esiet informēts par jaunajiem rīkiem un tehnikām un pielāgojieties mainīgajām priekšgala izstrādes ainavas prasībām. Nepārtraukta uzlabošana ir būtiska nepārtrauktai veiksmei vizuālajā testēšanā.