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

Лето в этом году было отличным, статистика показала, что этот год был самым теплым и засушливым - за последние 40 с лишним лет и угадайте что; Я забронировал несколько выходных на работе 😎 и нашел время для размышлений. Раньше я работал над автоматизацией серверного API, а в последнее время - над автоматизацией iOS (как нативной, так и иной), но всегда хотел попробовать свои силы в некоторой веб-автоматизации js, когда пришла идея написать эту статью. Итак, на выходных я нашел время, чтобы попробовать это, а затем поделился своим опытом. Многое из того, что я здесь говорю, также описано на https://github.com/mvemjsun/jsWebAutomationDemo.

Что я хотел сделать

  • Я хотел написать простое веб-приложение, которое работало бы как SUT (тестируемая система), чтобы у меня был полный контроль над тем, над чем я хочу экспериментировать.
  • Я хотел писать тесты в стиле BDD (мне нравятся исполняемые спецификации 👍🏼).
  • Я хотел использовать селен.
  • Я хотел иметь возможность составить отчет об испытаниях (мне нравится видеть все эти зеленые отчеты ✅).

На случай, если вы уже выходите и хотите запачкать руки, есть репозиторий github с этим README, чтобы вы начали 🏃🏻.

Инструменты выбора

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

  • Используйте Node.js для создания фиктивного SUT.
  • Используйте огурец для проведения моих тестов BDD.
  • Используйте Javascript для написания моих тестов.
  • Используйте Selenium Webdriver для управления браузером Chrome
  • Используйте библиотеку утверждений Chai.
  • Наконец, я бы использовал модуль узла cucumber-html-reporter для создания отчета о тестировании HTML.

Примечание. Вам понадобится установленный на вашем компьютере node.js, если вы хотите попробовать код, указанный в этой статье. https://nodejs.org/ru/.

Знаменитый файл «Package dot JSON»

Проект узла можно инициализировать с помощью командыnpm init внутри каталога вашего проекта. Это создаст для вас минимальный скелет проекта вместе с файлом package.json. Более подробная информация о package.json доступна по адресу https://docs.npmjs.com/files/package.json.

Каждый проект node js должен иметь package.json файл, содержащий различные зависимости модулей проекта, scripts, который мы можем запускать для упрощения повторяющихся задач вместе с некоторыми другими метаданными. Полную версию этого файла можно найти в репозитории с именем package.json. После того, как у вас есть файл package.json и вы включите в него необходимые вам модули узлов, мы можем запустить npm install в корневом каталоге проекта, и он установит все зависимости проекта внутри каталога node_modules (npm создаст это автоматически). Наш package.json выглядит примерно так, как показано ниже.

Тестируемая система

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

Приложение узла очень простое, оно отвечает на /login запросы GET и POST. Он также отвечает на /logout запрос POST. Вот и все 😎 Вхаат! Да, я хотел, чтобы все было просто, чтобы мы могли больше сосредоточиться на тестировании. Основная часть приложения находится в файле index.js.

Полная версия кода приложения и README доступны в репозитории git по адресу https://github.com/mvemjsun/jsWebAutomationDemo. Для тех, кто проницателен, он использует express для построения маршрутов ReSTful (GET, POST и т. Д.) И pug 🐶, который представляет собой механизм шаблонов для создания и рендеринга HTML-страниц (вам не нужно его использовать, но это делает его чище) .

Переходим к тестам 🚀🥒🕸

Различные части тестовой среды:

  • Особенности огурца 🥒
  • Объекты страницы 📃
  • Определения шагов ⼻
  • Крючки Cucumber для запуска кода установки и удаления
  • Генератор отчетов в формате HTML📊

Краткое описание того, что делают эти части. файлы функций - это простые текстовые файлы, поведение которых описано в нашем приложении на простом английском языке (также называемом герхин). Каждая строка файла функций (начиная с Then, When…) называется шагом. Реализацию этого можно найти в файле login.feature в репозитории git.

Объекты страницы абстрагируют свойства и поведение веб-страницы в отдельный класс. Это избавляет от необходимости помещать сложную логику в определения шагов (код, в котором происходит фактическое выполнение теста) и изолирует тестовый код от дизайна экрана. Ниже приведен пример класса объекта страницы. Вы можете заметить, что страница расширяет класс BasePage, в котором есть абстракции для взаимодействия с селеном, поэтому вы можете посмотреть файл basePage.js.

Современный javascript теперь имеет возможность писать классы, ура 🎉🙌🏼. Здесь вы видите ключевое слово class и constructor внутри него. Эти классы инициализируются с использованием синтаксиса new ClassName().

async в определении функции используется javascript нового стиля 🙏🏼. Асинхронные функции по существу возвращают aPromise, который затем можно связать с другими выражениями. Это помогает писать синхронно выглядящий код, который на самом деле выполняется асинхронно 💯. В Интернете есть масса информации об этом. Одно из таких кратких вступлений находится на https://babeljs.io/docs/en/learn/#promises.

Материал await - это снова javascript нового стиля, который можно использовать только внутри async функций. По сути, Await ожидает, пока следующее за ним выражение не вернет значение.

Приведенный выше класс объекта страницы расширяет класс BasePage, который абстрагировал весь код, специфичный для селена (например, driver.findElements), в служебные функции внутри него. Этот класс создается с использованием driver, который является экземпляром webdriver. Дочерние классы автоматически наследуют этот класс для запросов к веб-страницам. Опять же, полную версию этого можно найти в репозитории git.

Селен вводится в BaseClass с помощью указанного ниже требования. Константаusing - это просто синтаксический сахар, который делает код более естественным. Selenium находит элементы на веб-странице, используя класс или идентификатор HTML-элемента, поэтому подумайте о разработке своей страницы с соответствующими классами CSS и идентификаторами. Строки идентификаторов при запросе содержат символ `#`, а строка класса начинается с символа .. В нашем примере для LoginPage текстовое поле для идентификатора электронной почты имеет идентификатор CSS emailId, а текстовое поле пароля имеет идентификатор passwordId.

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

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

Наконец, крючки для огурцов запускают код установки и удаления. Его можно найти в hooks.js.

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

Хромированная отвертка

Поскольку мы решили запускать наши тесты с использованием Chrome, нам понадобится двоичный файл chromedriver для нашей платформы. Я включил версию для Mac OS в репозиторий, версия для Windows называется chromedriver.exe и может быть загружена с веб-сайта chromedriver. chromedriver действует как мост между фактическим браузером и кодом javascript selenium-webdriver.

Запуск тестов

Наконец, чтобы запустить тесты, мы запускаем команду npm run test, за которой следует npm run testReport, чтобы сгенерировать отчет о тестировании. При выполнении теста создается результат теста json в каталоге results внутри папки tests. Затем этот файл json считывается генератором отчетов HTML, предоставленным модулем узла cucumber-html-reporter.

Приведенный выше фрагмент кода из раздела package.json scripts используется для загрузки тестов и вставки соответствующих опций и параметров в огурец World.

Вот оно! 🤝

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

После этого… 📚

Если вы новичок в том, о чем я говорил, вы можете дополнительно прочитать о BDD, Cucumber, современном javascript и его синтаксисе, Cucumber js, selenium webdriver и его привязках javascript, чтобы получить полное представление об экосистеме; эта статья лишь поверхностно поможет вам быстро разобраться в веб-автоматизации.

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

Ссылки 🚩