Оценив несколько библиотек для тестирования браузеров, я остановился на 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.