Варун Вачнар пообщался с разработчиками из Adobe, BBC, Twilio, Shopify, Peloton и обобщил подходы, которые они используют при тестировании UI — "How to actually test UIs".

В статье рассказывается о подходах тестирования интерфейсов, создаваемых с помощью компонентного подхода. Для обособленного тестирования компонентов команды используют Storybook, для тестирования поведения компонентов — Testing Library, для тестирования доступности — Axe, для E2E-тестов — Playwright и Cypress.

Есть раздел про визуальное тестирование (тестирование скриншотами), но там нет упоминания инструментов с открытым исходным кодом, например, Hermione, Gemini, cypress-image-snapshot.

Как бы то ни было, статья хорошая. Очень рекомендую почитать.

#testing #tool

https://storybook.js.org/blog/how-to-actually-test-uis/

🛠 Test Collab — современный инструмент, предлагающий целую платформу для тестирования приложений. Одна из его особенностей — инновационный способ интеграции со всеми популярными системами отслеживания ошибок и инструментами автоматизации. Ко всему прочему, система содержит в себе возможности agile-методологии, отслеживания времени, управления требованиями, планирования и составления расписаний.

Daily Coding #инструменты #testing

🛠 Stepsize — issue-трекер в вашем редакторе. С его помощью можно управлять техническим долгом и задачами поддержки.

Допустим, вы наткнулись на участок кода, который нужно усовершенствовать. Но у вас нет времени заняться этим прямо сейчас. Установив Stepsize, вы сможете сделать закладку для этого отрывка кода или создать issue.

▍При помощи Stepsize можно:

— создавать и просматривать issues прямо в редакторе
— отслеживать технический долг и расставлять приоритеты для задач, связанных с ним
— добавлять ключевые issues в ваши спринты при помощи интеграции с Jira
— работать над техническими проблемами совместно с командой.

Это отличный инструмент для команд, которые хотят сделать технический долг видимым и начать погашать его.

Daily Coding #инструменты #testing

Тестирование веб-компонентов в Light DOM проще, чем кажется. Херардо Родригес рассказывает, как связка Vitest, Lit, DOM Testing Library, vitest-axe, и продуманная архитектура Light DOM упростили проверку событий, форм, фокуса, и доступности в крупном легаси-проекте. #js #webcomponents #testing

https://cloudfour.com/thinks/testing-html-light-dom-web-components-easier-than-expected/

Пять тестов доступности для каждого компонента. Хидде де Врис предлагает необходимые проверки для компонентов дизайн-системы: клавиатура, доступные токены цвета и отступов, понятные имена элементов управления, устойчивость при 400% масштабе и пользовательских настройках, а также роли, состояния и свойства для скринридеров. #a11y #testing

https://zeroheight.com/blog/5-accessibility-checks-to-run-on-every-component/

Тестирование доступности в Playwright: что пропускают axe и Lighthouse. Дэвид Мелло объясняет, что автоматические инструменты вроде axe и Lighthouse обнаруживают лишь 30-40% нарушений WCAG. В статье рассматриваются десять категорий проблем доступности, которые сканеры не находят, от неоднозначного текста ссылок до проблем с клавиатурной навигацией, и предлагаются паттерны тестирования в Playwright и стратегии ручной проверки. #a11y #testing

https://www.davidmello.com/software-testing/test-automation/playwright-accessibility-testing-axe-lighthouse-limitations