Эволюция

браузерных тестов

Александр Павлов

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

Эволюция браузерных тестов

By Alex Pavlov

Эволюция браузерных тестов

Отказ от zombieJs и phantomJs. Обзор инструментов для selenium тестирования на платформе nodeJs. Тестирование верстки с помощью selenium. Работа с selenium фермой. Способы ускорения тестов.

  • 3,001