Модульное тестирование веб-интерфейса

Дмитрий Андриянов, Яндекс

Модульное тестирование веб-интерфейса
в Headless Chrome

Субботник

Дмитрий Андриянов

Разработчик интерфейсов, Яндекс.Директ

О чем поговорим

Почему мы пишем тесты?

Директ - очень большой проект

Пример объявления

Пример объявления

Настройки объявления

Пример объявления

Пример объявления

Заголовок будет скрыт

Исходный код — статистика

Количество блоков 872
Количество строк кода 261 923
Размер файлов 56M

Выход — автотесты!

Тестирование
веб-интерфейса

Тесты для класса/функции

describe('MyClass', () => {
  it('Метод myAction должен возвращать -1', () => {
      // подготовка
      let obj = new MyClass();
      
      // действие
      let result = obj.myAction();
      
      // проверка
      assert.equal(result, -1);
  });
});

Тесты для веб-интерфейса

describe('MyForm', () => {
  it('Должна быть ошибка, если форма не заполнена', () => {
      // подготовка
      let form = createForm();
      
      // действие
      form.submit();
      
      // проверка
      var errorMessage = form.querySelector('.errors');
      assert.equal(errorMessage.innerText, 'Заполните все поля');
  });
});

Браузер - это программа с GUI

Заголовок будет скрыт

Selenium-тесты

Заголовок будет скрыт

Пример Selenium-теста

describe('Test Suite', function(){

    it('Test Case', function(){

        // подготовка
        browser.url('https://yandex.ru');
        
        // действие
        browser.setValue('#input', 'Я.Субботник');
        browser.submitForm('#search-form');

        // проверка
        expect(browser.getTitle())
            .equals('Я.Субботник - Яндекс: нашлось 52 млн. результатов');
    })
});

Достоинства

Достоинства

Mocha + Selenium

npm i hermione

npm i nightwatch

Только
интеграционные тесты!

Отличия модульных и интеграционных тестов

Заголовок будет скрыт

Тесты в headless браузерах

Заголовок будет скрыт

Заголовок будет скрыт

Заголовок будет скрыт

PhantomJS остановлен

puppeteer

Mocha + Selenium

npm i mocha-headless-chrome

DEMO

Контакты

Дмитрий Андриянов

Разработчик интерфейсов