Поддержание непрерывного качества с помощью визуального тестирования

Опубликовано: 2022-03-10
Краткий обзор ↬ Добавляя в тесты визуальные элементы, вы можете получить больше возможностей для добавления значимых способов поддержания высокого уровня качества вашего приложения. Колби Фейок объясняет, как это сделать.

Тестирование является важной частью рабочего процесса любого разработчика. Это помогает нам гарантировать, что наш проект будет поддерживать высокий уровень качества, а также предотвратить появление каких-либо надоедливых ошибок.

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

Добавляя автоматизированное визуальное тестирование , мы можем устранить эти ненадежные тесты, выровняв наши конвейеры тестирования, обеспечивая такой охват (и многое другое), используя преимущества интеллектуального сравнения изображений с использованием снимков экрана нашего веб-сайта или приложения.

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

Краткий обзор некоторых типов автоматизированного тестирования

Автоматизированное тестирование — интересная часть цикла разработки. Некоторые клиенты или заинтересованные стороны могут четко видеть ценность, которую они предоставляют, но другие предпочитают любое время разработки, потраченное на разработку чистой функции.

Иногда это может противоречить интуиции, когда цель автоматизированного тестирования состоит в том, чтобы защитить бизнес или не дать команде тратить время на исправление ошибок. Написание надежных автоматизированных тестов может предотвратить крупные финансовые потери! В конечном счете, это риск, на который некоторые готовы пойти больше, чем другие.

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

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

Давайте посмотрим, как некоторые из этих стратегий тестирования выглядят на практике.

Модульное тестирование

Модульное тестирование фокусируется на тестировании небольших областей приложения . Хотите проверить, правильно ли работает функция, вычисляющая общую сумму заказа после рекламных акций? Вы хотите написать модульный тест.

 function myBusinessLogic(pricePerItem, quantity, discount) { const subtotal = pricePerItem * quantity; return subtotal - ( discount * subtotal ); } expect(myBusinessLogic(2, 4, .1)).toEqual(7.2);

Самое замечательное в модульных тестах то, что они дешевы в написании и не требуют много времени для запуска. Вот почему вы часто видите, как компании тратят много времени на создание набора модульных тестов, чтобы охватить эти детализированные части приложения.

Но из-за этого сфокусированного тестирования модульное тестирование может не охватывать то, как эти разные части работают вместе, и именно здесь мы начинаем переходить к интеграционному тестированию.

Интеграционное тестирование

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

 cy.get('.add-to-cart').click(); cy.url().should('contain', 'cart'); cy.get('.cart li').contains('My Item');

Вполне возможно, что ваш небольшой компонент пользовательского интерфейса сам по себе работает так, как ожидается. Ваши синтетические события могут правильно запускаться в экземпляре onClick. Этот код, обертывающий ваши запросы API, может отлично работать с некоторыми фиктивными данными. Но между этими двумя частями, работающими вместе, могут быть пробелы, которые ваши модульные тесты могут не обнаружить.

Интеграционные тесты — это убедительный способ протестировать ваше приложение, но вы можете сделать еще один шаг вперед, если хотите протестировать «все».

Сквозное тестирование

Сквозное тестирование охватывает весь путь пользователя от начала до конца для целенаправленного рабочего процесса. Например, если я создаю магазин электронной коммерции, «счастливый путь» (или ожидаемый путь с наименьшим сопротивлением) будет заключаться в том, чтобы найти продукт, добавить его в корзину и оплатить эти товары. Если я пишу сквозной тест, я бы зафиксировал весь этот процесс, т. е. от поиска продукта на странице со списком продуктов до оплаты этого товара.

 cy.visit('/products'); cy.get('.product a[href="/product/1234"]').click() cy.url().should('contain', 'product/1234'); ... cy.get('.order-button').click(); cy.url().should('contain', 'receipt'); cy.get('.receipt li').contains('My Item');

Самое замечательное в сквозном тестировании то, что это, по сути, большой интеграционный тест. Вы фиксируете множество различных компонентов приложения, в том числе то, как работает пользовательский интерфейс, правильно ли реагируют API и как эти части работают вместе.

Проблема в том, что сквозное тестирование и даже интеграционное тестирование требуют больше времени для написания, и они также занимают намного больше времени для запуска. Итак , как мы можем воспользоваться всеми нашими вариантами тестирования и собрать набор тестов, который обеспечит эффективный способ покрытия нашего приложения?

Использование различных типов тестирования

Существует множество способов мышления, которые обычно описывают, сколько тестов каждого типа вы должны потратить на написание.

Майк Кон придумал концепцию «пирамиды тестов» в своей книге « Succeeding with Agile ».

Форма пирамиды с типами испытаний
Пирамида, включая UI, сервис и модульное тестирование (большой предварительный просмотр)

Он утверждает, что вам следует писать больше юнит-тестов, где они дешевле и быстрее выполняются. Хотя на его исходной диаграмме различные тесты обозначаются немного по-разному, чем больше вы склоняетесь к тестированию интеграционного типа, тем медленнее они выполняются и дороже в написании. Хотя эти тесты ценны, вам не нужно иметь столько интеграций или сквозных тестов, сколько модульных тестов.

Наличие такого баланса может помочь вам сосредоточиться на учете важнейших частей приложения, таких как бизнес-логика с модульными тестами и их взаимодействие с интеграционными тестами, но Кент С. Доддс утверждает, что технология тестирования достигла точки, когда нет более длительные компромиссы с большими затратами на написание интеграционных тестов, и именно здесь появляется его концепция «тестового трофея».

Форма трофея с видами испытаний
Трофей, включая End to End, Integration, Unit и Static (большой предварительный просмотр)

В современных средах разработки у нас есть множество замечательных инструментов, таких как Cypress, Selenium и Playwright, каждый из которых дает разработчикам и QA-инженерам возможность писать тесты, которые легко взаимодействуют с такими браузерами, как Chrome и Firefox.

С Cypress написание теста, который нажимает кнопку, может выглядеть так же просто, как:

 cy.get('#my-button').click()

Возможно, это так же просто, как проверить, работает ли кнопка с синтетическими событиями, если не проще. Самое приятное то, что вы проверяете, как эта кнопка на самом деле работает в браузере.

Независимо от того, на какую диаграмму вы подписаны, в конечном итоге цель состоит в том, чтобы взвесить различные варианты между стоимостью и скоростью , чтобы определить, что подходит для вашего конкретного приложения. Важно не просто достичь 100% в своем отчете о покрытии, но и убедиться, что опыт, который вы даете посетителям, работает должным образом.

Но независимо от набора тестов, которые вы запускаете, эти программные тесты, которые взаимодействуют только с DOM (объектной моделью документа) и проверяют ее, упускают одну большую часть головоломки: то, как ваши посетители визуально видят это приложение.

Что не охватывают традиционные виды тестирования

Когда вы выполняете модульное, интеграционное и сквозное тестирование своего приложения, все они имеют одну общую черту. Они все тестируют код.

Я имею в виду, что они не тестируют то, что на самом деле видит посетитель вашего приложения.

Если вы запускаете набор интеграционных тестов и, как и в нашем примере ранее, тестируете, что кто-то может добавить продукт в корзину и купить его, на каждом этапе пути вы находите элемент в DOM с помощью кода и подтверждаете, что это работало таким же образом.

Это не проверяет такие вещи, как разборчивость текста на вашей странице. Кто-то добавил изменение CSS, которое случайно перемещало все элементы влево и переворачивало их вверх дном?

Приложение Instagram с перекрывающимися сообщениями, в том числе спонсируемыми
Все посты в Instagram сместились в один угол (большой превью)

Эти типы ошибок называются «визуальными ошибками», когда они могут пройти все ваши тесты с честью, но когда кто-то на самом деле смотрит на них, это не совсем правильно или, что еще хуже, совершенно непригодно для использования.

На самом деле мы не можем рассчитывать на 100% полное покрытие каждой детали пользовательского интерфейса с помощью традиционного тестирования. Из-за бесконечного количества состояний приложения и того факта, что мы всегда добавляем новые функции, оно просто не масштабируется.

Это то, что приводит нас к заголовку этой истории: Визуальное тестирование .

Еще после прыжка! Продолжить чтение ниже ↓

Что такое визуальное тестирование?

Визуальное тестирование захватывает видимый вывод (например, снимок экрана) приложения и сравнивает его с тем же приложением в другой момент времени.

Обычно это происходит путем создания базового снимка экрана или ранее захваченного экземпляра приложения с ожидаемыми результатами и сравнения каждого нового теста с этим базовым состоянием.

Панель визуального тестирования, показывающая различия страницы
Визуальное отличие от ошибок на странице (большой предварительный просмотр)

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

Виды визуального тестирования

Интересная вещь о визуальном тестировании заключается в том, что существуют разные способы справиться с этим.

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

Как вы могли себе представить, при работе с Интернетом вещи имеют тенденцию немного различаться между загрузкой страниц и обновлениями браузера. Если браузер отрисовывает страницу на 1 пиксель из-за изменения рендеринга, показа вашего текстового курсора или «просто так», ваши развертывания могут быть заблокированы из-за этих неудачных тестов.

Ваши тесты также склонны к сбоям при работе с динамическим контентом. Например, если вы ежедневно проводили попиксельные визуальные тесты на главной странице этого сайта, Smashing Magazine , вы получите много неудачных тестов, поскольку они производят все больше и больше контента.

Лучший способ справиться с визуальным тестированием — использовать такие технологии, как ИИ, когда каждый раз при запуске теста среда тестирования интеллектуально просматривает снятый снимок экрана по сравнению с базовым уровнем.

Он может обнаружить, что два захвата различны, или даже определить, является ли это изменением содержимого, а не изменением макета. Он не будет помечать этот тест как не пройденный, если что-то на самом деле не изменилось, и вы даже можете добавить правила для игнорирования динамических областей приложения, которые могут измениться из-за этого содержимого.

Где помогает визуальное тестирование

Визуальное тестирование дает возможность фиксировать текущее состояние приложения именно так, как его видит ваш клиент. Это делает его привлекательным для любого приложения, с которым будут взаимодействовать реальные люди.

Захватив этот моментальный снимок, он обеспечивает покрытие многих частей этого приложения, а не только отдельного детализированного компонента, для которого вы написали тест. В конечном итоге он захватывает контекст вокруг этого компонента, что приводит к более широкому охвату.

Это становится отличным способом обеспечить широкое покрытие с низкими накладными расходами . Вернемся к тестовой пирамиде или тестовому трофею. Мы действительно можем обеспечить всестороннее покрытие в дополнение ко всем другим нашим тестам.

Как работает визуальное тестирование?

Суть проста — сравнение двух изображений друг с другом и поиск различий — но это немного сложнее.

Сравнение изображений

При реализации визуального тестирования цель будет заключаться в том, чтобы обеспечить охват критических рабочих процессов, которые могут фиксировать, как реальный человек использует приложение. Это часто включает в себя самый первый экран, который кто-то может увидеть, но обычно это не единственный экран, который они видят.

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

Имея это в виду, вам нужно делать снимок экрана на каждом этапе пути. Например, если вы тестировали интернет-магазин, вы можете добавить следующие шаги:

  • Список товаров, загруженных на страницу;
  • Страница продукта после выбора одного продукта;
  • Пользовательский интерфейс корзины на странице после добавления продукта в эту корзину;
  • Страница корзины после перехода в корзину;
  • Пользовательский интерфейс оплаты и доставки после входа в процесс оформления заказа;
  • Страница получения после успешной покупки.

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

Технические биты

По мере того, как вы будете планировать снимки экрана, вам понадобится механизм для автоматизации этих задач. Что-то, что может взаимодействовать с браузером на основе набора задач.

Именно здесь появляются популярные платформы автоматизации браузера, такие как Selenium, Cypress и Playwright, где эти среды тестирования используют API-интерфейсы браузера для выполнения ваших команд, находя и нажимая элементы так же, как это делает человек, где вы затем сообщаете системе визуального тестирования. когда визуально фиксировать состояние пользовательского интерфейса.

В случае с Cypress и Applitools Cypress перемещался по каждой странице, где Applitools SDK извлекал моментальный снимок DOM и отправлял этот снимок в облако Applitools, где он, наконец, генерировал скриншоты для сравнения.

Диаграмма, показывающая, как визуальное тестирование работает с Cypress и Applitools
Визуальное тестирование с помощью Cypress и Applitools (большой предварительный просмотр)

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

Интеграция с существующими средами тестирования

Подобно приведенной выше интеграции Cypress и Applitools, интеграция обычно не вызывает затруднений. Многие доступные платформы визуального тестирования могут интегрироваться непосредственно в существующие среды тестирования, в основном это зависит от того, какие SDK у них есть.

 cy.visit('/product/1234'); cy.eyesOpen({ appName: 'Online Store', testName: 'Product Page' }); cy.eyesCheckWindow(); cy.eyesClose();

Это означает, что обычно вам не нужно полностью переписывать набор тестов, чтобы усилить тесты и получить визуальное покрытие; вы можете добавить эти контрольные точки к уже имеющимся тестам.

Автоматизация тестов

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

Традиционные решения CI/CD, такие как Jenkins или Travis CI, позволяют запускать тесты в их средах одновременно с остальной частью конвейера интеграции и развертывания. Относительно новыми в области автоматизации являются такие инструменты, как GitHub Actions, где они предоставляют механизм, аналогичный традиционным средам CI/CD, но прямо внутри вашего существующего репозитория GitHub. Это позволяет легко выиграть при попытке автоматического запуска тестов и других задач кода, когда вам не нужна совершенно новая система, а вместо этого используются существующие инструменты.

 name: Node.js CI on: [push, pull_request] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: 12.x - run: npm ci - run: npm test

Но независимо от того, какую среду вы используете, в конечном итоге вы подчиняетесь требованиям среды тестирования. Cypress работает без проблем везде, где вы можете установить Node.js, что довольно распространено в наши дни, если у вас есть доступ к безголовому браузеру, такому как Electron или Chrome. Другим может потребоваться небольшая дополнительная среда, но на этом этапе вы обычно можете формировать эту среду по своему усмотрению, создавая условия, необходимые для запуска ваших тестов.

Каковы преимущества визуального тестирования?

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

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

Меньше кода для поддержки

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

Взаимодействия, по сути, представляют собой навигацию по приложению, поиск страницы или пользовательского потока, которые вы хотите захватить. Независимо от того, как вы тестируете, вам, вероятно, потребуется поддерживать это в той или иной форме.

С другой стороны, скриншоты охватывают все утверждения, которые вы обычно пишете в тесте. Сравнивая каждый снимок экрана с исходным, вы автоматически убеждаетесь, что каждый компонент вашего проекта работает точно так, как задумано.

Тесты менее хрупкие

И, используя эти снимки экрана в качестве механизма утверждения, ваши тесты будут менее ненадежными и хрупкими.

Если вы пишете утверждение для определенной части DOM, например, используя идентификатор или автоматически сгенерированный селектор, вы рискуете провалить тест при любом изменении этого компонента.

С идентификатором кто-то может просто случайно удалить или изменить его. Возможно, вы думали, что это только для функциональных целей, и обновляли его при переделке вещей, что закончилось нарушением теста (со мной такое случилось!).

Или, если вы используете общие селекторы, сгенерированные автоматически или нет, они, как правило, очень специфичны, поскольку вы тестируете очень определенные части приложения . Если вы в конечном итоге вложите какой-то HTML или немного переместите элементы в коде, даже если вы не изменили его внешний вид, это может привести к нарушению этого теста.

Проверка того, что люди на самом деле используют

Говоря о тестировании того, как это выглядит визуально, при визуальном тестировании вы проверяете то, что на самом деле видят ваши посетители или клиенты.

Использование надлежащего семантического HTML не делает ваш проект пригодным для использования автоматически. Небольшое изменение CSS (например, z-index) может полностью изменить удобство использования и внешний вид.

Поиск Gmail с перекрывающимися кнопками в раскрывающемся списке
Визуальная ошибка в Gmail (большой предварительный просмотр)

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

Рекомендуемая литература : Управление Z-индексом CSS в больших проектах

Тестирование вещей, которые вы не думали тестировать

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

Рассмотрите список тестов, которые есть в вашем наборе, это те, которые вы думали написать или написали, потому что ранее столкнулись с ошибкой. Что насчет остальной части приложения?

Этот снимок экрана будет отражать больше деталей и контекста, которые, возможно, не были включены в другие ваши тесты.

Что не охватывает визуальное тестирование?

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

Тестирование бизнес-логики, управляемой данными

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

По-прежнему важно зафиксировать эту сложную бизнес-логику с помощью модульного тестирования, убедившись, что вы фиксируете различные варианты использования, например, как различные скидки влияют на общую сумму.

Комплексное тестирование API

Имея дело с API, вы можете думать о визуальном тесте как об интеграционном тесте. Мы можем проверить, что при взаимодействии с браузером наша логика запроса работает должным образом. Но он не дает исчерпывающего представления о том, как работает этот API.

Подобно бизнес-логике, ваш API по-прежнему должен поддерживаться набором тестов , которые гарантируют, что он работает должным образом, например, модульными тестами или проверками работоспособности.

Начало работы с визуальным тестированием

В качестве еще одного инструмента в нашем арсенале визуальное тестирование действительно может помочь обеспечить еще один уровень охвата, который поможет нам поддерживать высокий уровень качества наших приложений, но с чего же нам начать?

Встраивание в жизненный цикл разработки

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

Например, традиционно тесты используются только для проверки того, что код работает должным образом, но мы также можем использовать визуальное тестирование для передачи дизайна и совместной работы с UX . Дизайнеры в команде могут использовать свои макеты в качестве основы и легко использовать их для сравнения реального опыта.

Но с точки зрения кода визуальное тестирование может процветать в автоматизированных средах, таких как проверка запросов на вытягивание, промежуточные среды перед развертыванием и проверка работоспособности после развертывания.

Комментарий в GitHub Pull Request, показывающий проверки визуального тестирования
GitHub Action запускает визуальные тесты (большой предварительный просмотр)

Вы даже можете запустить свое визуальное тестирование на cron, заменив синтетические события проверки работоспособности, которые обычно ненадежны и на самом деле никогда не сообщают вам, в каком состоянии находится ваше приложение.

К счастью, существует множество вариантов как того, какой сервис вы используете, так и точек интеграции для использования этих сервисов.

Доступные решения для визуального тестирования

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

Многие платформы используют попиксельное визуальное тестирование для выполнения проверок. Сюда входят такие инструменты, как Percy и Chromatic, которые будут отмечать изменения между двумя снимками экрана.

Затем у вас есть визуальное тестирование на основе ИИ, где Applitools — действительно единственный сервис, который в настоящее время предоставляет эту возможность. Вместо того, чтобы просто проверять изображения попиксельно, Applitools интеллектуально сравнивает изображения, избегая каких-либо ненадежных тестов или ложных срабатываний , обеспечивая обнаружение значимых изменений.

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

Интеграция визуального тестирования

При интеграции выбранной платформы визуального тестирования у вас есть возможность начать с нуля или воспользоваться более простым путем интеграции в существующую среду тестирования. Такие инструменты, как Applitools, упрощают эту задачу, а большое количество поддерживаемых SDK упрощает внедрение в существующие рабочие процессы.

Хорошим примером этого является то, что вы уже настроили и используете Cypress:

 it('should log into the application', () => { cy.get('#username').type('colbyfayock'); cy.get('#password').type('Password1234'); cy.get('#log-in').click(); cy.get('h1').contains('Dashboard'); });

Если вы уже выполняете программные тесты, вы можете просто наслоить визуальное тестирование, чтобы обеспечить еще один уровень охвата.

 it('should log into the application', () => { cy.eyesOpen({ appName: 'My App', testName: 'Login' }); cy.get('#username').type('colbyfayock'); cy.get('#password').type('Password1234'); cy.get('#log-in').click(); cy.eyesCheckWindow(); cy.eyesClose(); });

А некоторые SDK делают это еще проще: если вы уже используете библиотеку Storybook, все, что вам нужно сделать, это установить пакет с помощью npm и выполнить простую команду, после чего у вас будет полный охват всех ваших компонентов.

 npm install @applitools/eyes-storybook --save-dev npx eyes-storybook

В конечном счете, самый большой вопрос заключается в том, какую среду тестирования вы хотите использовать, и поддерживает ли служба, которую вы хотите использовать, эту среду.

Творческое использование визуального тестирования

Помимо получения еще одного уровня охвата тестирования для вашего приложения, существует множество других способов, которыми вы можете воспользоваться преимуществами визуального тестирования.

  • Мониторинг работоспособности
    Регулярно проводите осмысленный визуальный тест вместо стандартного мониторинга времени безотказной работы с использованием хрупких синтетических событий.
  • Сотрудничество в области дизайна/UX
    От передачи до проблем с удобством использования — используйте визуальное тестирование, чтобы предоставить всей команде возможность для совместной работы.
  • Тестирование доступности
    Зафиксируйте ключевые проблемы, которые могут ограничить доступность вашего приложения.
  • Исторические снимки
    Периодический запуск визуального теста может помочь вам сделать моментальные снимки, легко давая вам возможность сослаться на более раннее состояние проекта.
  • Тестирование локализации
    Благодаря визуальному тестированию на основе ИИ, способному обнаруживать изменения контента, у вас есть возможность убедиться, что все выглядит и работает должным образом, независимо от языка. Бонус: вы можете сократить накладные расходы при попытке сравнить разные версии данного языка.

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