Візуальне тестування фронтенду: глибокий аналіз інтеграції Chromatic і Percy

У сучасному швидкоплинному світі веб-розробки забезпечення послідовного та візуально привабливого інтерфейсу користувача (ІК) на різних браузерах, пристроях та розмірах екрану є надзвичайно важливим. Однак ручне тестування ІК займає багато часу, схильне до помилок і часто не виявляє тонких візуальних регресій. Саме тут на допомогу приходить візуальне тестування фронтенду, пропонуючи потужне рішення для автоматизації перевірок ІК та підтримки візуальної цілісності протягом усього циклу розробки. Цей вичерпний посібник досліджує дві провідні платформи візуального тестування: Chromatic та Percy, деталізуючи їхню інтеграцію, переваги та найкращі практики для розробників у всьому світі.

Розуміння візуального тестування фронтенду

Візуальне тестування фронтенду, також відоме як тестування візуальної регресії або тестування за допомогою скріншотів, автоматизує процес порівняння скріншотів інтерфейсу користувача з базовою лінією для виявлення візуальних змін. Воно дозволяє розробникам ідентифікувати неочікувані зміни в ІК, спричинені модифікаціями коду, оновленнями дизайну або оновленнями браузера. Цей підхід значно знижує ризик випуску візуально пошкоджених або непослідовних інтерфейсів користувача, що зрештою покращує користувацький досвід.

Переваги візуального тестування

• Раннє виявлення помилок: Виявляє візуальні помилки на ранніх етапах циклу розробки, перш ніж вони потраплять у виробництво.
• Покращена якість коду: Заохочує розробників писати чистіший, більш підтримуваний код.
• Прискорені цикли розробки: Автоматизує процеси тестування, заощаджуючи час та ресурси.
• Покращений користувацький досвід: Забезпечує послідовний та візуально привабливий ІК на всіх платформах.
• Зменшення ручного тестування: Звільняє команди QA, дозволяючи їм зосередитися на складніших сценаріях тестування.
• Підвищена впевненість у релізах: Забезпечує більшу впевненість у тому, що ІК функціонує належним чином.

Знайомство з Chromatic та Percy

Chromatic та Percy — це провідні хмарні платформи візуального тестування, які спрощують процес візуального тестування. Обидві платформи пропонують схожі функціональні можливості, включаючи генерацію скріншотів, візуальне порівняння та інтеграцію з популярними CI/CD-пайплайнами. Однак вони також мають унікальні особливості та сильні сторони. Давайте зануримося в кожну платформу.

Chromatic

Chromatic, розроблений Storybook, глибоко інтегрований з екосистемою Storybook. Storybook — це потужний інструмент для створення та документування компонентів інтерфейсу користувача в ізоляції. Chromatic розширює можливості Storybook, надаючи функції візуального тестування та перегляду. Він спрощує процес тестування компонентів ІК, дозволяючи розробникам робити скріншоти компонентів у різних станах та конфігураціях. Потім Chromatic порівнює ці скріншоти з базовою лінією, виділяючи будь-які візуальні відмінності.

Ключові особливості Chromatic:

• Тісна інтеграція зі Storybook: Безперешкодно інтегрується зі Storybook для розробки та тестування на основі компонентів.
• Автоматична генерація скріншотів: Автоматично генерує скріншоти компонентів ІК у різних станах.
• Візуальне порівняння: Порівнює скріншоти з базовою лінією та виділяє візуальні зміни.
• Перегляд та співпраця: Надає інтерфейс для спільної роботи над переглядом та затвердженням візуальних змін.
• Інтеграція з CI/CD: Інтегрується з популярними CI/CD-пайплайнами, такими як Jenkins, CircleCI та GitHub Actions.
• Тестування доступності: Забезпечує базові перевірки доступності.

Percy

Percy, придбаний BrowserStack, є універсальною платформою візуального тестування, яка підтримує різні фреймворки тестування та робочі процеси розробки. Вона дозволяє розробникам робити скріншоти цілих сторінок, окремих компонентів або навіть динамічного вмісту. Складні алгоритми візуального порівняння Percy можуть виявляти навіть найменші візуальні розбіжності. Вона пропонує комплексну платформу для управління візуальними регресіями та забезпечення послідовності інтерфейсу користувача.

Ключові особливості Percy:

• Крос-платформна підтримка: Підтримує різні фреймворки тестування, включаючи Jest, Cypress та Selenium.
• Генерація скріншотів: Робить скріншоти цілих сторінок, окремих компонентів та динамічного вмісту.
• Візуальне порівняння: Порівнює скріншоти за допомогою передових алгоритмів візуального порівняння.
• Співпраця та перегляд: Надає інтерфейс для спільної роботи над переглядом та затвердженням візуальних змін.
• Інтеграція з CI/CD: Інтегрується з популярними CI/CD-пайплайнами.
• Тестування адаптивного дизайну: Підтримує тестування адаптивного дизайну на різних розмірах екранів та пристроях.
• Тестування сумісності з браузерами: Тестує на різних браузерах та їх версіях.

Налаштування візуального тестування за допомогою Chromatic

Давайте розглянемо процес налаштування візуального тестування за допомогою Chromatic, припускаючи, що у вас є проект Storybook. Наступні кроки надають загальний огляд; зверніться до офіційної документації Chromatic для отримання найновіших інструкцій. Приклад базується на налаштуванні React та Storybook; аналогічні концепції застосовуються для інших фреймворків.

Передумови

• Проект Storybook, налаштований з компонентами.
• Обліковий запис Chromatic (безкоштовний або платний).
• Встановлені Node.js та npm або yarn.

Встановлення та конфігурація

1. Встановіть Chromatic CLI:

               npm install -g chromatic
               
   
                 
                   Copy
                 
               
             

2. Автентифікація з Chromatic:

               chromatic login
               
   
                 
                   Copy
                 
               
             

   Це запропонує вам увійти у свій обліковий запис Chromatic. Потім буде налаштовано необхідну конфігурацію.
3. Запустіть Chromatic:

               chromatic
               
   
                 
                   Copy
                 
               
             

   Chromatic збере ваш Storybook і завантажить його на платформу Chromatic. Потім він зробить скріншоти ваших компонентів і порівняє їх з базовою лінією.
4. Перегляньте та затвердьте зміни: Chromatic надасть посилання на інтерфейс Chromatic, де ви зможете переглянути будь-які виявлені візуальні зміни. Потім ви можете затвердити або відхилити зміни.
5. Інтегруйте з CI/CD: Інтегруйте Chromatic у ваш CI/CD-пайплайн (наприклад, GitHub Actions, GitLab CI) для автоматизованого тестування кожного запиту на злиття (pull request). Кроки різняться залежно від використовуваної служби CI/CD; зверніться до документації Chromatic для отримання докладних інструкцій. Наприклад, використовуючи GitHub Actions, ви можете додати завдання до свого файлу workflow, яке запускає Chromatic після успішного завершення збірки та модульних тестів.

Приклад: інтеграція Chromatic з GitHub Actions

Створіть новий файл workflow (наприклад, .github/workflows/chromatic.yml) з таким вмістом (відрегулюйте `CHROMATIC_PROJECT_TOKEN` на ваш токен проекту):

            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
              
            
          

Цей workflow запускатиме Chromatic при кожному push та pull request у гілку `main`. Не забудьте замінити `CHROMATIC_PROJECT_TOKEN` на ваш фактичний токен проекту Chromatic, збережений як секрет GitHub.

Налаштування візуального тестування за допомогою Percy

Налаштування візуального тестування за допомогою Percy передбачає схожі кроки, що й Chromatic, але зосереджується на інтеграції з вашим існуючим фреймворком тестування. Ось загальний посібник, з конкретними інструкціями, залежними від вашого фреймворка (наприклад, React з Jest, Vue з Cypress).

Передумови

• Обліковий запис Percy (безкоштовний або платний).
• Фреймворк тестування (наприклад, Jest, Cypress, Selenium).
• Встановлені Node.js та npm або yarn.

Встановлення та конфігурація

1. Встановіть Percy CLI:

               npm install -D @percy/cli
               
   
                 
                   Copy
                 
               
             

2. Автентифікація з Percy: Створіть проект Percy на платформі Percy та отримайте токен свого проекту. Ви встановите цей токен як змінну середовища (наприклад, `PERCY_TOKEN`) у своїй конфігурації CI/CD.
3. Інтегруйте Percy з вашим фреймворком тестування:

   Це передбачає додавання команд Percy до ваших тестових сценаріїв. Точні кроки різняться залежно від вашого фреймворка тестування. Наприклад, з Cypress, ви б встановили пакет `@percy/cypress` і додали команду для створення знімків Percy. З Jest ви, швидше за все, використовуватимете Percy API безпосередньо або спеціальний адаптер.

   Приклад використання Cypress (у ваших тестах Cypress – наприклад, cypress/integration/my_spec.js):

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

   У наведеному вище прикладі Cypress, cy.percySnapshot('Homepage') робить скріншот поточного стану сторінки та завантажує його в Percy.

4. Налаштуйте інтеграцію CI/CD:

   У своїй конфігурації CI/CD переконайтеся, що Percy запускається після завершення ваших тестів. Зазвичай ви встановлюєте змінну середовища `PERCY_TOKEN`, а потім запускаєте команду Percy CLI.

   Приклад використання GitHub Actions (у вашому файлі workflow):

               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. Перегляньте та затвердьте зміни:

   Percy надасть посилання на свою платформу, де ви зможете переглянути візуальні відмінності та затвердити або відхилити зміни.

Найкращі практики візуального тестування

Ефективне візуальне тестування вимагає продуманого підходу. Ось кілька найкращих практик для максимізації його переваг:

1. Визначте чіткі базові лінії

Встановіть чітко визначену базову лінію. Це початковий стан вашого інтерфейсу користувача, з яким порівнюватимуться всі майбутні скріншоти. Переконайтеся, що ця базова лінія точно відображає бажаний візуальний вигляд вашої програми. Регулярно переглядайте та оновлюйте свої базові лінії, щоб вони були актуальними та відображали поточні зміни в дизайні.

2. Зосередьтеся на критичних елементах інтерфейсу користувача

Пріоритизуйте тестування найважливіших елементів інтерфейсу користувача та користувацьких потоків. Сюди входять елементи, які часто використовуються, суттєво впливають на користувацький досвід або схильні до змін. Не відчувайте потреби тестувати кожен окремий піксель; зосередьтеся на областях, які найбільше важливі для ваших користувачів.

3. Тестування в різних середовищах

Тестуйте свій інтерфейс користувача в різних середовищах, включаючи різні браузери (Chrome, Firefox, Safari, Edge тощо), пристрої (настільні комп'ютери, планшети, смартфони) та розміри екрану. Це допоможе забезпечити послідовне відображення вашого інтерфейсу на всіх платформах.

4. Обробка динамічного вмісту

Якщо ваш інтерфейс користувача містить динамічний вміст (наприклад, дані, отримані з API), вам потрібно буде обробляти це обережно. Розгляньте такі методи, як імітація відповідей API для створення передбачуваних тестових даних або використання детермінованих наборів даних. Переконайтеся, що у вас є стратегія для послідовного керування динамічним вмістом у різних збірках.

5. Усунення нестабільних тестів

Нестабільні тести (flaky tests) — це тести, які іноді проходять, а іноді ні. Вони можуть бути головним джерелом розчарування. Визначте та усуньте першопричини нестабільних тестів. Це може включати коригування конфігурацій тестування, збільшення тайм-аутів або покращення надійності ваших тестових даних. Якщо тест постійно не проходить, витратьте час на налагодження та виправлення проблеми. Не ігноруйте збої.

6. Інтеграція з CI/CD

Інтегруйте процес візуального тестування у ваш CI/CD-пайплайн. Це дозволить вам автоматично запускати візуальні тести при кожній зміні коду, гарантуючи, що будь-які візуальні регресії будуть виявлені на ранніх етапах циклу розробки. Автоматизація є ключовою для економії часу та зменшення ризику людських помилок.

7. Використовуйте послідовне середовище тестування

Переконайтеся, що ваше тестове середовище є максимально послідовним з вашим виробничим середовищем. Це включає використання тих самих браузерів, операційних систем та шрифтів. Послідовне середовище покращить точність ваших візуальних порівнянь.

8. Документуйте свою стратегію тестування

Задокументуйте свою стратегію візуального тестування, включаючи, які компоненти тестуються, тестові середовища та очікувані результати. Ця документація допоможе забезпечити послідовність та підтримуваність вашого процесу тестування з часом. Це особливо важливо для адаптації нових членів команди або при внесенні значних змін до вашого інтерфейсу користувача.

9. Пріоритизуйте доступність

Хоча Chromatic та Percy пропонують певний рівень перевірки доступності, пріоритизуйте тестування доступності. Інтегруйте перевірки доступності у ваші візуальні тести, щоб забезпечити доступність вашого інтерфейсу користувача для всіх користувачів. Зверніться до рекомендацій WCAG.

10. Регулярно переглядайте та оновлюйте тести

У міру еволюції вашого інтерфейсу користувача регулярно переглядайте та оновлюйте свої візуальні тести. Це включає оновлення базових ліній, додавання нових тестів для нових функцій та видалення тестів для застарілих компонентів. Це гарантує, що ваші тести продовжують надавати цінність.

Вибір правильної платформи: Chromatic проти Percy

Найкращий вибір між Chromatic та Percy залежить від ваших конкретних потреб та налаштування проекту:

Розгляньте Chromatic, якщо:

• Ви вже використовуєте Storybook для розробки на основі компонентів.
• Вам потрібна тісна інтеграція з функціями Storybook.
• Ви віддаєте перевагу спрощеному налаштуванню та легкості використання, особливо якщо у вас є існуюче налаштування Storybook.
• Вам потрібні вбудовані перевірки доступності.

Розгляньте Percy, якщо:

• Ви використовуєте фреймворк тестування, відмінний від Storybook, такий як Jest, Cypress або Selenium.
• Вам потрібна підтримка ширшого спектра сценаріїв тестування.
• Вам потрібні розширені функції, такі як тестування адаптивного дизайну або тестування сумісності з браузерами.
• Ви віддаєте перевагу більш агностичному до фреймворків рішенню.

Chromatic та Percy є чудовими виборами для візуального тестування. Оцініть платформи на основі ваших існуючих інструментів, вимог проекту та командних уподобань. Розгляньте можливість початку з безкоштовної пробної версії або безкоштовного плану для оцінки функцій та можливостей. Багато команд навіть використовують обидва інструменти для різних частин проекту.

Розширені техніки та інтеграції

Крім базових можливостей, платформи візуального тестування пропонують розширені техніки для більш складних сценаріїв інтерфейсу користувача та інтеграції з іншими інструментами розробки.

1. Тестування динамічного вмісту: імітація API

Одним з найбільших викликів у візуальному тестуванні є управління динамічним вмістом. Щоб впоратися з цим, розгляньте імітацію відповідей API, щоб забезпечити передбачуваність тестових даних. Це дозволить вам робити послідовні скріншоти та запобігати хибним спрацьовуванням або хибним негативам, спричиненим постійно змінюваними даними. Використовуйте такі інструменти, як Mock Service Worker (MSW) або функціонал імітації Jest для імітації викликів API.

2. Тестування інтерактивних компонентів інтерфейсу користувача

Для тестування інтерактивних компонентів інтерфейсу користувача (наприклад, випадаючих меню, модальних вікон) часто потрібно симулювати взаємодії користувача. Це може включати програмне генерування подій (наприклад, кліків, наведень курсору, введення з клавіатури) за допомогою вашого фреймворка тестування. Такі інструменти, як Cypress, можуть безпосередньо симулювати поведінку користувача.

3. Інтеграція тестування доступності

Інтегруйте інструменти тестування доступності (наприклад, axe-core) у свої візуальні тести. Chromatic та Percy можуть надавати базові перевірки доступності; для більш розширеного тестування розгляньте можливість проведення аудиту доступності як частини вашого тестового пайплайну та інтеграції цих результатів з результатами ваших візуальних тестів. Це допоможе забезпечити доступність вашого інтерфейсу користувача для всіх користувачів. Доступність – це не лише про те, щоб зробити інтерфейс користувача доступним, а й про забезпечення інклюзивного дизайну для користувачів з різними потребами.

4. Бібліотеки компонентів інтерфейсу користувача

Візуальне тестування особливо корисне при роботі з бібліотеками компонентів інтерфейсу користувача (наприклад, Material UI, Ant Design). Створюйте візуальні тести для кожного компонента у вашій бібліотеці, щоб забезпечити послідовність та запобігти візуальним регресіям при оновленні бібліотеки або її інтеграції у ваші проекти.

5. Інтеграція з дизайн-системами

Якщо ви використовуєте дизайн-систему, пов'яжіть свої візуальні тести з документацією вашої дизайн-системи. Це дозволить вам швидко виявляти будь-які візуальні невідповідності між вашим інтерфейсом користувача та специфікаціями вашої дизайн-системи. Синхронізуйте компоненти інтерфейсу користувача з компонентами дизайн-системи. Це допоможе підтримувати узгодженість дизайну у ваших продуктах.

Міркування щодо доступності

Доступність повинна бути основним компонентом вашої стратегії візуального тестування. Хоча Chromatic та Percy пропонують деякі базові перевірки доступності, ви повинні впроваджувати комплексні аудити доступності як частину свого процесу тестування.

1. Автоматизовані інструменти тестування доступності

Використовуйте автоматизовані інструменти тестування доступності, такі як Axe, Lighthouse або Pa11y, у вашому CI/CD-пайплайні. Ці інструменти сканують ваш інтерфейс користувача на наявність порушень доступності та надають детальні звіти про виявлені проблеми.

2. Ручне тестування доступності

Доповніть автоматизоване тестування ручним тестуванням. Виконуйте ручні перевірки за допомогою програм для читання з екрана (наприклад, JAWS, NVDA, VoiceOver), клавіатурної навігації та аналізаторів контрастності кольорів, щоб виявити будь-які проблеми, які автоматизовані інструменти можуть пропустити. Розгляньте можливість найму консультантів з доступності для проведення повних аудитів.

3. Перевірки коду

Включіть перевірки доступності у свій процес перевірки коду. Нехай розробники перевіряють код один одного на наявність проблем доступності. Навчайте свою команду найкращим практикам доступності та заохочуйте їх бути уважними до доступності протягом усього процесу розробки.

Висновок: Майбутнє візуального тестування фронтенду

Візуальне тестування фронтенду більше не є розкішшю, а необхідністю для сучасної веб-розробки. Інтегруючи такі платформи, як Chromatic та Percy, у свій робочий процес, ви можете значно покращити якість, послідовність та підтримуваність свого інтерфейсу користувача. Використання платформ візуального тестування буде зростати, оскільки складність інтерфейсу користувача збільшується, а попит на зручні, адаптивні та доступні веб-додатки продовжує зростати. Оскільки веб продовжує розвиватися, візуальне тестування стане ще більш критично важливим у процесі розробки.

Дотримуючись найкращих практик, викладених у цьому посібнику, та залишаючись в курсі останніх досягнень у візуальному тестуванні, ви можете створити більш надійний, стабільний та візуально привабливий користувацький досвід для ваших користувачів у всьому світі. Регулярно оцінюйте свою стратегію тестування, будьте в курсі нових інструментів та технік, і адаптуйтеся до постійно змінюваних вимог ландшафту фронтенд-розробки. Безперервне вдосконалення є важливим для подальшого успіху у візуальному тестуванні.