Using Selenium WebDriver to automatically test Yandex.Mail web interface

Without quality testing, it is impossible to develop and maintain a large web service. In the early stages of its development, it is often possible to do only manual testing according to a given test plan, but with the advent of new features and an increase in the number of test cases it becomes more and more difficult to be content with it. In this article, we will talk about how we automate functional testing of the Yandex.Mail web interface using Selenium WebDriver and Node.js.



In addition to Selenium WebDriver, there are several solutions for automatic testing of web interfaces, including Watir , Zombie.js , PhantomJS. But it was he who became practically the standard. Firstly, it has good functionality. And secondly, there are drivers for it for all common browsers - including mobile ones - and platforms, which can not be said about headless-tools (Zombie.js, PhantomJS).

And why exactly Node.js? Because all Yandex.Mail front-end developers know JavaScript, namely they develop the interface and understand where and what changes in it from release to release.

Installation and setup

To install and configure Selenium WebDriver on a local machine, you will need:

1. Java ( http://www.java.com/en/download ).
2. Selenium server (download the standalone version here - https://code.google.com/p/selenium/downloads/lis ).
3. Node.js + npm ( http://nodejs.org/download ).
4. ChromeDriver (for testing in Google Chrome). It sways from here: code.google.com/p/chromedriver/downloads/list .

After installing all the dependencies you need:

1. Install selenium-webdriver for Node.js:

   npm install selenium-webdriver -g

   
   
2. Launch selenium server:

   java -jar selenium-server-standalone-{VERSION}.jar

   
   

First test

For an example, we will write a simple test (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();
});

The code is pretty simple:

1. We connect selenium-webdriver;
2. We initialize the client with the desired browser and transfer the host on which we have selenium-server;
3. We open www.yandex.ru;
4. After loading, enter in the search line ( ) посимвольно “test” и кликаем на кнопку (она будет найдена по CSS-селектору ‘.b-form-button__input');
   We get the title of the page of search results and look for the substring 'test - Yandex: found' in it.
   

docs.seleniumhq.org - Selenium documentation.
code.google.com/p/selenium/wiki/WebDriverJs - WebDriver.js documentation.
dvcs.w3.org/hg/webdriver/raw-file/default/webdriver-spec.html is a draft of the WebDriver API specification.