Тщательное тестирование созданного вами веб-сайта так же важно, как и его разработка.
Допустим, ваша компания создала сайт электронной коммерции. Если вы только что протестировали кнопку «Купить сейчас» для категории электроники, и она сработала, вы можете подумать, что она работает и для всех других категорий. Что если позже вы обнаружите, что сбой препятствует пользователям нажимать кнопку «Купить сейчас» для всех продуктов в категории фитнеса? Нечто подобное наверняка повлияет на доходы компании, занимающейся электронной коммерцией. Это касается не только доходов; это также влияет на репутацию компании. Пользователи могут полностью отказаться от посещения вашего сайта в пользу конкуренции.
Разработчики и компании иногда избегают тщательного тестирования своего веб-сайта из-за двух основных ограничений: времени и денег. Даже если вы выполнили все возможные тесты для своего веб-сайта на одном устройстве, нет гарантии, что он будет работать и на любом другом устройстве. Существует множество факторов, таких как браузер, операционная система и размер экрана, которые необходимо учитывать. Более того, появляются новые устройства с различными размерами экрана и возможностями. Тестирование более тысячи комбинаций браузеров, операционных систем и размеров экрана также будет трудоемким процессом. В результате многие компании не тестируют свои сайты так тщательно, как следовало бы.
CrossBrowserTesting может решить обе эти проблемы очень элегантно. Этот сервис позволяет вам запускать автоматизированные тесты на более чем 1500 реальных настольных и мобильных устройствах, не покидая своего основного браузера разработки. Отладка происходит удаленно, но вы можете взаимодействовать с веб-сайтами точно так же, как реальный пользователь. Процесс больше не будет таким трудоемким, как раньше, потому что вы сможете выполнять все эти тесты параллельно.
Это руководство поможет вам начать работу с CrossBrowserTesting и покажет, как запускать автоматические тесты на тысячах устройств параллельно. Вы должны подписаться на бесплатную пробную версию, чтобы следовать остальной части учебника.
Автоматизируйте тестирование, используя Mocha и Selenium WebDriver
Mocha многофункциональный и является одной из самых популярных платформ асинхронного тестирования JavaScript для Node.js. Это позволяет вам запускать несколько тестов последовательно, что приводит к точным отчетам и отображению неперехваченных исключений в правильные тестовые случаи. Фреймворк предоставляет нам хуки before , after , до beforeEach и после afterEach . Вы можете использовать эти ловушки, чтобы установить некоторые предварительные условия для тестов и очистить среду после выполнения любого теста.
Хотя Mocha может помочь вам в написании тестов, вам понадобится библиотека утверждений, чтобы проверить, соответствуют ли результаты теста ожидаемым. Мы собираемся использовать Чай в этом уроке. Библиотека утверждений очень гибкая и позволяет выбрать интерфейс по вашему выбору для тестирования результатов. Вы можете использовать утверждения в стиле should() , expect() или assert() .
Мокко и Чай могут использоваться для запуска всех видов тестов и проверки полученных значений. Если вам нужно выполнить такие тесты, как проверка, содержит ли массив определенный элемент, этих двух инструментов будет достаточно. Тем не менее, мы заинтересованы в проведении более сложных тестов, таких как проверка, была ли попытка входа в систему успешной или пользователи могут обновить свои имена пользователей и т. Д. Для этого нам необходимо установить Selenium WebDriver . С Selenium WebDriver мы сможем автоматизировать множество вещей, от нажатия на ссылки и кнопки до заполнения формы.
Когда у вас есть общее представление об этих инструментах, сложная часть заканчивается. Написание автоматизированных тестов для CrossBrowserTesting легко. Я предполагаю, что у вас уже установлен Node.js.
Перейдите в каталог вашего проекта и выполните следующие команды:
|
1
2
3
|
npm install mocha —save-dev
npm install chai —save-dev
npm install selenium-webdriver —save-dev
|
Как только все пакеты будут установлены, создайте папку с именем test внутри папки вашего проекта. Эта папка будет содержать все наши тестовые файлы. Сейчас создайте файл с именем github.js внутри тестовой папки. Напишите следующий код внутри github.js .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
var webdriver = require(‘selenium-webdriver’);
var assert = require(‘chai’).assert;
var remoteHub = ‘http://hub.crossbrowsertesting.com:80/wd/hub’;
var username = ‘[email protected]’;
var authkey = ‘yourAuthKey’;
var caps = {
name: ‘GitHub Search’,
build: ‘1.0.0’,
browserName: ‘MicrosoftEdge’,
version: ’15’,
platform: ‘Windows 10’,
screen_resolution: ‘1366×768’,
record_video: ‘true’,
record_network: ‘true’,
username: username,
password: authkey
};
describe(«Searching GitHub for Mocha», function () {
this.timeout(5 * 1000 * 60);
var driver = new webdriver.Builder()
.usingServer(remoteHub)
.withCapabilities(caps)
.build();
before(function setupWebdriver(done) {
driver.get(«https://github.com/search/advanced»).then(done)
});
it(«Mochajs Should be the Top Result», function (done) {
var inputField = driver.findElement(webdriver.By.css(«.search-form-fluid .search-page-input»));
inputField.click()
.then(function () {
inputField.sendKeys(«Mocha»);
});
driver.findElement(webdriver.By.css(«#search_form button»)).click()
.then(function () {
return driver.wait(webdriver.until.elementLocated(webdriver.By.css(«.repo-list h3 a»)), 10000)
})
.then(function (element) {
return element.getText();
})
.then(function (text) {
assert.deepEqual(text, «mochajs/mocha»);
})
.then(done);
});
it(«Should Show a Sign Up Prompt after Loading the Repository Page», function (done) {
driver.findElement(webdriver.By.css(«.repo-list h3 a»)).click()
.then(function () {
return driver.wait(webdriver.until.elementLocated(webdriver.By.css(«.signup-prompt h3.pt-2»)), 10000)
})
.then(function (element) {
return element.getText();
})
.then(function (text) {
assert.deepEqual(text, «Join GitHub today»);
});
driver.findElement(webdriver.By.css(«.signup-prompt form button»)).click()
.then(done);
});
after(function quitWebdriver(done) {
driver.quit()
.then(done);
});
});
|
В приведенном выше коде вы должны заменить [email protected] на адрес электронной почты, который вы использовали для [email protected] на бесплатную пробную версию . Точно так же вам придется получить свой собственный ключ авторизации со страницы учетной записи . Скопируйте этот ключ и вставьте его вместо yourAuthKey .
Объект caps используется для указания различных параметров конфигурации для запуска теста. Вы можете дать своему тесту name и номер build , чтобы идентифицировать его. Свойство browserName используется для указания имени браузера, в котором вы хотите запустить тесты. Вы также можете указать version для браузера, но это не обязательно. Когда ничего не указано, используется последняя версия браузера.
Вы можете прочитать обо всех свойствах и их допустимых значениях в статье под названием « Возможности автоматизации Selenium» . Вам следует внимательно прочитать эту страницу, чтобы в полной мере воспользоваться всеми функциями автоматического тестирования Selenium. Для удобства использования CrossBrowserTesting также предоставляет конфигуратор возможностей на домашней странице автоматизации .
После установки соответствующих значений для наших тестовых параметров, мы можем написать тесты, которые мы хотим запустить. Каждый набор тестов, который вы хотите запустить, находится внутри блока describe . Внутри блока describe мы установили тайм-аут для разных тестов и создали объект веб-драйвера, к которому будет обращаться каждый тест в блоке.
На следующем шаге мы использовали ловушку before для доступа к странице поиска GitHub перед запуском тестов внутри блоков it . Код внутри before будет выполняться только один раз, что я и хочу сделать в моем случае. Однако, если вы хотите искать новый термин после каждого успешного теста, вам придется возвращаться на страницу поиска снова и снова. В таких ситуациях использование хука beforeEach имеет больше смысла. Вы можете использовать этот хук для сброса любых данных, таких как куки, которые вы не хотите сохранять между сеансами.
Фактический тест идет внутри блоков. В первом тесте мы определяем поле ввода с помощью селектора CSS, а затем устанавливаем его значение «Mocha». После этого мы нажимаем на кнопку поиска и ждем, пока драйвер сможет найти ссылку, идентифицированную селектором .repo-list h3 a . Мы проверяем текст внутри этого элемента, чтобы увидеть, соответствует ли он mochajs / mocha . Тест внутри второго блока it продолжается с первого теста и нажимает на ссылку, чтобы посетить репозиторий GitHub.
Код внутри блока after выполняется после того, как мы выполнили тесты внутри всех it блоков. Убедитесь, что вы вызываете driver.quit() внутри блока after, иначе сессия останется открытой в течение 10 минут по умолчанию.
Возможно, вы захотите сделать снимки на разных этапах во время ваших тестов, чтобы поделиться результатами с другими. Это можно сделать, вызвав API. Дополнительную информацию по этой теме можно найти в публикации CrossBrowserTesting о запуске автоматических тестов браузера с Selenium и JavaScript .
После создания вышеуказанного тестового файла вы можете запустить тесты на выбранном устройстве и браузере, введя следующую команду в консоли из каталога проекта:
|
1
|
mocha test/github.js
|
Если все работает как положено, вы сможете увидеть результаты теста в своей учетной записи CrossBrowserTesting здесь . Я загрузил видео, созданное после запуска этого теста с моей учетной записью. Вы должны увидеть нечто подобное.
Автоматизация тестов с использованием Mocha и WebdriverIO
Преимущество CrossBrowserTesting состоит в том, что вы можете легко интегрировать его с вашими любимыми инструментами, которые помогут вам быстро писать тесты и использовать интегрированные среды, с которыми ваша команда уже знакома.
В этом разделе мы напишем несколько тестов с использованием WebdriverIO . По сути, он просто отправляет запросы серверу Selenium и обрабатывает ответ. Среда позволяет вам синхронно писать асинхронные команды, чтобы вам не приходилось беспокоиться об обещаниях и условиях гонки. Вы можете прочитать документы API, чтобы получить больше информации о платформе.
Давайте начнем писать наши тесты сейчас. На этот раз мы попытаемся войти в учетную запись, которую я создал на Pixabay . Мы сознательно предоставим неправильные учетные данные в первый раз, чтобы проверить, позволяет ли нам веб-сайт. В следующий раз мы будем использовать правильные учетные данные и проверим, что мы вошли в систему.
Прежде чем продолжить, вам необходимо установить WebdriverIO, выполнив следующую команду:
|
1
|
npm install webdriverio —save-dev
|
Теперь создайте файл внутри тестовой папки и назовите его pixabay.js . Файл должен содержать следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
var webdriverio = require(‘webdriverio’);
var assert = require(‘chai’).assert;
var username = ‘[email protected]’;
var authkey = ‘yourAuthKey’;
var devices = [{
browserName: ‘Chrome’,
platform: ‘Windows 10’,
},
{
browserName: ‘Firefox’,
platform: ‘Windows 7’,
},
{
browserName: ‘Internet Explorer’,
platform: ‘Windows 7 64-Bit’,
},
{
browserName: ‘Safari’,
platform: ‘Mac OSX 10.9’,
}
];
devices.forEach(function (device) {
var options = {
desiredCapabilities: {
name: ‘Pixabay Log In Test (Multiple Devices)’,
build: ‘1.0’,
platform: device.platform,
browserName: device.browserName,
screen_resolution: ‘1366×768’,
record_video: ‘true’,
record_network: ‘true’
},
host: «hub.crossbrowsertesting.com»,
port: 80,
user: username,
key: authkey
}
describe(‘Logging Into Pixabay’, function () {
this.timeout(5 * 60 * 1000);
var client;
before(function () {
client = webdriverio.remote(options);
return client.init();
});
it(‘Wrong Credentials Should Prevent Log In’, function () {
return client
.url(‘https://pixabay.com/en/accounts/login/’)
.setValue(‘#id_username’, ‘pixa_username’)
.setValue(‘#id_password’, ‘wrong_pixa_password’)
.click(‘#sign_in_out input.pure-button’)
.getText(‘ul.errorlist li’)
.then(function (result) {
assert.equal(result, ‘Please enter a correct username and password. Note that both fields may be case-sensitive.’);
});
});
it(‘Should be Able to Log In with Right Credentials’, function () {
return client
.url(‘https://pixabay.com/en/accounts/login/’)
.setValue(‘#id_username’, ‘pixa_username’)
.setValue(‘#id_password’, ‘correct_pixa_password’)
.click(‘#sign_in_out input.pure-button’)
.getText(‘#my_images a.pure-button’)
.then(function (result) {
assert.equal(result, ‘Upload images’);
});
});
after(function () {
return client.end();
});
});
});
|
После запуска кода в предыдущем разделе это должно выглядеть очень знакомым. Как и в предыдущем примере, замените [email protected] и yourAuthKey на свой адрес электронной почты CrossBrowserTesting и ключ аутентификации.
Чтобы проверить страницу входа в систему, вы можете создать свою учетную запись Pixabay или попробовать зайти на другие веб-сайты. Просто помните, что вы должны иметь возможность выбирать правильные поля ввода и кнопки, используя различные селекторы.
Одним из важных отличий на этот раз является то, что мы создали массив объектов конфигурации, и мы можем выполнить цикл по каждому из них, чтобы выполнить одни и те же тесты на нескольких устройствах. Это может сэкономить вам и вашей команде много времени. Все, что вам нужно сделать, это написать тесты один раз, а затем запустить их на любом количестве устройств. CrossBrowserTesting позволяет просматривать видеозаписи всех ваших автоматических тестов . Таким образом, вы можете легко увидеть, что пошло не так с конкретным устройством и браузером.
Последние мысли
Возможность удаленного тестирования вашего веб-сайта на более чем 1500 различных устройствах удивительна. Вам больше не нужно беспокоиться о потере клиентов, поскольку ваш веб-сайт не работал должным образом на устройстве, которое вы забыли или не смогли протестировать. Большое количество устройств, предоставляемых CrossBrowserTesting, охватывает практически все комбинации устройств и браузеров, которые могут использовать ваши клиенты. Не только это, но вы также избавляетесь от огромных затрат на обслуживание такого количества устройств.
Я создал несколько базовых тестов автоматизации, чтобы помочь вам начать работу с CrossBrowserTesting . Когда вы хорошо разберетесь в основах, вы сможете запускать все виды тестов, от заполнения больших форм до посещения одной страницы продукта за другой. Поскольку тесты автоматизированы, и вы можете запускать их параллельно, вы также сэкономите много времени, что может сделать ваш основной продукт еще лучше.
Вы можете подписаться на услугу бесплатно , поэтому попробуйте и узнайте о различных функциях, которые делают ее более выгодным и экономичным вариантом, чем у конкурентов. Если все получится, вы или ваша компания сэкономите тысячи долларов и сотни ценных часов с помощью CrossBrowserTesting.