Інтеграція HtmlUnit

Spring забезпечує інтеграцію між MockMvc та HtmlUnit. Це спрощує проведення наскрізного тестування під час використання подання з урахуванням HTML. Така інтеграція дозволяє:

• Легко тестувати HTML-сторінки за допомогою таких інструментів, як HtmlUnit, WebDriver та Geb, без необхідності розгортання в контейнері сервлетів.

• Тестувати JavaScript всередині сторінок.

• Опційно використовувати імітовані служби для прискорення тестування.

• Забезпечувати спільне використання логіки наскрізними тестами в контейнері та інтеграційними тестами поза контейнером.

MockHttpServletRequestBuilder createMessage = post("/messages/")
        .param("summary", "Spring Rocks")
        .param("text", "In case you didn't know, Spring Rocks!");
mockMvc.perform(createMessage)
        .andExpect(status().is3xxRedirection())
        .andExpect(redirectedUrl("/messages/123"));

@Test
fun test() {
    mockMvc.post("/messages/") {
        param("summary", "Spring Rocks")
        param("text", "In case you didn't know, Spring Rocks!")
    }.andExpect {
        status().is3xxRedirection()
        redirectedUrl("/messages/123")
    }
}

<form id="messageForm" action="/messages/" method="post">
    <div class="pull-right"><a href="/messages/">Messages</a>
    </div>
    <label for="summary">Summary</label>
    <input type="text" class="required" id="summary" name="summary" value="" />
    <label for="text">Message</label>
    <textarea id="text" name="text"></textarea>
    <div class="form-actions">
        <input type="submit" value="Create" />
    </div>
</form>

mockMvc.perform(get("/messages/form"))
        .andExpect(xpath("//input[@name='summary']").exists())
        .andExpect(xpath("//textarea[@name='text']").exists());

mockMvc.get("/messages/form").andExpect {
    xpath("//input[@name='summary']") { exists() }
    xpath("//textarea[@name='text']") { exists() }
}

String summaryParamName = "summary";
String textParamName = "text";
mockMvc.perform(get("/messages/form"))
        .andExpect(xpath("//input[@name='" + summaryParamName + "']").exists())
        .andExpect(xpath("//textarea[@name='" + textParamName + "']").exists());
MockHttpServletRequestBuilder createMessage = post("/messages/")
        .param(summaryParamName, "Spring Rocks")
        .param(textParamName, "In case you didn't know, Spring Rocks!");
mockMvc.perform(createMessage)
        .andExpect(status().is3xxRedirection())
        .andExpect(redirectedUrl("/messages/123"));

val summaryParamName = "summary";
val textParamName = "text";
mockMvc.get("/messages/form").andExpect {
    xpath("//input[@name='$summaryParamName']") { exists() }
    xpath("//textarea[@name='$textParamName']") { exists() }
}
mockMvc.post("/messages/") {
    param(summaryParamName, "Spring Rocks")
    param(textParamName, "In case you didn't know, Spring Rocks!")
}.andExpect {
    status().is3xxRedirection()
    redirectedUrl("/messages/123")
}

WebClient webClient;
@BeforeEach
void setup(WebApplicationContext context) {
    webClient = MockMvcWebClientBuilder
            .webAppContextSetup(context)
            .build();
}

WebClient webClient;
@BeforeEach
void setup(WebApplicationContext context) {
    webClient = MockMvcWebClientBuilder
            .webAppContextSetup(context)
            .build();
}

HtmlPage createMsgFormPage = webClient.getPage("http://localhost/messages/form");

val createMsgFormPage = webClient.getPage("http://localhost/messages/form")

HtmlForm form = createMsgFormPage.getHtmlElementById("messageForm");
HtmlTextInput summaryInput = createMsgFormPage.getHtmlElementById("summary");
summaryInput.setValueAttribute("Spring Rocks");
HtmlTextArea textInput = createMsgFormPage.getHtmlElementById("text");
textInput.setText("In case you didn't know, Spring Rocks!");
HtmlSubmitInput submit = form.getOneHtmlElementByAttribute("input", "type", "submit");
HtmlPage newMessagePage = submit.click();

val form = createMsgFormPage.getHtmlElementById("messageForm")
val summaryInput = createMsgFormPage.getHtmlElementById("summary")
summaryInput.setValueAttribute("Spring Rocks")
val textInput = createMsgFormPage.getHtmlElementById("text")
textInput.setText("In case you didn't know, Spring Rocks!")
val submit = form.getOneHtmlElementByAttribute("input", "type", "submit")
val newMessagePage = submit.click()

 
assertThat(newMessagePage.getUrl().toString()).endsWith("/messages/123");
String id = newMessagePage.getHtmlElementById("id").getTextContent();
assertThat(id).isEqualTo("123");
String summary = newMessagePage.getHtmlElementById("summary").getTextContent();
assertThat(summary).isEqualTo("Spring Rocks");
String text = newMessagePage.getHtmlElementById("text").getTextContent();
assertThat(text).isEqualTo("In case you didn't know, Spring Rocks!");

 
assertThat(newMessagePage.getUrl().toString()).endsWith("/messages/123")
val id = newMessagePage.getHtmlElementById("id").getTextContent()
assertThat(id).isEqualTo("123")
val summary = newMessagePage.getHtmlElementById("summary").getTextContent()
assertThat(summary).isEqualTo("Spring Rocks")
val text = newMessagePage.getHtmlElementById("text").getTextContent()
assertThat(text).isEqualTo("In case you didn't know, Spring Rocks!")

WebClient webClient;
@BeforeEach
void setup(WebApplicationContext context) {
    webClient = MockMvcWebClientBuilder
            .webAppContextSetup(context)
            .build();
}

lateinit var webClient: WebClient
@BeforeEach
fun setup(context: WebApplicationContext) {
    webClient = MockMvcWebClientBuilder
            .webAppContextSetup(context)
            .build()
}

WebClient webClient;
@BeforeEach
void setup() {
    webClient = MockMvcWebClientBuilder
        // демонструє застосування MockMvcConfigurer (Spring Security).
        webAppContextSetup(context, springSecurity())
        лише для прикладу - за замовчуванням ""
        .contextPath("")
        // За умовчанням MockMvc використовується тільки для localhost;
        // наступна частина буде використовувати MockMvc для example.com і example.org
        .useMockMvcForHosts("example.com","example.org")
        .build();
}

lateinit var webClient: WebClient
@BeforeEach
fun setup() {
    webClient = MockMvcWebClientBuilder
        // демонструє застосування MockMvcConfigurer (Spring Security)
        .webAppContextSetup(context, springSecurity())
        // тільки для прикладу - за замовчуванням ""
        .contextPath("")
        // За умовчанням MockMvc використовується тільки для localhost;
        // наступна частина буде використовувати MockMvc для example.com і example.org
        .useMockMvcForHosts("example.com","example.org") .build() }

MockMvc mockMvc = MockMvcBuilders
    .webAppContextSetup(context)
    .apply(springSecurity())
    .build();
webClient = MockMvcWebClientBuilder
        .mockMvcSetup(mockMvc)
        // тільки для прикладу – за замовчуванням ""
        .contextPath("")
        // За умовчанням MockMvc використовується тільки для localhost;
        // наступна частина буде використовувати MockMvc для example.com і example.org
        .useMockMvcForHosts("example.com","example.org")
        .build()

// Неможливо в Kotlin,поки https://youtrack.jetbrains.com/issue/KT-22208 не буде виправлено

MockMvc та WebDriver

У попередніх розділах ми ознайомилися з використанням MockMvc у поєднанні з сирими API-інтерфейсами HtmlUnit. У цьому розділі використані додаткові абстракції у Selenium WebDriver, що робить все ще простіше.

Чому WebDriver і MockMvc?

Ми вже можемо використовувати HtmlUnit і MockMvc, то навіщо нам WebDriver? Selenium WebDriver надає надзвичайно витончений API-інтерфейс, який дозволить нам легко організувати наш код. Щоб краще показати, як це працює, в цьому розділі ми розглянемо приклад. Не дивлячись на те, що WebDriver є частиною Selenium, він не вимагає наявності Selenium Server для запуску ваших тестів.

Припустимо, нам потрібно переконатися, що повідомлення створено правильно. Тести включають пошук елементів введення HTML-форми, їх заповнення та виконання різних тверджень.

Такий підхід виливається в численні окремі тести, оскільки нам потрібно перевірити також і умови виникнення помилок. Наприклад, нам потрібно, щоб при заповненні частини форми видавалась помилка. Якщо ми заповнимо всю форму, то після цього має з'явитися новостворене повідомлення.

Якби одне з полів було названо "summary", ми могли б отримати щось схоже на те, що наведено нижче, що повторюється в кількох місцях. у наших тестах:

HtmlTextInput summaryInput = currentPage.getHtmlElementById("summary");
summaryInput.setValueAttribute(summary);

val summaryInput = currentPage.getHtmlElementById("summary")
summaryInput .setValueAttribute(summary)

Що станеться, якщо ми змінимо id на smmry? Це змусить нас оновити всі наші тести, щоб врахувати цю зміну. Це порушує принцип "не повторюйся" (DRY), тому в ідеалі ми повинні виділити цей код окремим методом, як показано нижче:

public HtmlPage createMessage( HtmlPage currentPage, String summary, String text) {
    setSummary(currentPage, summary);
    // ...
}
public void setSummary(HtmlPage currentPage, String summary) {
    HtmlTextInput summaryInput = currentPage.getHtmlElementById("summary");
    summaryInput.setValueAttribute(summary);
}

fun createMessage(currentPage: HtmlPage, summary:String, text:String) :HtmlPage{
    setSummary(currentPage, summary);
    // ...
}
fun setSummary(currentPage:HtmlPage , summary: String) {
    val summaryInput = currentPage.getHtmlElementById("summary")
    summaryInput.setValueAttribute(summary)
}

public class CreateMessagePage {
    final HtmlPage currentPage;
    final HtmlTextInput summaryInput;
    final HtmlSubmitInput submit;
    public CreateMessagePage(HtmlPage currentPage) {
        this.currentPage = currentPage;
        this.summaryInput = currentPage.getHtmlElementById("summary");
        this.submit = currentPage.getHtmlElementById("submit");
    }
    public <T> T createMessage(String summary, String text) throws Exception {
        setSummary(summary);
        HtmlPage result = submit.click();
        boolean error = CreateMessagePage.at(result);
        return (T) (error ? new CreateMessagePage(result) : new ViewMessagePage(result));
    }
    public void setSummary(String summary) throws Exception {
        summaryInput.setValueAttribute(summary);
    }
    public static boolean at(HtmlPage page) {
        return "Create Message".equals(page.getTitleText());
    }
}

class CreateMessagePage(private val currentPage: HtmlPage) {
        val summaryInput: HtmlTextInput = currentPage.getHtmlElementById("summary")
        val submit: HtmlSubmitInput = currentPage.getHtmlElementById("submit")
        fun <T> createMessage(summary: String, text: String): T {
            setSummary(summary)
            val result = submit.click()
            val error = at(result)
            return (if (error) CreateMessagePage(result) else ViewMessagePage(result)) as T
        }
        fun setSummary(summary: String) {
            summaryInput.setValueAttribute(summary)
        }
        fun at(page: HtmlPage): Boolean {
            return "Create Message" == page.getTitleText()
        }
    }
}

WebDriver driver;
@BeforeEach
void setup(WebApplicationContext context) {
    driver = MockMvcHtmlUnitDriverBuilder
            .webAppContextSetup(context)
            .build();
}

lateinit var driver: WebDriver
@BeforeEach
fun setup(context: WebApplicationContext) {
    driver = MockMvcHtmlUnitDriverBuilder
            .webAppContextSetup(context)
            .build()
}

CreateMessagePage page = CreateMessagePage.to(driver);

val page = CreateMessagePage.to(driver)

ViewMessagePage viewMessagePage =
        page.createMessage(ViewMessagePage.class, expectedSummary, expectedText);

val viewMessagePage =
    page.createMessage(ViewMessagePage::class, expectedSummary, expectedText)

Це покращить структуру нашого тесту HtmlUnit за рахунок використання шаблону Page Object Pattern. Як уже було згадано в підрозділі "Чому WebDriver та MockMvc?", ми можемо використовувати шаблон Page Object Pattern з HtmlUnit, але з WebDriver це все ще простіше. Розглянемо наступну реалізацію CreateMessagePage:

public class CreateMessagePage
        extends AbstractPage { 
    
    private WebElement summary;
    private WebElement text;
    
    @FindBy(css = "input[type=submit]")
    private WebElement submit;
    public CreateMessagePage(WebDriver driver) {
        super(driver);
    }
    public <T> T createMessage(Class<T> resultPage, String summary, String details) {
        this.summary.sendKeys(summary);
        this.text.sendKeys(details);
        this.submit.click();
        return PageFactory.initElements(driver, resultPage);
    }
    public static CreateMessagePage to(WebDriver driver) {
        driver.get("http://localhost:9990/mail/messages/form");
        return PageFactory.initElements(driver, CreateMessagePage.class);
    }
}        

1. CreateMessagePage розширює AbstractPage. Не будемо детально зупинятися на AbstractPage, але, якщо коротко, вона містить спільну функціональність для всіх наших сторінок. Наприклад, якщо в нашому додатку є навігаційна панель, глобальні повідомлення про помилки та інші функції, ми можемо розмістити цю логіку в загальному місці.
2. У нас є змінна член для кожної частини HTML-сторінки, яка нас цікавить. Вони мають тип WebElement. PageFactory з WebDriver дозволяє нам прибрати багато зайвого коду з HtmlUnit- версії CreateMessagePage, автоматично дозволивши кожен WebElement. Метод PageFactory#initElements(WebDriver,Class<T>) автоматично дозволяє кожен WebElement, використовуючи ім'я поля та здійснюючи його пошук за id або name елемента в HTML-сторінці.
3. Можна використовувати анотацію @FindBy щоб перевизначити логіку пошуку за замовчуванням. У нашому прикладі показано, як використовувати анотацію @FindBy для пошуку нашої кнопки відправки за допомогою селектора css(input[type=submit]).

class CreateMessagePage(private val driver: WebDriver) : AbstractPage(driver) { 
    
    private lateinit var summary: WebElement
    private lateinit var text: WebElement
    
    @FindBy(css = "input[type=submit]")
    private lateinit var submit: WebElement
    fun <T> createMessage(resultPage: Class<T>, summary: String, details: String): T {
        this.summary.sendKeys(summary)
        text.sendKeys(details)
        submit.click()
        return PageFactory.initElements(driver, resultPage)
    }
    companion object {
        fun to(driver: WebDriver): CreateMessagePage {
            driver.get("http://localhost:9990/mail/messages/form")
            return PageFactory.initElements(driver, CreateMessagePage::class.java)
        }
    }
}    

1. CreateMessagePage розширює AbstractPage. Не будемо детально зупинятися на AbstractPage, але, якщо коротко, вона містить спільну функціональність для всіх наших сторінок. Наприклад, якщо в нашому додатку є навігаційна панель, глобальні повідомлення про помилки та інші функції, ми можемо розмістити цю логіку в загальному місці.
2. У нас є змінна член для кожної частини HTML-сторінки, яка нас цікавить. Вони мають тип WebElement. PageFactory з WebDriver дозволяє нам прибрати багато зайвого коду з HtmlUnit- версії CreateMessagePage, автоматично дозволивши кожен WebElement. Метод PageFactory#initElements(WebDriver,Class<T>) автоматично дозволяє кожен WebElement, використовуючи ім'я поля та здійснюючи його пошук за id або name елемента в HTML-сторінці.
3. Можна використовувати анотацію @FindBy щоб перевизначити логіку пошуку за замовчуванням. У нашому прикладі показано, як використовувати інструкцію @FindBy для пошуку нашої кнопки відправки за допомогою селектора css(input[type=submit]).

Зрештою, можна переконатися, що нове повідомлення було успішно створено. Наступні твердження використовують бібліотеку тверджень AssertJ:

assertThat(viewMessagePage.getMessage()).isEqualTo(expectedMessage);
assertThat(viewMessagePage.getSuccess()).isEqualTo("Successfully created a new message");

assertThat(viewMessagePage.message).isEqualTo(expectedMessage)
assertThat(viewMessagePage.success).isEqualTo("Successfully created a new message")

Ми бачимо, що наша сторінка ViewMessagePage дозволяє нам взаємодіяти з нашою спеціальною моделлю предметної галузі. Наприклад, вона відкриває метод, який повертає об'єкт Message:

public Message getMessage() throws ParseException {
    Message message = new Message ();
    message.setId(getId());
    message.setCreated(getCreated());
    message.setSummary(getSummary());
    message.setText(getText());
    return message;
}

fun getMessage() = Message(getId(), getCreated(), getSummary() , getText())

Потім можна використовувати повнофункціональні об'єкти предметної області в наших твердженнях.

Зрештою, не потрібно забувати закривати екземпляр WebDriver після завершення тесту, як показано нижче:

@AfterEach
void destroy() {
    if (driver != null) {
        driver .close();
    }
}
        

@AfterEach
fun destroy() {
    if (driver != null) {
        driver. close()
    }
}
        

Додаткову інформацію про використання WebDriver див. у документації по Selenium WebDriver.

Розширене використання MockMvcHtmlUnitDriverBuilder

Досі в прикладах ми використовували MockMvcHtmlUnitDriverBuilder найпростішим способом, створюючи WebDriver на основі WebApplicationContext, завантаженого для нас Spring TestContext Framework. Цей підхід повторений тут так:

WebDriver driver;
@BeforeEach
void setup(WebApplicationContext context) {
    driver = MockMvcHtmlUnitDriverBuilder
            .webAppContextSetup(context)
            .build();
}

lateinit var driver: WebDriver
@BeforeEach
fun setup(context: WebApplicationContext) {
    driver = MockMvcHtmlUnitDriverBuilder
            .webAppContextSetup(context)
            .build()
}

Ми також можемо вказати додаткові параметри конфігурації, як показано нижче:

WebDriver driver;
@BeforeEach
void setup() {
    driver = MockMvcHtmlUnitDriverBuilder
            // демонструє застосування MockMvcConfigurer (Spring Security)
            .webAppContextSetup(context, springSecurity())
            // тільки для прикладу – за умовчанням ""
            .contextPath("")
            // За умовчанням MockMvc використовується тільки для localhost;
            // наступна частина буде використовувати MockMvc для example.com і example.org
            .useMockMvcForHosts("example.com","example.org")
            .build();
}

lateinit var driver: WebDriver
@BeforeEach
fun setup() {
    driver = MockMvcHtmlUnitDriverBuilder
            // демонструє застосування MockMvcConfigurer (Spring Security)
            .webAppContextSetup(context, springSecurity())
            // тільки для прикладу – за умовчанням ""
            .contextPath("")
            // За умовчанням MockMvc використовується тільки для localhost;
            // наступна частина буде використовувати MockMvc для example.com і example.org
            .useMockMvcForHosts("example.com","example.org")
            .build()
}

Як альтернативу можна виконати таке ж налаштування, налаштувавши екземпляр MockMvc окремо і передавши його в MockMvcHtmlUnitDriverBuilder таким чином:

MockMvc mockMvc = MockMvcBuilders
        .webAppContextSetup(context)
        .apply(springSecurity())
        .build();
driver = MockMvcHtmlUnitDriverBuilder
        .mockMvcSetup(mockMvc)
        // тільки для прикладу – за умовчанням ""
        .contextPath("")
        // За умовчанням MockMvc використовується тільки для localhost
        // наступна частина буде використовувати MockMvc для example.com і example.org
        .useMockMvcForHosts("example.com","example.org")
        .build();

// Неможливо в Kotlin,поки https://youtrack.jetbrains.com/issue/KT-22208 не буде виправлено

Це більш перевантажений код, але, створюючи WebDriver за допомогою екземпляра MockMvc, ми отримуємо весь функціонал MockMvc у своєму розпорядженні.

MockMvc та Geb

У попередньому розділі ми розглянули, як використовувати MockMvc з WebDriver. У цьому розділі ми використовуємо Geb, щоб зробити наші тести ще більш Groovy-орієнтованими.

Чому Geb і MockMvc?

Geb підтримується WebDriver, тому він дає багато з тих переваг, які ми одержуємо від WebDriver. Однак Geb ще сильніше все спрощує завдяки тому, що працює зі стереотипним кодом замість нас. Selenium WebDriver, який використовує MockMvc, так:

def setup() {
    browser.driver = MockMvcHtmlUnitDriverBuilder
        .webAppContextSetup(context)
        .build()
}

Таким чином можна гарантувати, що будь-яка URL-адреса, яка посилається на localhost як сервер, буде спрямована на наш екземпляр MockMvc без необхідності в реальному HTTP-з'єднанні. Запит будь-якої іншої URL-адреси відбувається за допомогою мережного підключення, як завжди. Це дозволяє нам легко тестувати використання мереж доставки (і дистрибуції) вмісту (CDN).

Використання MockMvc та Geb

Тепер ми можемо стандартно використовувати Geb, але без необхідності розгортання нашої програми в контейнері сервлетів. Наприклад, можна зробити запит в подання на створення повідомлення таким чином:

to CreateMessagePage

Потім можна заповнити форму та відправити її, щоб створити повідомлення, таким чином:

when:
form.summary = expectedSummary
form.text = expectedMessage
submit.click( ViewMessagePage)
        

Будь-які нерозпізнані виклики методів, звернення до властивостей або посилання, які не були знайдені, передаються поточному об'єкту сторінки. Це дозволяє позбавитися великого обсягу стереотипного коду, необхідного при прямому використанні WebDriver. Як згадувалося раніше, можна використовувати шаблон Page Object Pattern з HtmlUnit та WebDriver, але з Geb все стає ще. Розглянемо нашу нову реалізацію CreateMessagePage на основі Groovy:

class CreateMessagePage extends Page {
    static url = 'messages/form'
    static at = { assert title == 'Messages : Create'; true}
    static content = {
        submit { $('input[type=submit]') }
        form { $('form') }
        errors(required:false) { $('label.error, .alert-error')?.text() }
    }
}

Наш CreateMessagePage розширює AbstractPage. Не будемо докладно зупинятися на Page, але, якщо коротко, вона містить спільну функціональність для всіх наших сторінок. Ми визначаємо URL-адресу, за якою можна знайти цю сторінку. Це дозволяє нам перейти на сторінку, як показано нижче:

to CreateMessagePage

У нас також є замикання at, яке визначає, чи ми знаходимося на вказаній сторінці. Воно має повертати true, якщо ми знаходимося на правильній сторінці. Ось тому ми можемо підтвердити, що знаходимося на правильній сторінці, так:

then:
at CreateMessagePage
errors.contains('This field is required.')

Далі ми створюємо замикання content, в якому вказуються всі цікаві місця на сторінці. Можна використовувати jQuery-подібний API-інтерфейс навігатора для вибору цікавого для нас вмісту.

Нарешті, ми можемо переконатися, що нове повідомлення було успішно створено, таким чином:

then:
at ViewMessagePage
success == 'Successfully created a new message'
id
date
summary == expectedSummary
message == expectedMessage

Детальнішу інформацію про те, як вичавити максимум з Geb, можна знайти в посібнику користувача під назвою "The Book of Geb".