Автоматизированное тестирование интерфейса с помощью Webdriver.io
Инструменты

Автоматизированное тестирование интерфейса с помощью Webdriver.io

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

В этой статье мы рассмотрим один из инструментов автоматизированного тестирования — WebdriverIO, попробуем настроить его и написать простой тест.

Selenium

WebdriverIO — это клиент для сервера Selenium, работающий на Node.js и предоставляющий JavaScript API. Поэтому перед началом работы с WebdriverIO нам необходимо установить и запустить Selenium Server (предполагается, что на машине уже установлены Java и Node.js).

Установить сервер Selenium можно вручную. Для этого необходимо скачать selenium-standalone:


curl -O http://selenium-release.storage.googleapis.com/2.53/selenium-server-standalone-2.53.0.jar

и запускать его каждый раз перед тестированием:


java -jar selenium-server-standalone-2.53.0.jar

В качестве альтернативы можно установить пакет selenium-standalone из npm:


npm install selenium-standalone --save-dev

Этот пакет всего лишь содержит код загрузчика, поэтому после его установки необходимо запустить команду:


./node_modules/.bin/selenium-standalone install

Эта команда скачает сам Selenium, а также драйверы для chrome, firefox и IE (для Windows).

Для запуска сервера нужно выполнить команду:


./node_modules/.bin/selenium-standalone start

Очень удобно команды установки и запуска сервера Selenium оформить в виде npm-скрипта, скажем:


"scripts": {
    "setup-test": "./node_modules/.bin/selenium-standalone install && ./node_modules/.bin/selenium-standalone start"
},

Теперь перед началом тестирования необходимо будет выполнять команду:


npm run setup-test

Не волнуйтесь, Selenium не будет загружаться и устанавливаться при каждом запуске скрипта, модуль selenium-standalone перед скачиванием файла проверяет его наличие на диске.

WebdriverIO

Теперь, когда мы установили и запустили сервер Selenium, можно заняться настройкой WebdriverIO. Для начала, установим в проект пакет webdriverio:


npm install webdriverio --save-dev

Этот пакет, кроме всего прочего, содержит утилиту wdio, которая значительно упрощает процесс тестирования. Для настройки WebdriverIO выполните команду:


./node_modules/.bin/wdio config

Эта команда выведет диалог настройки, а результат сохранит в файл wdio.conf.js. Этот файл представляет собой обычный javascript-модуль, который возвращает объект конфигурации.

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

Where do you want to execute your tests? (Где вы хотите запускать ваши тесты?) On my local machine
Which framework do you want to use? (Какой фреймворк вы хотите использовать?) jasmine
Shall I install the framework adapter for you? (Должен ли я установить адаптер?) Y
Where are your test specs located? (Где будут находиться ваши тесты?) ./test/specs/**/*.js
Which reporter do you want to use? (Какой репортер вы хотите использовать?) dot
Shall I install the reporter library for you? (Должен ли я установить репортер?) Y
Do you want to add a service to your test setup? (Хотите ли вы добавить сервис для настройки тестов?) -
Level of logging verbosity: (Уровень логгирования) verbose
In which directory should screenshots gets saved if a command fails? (В какой директории будут находиться скриншоты ошибок?) ./errorShots/
What is the base url? (Базовый url) http://my-project.loc

Тестирование

Selenium и WebdriverIO настроены, можно приступать непостредственно к тестированию. Допустим, у нас есть некая форма авторизации, мы хотим проверить корректность ее работы.

Когда мы отвечали на вопросы команды wdio config, мы указали путь, где будут лежать тесты. Создадим в этой директории файл LoginFormTest.js и поместим в него заготовку для тестов:


describe('Login form tests', function() {
   beforeAll(function(done) {
       browser
           .url('/')
           .windowHandleSize({ width: 1200, height: 800 })
           .call(done);
   });

   afterAll(function(done) {
       browser
           .click('.user-panel__logout')
           .call(done);
   });   
});

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

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


describe('When a user does not enter a username and password', function() {
   it('should display an error message', function(done) {
       browser
           .click('#login')
           .waitForExist('.login-form__error');

       expect(browser.getText('.login-form__error'))
           .toBe('Неправильный логин или пароль');

       browser.call(done);
   });
});

Если мы введем неправильный логин или пароль, мы также должны увидеть ошибку:


describe('When a user enters the wrong data', function() {
   it('should display an error message', function(done) {
       browser
           .setValue('#username', 'test123')
           .setValue('#password', 'test123')
           .click('#login')
           .waitForExist('.login-form__error');

       expect(browser.getText('.login-form__error'))
           .toBe('Неправильный логин или пароль');

       browser.call(done);
   });
});

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


describe('When the user enters the correct login and password', function() {
   it('should display an username', function(done) {
       browser
           .setValue('#username', 'test_user')
           .setValue('#password', '123qwe')
           .click('#login')
           .waitForExist('.user-panel');

       expect(browser.getText('.user-panel__username'))
           .toBe('test_user');

       browser.call(done);
   });
});

Запустить тесты можно командой:


./node_modules/.bin/wdio wdio.conf.js

Эту команду также удобно оформить в виде npm-скрипта:


"scripts": {
    "setup-test": "./node_modules/.bin/selenium-standalone install && ./node_modules/.bin/selenium-standalone start",
    "test": "./node_modules/.bin/wdio wdio.conf.js"
},

Теперь запускать тесты можно будет командой:


npm test

Заключение

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться