Тестрирование UI web приложения на Vaadin с помощью Selenium

Q: Как в автоматическом режиме протестировать web приложение ?
A: С помощью Selenium например.

Должны быть соблюдены следующие условия:

1. работающий Selenium Server
2. работающее тестируемое приложение

Рассмотрим случай когда приложение написано на Vaadin. 

Тест-кейс будет такой: 

• Заполнить форму, которая имеет несколько текстовых полей, поле выбора из списка и поле checkbox. 
• Одно из обязательных полей оставить пустым.
• Нажать на кнопку отправления данных.

Ожидаемый результат:

• Появление предупреждения об ошибке заполнения.

Для начала подготовим элементы формы к тому, чтобы на странице в браузере к ним можно было обратится по Id. Для этого можно воспользоваться присвоением DebugId каждому элементу. 

В фабрике полей

final TextField tf = (TextField) field;
tf.setRequired(true);
tf.setNullRepresentation("");
tf.setDebugId("sr_number");
return tf;

Мы присвоили этому полу идентификатор sr_number, так как это поле для ввода номера

Для кнопок формы

commit.setDebugId("form_commit");
delete.setDebugId("form_delete");
reset.setDebugId("form_reset");

Теперь можно запустить приложение и отправиться запускать selenium сервер, который можно найти на сайте selenium в разделе Selenium Server (formerly the Selenium RC Server).
Сервер запускается в консоли командой "java -jar selenium-server.jar -interactive"

Как видно по умолчанию сервер запущен с портом 4444

Для того, чтобы составить тестовый случай и запустить его воспользуемся Selenium IDE для firefox. В браузере firefox в Navigation toolbar нажимаем Tools -> Selenium IDE

кнопка записи теста должна быть уже включена, так что просто делаем действия нашего тест-кейса, то есть заполняем форму, действия записываются в тест.

Вот сама форма и поля со своими DebugId

Для отображения кода теста в формате JUnit 4, нужно нажать в окне Selenium IDE Options -> Format -> JUnit 4 и скопировать полученный исходный код
Вот немного адаптированный вариант

package ***;

import static org.junit.Assert.assertTrue;

import org.junit.After;
import org.junit.Before;
import org.junit.Test;

import com.thoughtworks.selenium.DefaultSelenium;
import com.thoughtworks.selenium.Selenium;


public class SearchFieldTest {
 
 private Selenium selenium;
 
 private static String BROWSER = "*firefox";
 private static int PORT = 4444;
 
 @Before
 public void setUp() throws Exception {
  selenium = new DefaultSelenium("localhost", PORT, BROWSER, "http://localhost:8080/");
  selenium.start();
 }

 @Test
 public void testLogin() throws Exception {
  
  selenium.open("/app_path");
  
  selenium.type("sr_number", ""); // обязательное поле с пустым содержимым
  selenium.click("sr_description");
  selenium.type("sr_description", "zzz");
  selenium.click("//div[@id='sr_routeType']/select");
  selenium.select("//div[@id='sr_routeType']/select", "label=Linnaliin");
  selenium.click("//div[@id='sr_routeType']/select/option[1]");
  selenium.click("//div[@id='form_commit']/");
  
  assertTrue(selenium.isTextPresent("Please fill all fields!")); // ожидаем, что появится такая надпись
 
 }
 
 @After
 public void tearDown() throws Exception {
  selenium.stop();
 }
}

Код теста изначально получался не такой, в частности для нажатия кнопки получалось что-то невразумительное, пришлось изучать элементы

  Save
 

и в итоге написать selenium.click("//div[@id='form_commit']/");
Теперь тест срабатывает.

Полезные ссылки:

• Firefox
• Selenium
• JUnit