№166: Навчіться інтегрувати візуальне тестування з Персі - CSS-хитрощі

Anonim

Чи знали ви, що можете налаштувати систему перегляду, щоб кожен ваш запит на витягування показував вам, що саме візуально змінилося на вашому сайті?

Це саме те, що робить Персі. Він припускає, що у вас на master є правильним (налаштовується), і коли ви робите запит на витягування, він буквально робить скріншоти і порівнює їх зі скріншотами того, що знаходиться на master. Якщо що-небудь змінилося, це дасть вам знати, як і модульні або інтеграційні тести. Схвалити їх і помітити, що щось не так? Виправте це та перегляньте зміни ще раз.

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

У цьому відео я поєднуюсь із Майком Фотінакісом (співзасновником Персі), щоб продемонструвати все це, а потім буквально налаштувати все і зайти на сайт. Ми будемо працювати на локальному веб-сайті за допомогою Eleventy, підкидати його в прямому ефірі на Netlify, інтегрувати CircleCI в репозиторій GitHub для цього сайту та налаштувати його для запуску Персі.

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