WebdriverIO - это инструмент, используемый для создания автоматических тестов браузера. Следующее руководство предназначено для людей, у которых очень мало или совсем нет опыта в написании автоматических тестов. Целью учебного пособия является:

  1. Создайте с нуля очень простой фреймворк, который будет работать локально на вашем компьютере.

2. Напишите автоматический тест для запуска веб-браузера и проверки заголовка веб-страницы.

Предварительные условия:

  • Node.js (https://nodejs.org/en/)
    Следуйте инструкциям по установке. Чтобы проверить успешность установки, запустите
    node -v в терминале, вы должны увидеть установленную версию узла.
  • NPM (https://www.npmjs.com/)
    Он будет установлен вместе с node. Для проверки запустите npm -v в терминале, вы должны увидеть установленную версию NPM. Если не установлен, следуйте инструкциям по установке по ссылке выше.
  • Текстовый редактор для Javascript
    Например, Atom (https://atom.io/).
  • Java ( https://www.java.com/en/download/).
    Установлен и добавлен в ваш путь (это требование для Webdriverio).

Создание скелетного проекта

1. Создайте каталог.

Создайте каталог, в котором вы хотите сохранить свой проект. Например, Рабочий стол ›Разработка› webdriver-io-tutorial.

2. Запустите новый пакет NPM.

Откройте свой терминал, перейдите в только что созданную папку и введите:

npm init

«Npm init» установит новый пакет NPM. При инициализации вам будет предложено ввести имя пакета, версию, описание, точку входа, тестовую команду, репозиторий git, ключевые слова, автора, лицензию. Вы можете заполнить это поле по своему усмотрению или просто нажать "Enter" для каждого, чтобы начать. Вас спросят: «Это нормально?» Введите «Да». Ваш терминал должен выглядеть примерно так:

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

3. Установите webdriverio.

В терминале (убедившись, что вы все еще находитесь в корне проекта) установите webdriverio в зависимости от разработчика, набрав:

npm install webdriverio --save-dev

Чтобы убедиться, что установка прошла успешно, откройте файл package.json и убедитесь, что теперь webdriverio отображается в разделе «devDependancies». Вы также заметите, что появилась папка node_modules. Здесь хранятся все ваши пакеты зависимостей.

4. Создайте конфиг wdio.

Теперь, когда вы установили webdriverio, создайте файл wdio.config.js. Этот файл будет определять расположение тестов, фреймворков, которые вы хотите использовать, репортеров, браузеров и общую конфигурацию проекта. Для удобства мы можем легко создать этот файл, выполнив следующую команду в терминале (снова убедившись, что вы находитесь в корне проекта).

./node_modules/.bin/wdio config

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

Чтобы убедиться, что конфигурация успешно создана, в корне проекта должен появиться файл с именем wdio.conf.js. Откройте этот файл, чтобы проверить или изменить любую информацию, которую вы предоставили в терминале.

6. Создайте каталог для тестов.

В этом примере мокко будет использоваться в качестве основы для структурирования тестов. На очень высоком уровне mocha - это среда тестирования javascript для node.js, которая поддерживает асинхронное тестирование, использование множества библиотек утверждений, высокий уровень поддержки браузера и отчеты о тестовом покрытии. Если вы следовали приведенным выше инструкциям для создания файла конфигурации, то мокко уже должен быть установлен и доступен для использования в вашем проекте.

В корне проекта создайте папку, которая соответствует шаблону спецификации, который вы указали в config. Если вы следовали приведенному выше примеру, вам нужно создать папку с именем «test» и внутри нее папку с именем «specs». Вы можете создать это вручную или выполнив следующую команду в терминале из корня проекта:

mkdir -p ./test/specs

7. Создайте файл test.spec.js.

В папке test / specs создайте файл для вашего первого теста. Например, test.spec.js.В этот файл давайте добавим простой тест для проверки заголовка домашней страницы ASOS. Вы можете скопировать и вставить приведенный ниже код в качестве примера.

describe('ASOS homepage', () => {
    it('should display the correct homepage title', () => {
        browser.url('http://asos.com');
        const title = browser.getTitle();
        assert.equal(title, 'ASOS | Online Shopping for the Latest Clothes & Fashion');
    });
});

Описание того, что делает код:

  • browser.url('http://asos.com') browser.url () выполняет переход по URL-адресу, в данном случае http://asos.com.
  • const title = browser.getTitle() browser.getTitle () получает заголовок текущей страницы в браузере и возвращает строку, в этом случае он получит заголовок ASOS.com. «Const title =» перед этим сохраняет строковую переменную как «title», на которую мы сможем ссылаться позже.
  • assert.equal(title, ‘ASOS | Online Shopping for the Latest Clothes & Fashion’) Использует утверждение, чтобы сказать: убедитесь, что переменная, которую мы только что сохранили (заголовок), равна ASOS | Online Shopping for the Latest Clothes & Fashion

8. Установите chai для webdriverio

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

npm install chai --save-dev

а также

npm install chai-webdriverio --save-dev

Чтобы убедиться, что все установлено должным образом, откройте свой package.json и убедитесь, что он выглядит примерно так:

{
  "name": "webdriver-io-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chai": "^4.2.0",
    "chai-webdriverio": "^0.4.3",
    "wdio-mocha-framework": "^0.6.4",
    "wdio-selenium-standalone-service": "0.0.11",
    "webdriverio": "^4.14.0"
  }
}

9. Добавьте этап «перед тестом».

Теперь добавьте chai в файл wdio.conf.js и установите его как глобальное требование для всех тестов. Для этого в файле wdio.conf.js добавьте следующий фрагмент кода в конец файла и сохраните:

beforeTest: () => {
      const chai = require('chai');
      const chaiWebdriver = require('chai-webdriverio').default;
      chai.use(chaiWebdriver(browser));
      global.assert = chai.assert;
    },

Фрагмент «beforeTest» будет запускать содержащийся код перед каждым тестом, независимо от того, где файл сохранен в папке spec. В этом случае он установит глобальное утверждение, поэтому вам не нужно будет импортировать его в каждый тестовый файл. Вы также можете использовать параметры chai «ожидать» или «следует».

10. Запустите тест!

В терминале выполните следующую команду:

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

Вы должны увидеть, как веб-браузер развернется и перейдет к ASOS. В терминале вы должны увидеть следующее:

Зеленая точка означает, что тест пройден! Если вы хотите проверить, действительно ли тест работает, измените ожидаемый заголовок в вашем test.spec.js файле на что-то некорректное и снова запустите тест. Вы должны увидеть ошибку в терминале, которая будет выглядеть примерно так:

Совет: вы также можете рассмотреть возможность добавления этой команды в качестве сценария в свой package.json, чтобы вместо запуска ./node_modules/.bin/wdio wdio.conf.js вы могли просто запустить npm run test для запуска тестов. Для этого измените раздел «скрипт» в вашем package.json следующим образом:

"scripts": {
    "test": "./node_modules/.bin/wdio wdio.conf.js"
  },

Выполнено!

Теперь у вас есть очень простой фреймворк, чтобы начать создавать автоматические тесты. Я бы рекомендовал прочитать документацию API webdriverIO, чтобы увидеть доступные команды браузера и более подробное объяснение того, что они делают (http://webdriver.io/api.html). Также стоит прочитать руководство разработчика, чтобы узнать о дополнительных возможностях использования объектов страницы, совместимых фреймворков, различных плагинов, средств запуска тестов и т. Д.

Автор: Лиззи Хайлс.
Инженер по обеспечению качества в ASOS
https://www.linkedin.com/in/lizzie-hiles-88b898123/