Alex Pavlov
Fullstack web developer
Эволюция
браузерных тестов
Александр Павлов
AndersenLab
О чем доклад?
- Зачем нужны тесты
- Инструменты
- Пишем браузерный тест
- Тестируем верстку
- Как ускорить тесты
Зачем писать тесты?
Зачем писать тесты?
- качество кода / проекта
Зачем писать тесты?
- качество кода / проекта
- безопасный рефакторинг
Зачем писать тесты?
- качество кода / проекта
- безопасный рефакторинг
- хороший сон
До внедрения тестов
До внедрения тестов
Вера в профессионализм...
Все и так работает как часы
На самом деле
Разработка / деплой
Инструменты
Через которые прошли мы
Инструменты
- ZombieJs
- PhantomJs
- Selenium Web Driver
ZombieJs
ZombieJs
+ низкий порог вхождения
ZombieJs
+ низкий порог вхождения
+ синхронный flow
ZombieJs
+ низкий порог вхождения
+ синхронный flow
+ быстрее, чем selenium
ZombieJs
+ низкий порог вхождения
+ синхронный flow
+ быстрее, чем selenium
- не реальный браузер
http://zombie.js.org/
ZombieJs
+ низкий порог вхождения
+ синхронный flow
+ быстрее, чем selenium
- не реальный браузер
- периодические глюки
http://zombie.js.org/
PhantomJs
PhantomJs
- порог вхождения выше
PhantomJs
- порог вхождения выше
- нужен мост для nodejs (phridge)
PhantomJs
- порог вхождения выше
- нужен мост для nodejs (phridge)
+ быстрее, чем selenium
PhantomJs
- порог вхождения выше
- нужен мост для nodejs (phridge)
+ быстрее, чем selenium
- не реальный браузер
PhantomJs
- порог вхождения выше
- нужен мост для nodejs (phridge)
+ быстрее, чем selenium
- не реальный браузер
http://phantomjs.org/
Selenium Web Driver
Selenium Web Driver
- порог вхождения еще выше
Selenium Web Driver
- порог вхождения еще выше
- нужен selenium
Selenium Web Driver
- порог вхождения еще выше
- нужен selenium
+ реальные браузеры
Selenium Web Driver
- порог вхождения еще выше
- нужен selenium
+ реальные браузеры
+ самый реальный результат
https://www.w3.org/TR/webdriver/
Selenium WD
Selenium WD
- WebDriver.io
Selenium WD
- WebDriver.io
- TheIntern
Selenium WD
- WebDriver.io
- TheIntern
- Nightwatch.js
Selenium
- локальный
- в облаке
Selenium
- локальный (selenium-standalone / руками)
- в облаке (SauceLab / Browserstack / другое)
Nightwatch.js
Мое выражение, когда я только
начал в этом разбираться
Установка
1) Ставим установщик selenium:
$npm install selenium-standalone
Установка
2) Запускаем установщик:
$node_modules/.bin/selenium-standalone install
Установка
3) Запускаем selenium:
$node_modules/.bin/selenium-standalone start
Установка
4) Ставим nightwatch:
$npm install nightwatch
Установка
5) Ставим lodash:
$npm install lodash
Конфигурируем
Создаем файл nigthwatch.json
Конфигурируем
{
"src_folders" : ["e2e"],
"output_folder" : "reports",
"test_settings" : {
"default" : {
"filter" : "*.spec.js",
"selenium_host": "127.0.0.1",
"selenium_port": 4444,
"launch_url" : "https://alexpts.ru",
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
}
}
}
Запускаем
$node_modules/.bin/nightwatch
Первый тест
Создаем файл test.spec.js
в папке e2e
Первый тест
module.exports = {
before: function(client) {
client.windowMaximize();
},
after: function(client) {
client.end();
},
'open main page': function(client) {
client.url(client.launchUrl);
},
'check title': function(client) {
client.assert.title('Alexpts блог');
}
};
Первый тест
Выносим общие тесты и подмешиваем их в основной файл тестов
Первый тест
module.exports = {
before: function(client) {
client.windowMaximize();
},
after: function(client) {
client.end();
}
};
Первый тест
var _ = require('lodash');
var boot = require('./inc/bootstrap.js');
module.exports = _.assign(boot, {
'open main page': function(client) {
client.url(client.launchUrl + '/');
},
'check title': function(client) {
client.assert.title('Alexpts блог');
}
});
Разве это сложно?
Главное не останавливаться!
Тестируем верстку
Тестируем верстку
Зачем?
Тестируем верстку
- Все поехало
Тестируем верстку
- Все поехало
- Поехало только в 1 браузере
Тестируем верстку
- Все поехало
- Поехало только в 1 браузере
- Виджет не отработал
Подключили еще один скрипт и...
Gemini
Gemini
Инструмент для регрессионного тестирования веб страниц на основе скриншотов
Gemini
$npm install gemini
$npm install gemini-gui
$npm install selenium-standalone
.gemini.yml
rootUrl: https://alexpts.ru
tolerance: 3.5
screenshotsDir: './screens'
browsers:
chrome:
desiredCapabilities:
acceptSslCerts: true
browserName: chrome
sets:
alexpts.ru:
files:
- ./test/Gemini тест
var gemini = require('gemini');
gemini.suite('header', function(suite) {
suite
.setUrl('/')
.setCaptureElements('header')
.capture('header');
});Состояния
var gemini = require('gemini');
gemini.suite('menu', function(suite) {
suite
.setUrl('/')
.setCaptureElements('.technologies', '.fast-menu')
.capture('menu')
.capture('menu hover first', function(actions, find){
var selector = '.technologies > span:nth-child(2)';
actions
.mouseMove(find(selector))
.wait(200);
});
});Gemini
$node_modules/.bin/selenium-standalone install
$node_modules/.bin/selenium-standalone start
$node_modules/.bin/gemini update
$node_modules/.bin/gemini test
Когда проект покрыт тестами
- BrowserStack.com
- SauseLabs.com
- TestingBot.com
Selenium фермы
- Lo-Fi (без изображений)
- Заранее настроенный профиль с расширениями
- Proxy / Filter
- Несколько потоков
Разгоняем тесты
Ссылки
Спасибо
Александр Павлов
AndersenLab
Эволюция браузерных тестов Александр Павлов AndersenLab
Эволюция браузерных тестов
By Alex Pavlov
Эволюция браузерных тестов
Отказ от zombieJs и phantomJs. Обзор инструментов для selenium тестирования на платформе nodeJs. Тестирование верстки с помощью selenium. Работа с selenium фермой. Способы ускорения тестов.
- 3,137
