company_banner

Использование Selenium WebDriver для автоматического тестирования веб-интерфейса Яндекс.Почты

  • Tutorial
Без качественного тестирования невозможно разрабатывать и поддерживать крупный веб-сервис. На ранних этапах его развития часто можно обходиться только ручным тестированием по заданному тест-плану, но с появлением новых фич и увеличением количества тест-кейсов довольствоваться только им становится все сложнее и сложнее. В этой статье мы расскажем о том, как автоматизируем функциональное тестирование веб-интерфейса Яндекс.Почты с помощью Selenium WebDriver и Node.js.

Selenium

Помимо Selenium WebDriver существует ещё несколько решений для автоматического тестирования веб-интерфейсов, среди которых Watir, Zombie.js, PhantomJS. Но именно он стал практически стандартом. Во-первых, он имеет хорошую функциональность. А во-вторых, для него есть драйверы подо все распространённые браузеры — в том числе и мобильные — и платформы, чего не скажешь о headless-инструментах (Zombie.js, PhantomJS).

А почему именно Node.js? Потому что все фронтенд-разработчики Яндекс.Почты знают JavaScript, а именно они разрабатывают интерфейс и понимают, где и что в нём меняется от релиза к релизу.

Установка и настройка


Для установки и настройки Selenium WebDriver на локальной машине понадобятся:

  1. Java (http://www.java.com/en/download).
  2. Selenium server (скачать standalone версию можно тут — https://code.google.com/p/selenium/downloads/lis).
  3. Node.js + npm (http://nodejs.org/download).
  4. ChromeDriver (для тестирования в Google Chrome). Качается отсюда: code.google.com/p/chromedriver/downloads/list.

После установки всех зависимостей нужно:

  1. Установить selenium-webdriver для Node.js:
    npm install selenium-webdriver -g

  2. Запустить selenium server:
    java -jar selenium-server-standalone-{VERSION}.jar


Первый тест


Для примера, напишем простой тест (test.js):

var wd = require('selenium-webdriver');
var assert = require('assert');

var SELENIUM_HOST = 'http://localhost:4444/wd/hub';
var URL = 'http://www.yandex.ru';

var client = new wd.Builder()
   .usingServer(SELENIUM_HOST)
   .withCapabilities({ browserName: 'firefox' })
   .build();

client.get(URL).then(function() {
    client.findElement({ name: 'text' }).sendKeys('test');
    client.findElement({ css: '.b-form-button__input' }).click();

    client.getTitle().then(function(title) {
        assert.ok(title.indexOf('test — Яндекс: нашлось') > -1, 'Ничего не нашлось :(');
    });

    client.quit();
});


По коду все довольно просто:

  1. Подключаем selenium-webdriver;
  2. Инициализируем клиент с указанием нужного браузера и передачей хоста, на котором у нас висит selenium-server;
  3. Открываем www.yandex.ru;
  4. После загрузки вводим в поисковой строке () посимвольно “test” и кликаем на кнопку (она будет найдена по CSS-селектору ‘.b-form-button__input');
    Получаем тайтл страницы результатов поиска и ищем в нем подстроку 'test — Яндекс: нашлось'.

  5. docs.seleniumhq.org — документация по Selenium.
    code.google.com/p/selenium/wiki/WebDriverJs — документация по WebDriver.js.
    dvcs.w3.org/hg/webdriver/raw-file/default/webdriver-spec.html — черновик спецификации WebDriver API.
Метки:
Яндекс 664,97
Как мы делаем Яндекс
Поделиться публикацией
Комментарии 29
  • +3
    Отличная статья!
    Скажите, а вы используете запуск тестов по расписанию? Может у вас есть какой нибудь CI, который запускает тесты и собирает отчеты о выполнении? Было бы интересно почитать о настройки такого окружения!
    • +1
      Было бы странно, если бы у Яндекса не было CI, поскольку нынче ну разве что для проекта <100 строк и команды из одного человека CI не поднимают.
      • 0
        Вы не дочитали вопрос:
        Может у вас есть какой нибудь CI, который запускает тесты и собирает отчеты о выполнении?

        • 0
          Если вам интересно, вот тут мы подробно описали, как используем Jenkins для запуска Selenium-тестов и получения отчётов.

          Правда, для запуска тестов используется внешний сервис, но что-то полезное для себя, может быть, найдёте.
          • 0
            Спасибо за ссылку, но все же мне интереснее CI в контексте данной статьи, то есть используя grid + node.js.
      • 0
        Да, для CI мы в Почте используем Jenkins.
        • 0
          Есть надежда на то что мы сможем почитать о технических деталях запуска тестов через CI и предоставления отчетов в удобочитаемом виде?
          • +6
            Есть :)
            • 0
              Про отчеты мы уже частично писали — есть такая штука, как Allure.
            • 0
              Вообще говоря Jenkins используется во многих командах Яндекса.
          • 0
            Я немножко поигрался с PhantomJS + CasperJS, понравилось. Правда минус в том, что там только вебкит. А селениум может притвориться седьмым эксплорером к примеру?
            • +1
              Селениум/Вебдрайвер просто использует реальные браузеры. Для различных браузеров есть драйверы и при запуске тестов можно выбрать с каким браузером взаимодействовать
            • 0
              Мне на python писать вебдрайвер тесты было менее страшно, чем на node, хоть какая-то документация есть.

              • +2
                Исходный код — лучшая документация :)
                • 0
                  Действительно, в исходном коде все достаточно подробно, с примерами. Асинхронность в вебдрайвере на node — клевая штука! Писал и на том, и на другом.
                • 0
                  Мы в LinguaLeo решили проблему актуальности селекторов очень просто. Весь JS взаимодействует с DOM исключительно через data аттрибуты, а id'шники и классы только для верстальщиков.
                  P.S. Спасибо авторам за отличную статью.
                  • +2
                    Уважаемые сотрудники Яндекса. Пожалуйста загляните в свою официальную группу: clubs.ya.ru/api-yaru/ которая уже вся обросла спамом.

                    Больше месяца, а точнее с 14 февраля народ вам пишет, что отвалилось апи. Для начала можете заглянуть сюда: api-yaru.yandex.ru/
                    • 0
                      Ярушку же закопали в августе.
                    • 0
                      Я правильно понимаю, что для Selenium нужно на машине (пусть это Linux) иметь установенные X и бравсер, и в этом случае получится headless режим?
                      • 0
                        Да, но можете поставить xvfb. И одна важная особенность для Firefox в user.js в исспользуемом профиле
                        рекомендую прописать:
                        user_pref(«browser.sessionstore.enabled», false);
                        user_pref(«browser.sessionstore.resume_from_crash», false);
                        Иначе при падениях браузера могут появлятся неприятные эфекты при следующих запусках.
                        • 0
                          для хедлеса подойдет phantom.js пример rrroutes.blogspot.ru/2013/02/phantomjs-and-selenium-for-automation.html проекта на градле
                        • 0
                          Их как раз и намереваюсь использовать. Видимо получится у меня красивый компот (Selenium и Casperjs+Phantomjs)
                          • +1
                            Не далее чем вчера твитил про эти библиотеки и предлагал мигрировать на них в zeromq.node, а сегодня выходит Ваша статья. Люблю такие совпадения.
                            • 0
                              Хорошие библиотеки, и названия у них хорошие. Почему бы не использовать?
                              • 0
                                ну как бы про эти библиотеки пишут каждый день на разных ресурсах.
                                чаще твитайте и мониторьте интернет, удивитесь сколько совпадений будет -)
                              • 0
                                Хм, а как вышеописанная технология выявит такой баг (ранее встречался на хабре, придумал не я):
                                цвет надписи совпадает с цветом кнопки, и пользователь не видит куда нажать…
                                • 0
                                  Можно использовать JS и брать цвет кнопки и текста на ней через getComputedStyle или currentStyle (в старых IE). Сравнивать можно не строго, а через алгоритм определения contrast ratio из WCAG 2.0. Еще можно делать скриншоты.
                                  • +1
                                    Данная технология тестирует функционал, а не визуализацию. Вы же не сможете автоматизировать приемку макета от дизайнера на предмет следовал он каким-то вашим просьбам/требованиям по дизайну или нет.
                                  • 0
                                    Могу еще посоветоветовать спецификации (например, для .NET я использовал SpecFlow ) для описания таких тестов. Большие сценарии становится намного проще и нагляднее.

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                    Самое читаемое