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

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

Имея как функциональное, так и визуальное тестирование на вершине пирамиды тестирования программного обеспечения, необходимо задать вопрос:

  • Должно ли функциональное тестирование быть связано с кросс-браузерным тестированием?

Or

  • Должно ли визуальное тестирование быть связано с кросс-браузерным тестированием?

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

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

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

Функциональное тестирование — это тип тестирования программного обеспечения методом «черного ящика», при котором программное обеспечение тестируется на соответствие функциональным требованиям/спецификациям с целью обнаружения ошибок/дефектов, если таковые имеются.

Функциональное тестирование состоит из 6 шагов:

  1. Идентификация функций, которые, как ожидается, будет выполнять программное обеспечение.
  2. Создание набора входных данных на основе спецификаций функции
  3. Определение выхода на основе спецификаций функции
  4. Выполнение тестового примера
  5. Сравнение фактического и ожидаемого результата
  6. Чтобы проверить, работает ли приложение в соответствии с потребностями клиента

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

Возьмем, к примеру, следующий случай:

  • Страница входа в ваше приложение
  • Пользователь должен ввести свои данные и нажать «Отправить», чтобы войти в систему.
  • Успешный вход должен перенаправить пользователя на домашнюю страницу приложения.

Вы берете вышеуказанное функциональное требование и анализируете его, чтобы найти:

  • Ввод этой операции - данные пользователя
  • Результатом этой операции является то, что пользователь перенаправляется на домашнюю страницу после успешного входа в систему.

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

На сегодняшний день одной из самых популярных платформ для функционального или E2E-тестирования является Cypress.io.

Ниже приведен пример скрипта Cypress.io, который автоматизирует функциональное/E2E-тестирование:

Сценарий простой и понятный:

  1. Открывает страницу входа в приложение
  2. Заполняет имя пользователя и пароль
  3. Находит и отправляет форму
  4. Ожидает загрузки страницы и проверяет, найден ли на ней текст «домашней страницы».

Если вход выполнен успешно, приложение соответствует требованиям.

Теперь, когда у вас есть представление о том, что такое функциональное или E2E-тестирование, давайте рассмотрим визуальное тестирование.

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

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

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

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

Пример: визуальное тестирование с помощью Cypress и Applitools

Например, вы можете начать писать визуальные тесты с помощью Applitools SDK, которые легко интегрируются с E2E-тестами Cypress.io.

Давайте возьмем тот же E2E-тест и добавим несколько шагов для вставки визуального теста:

Взяв тот же тестовый скрипт Cypress.io, вы можете добавить вызовы Applitools SDK для создания снимков на разных этапах выполнения этого скрипта:

Вы заметили, как визуальные тестовые сценарии улучшают E2E-тесты, дополняя друг друга?

Это не вся история! Теперь состояние DOM, захваченное вместе с визуальными снимками, отправляется в Applitools Ultrafast Grid в облаке. В зависимости от того, как вы настроите свой тест, Ultrafast Grid настроит и запустит новую среду тестирования — разные браузеры, эмуляторы устройств, разрешения экрана. Затем он запускает ваши снимки DOM, генерирует изображения и, наконец, отправляет их на сервер искусственного интеллекта Applitools.

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

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

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

Кроссбраузерное автоматизированное тестирование

Что это такое и зачем оно нам нужно?

Кросс-браузерное автоматизированное тестирование — это запуск автоматических тестов в нескольких и разных браузерах, принадлежащих разным платформам и устройствам.

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

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

Вышесказанное не на 100 % верно, когда речь идет о функциональных или E2E-тестах. Тем не менее, это всегда верно, когда речь идет о кросс-браузерном визуальном тестировании.

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

Кроссбраузерные функциональные тесты

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

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

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

Другой пример, упомянутый ранее, когда пользователь вводит свои данные в форму входа и перенаправляется на домашнюю страницу, — это ответственность кода JavaScript, если он имеет форму SPA.

Еще один пример теста E2E — убедиться, что кнопка «Выход» отображается на верхней панели навигации после входа пользователя в систему. Эта функция включает в себя написание функции для проверки LocalStorage и отображения кнопки «Выход». Еще раз, этот E2E тестирует процесс входа в систему, который управляется написанием кода JavaScript, если это SPA.

Я подчеркиваю следующее: если вы следуете самой строгой процедуре при написании кода JavaScript и используете нативные API-интерфейсы JavaScript, сертифицированные для разных браузеров, при выборе сторонних библиотек, совместимых с разными браузерами, вы убедитесь, что ваш E2E тесты (после того, как они запустятся и пройдут в одном браузере) будут работать и в других браузерах. Есть исключения из правил, но это лишь небольшой процент ваших E2E-тестов.

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

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

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

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

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

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

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

Поэтому имеет смысл использовать Applitools Ultrafast Grid для решения этой проблемы. Вы увидите, насколько недорогим и надежным на самом деле является выполнение кросс-браузерного визуального тестирования.

Почему Applitools Ultrafast Grid?

Если вы новичок в Ultrafast Grid, прочитайте мою статью Как я провел 100 UI-тестов всего за 20 секунд 🚀.

Вкратце, Ultrafast Grid состоит из двух компонентов:

  • Клиентский компонент, представляющий SDKS, и библиотека, которые будут использоваться при написании визуальных тестов, для захвата моментальных снимков DOM и отправки этих моментальных снимков серверному компоненту, живущему в облаке.
  • Серверный компонент обычно размещается в облаке и получает моментальные снимки DOM от своего встречного клиентского компонента. Основываясь на наборе параметров конфигурации, Ultrafast Grid создаст кросс-браузерную тестовую среду, запустит в ней все ваши снимки DOM, сгенерирует снимки изображений и, наконец, отправит эти снимки в механизм искусственного интеллекта Applitools, который берет на себя миссию выполнения. сравнение и анализ изображений.

Когда вы используете Ultrafast Grid в своем визуальном тестировании, вы обычно настраиваете параметры своих тестовых прогонов.

Пример такого файла конфигурации:

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

Мало того, с Ultrafast Grid ваши визуальные тесты выполняются быстрее. Вы больше не отправляете моментальные снимки образа сервера, которые вы сделали на стороне клиента, а отправляете моментальные снимки DOM, содержащие необходимые ресурсы из HTML, CSS и JavaScript, которых достаточно для повторной генерации на сервере (через Ultrafast Grid) для того, чтобы для создания реальных моментальных снимков изображения.

Используя Ultrafast Grid, вы получаете бонус! Как уже упоминалось, при написании визуальных тестов в Applitools вы выполняете свои функциональные или E2E-тесты, добавляете к ним несколько вызовов для подключения к Applitools SDK, и вы готовы начать визуальное тестирование. Таким образом, косвенно ваши E2E-тесты выполняются в нескольких браузерах, и вы получаете возможность недорого запускать функциональные тесты в нескольких браузерах.

Вывод

Кроссбраузерное тестирование — это не вопрос «Да» или «Нет». На то, стоит ли вам это делать, влияют многие факторы, особенно когда вы имеете дело с функциональным или E2E-тестированием.

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

Создание эффективной, надежной и точной среды тестирования стало очень простым, если вы решите использовать такие инструменты, как Applitools Ultrafast Grid.

Чтобы получить больше информации

Первоначально опубликовано в Блоге Applitools.