QA The Other WayЗабезпечення якості в епоху тестів, написаних ШІ. QA The Other Way.
Практичне QA

Оновлення знімка - рішення оглядача.

Відділіть навмисну візуальну зміну від команди заміни очікуваного зображення.

5 хв. читанняQA The Other Way
Авторська схема еталона, поточного зображення й рішення огляду.
Авторська редакційна ілюстрація.
Ілюстративне відео до цієї статті. англійський текст на екрані; вибрати субтитри для цієї мови.

Перекладне видання. Технічні ідентифікатори залишаються в оригінальній формі.

Відділіть навмисну візуальну зміну від команди заміни очікуваного зображення.
Локальний приклад із вигаданими даними, не інтерфейс клієнта чи постачальника.

Перевірка зображення падає після зникнення кнопки. Оновити еталон швидко, але зникнення може стати нормою. Команда не вирішує, чи це було потрібно. Це рішення про продукт, не ремонт інструментом.

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

Назвіть еталон і середовище

Перевірка порівнює знімок з еталоном. Документація описує створення при першому запуску та наступні порівняння. Назва визначає вид, щоб чуже зображення його не замінило.

await page.setContent(`
  <main aria-label="Demo preference card">
    <h1>Demo preference</h1>
    <button>Keep demo setting</button>
  </main>
`);
await expect(page.getByRole('main')).toHaveScreenshot('demo-card.png');

Потрібні раннер та імпортований expect. Перевіряється область, не весь продукт. Приклад має сталі стилі й розмір вікна. Еталон створюється навмисно й порівнюється окремо.

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

Прочитайте різницю перед заміною

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

update-snapshots документовано. Використовуйте після розуміння й схвалення командою. Нові файли змінюють очікувану поведінку. Не оновлюйте все для приховання помилок.

Зникнення кнопки буває правильним дизайном або дефектом. Пікселі не знають. Пов'яжіть із вимогою та збережіть функціональну перевірку доступності.

Обмежте порівняння чесно

Область доводить лише область і налаштування, не позаекранний вміст, інші розміри чи сервер. Обирайте за питанням, не зручністю зеленого результату.

Допуски й стилі знімків зменшують шум, але змінюють значущі відмінності. Назвіть виключення й пороги. Не ховайте захищений елемент.

Порівнюємо початкову картку та окремо створюємо інше зображення зі зміненим написом. Друге не приймається еталоном. Це показ зміни й стабільного порівняння, не стратегія загалом.

Збережіть рішення для огляду

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

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

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

Загальні запитання

Чи оновлення еталона виправляє застосунок?

Ні. Змінює очікуване зображення; спочатку перевірте продуктову зміну.

Чи знімок області сертифікує весь інтерфейс?

Ні. Доказ обмежений областю й середовищем відображення.

Джерела