Оценив несколько библиотек для тестирования браузеров, я остановился на WebDriverIO. Основная причина, по которой я сделал выбор, заключалась в документации.

На мой взгляд, в большинстве библиотек для тестирования браузеров есть документация, которая в лучшем случае скудна. Некоторые из тех, что я оценил, были ZombieJS, PhantomJS и Selenium.

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

var options = { desiredCapabilities: { browserName: ‘phantomjs’ } };

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

Webdriver.io описывает себя как привязку веб-драйверов для Node. Я не совсем понимаю, что это значит, но после нескольких часов мучений над настройкой Selenium я решил отказаться от этого и перейти на Webdriver.io.

Настройка Webdriver.io оказалась на удивление простой и в то же время похожей на Selenium. В верхней части моего тестового файла мне в основном нужны были только эти строки:

const chai = require('chai');
const expect = chai.expect;
const webdriverio = require('webdriverio');
var options = { desiredCapabilities: { browserName: 'chrome' } };
const client = webdriverio.remote(options);

Затем переходите к следующей задаче: выяснить, как его использовать. По сравнению с другими наборами для тестирования браузеров, Webdriver.IO имеет красивую документацию. Тем не менее, я все еще бился над реализацией, пока друг не помог мне разобраться. Я думаю, проблема в том, что я учусь в основном на примере кода, чтобы понять, как все сочетается друг с другом. Когда я учусь тестировать браузер, для меня особенно важно найти хороший образец кода, потому что в нем очень много движущихся частей. Вы не просто изучаете команды для своего браузера, но вы также (по крайней мере, в моем случае) учитесь одновременно использовать среду тестирования, в данном случае Mocha и Chai. Уметь понять, как они подходят друг другу, довольно сложно.

Я провел некоторое время с моим коллегой, просматривая образец кода, и через час у нас была шутка о том, что единственное, что показывает пример кода, - это получить заголовок страницы. Это действительно не шутка. Мы, должно быть, просмотрели 10–15 разных образцов. Каждый показывает этот смехотворно упрощенный пример:

.getTitle().then(function (title) {                                       assert.strictEqual(title,'How people build software · GitHub');                                   })

Хорошо, вот как я получил титул. Как насчет чего-нибудь более значимого? Например, узнать, существует ли элемент на странице? Я ничего не нашла. К счастью, документация очень хорошая. Мы решили, что лучший способ подтвердить существование элемента на странице - это следующая строка:

it('It should display Title field', async () => {
    const isExisting = await client.isExisting('#title');
    expect(isExisting).to.be.true;
  });

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

before((done) => {
    client.init().url('http://localhost:3000/PostJob').then(() => done());
  });
after(function(){
    client.end();
  });

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

const chai = require('chai');
const expect = chai.expect;
const assert = chai.assert;
const webdriverio = require('webdriverio');
var options = { desiredCapabilities: { browserName: 'phantomjs' } };
const client = webdriverio.remote(options);
describe('Post Job page', () => {
  before((done) => {
    client.init().url('http://localhost:3000/PostJob').then(() => done());
  });
  after(function(){
    client.end();
  });
  it('It should display Address field', async () => {
    const isExisting = await client.isExisting('#address');
    expect(isExisting).to.be.true;
  });
});

Я надеюсь, что это руководство поможет вам легко начать тестирование браузера на Mocha и Chai.