Начало работы с автоматизацией тестирования пользовательского интерфейса
Это первая часть серии публикаций, которые в конечном итоге будут включать мегапубликацию «Приступая к работе с автоматизацией тестирования пользовательского интерфейса», основанную на двухлетнем росте нашего набора автоматизированного тестирования на Code.org. Когда мы только начинали, я ничего не знал об автоматическом тестировании, поэтому пишу заметки, которые мне хотелось бы иметь, когда я только начинал.
В этом посте вы узнаете, почему часто стоит автоматизировать ваши ручные тесты проверки сборки для разработки и производства, как выбирать между вариантами «почти без кода» и «с большим количеством кода» и - для «бескодовых» тестов - какие сервисы стоит взглянуть и почему.
Хотя я собираюсь высказать свое личное мнение об этих сервисах в этой серии, я хотел бы заявить, что в моей работе в некоммерческой организации Code.org мы широко используем Applitools Eyes и Sauce Labs, и они два наших щедрых инфраструктурных партнера (спасибо за то, что помогли принести неизменные учебные программы CS в классы!).
Кодировать или не кодировать?
Обновление собственного набора тестов со временем дает ряд преимуществ, но не всегда подходит для вашего проекта. Один-единственный основатель стартапа, надеющийся справиться с вопиющими ошибками при развертывании / потраченном впустую времени ручном тестировании, может обнаружить, что развертывание Selenium Grid занимает немного времени, и, наоборот, растущая команда может обнаружить, что более простые услуги тестирования ограничивают или становятся все более дорогими / медленными. проверять сборки по мере роста их набора тестов и сложности приложения.
Сегодняшний вариант А. Тесты без кода
Мой давний друг Мэтт, генеральный директор аккуратного веб-сайта по вознаграждению, отчетности и данным для студентов, работающему в режиме реального времени, метко названному LiveSchool, после того, как увидел мои твиты о нашем пакете тестирования на Code.org.
Я дал ему общий обзор, поделившись нашим опытом по наращиванию нашего стека, а также инструментами и услугами, которые мы начали использовать, чтобы (1) наша команда не ударилась локтями и (2) наш код не испортил запланированные уроки в классе. Я тщательно детализировал, когда предпочесть огурец сырому Ruby, использовать ли селекторы или визуальное тестирование, и как раскручивать браузеры в облаке.
Но Мэтту хотелось чего-то простого, и он знал, что я сдерживаюсь от него. Он использовал WebFlow для преобразования рабочего процесса веб-дизайна и прототипирования в LiveSchool - он думал, что должно быть нечто подобное.
Хорошо, а какие дешевые и простые варианты вы упомянули? Я знаю, что ты знаешь!
(Он хорошо меня знает - я сдерживался.)
Автоматическое тестирование больше не предназначено только для наших преданных, трудолюбивых, спорящих о Java-зависимостях профессиональных друзей-профессионалов, занимающихся тестированием (💘). Сейчас существует здоровый набор веб-сервисов, которые можно использовать для запуска и запуска автоматизированного визуального тестирования, не покидая браузера.
Для кого лучше всего подходит автоматическое тестирование на основе веб-сервисов, не связанных с кодом?
- Основатели стартапов, такие как мой друг Мэтт, хотят сэкономить время, которое они обычно тратят до / после развертывания производственной среды, чтобы днем позже не услышать неловкие вопросы поддержки. 🙇
- Сайты, которые меняются нечасто. Команды, которые вручную развертывают свой код (через git push heroku master, cap production deploy или `ssh my-production-server` и` rsync`). 💪
- Сайты, где некоторые поломки - это нормально 💁, а не катастрофически. Маркетинговые сайты, блоги - сайты, без кнопки «Купить» и корзины покупок. Ошибка при производстве может отвлекать одного человека на час или два, но не блокирует выполнение повседневных задач создателей контента или людей, зависящих от вашего сервиса.
Помимо предостережений, эти сервисы помогут вам довольно далеко, и они быстро становятся подходящими для растущих команд, а некоторые работают без сбоев с непрерывной интеграцией, потоками запросов на вытягивание с помощью git и позволяют реализовать расширенную навигацию по сайту и JS-инъекции на странице.
Если вы хотите сделать ставку на будущие улучшения настраиваемости этих сервисов, поддерживать меньше кода и провести некоторые тесты как можно скорее, возможно, стоит бросить кости в будущем повторном внедрении и расширении этих сервисов - даже с большая команда.
Хватит болтать, какие инструменты ?! 😈
Нажатие, просмотр, проверка 👉
За последние пару лет два удивительных инструмента стали очень полезными - Testim и Ghost Inspector.
Testim - это интегрированный в Chrome инструмент для создания тестов и веб-сервис, созданный Ореном Рубиным, который отлично знает, для кого он создает - бывший архитектор программного обеспечения, создавший команду внешнего интерфейса в визуальном конструкторе веб-сайтов Wix , директор по исследованиям и разработкам в сервисе визуального тестирования и сравнения Applitools (который прекрасно интегрируется) и имеет опыт создания масштабных сервисов.
Интерфейс Testim поразил меня, когда я впервые увидел демо. Возможно, опираясь на свой интерфейс в Wix, Орен создал визуальный редактор тестов, который позволяет вам перетаскивать шаги, отлаживать тесты в реальном времени в вашем браузере и даже составлять небольшие фрагменты Javascript в виде самих шагов. Запись даже использует несколько локаторов (объяснение), чтобы улучшить ее выбор с течением времени.
Testim имеет интеграцию с Sauce Labs, сервисом, который предоставляет облачные виртуальные машины с такими браузерами, как Chrome, IE, Firefox, iOS и Android, а также Applitools, сервис визуального тестирования с очень мощным интерфейсом сравнения.
Я считаю, что Testim полезен при работе с функциями внешнего интерфейса, которые требуют нескольких ручных шагов, чтобы добраться до сути того, над чем вы разрабатываете - я просто буду записывать свое выполнение шагов и запускать их с помощью F8 после каждого изменения. Я мечтаю подключить его к автоматическому запуску при активации LiveReload, чтобы увидеть результаты изменения просто вопросом сохранения кода (аналогично тому, что делает Нотч при прямой трансляции разработки своей игры - он начнет сеанс, написав хук, который переходит к функции, над которой он активно работает).
Ghost Inspector, как и Testim, имеет встроенный в Chrome регистратор тестов. Хотя интерфейс редактирования после того, как вы закончите запись, менее удобен для пользователя, чем у Testim, общий процесс подключения и документация Ghost Inspector весьма хорош. 👻
Ghost Inspector поддерживает Chrome и Firefox, но, похоже, не интегрируется с другими поставщиками виртуальных машин для браузеров, такими как Sauce Labs, как это делает Testim.
И Testim, и Ghost Inspector могут быть настроены для работы как часть вашей системы CI и имеют довольно полные API. Помимо тестирования их интерфейсов записи и редактирования, я не использовал ни один из них в конвейере производственного тестирования, поэтому, пожалуйста, протяните руку, если у вас есть опыт работы с любым из них в реальном проекте / команде!
Визуальное тестирование 👀 (или «Дорогой робот: просто взгляни на все»)
Что касается прямого визуального тестирования - «пожалуйста, просто посмотрите мою веб-страницу и скажите, не сломал ли я ее» - теперь есть несколько надежных вариантов.
Applitools Eyes 👀, очень мощный инструмент, о более продвинутом использовании которого я расскажу в одном из следующих постов, также имеет очень простое в использовании расширение Chrome, которое не требует кодирования для использования: Applitools Eyes Express . Одним щелчком мыши вы получаете визуальный тест для текущей веб-страницы и можете сравнить ее с базовыми показателями последнего щелчка. Мы с братом пытались создать аналогичный инструмент для хакатона и обнаружили, что различия в субпиксельном рендеринге делают ложные срабатывания серьезным препятствием - Applitools решает эту проблему, используя под капотом интересное машинное обучение / компьютерное зрение, и даже использует это для агрегирования изменений. через несколько тестов / страниц.
Интерфейс сравнения снимков экрана Applitools Eyes - лучшее, что я когда-либо видел по пробному плану - поистине Photoshop для управления визуальным тестированием - чем глубже вы его используете, тем более мощным вы его найдете. Вы можете нажать кнопку Радар, чтобы указать, где находятся изменения, нарисовать область, за которой любые различия будут игнорироваться, и перемещаться по шагам, принимая и отклоняя изменения по мере продвижения. В Eyes есть комплексные сочетания клавиш, упрощающие выполнение нескольких тестов и одобрение / отклонение изменений. Опять же - подробнее об основном предложении Applitools и интеграции Selenium в одной из будущих публикаций.
Percy.io, немного уступающий требуемому коду части спектра, является фантастическим вариантом для генераторов статических сайтов, которые выводят статические файлы и определенные интерфейсные фреймворки. Percy - это сервис визуального тестирования, который обеспечивает удобную интеграцию рабочего процесса утверждения прямо на GitHub - вы можете превратить красный сбой теста из вашей сборки, содержащей визуальные различия, в симпатичную зеленую точку без необходимости повторного запуска. Если ваш сайт соответствует требованиям своей модели работы и вам не требуется поддержка x-browser, Перси выглядит как сбывшаяся мечта команды, использующей GitHub Flow.
Знай, что - к черту, давай заплатим людям за тестирование моего сайта
RainforestQA отличается от других автоматизированных и ручных служб обеспечения качества тем, что они проверяют ваш веб-сайт на реальных людях. Написание шагов тестирования намного проще, чем написание шагов Selenium, потому что настоящий живой человек будет анализировать их и перемещаться по вашему веб-сайту.
Если на вашем веб-сайте есть критические пути (вход, кнопка «Купить»), Rainforest - отличный инструмент, чтобы убедиться, что они не сломаются до или после развертывания. Когда я впервые попробовал его, я был удивлен, насколько быстро он перешел с домашней страницы на чтение отзывов живого человека, который использовал мой сайт.
Хотя они используют ручные тестеры, команда Rainforest понимает образ мышления разработчиков, имея обширный API для запуска сборок и использования их результатов. С недавним здоровым раундом финансирования и растущей клиентской базой стоит следить за Rainforest, чтобы узнать о текущих разработках, направленных на то, чтобы ваш сайт не ломался. (Основатель Рассел Смит также является забавным подписчиком в Твиттере!)
Идите вперед и не ломайте вещи
Сейчас лучшее время для написания быстрых автоматизированных тестов. Исходя из того, что два года назад начал смотреть на автоматическое тестирование - писать код и ждать минуту, чтобы посмотреть результат, отлаживать неработающий код шага теста после изменения кода и изо всех сил пытаться найти способы заблокировать ошибки с помощью тонких визуальных изменений, я постоянно поражались инструментами, которые теперь становятся доступными.
Я надеюсь сохранить этот пост в качестве свежего источника информации о новинках в мире автоматизированного тестирования, в котором практически отсутствует код. Сообщите мне @bcjordan о том, что я пропустил, о новых интересных функциях упомянутых инструментов и о любом личном опыте, и я постараюсь сохранить это в свежем виде.
Любопытно, что еще есть? В большой команде с критически важными продуктами? Либо подпишитесь здесь на Medium (просто нажмите зеленую кнопку подписки в нижней части экрана) или @bcjordan, и я сообщу вам, когда будет готов мой следующий пост.
Давайте узнаем, как сэкономить время, и пусть милые роботы вместе протестируют наш код! ⚡️
