Frontend Vizualinis Testavimas: Išsamus Chromatic ir Percy Integravimo Nagrinėjimas

Šiandieninėje sparčioje interneto kūrimo aplinkoje ypač svarbu užtikrinti nuoseklią ir vizualiai patrauklią vartotojo sąsają (UI) įvairiose naršyklėse, įrenginiuose ir ekranų dydžiuose. Tačiau rankinis UI testavimas yra daug laiko reikalaujantis, linkęs į klaidas ir dažnai nepajėgia aptikti subtilių vizualinių regresijų. Čia į pagalbą ateina frontend vizualinis testavimas, siūlantis galingą sprendimą automatizuoti UI patikrinimus ir palaikyti vizualinį vientisumą viso kūrimo ciklo metu. Šiame išsamiame vadove nagrinėjamos dvi pirmaujančios vizualinio testavimo platformos: Chromatic ir Percy, detalizuojamas jų integravimas, privalumai ir geriausios praktikos kūrėjams visame pasaulyje.

Frontend Vizualinio Testavimo Supratimas

Frontend vizualinis testavimas, taip pat žinomas kaip vizualinis regresijos testavimas arba ekrano nuotraukų testavimas, automatizuoja UI ekrano nuotraukų palyginimo su bazine linija procesą, siekiant aptikti vizualinius pokyčius. Tai leidžia kūrėjams nustatyti netikėtus UI pokyčius, atsiradusius dėl kodo modifikacijų, dizaino atnaujinimų ar naršyklės atnaujinimų. Šis požiūris žymiai sumažina riziką išleisti vizualiai sugadintas ar nenuoseklias vartotojo sąsajas naudotojams, galiausiai pagerindamas vartotojo patirtį.

Vizualinio Testavimo Privalumai

• Ankstyvas Klaidų Aptikimas: Pagreitina vizualinius trikdžius ankstyvoje kūrimo ciklo stadijoje, kol jie pasiekia gamybą.
• Pagerinta Kodo Kokybė: Skatina kūrėjus rašyti švaresnį, lengviau prižiūrimą kodą.
• Greitesni Kūrimo Ciklai: Automatizuoja testavimo procesus, taupant laiką ir išteklius.
• Pagerinta Vartotojo Patirtis: Užtikrina nuoseklią ir vizualiai patrauklią UI visose platformose.
• Sumažintos Rankinio Testavimo Pastangos: Atlaisvina QA komandas, kad jos galėtų sutelkti dėmesį į sudėtingesnius testavimo scenarijus.
• Padidintas Pasitikėjimas Išleidimais: Suteikia didesnį užtikrinimą, kad UI veikia taip, kaip tikėtasi.

Pristatome Chromatic ir Percy

Chromatic ir Percy yra pirmaujančios debesies pagrindu veikiančios vizualinio testavimo platformos, kurios supaprastina vizualinio testavimo procesą. Abi platformos siūlo panašias funkcijas, įskaitant ekrano nuotraukų generavimą, vizualinį palyginimą ir integravimą su populiariais CI/CD konvejeriais. Tačiau jos taip pat turi unikalių savybių ir stipriųjų pusių. Pasigilinkime į kiekvieną platformą.

Chromatic

Chromatic, sukurtas Storybook, yra giliai integruotas su Storybook ekosistema. Storybook yra galingas įrankis UI komponentų kūrimui ir dokumentavimui atskirai. Chromatic išplečia Storybook galimybes, suteikdamas vizualinio testavimo ir peržiūros funkcijas. Tai supaprastina UI komponentų testavimo procesą, leidžiant kūrėjams užfiksuoti komponentų ekrano nuotraukas įvairiose būsenose ir konfigūracijose. Tada Chromatic palygina šias ekrano nuotraukas su bazine linija, pabrėždamas visus vizualinius skirtumus.

Pagrindinės Chromatic Savybės:

• Glaudus Storybook Integravimas: Sklandžiai integruojamas su Storybook, skirtu komponentais pagrįstam kūrimui ir testavimui.
• Automatinis Ekrano Nuotraukų Generavimas: Automatiškai generuoja UI komponentų ekrano nuotraukas skirtingose būsenose.
• Vizualinis Palyginimas: Palygina ekrano nuotraukas su bazine linija ir pabrėžia vizualinius pokyčius.
• Peržiūra ir Bendradarbiavimas: Suteikia bendradarbiavimo sąsają vizualinių pokyčių peržiūrai ir patvirtinimui.
• CI/CD Integravimas: Integruojamas su populiariais CI/CD konvejeriais, tokiais kaip Jenkins, CircleCI ir GitHub Actions.
• Prieinamumo Testavimas: Suteikia pagrindinius prieinamumo patikrinimus.

Percy

Percy, įsigytas BrowserStack, yra universali vizualinio testavimo platforma, palaikanti įvairias testavimo sistemas ir kūrimo darbo eigas. Tai leidžia kūrėjams užfiksuoti viso puslapio, konkrečių komponentų ar net dinaminio turinio ekrano nuotraukas. Percy sudėtingi vizualinio palyginimo algoritmai gali aptikti net menkiausius vizualinius neatitikimus. Ji siūlo išsamią platformą vizualinių regresijų valdymui ir UI nuoseklumo užtikrinimui.

Pagrindinės Percy Savybės:

• Kryžminė Platformos Palaikymas: Palaiko įvairias testavimo sistemas, įskaitant Jest, Cypress ir Selenium.
• Ekrano Nuotraukų Generavimas: Užfiksuoja viso puslapio, konkrečių komponentų ir dinaminio turinio ekrano nuotraukas.
• Vizualinis Palyginimas: Palygina ekrano nuotraukas naudodamas pažangius vizualinio palyginimo algoritmus.
• Bendradarbiavimas ir Peržiūra: Suteikia bendradarbiavimo sąsają vizualinių pokyčių peržiūrai ir patvirtinimui.
• CI/CD Integravimas: Integruojamas su populiariais CI/CD konvejeriais.
• Adaptacinio Dizaino Testavimas: Palaiko adaptacinių dizainų testavimą įvairiuose ekranų dydžiuose ir įrenginiuose.
• Naršyklės Suderinamumo Testavimas: Testuoja įvairiose naršyklėse ir versijose.

Vizualinio Testavimo Sąranka su Chromatic

Panagrinėkime vizualinio testavimo sąrankos procesą naudojant Chromatic, darant prielaidą, kad turite nustatytą Storybook projektą. Toliau pateikti veiksmai suteikia bendrą apžvalgą; norėdami gauti naujausias instrukcijas, skaitykite oficialią Chromatic dokumentaciją. Pavyzdys pagrįstas React ir Storybook sąranka; panašios sąvokos taikomos ir kitoms sistemoms.

Būtinos Sąlygos

• Storybook projektas, nustatytas su komponentais.
• Chromatic paskyra (nemokama arba mokama).
• Įdiegtas Node.js ir npm arba yarn.

Įdiegimas ir Konfigūracija

1. Įdiekite Chromatic CLI:

               npm install -g chromatic
               
   
                 
                   Copy
                 
               
             

2. Autentifikuokite su Chromatic:

               chromatic login
               
   
                 
                   Copy
                 
               
             

   Tai paragins jus prisijungti prie savo Chromatic paskyros. Tada bus nustatyta reikalinga konfigūracija.
3. Paleiskite Chromatic:

               chromatic
               
   
                 
                   Copy
                 
               
             

   Chromatic sukurs jūsų Storybook ir įkels jį į Chromatic platformą. Tada ji padarys jūsų komponentų ekrano nuotraukas ir palygins jas su bazine linija.
4. Peržiūrėkite ir Patvirtinkite Pokyčius: Chromatic pateiks nuorodą į Chromatic sąsają, kur galėsite peržiūrėti visus aptiktus vizualinius pokyčius. Tada galite patvirtinti arba atmesti pokyčius.
5. Integruokite su CI/CD: Integruokite Chromatic į savo CI/CD konvejerį (pvz., GitHub Actions, GitLab CI), kad kiekvieną traukimo užklausą būtų galima automatiškai testuoti. Veiksmai skiriasi priklausomai nuo naudojamos CI/CD paslaugos; išsamias instrukcijas rasite Chromatic dokumentacijoje. Pavyzdžiui, naudodami GitHub actions, galite pridėti užduotį į savo darbo eigos failą, kuri paleidžia Chromatic po to, kai praeina jūsų kūrimo ir vienetų testai.

Pavyzdys: Chromatic Integravimas su GitHub Actions

Sukurkite naują darbo eigos failą (pvz., .github/workflows/chromatic.yml) su šiuo turiniu (pakoreguokite `CHROMATIC_PROJECT_TOKEN` pagal savo projekto žetoną):

            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
              
            
          

Ši darbo eiga suaktyvins Chromatic kiekvienam stūmimui ir traukimo užklausai į `main` šaką. Atminkite, kad `CHROMATIC_PROJECT_TOKEN` reikia pakeisti faktiniu Chromatic projekto žetonu, saugomu kaip GitHub paslaptis.

Vizualinio Testavimo Sąranka su Percy

Vizualinio testavimo sąranka su Percy apima panašius veiksmus kaip ir su Chromatic, tačiau pagrindinis dėmesys skiriamas integravimui su esama testavimo sistema. Štai bendras vadovas, kurio konkrečios instrukcijos priklauso nuo jūsų sistemos (pvz., React su Jest, Vue su Cypress).

Būtinos Sąlygos

• Percy paskyra (nemokama arba mokama).
• Testavimo sistema (pvz., Jest, Cypress, Selenium).
• Įdiegtas Node.js ir npm arba yarn.

Įdiegimas ir Konfigūracija

1. Įdiekite Percy CLI:

               npm install -D @percy/cli
               
   
                 
                   Copy
                 
               
             

2. Autentifikuokite su Percy: Sukurkite Percy projektą Percy platformoje ir gaukite savo projekto žetoną. Šį žetoną nustatysite kaip aplinkos kintamąjį (pvz., `PERCY_TOKEN`) savo CI/CD konfigūracijoje.
3. Integruokite Percy su savo testavimo sistema:

   Tai apima Percy komandų pridėjimą prie jūsų testavimo scenarijų. Tikslūs veiksmai skiriasi priklausomai nuo jūsų testavimo sistemos. Pavyzdžiui, su Cypress įdiegtumėte `@percy/cypress` paketą ir pridėtumėte komandą Percy momentinėms nuotraukoms daryti. Su Jest greičiausiai naudosite Percy API tiesiogiai arba specialų adapterį.

   Pavyzdys naudojant Cypress (jūsų Cypress testuose - pvz., cypress/integration/my_spec.js):

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

   Aukščiau pateiktame Cypress pavyzdyje cy.percySnapshot('Homepage') daro dabartinės puslapio būsenos ekrano nuotrauką ir įkelia ją į Percy.

4. Konfigūruokite CI/CD Integravimą:

   Savo CI/CD konfigūracijoje įsitikinkite, kad Percy veikia po to, kai jūsų testai baigti. Paprastai nustatysite `PERCY_TOKEN` aplinkos kintamąjį ir tada paleisite Percy CLI komandą.

   Pavyzdys naudojant GitHub Actions (jūsų darbo eigos faile):

               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. Peržiūrėkite ir Patvirtinkite Pokyčius:

   Percy pateiks nuorodą į savo platformą, kur galėsite peržiūrėti vizualinius skirtumus ir patvirtinti arba atmesti pokyčius.

Geriausios Vizualinio Testavimo Praktikos

Efektyvus vizualinis testavimas reikalauja apgalvoto požiūrio. Štai keletas geriausių praktikų, kad maksimaliai padidintumėte jo naudą:

1. Apibrėžkite Aiškas Bazelines Linijas

Nustatykite gerai apibrėžtą bazinę liniją. Tai yra pradinė jūsų UI būsena, su kuria bus lyginamos visos būsimos ekrano nuotraukos. Įsitikinkite, kad ši bazinė linija tiksliai atspindi norimą vizualinę jūsų programos išvaizdą. Reguliariai peržiūrėkite ir atnaujinkite savo bazines linijas, kad įsitikintumėte, jog jos yra aktualios ir atspindi nuolatinius dizaino pokyčius.

2. Sutelkite Dėmesį į Svarbiausius UI Elementus

Suteikite pirmenybę svarbiausių UI elementų ir vartotojo srautų testavimui. Tai apima elementus, kurie dažnai naudojami, daro didelę įtaką vartotojo patirčiai arba yra linkę keistis. Nemanykite, kad reikia testuoti kiekvieną pikselį; sutelkite dėmesį į sritis, kurios labiausiai rūpi jūsų vartotojams.

3. Testuokite Įvairiose Aplinkose

Testuokite savo UI įvairiose aplinkose, įskaitant skirtingas naršykles (Chrome, Firefox, Safari, Edge ir kt.), įrenginius (stalinius kompiuterius, planšetinius kompiuterius, išmaniuosius telefonus) ir ekranų dydžius. Tai padės užtikrinti, kad jūsų UI atvaizduojamas nuosekliai visose platformose.

4. Tvarkykite Dinaminį Turinį

Jei jūsų UI yra dinaminio turinio (pvz., duomenys, gaunami iš API), turėsite tai tvarkyti atsargiai. Apsvarstykite tokius metodus kaip API atsakymų imitavimas, kad sukurtumėte nuspėjamus testavimo duomenis, arba naudokite deterministinius duomenų rinkinius. Užtikrinkite, kad turite strategiją nuosekliai tvarkyti dinaminį turinį įvairiuose kūriniuose.

5. Spręskite Nepatikimus Testus

Nepatikimi testai yra testai, kurie kartais praeina, o kartais nepavyksta. Tai gali būti didelis nusivylimo šaltinis. Nustatykite ir pašalinkite pagrindines nepriklausomų testų priežastis. Tai gali apimti testavimo konfigūracijų koregavimą, laiko apribojimų didinimą arba testavimo duomenų patikimumo gerinimą. Jei testas nuolat nepavyksta, skirkite laiko derinimui ir problemos ištaisymui. Tiesiog neignoruokite nesėkmių.

6. Integruokite su CI/CD

Integruokite savo vizualinio testavimo procesą į savo CI/CD konvejerį. Tai leidžia automatiškai vykdyti vizualinius testus kiekvienam kodo pakeitimui, užtikrinant, kad visos vizualinės regresijos būtų aptiktos ankstyvoje kūrimo ciklo stadijoje. Automatizavimas yra raktas į taupymą ir žmogiškųjų klaidų rizikos mažinimą.

7. Naudokite Nuoseklią Testavimo Aplinką

Užtikrinkite, kad jūsų testavimo aplinka būtų kuo nuoseklesnė su jūsų gamybos aplinka. Tai apima tų pačių naršyklių, operacinių sistemų ir šriftų naudojimą. Nuosekli aplinka pagerins jūsų vizualinių palyginimų tikslumą.

8. Dokumentuokite Savo Testavimo Strategiją

Dokumentuokite savo vizualinio testavimo strategiją, įskaitant, kurie komponentai yra testuojami, testavimo aplinkos ir numatomi rezultatai. Ši dokumentacija padės užtikrinti, kad jūsų testavimo procesas būtų nuoseklus ir lengvai prižiūrimas ilgą laiką. Tai ypač svarbu įtraukiant naujus komandos narius arba atliekant reikšmingus UI pakeitimus.

9. Suteikite Pirmenybę Prieinamumui

Nors Chromatic ir Percy siūlo tam tikrą prieinamumo patikrinimo lygį, suteikite pirmenybę prieinamumo testavimui. Integruokite prieinamumo patikrinimus į savo vizualinius testus, kad užtikrintumėte, jog jūsų UI yra prieinama visiems vartotojams. Pažvelkite į WCAG gaires.

10. Reguliariai Peržiūrėkite ir Atnaujinkite Testus

Kai jūsų UI vystosi, reguliariai peržiūrėkite ir atnaujinkite savo vizualinius testus. Tai apima bazinių linijų atnaujinimą, naujų testų pridėjimą naujoms funkcijoms ir testų pašalinimą pasenusiems komponentams. Tai užtikrina, kad jūsų testai ir toliau teiks vertę.

Tinkamos Platformos Pasirinkimas: Chromatic prieš Percy

Geriausias pasirinkimas tarp Chromatic ir Percy priklauso nuo jūsų specifinių poreikių ir projekto sąrankos:

Apsvarstykite Chromatic, jei:

• Jau naudojate Storybook komponentais pagrįstam kūrimui.
• Norite glaudaus integravimo su Storybook funkcijomis.
• Pirmenybę teikiate supaprastintai sąrankai ir naudojimo paprastumui, ypač jei turite esamą Storybook sąranką.
• Norite įtaisytų prieinamumo patikrinimų.

Apsvarstykite Percy, jei:

• Naudojate kitą testavimo sistemą nei Storybook, tokią kaip Jest, Cypress arba Selenium.
• Jums reikia palaikymo platesniam testavimo scenarijų asortimentui.
• Reikia pažangių funkcijų, tokių kaip adaptacinio dizaino testavimas arba naršyklės suderinamumo testavimas.
• Pirmenybę teikiate sistemai labiau agnostiniam sprendimui.

Tiek Chromatic, tiek Percy yra puikūs pasirinkimai vizualiniam testavimui. Įvertinkite platformas pagal savo esamus įrankius, projekto reikalavimus ir komandos pageidavimus. Apsvarstykite galimybę pradėti nuo nemokamos bandomosios versijos arba nemokamo plano, kad įvertintumėte funkcijas ir galimybes. Daugelis komandų netgi naudoja abu įrankius skirtingoms projekto dalims.

Pažangios Technikos ir Integravimai

Be pagrindų, vizualinio testavimo platformos siūlo pažangias technikas, kad patenkintų sudėtingesnius UI scenarijus ir integravimą su kitais kūrimo įrankiais.

1. Dinaminio Turinio Testavimas: API Imitavimas

Vienas didžiausių iššūkių vizualiniame testavime yra dinaminio turinio valdymas. Norėdami tai tvarkyti, apsvarstykite galimybę imituoti API atsakymus, kad užtikrintumėte, jog testavimo duomenys yra nuspėjami. Tai leis jums užfiksuoti nuoseklias ekrano nuotraukas ir išvengti klaidingų teigiamų ar neigiamų rezultatų, kuriuos sukelia nuolat besikeičiantys duomenys. Išnaudokite tokius įrankius kaip Mock Service Worker (MSW) arba Jest imitavimo funkciją API skambučiams imituoti.

2. Interaktyvių UI Komponentų Testavimas

Norėdami testuoti interaktyvius UI komponentus (pvz., išskleidžiamus meniu, modalus), dažnai reikia imituoti vartotojo sąveikas. Tai gali apimti programiškai suaktyvinti įvykius (pvz., paspaudimus, užvedimus, klaviatūros įvestis) naudojant savo testavimo sistemą. Tokie įrankiai kaip Cypress gali tiesiogiai imituoti vartotojo elgesį.

3. Prieinamumo Testavimo Integravimas

Integruokite prieinamumo testavimo įrankius (pvz., axe-core) į savo vizualinius testus. Chrome ir Percy gali suteikti pagrindinius prieinamumo patikrinimus; norėdami atlikti pažangesnį testavimą, apsvarstykite galimybę vykdyti prieinamumo auditą kaip dalį savo testavimo konvejerio ir integruokite šiuos rezultatus su savo vizualinio testo rezultatais. Tai padės užtikrinti, kad jūsų UI būtų prieinama visiems vartotojams. Prieinamumas yra ne tik apie UI prieinamumo užtikrinimą, bet ir apie įtraukaus dizaino užtikrinimą vartotojams, turintiems įvairių poreikių.

4. UI Komponentų Bibliotekos

Vizualinis testavimas ypač naudingas dirbant su UI komponentų bibliotekomis (pvz., Material UI, Ant Design). Sukurkite vizualinius testus kiekvienam savo bibliotekos komponentui, kad užtikrintumėte nuoseklumą ir išvengtumėte vizualinių regresijų atnaujinant biblioteką arba integruojant ją į savo projektus.

5. Integravimas su Dizaino Sistemomis

Jei naudojate dizaino sistemą, susiekite savo vizualinius testus su savo dizaino sistemos dokumentacija. Tai leis jums greitai nustatyti visus vizualinius neatitikimus tarp jūsų UI ir jūsų dizaino sistemos specifikacijų. Sinchronizuokite UI komponentus su dizaino sistemos komponentais. Tai padės išlaikyti dizaino nuoseklumą visuose jūsų produktuose.

Atsižvelgimai į Prieinamumą

Prieinamumas turėtų būti pagrindinis jūsų vizualinio testavimo strategijos komponentas. Nors Chromatic ir Percy siūlo tam tikrus pagrindinius prieinamumo patikrinimus, turėtumėte įgyvendinti išsamius prieinamumo auditus kaip dalį savo testavimo proceso.

1. Automatiniai Prieinamumo Testavimo Įrankiai

Naudokite automatinius prieinamumo testavimo įrankius, tokius kaip Axe, Lighthouse arba Pa11y, savo CI/CD konvejeryje. Šie įrankiai nuskaito jūsų UI dėl prieinamumo pažeidimų ir pateikia išsamias ataskaitas apie visas rastas problemas.

2. Rankinis Prieinamumo Testavimas

Papildykite automatinį testavimą rankiniu testavimu. Atlikite rankinius patikrinimus naudodami ekrano skaitytuvus (pvz., JAWS, NVDA, VoiceOver), klaviatūros naršymą ir spalvų kontrasto analizatorius, kad nustatytumėte visas problemas, kurių gali neaptikti automatiniai įrankiai. Apsvarstykite galimybę samdyti prieinamumo konsultantus, kad atliktų visus auditus.

3. Kodo Peržiūros

Įtraukite prieinamumo peržiūras į savo kodo peržiūros procesą. Leiskite kūrėjams peržiūrėti vienas kito kodą dėl prieinamumo problemų. Mokykite savo komandą apie geriausias prieinamumo praktikas ir skatinkite juos atsižvelgti į prieinamumą viso kūrimo proceso metu.

Išvada: Frontend Vizualinio Testavimo Ateitis

Frontend vizualinis testavimas nebėra prabanga, o būtinybė šiuolaikiniam interneto kūrimui. Integravę tokias platformas kaip Chromatic ir Percy į savo darbo eigą, galite žymiai pagerinti savo UI kokybę, nuoseklumą ir prižiūrimumą. Vizualinio testavimo platformų naudojimas padidės, nes didėja UI sudėtingumas ir toliau auga paklausa patogioms, reaguojančioms ir prieinamoms interneto programoms. Toliau vystantis internetui, vizualinis testavimas taps dar svarbesnis kūrimo procese.

Laikydamiesi šiame vadove išdėstytų geriausių praktikų ir būdami atnaujinami su naujausiais vizualinio testavimo pasiekimais, galite sukurti tvirtesnę, patikimesnę ir vizualiai patrauklesnę vartotojo patirtį savo vartotojams visame pasaulyje. Reguliariai įvertinkite savo testavimo strategiją, sekite naujus įrankius ir metodus bei prisitaikykite prie nuolat besikeičiančių frontend kūrimo kraštovaizdžio reikalavimų. Nuolatinis tobulinimas yra būtinas norint toliau sėkmingai dirbti vizualiniame testavime.