Автоматизированное браузерное тестирование с помощью WebDriver API

От автора: статья дает обзор концепций, технологий и техник программирования, связанных с автоматическим запуском тестов под управлением WebDriverJS на Windows 10 и Microsoft Edge. Ручное прокликивание разных браузеров, пока они запускают ваш код, локально или удаленно – быстрый способ проверить код. Так можно визуально проверить, что все работает ровно так, как вы предполагали с точки зрения макета и функциональности. Тем не менее, это не решение для тестирования полного кода сайта во всех браузерах и на всех типах устройств, доступных клиентов. Здесь нам поможет автоматизированное тестирование WebDriver API.

Автоматизированное веб-тестирование, возглавляемое проектом Selenium, представляет собой набор инструментов для авторизации, управления и запуска тестов в браузерах на разных платформах.

WebDriverJS API Link

WebDriver API – стандарт, который абстрагирует специфические привязки устройств/браузеров от разработчика, чтобы написанные вами тесты (на выбранном вами языке) можно было один раз написать и запускать в нескольких разных браузерах через WebDriver. В некоторые браузеры уже встроены возможности WebDriver, для других необходимо загружать исполняемый файл для пары браузер/ОС.

Управление браузером через WebDriver API

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

Написание тестов

У вас есть выбор из поддерживаемых языков в WebDriver. Языки, поддерживаемые главным проектом Selenium/WebDriverJS:

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

В качестве примера предположим, что мы тестируем TODOMVC приложение, демо приложение, реализованное на разных MVC JS фреймворках. Это простое приложение с UI для перехода к элементам To-Do, их редактированию, удалению и отметке о завершении. Будем использовать React пример на http://todomvc.com/examples/react/.

Позже мы сможем продемонстрировать запуск тестов для React примера и примеров Backbone.js и Vue.js простой сменой URL.

Gist JS файла примера

Для демонстрации мы напишем тесты на JS, запускаемые на узле, которые:

Настройка базового окружения для автоматизированного тестирования

Начнем с настройки машины на Windows 10 под запуск WebDriver через JS. Вызовы WebDriver с машины почти всегда будут асинхронные. Чтобы код было легче читать, мы использовали ES2016 async/await, а не Promises или колбеки.

Вам понадобится install node.js новее v7.6 или Babel для кросскомпиляции для поддержки функции async/await. Редактирование и отладку кода будем выполнять в Visual Studio Code.

WebDriverJS для Microsoft Edge

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

Версия Edge, под которой вы хотите запускать тесты, должна совпадать с версией MicrosoftWebDriver.exe. Мы будем использовать стабильную версию Edge (16.16299) с соответствующим файлом MicrosoftWebDriver.exe версии 5.16299.

Поместите MicrosoftWebDriver.exe в папку, из которой будет запускаться тест. Если запустить бинарный файл, откроется окно консоли с URL и портом, через который WebDriverJS будет обрабатывать посылаемые запросы.

WebDriverJS для других браузеров

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

Selenium WebDriverJS для JavaScript

Чтобы взаимодействовать с только что скачанным через JS бинарным файлом, необходимо установить библиотеку автоматизации Selenium WebDriver. Ее можно легко установить как node пакет:

npm install selenium-webdriver

Написание кода автоматического теста

После размещения бинарного файла драйвера в системной папке или в локальной папке и установки Selenium WebDriver через npm, можно перейти к автоматизации.

Разберем код на этапы. Создайте локальную переменную для загрузки и взаимодействия с библиотекой.

var webdriver = require('selenium-webdriver');

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

var capabilities = { 'browserName': 'MicrosoftEdge' }; var entrytoEdit = "Browser Stack";

Затем создается переменная и вызывается build() с переменной capabilities для создания объекта браузера:

var browser = new webdriver.Builder().withCapabilities(capabilities).build();

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

// Have the browser navigate to the TODO MVC example for React await browser.get('http://todomvc.com/examples/react/#'); 

Некоторым браузерам и системам лучше дать файлу WebDriverJS некоторое время на загрузку страницы. Например, мы ждем 1 секунду (1000ms) с помощью функции управления WebDriverJS:

//Send a wait to the browser to account for script execution running await browser.manage().timeouts().implicitlyWait(1000);

Теперь у вас есть программный хук в запущенном браузере через переменную browser. Обратите внимание на диаграмму коллекции ранее в документе, на ней показаны коллекции WebDriver API. Для получения элементов страницы используется коллекция Elements. Нам нужен входной блок в примере TODOMVC, чтобы добавить несколько элементов TODO. Мы просим WebDriverJS найти элементы с классом .new-todo – этот класс присвоен полю. Задаем константу, так как возвращаемые данные изменить невозможно – их можно только запросить. Код ниже найдет первый элемент в DOM, совпадающий с шаблоном CSS. В нашем случае такой поиск будет работать, так как у нас всего один элемент с таким классом.

const todoEntry = await browser.findElement(webdriver.By.css('.new-todo'));

Далее передаем в поле нажатие клавиши клавиатуры с помощью функции sendKeys. Добавляем переход на новую строку, чтобы избежать условия гонки. Будем использовать шаблон for (x of y), так как работаем с promises. toDoTestItems – простой массив из 3 строк: одна строковая переменная (которую мы проверим позже) и 2 литерала. WebDriverJS будет посылать символы строки за раз, но мы передаем всю строку.

var toDoTestItems = [entrytoEdit, "Test Value1", "Test Value2"]; //Send keystrokes to the field we just found with the test strings and then send the Enter special character for (const item of toDoTestItems) { await todoEntry.sendKeys(item); await todoEntry.sendKeys("\n"); }

Давайте запустим скрипт с помощью node. Браузер должен перейти на страницу и добавить 3 тестовых элемента TODO. Оберните код после первой переменной в функцию async:

async function run() {

Закройте функцию } в конце кода, затем вызовите асинхронную функцию с помощью:

run();

Сохраните JS файл. Перейдите к окну команд node, перейдите в папку с сохраненным JS файлом и запустите node yourfile.js.

Должен открыться браузер, а текст из файла TODOMVC будет введен в новые элементы списка. Поздравляю, вы запустите WebDriverJS.

Попробуйте изменить URL на другой пример TODOMVC – один код можно запускать в разных фреймворках.

await browser.get('http://todomvc.com/examples/vue/');

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

Мы показали, как запускать тесты локально на своей машине. Этот же тест можно легко запустить с помощью онлайн сервисом тестирования типа BrowserStack. Зарегистрируйте на BrowserStack, это бесплатно, и вы получите браузеры Microsoft Edge для автоматизированного тестирования. После авторизации перейдите в раздел Automate и просмотрите настройки профиля. Их нужно передать в функцию WebDriverJS для авторизации через код, названия сессии и передачи токена доступа.

Затем просто добавьте эти значения в переменную capabilities и вызовите билдер WebDriver.

var capabilities = { 'browserName': MicrosoftEdge, 'browserstack.user': 'yourusername’, 'browserstack.key': 'yqniJ4quDL6s2Ak2EZpe', 'browserstack.debug': 'true', 'build': 'Name your test' }

Более подробно о capabilities variable и принимаемых значениях BrowserStack можно узнать по ссылке. Затем вызовите функцию builder и передайте URL сервера BrowserStack:

var browser = new webdriver.Builder(). usingServer('http://hub-cloud.browserstack.com/wd/hub'). withCapabilities(capabilities). build();

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

browser.quit();

Если теперь запустить JS тест через NodeJS, то вы будете посылать инструкции теста в браузер, расположенный в облачном сервисе BrowserStack. На вкладке Automate сервиса можно наблюдать за стартом и остановкой тестов. После завершения прогона можно посмотреть посланные команды WebDriver, экраны браузера и интервалы времени. Также есть видео сессии с браузером.

Тестирование значений через assertion

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

Загрузите и установите Chai через npm. В коде необходимо подключить chai:

var expect = require('chai').expect;

Мы решили использовать Expect interface, чтобы использовать натуральный язык для связки проверок.

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

expect(testElements).to.not.have.lengthOf(0); //make sure that we're comparing the right number of items in each array/collection expect(testElements.length).to.equal(toDoTestItems.length);

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

Автоматизация прогонов тестов с помощью Test Runner Link

Чтобы лучше обрабатывать исключения проверок, тест раннер соединен с node, чтобы обернуть блоки кода, содержащие проверки, в функции try / catch, которые ловят исключения из неудавшихся тестов.

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

Интегрировать тест раннер можно через код, добавленный в тестовый скрипт, и изменение способа запуска кода с node.

Вставка кода test runner

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

MochaJS установлен как пакет node через npm. Функция верхнего уровня в примере с describe:

describe('Run four tests against TODOMVC sample', async () => {

Далее оберните логические тесты в группы с помощью it:

it('TEST 3: Delete a TODO item from the list by clicking the X button', async () => {

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

Выполнение кода с помощью NodeJS And MochaJS

Вам осталось запустить тестовый код с node, который будет вызывать файл MochaJS для правильной обработки исключений. В Mocha можно передавать аргументы для настройки значений таймаута, папки для тестов и т.д. Наши настройки для Visual Studio Code для подключения отладчик и исследования Code:

{ "type": "node", "request": "launch", "name": "Mocha Tests", "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", "args": [ "-u", "tdd", "--timeout", "999999", "--colors", "${workspaceRoot}/test/**/*.js" ], "internalConsoleOptions": "openOnSessionStart" }

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

Автор: Jason McConnell

Источник: https://hackernoon.com/

Редакция: Команда webformyself.