Более быстрый способ очистки всех входных данных в HTML-форме с помощью Selenium WebDriver

Вступление

Представьте, что вы имеете дело с вашими функциональными тестами/e2e, где вы хотите очистить поля ввода. Вы, вероятно, будете использовать для этого свою платформу автоматизации веб-тестирования, верно?

Это кажется хорошим и простым подходом, но быстро ли это?

В этом посте я покажу вам основные сравнения, основанные на методах, которые мы применяем в автоматизации веб-тестирования. Я буду использовать Selenium WebDriver с использованием Java, но я уверен, что вы сможете воспроизвести его на любом фреймворке + языке программирования.

Проблема

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

Форма

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

Эта форма уже загружена с некоторыми данными в 6 полях ввода, доступ к которым вы можете получить здесь. Мы собираемся проигнорировать состояние и проверить меня на элементах.

Возможные решения

Нормальный и не такой быстрый

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

У нас есть следующий тест (условия до и после игнорируются).

// pre and post conditions ignored 

@Test
void cleanUsingSelenium() {
    WebElement email = driver.findElement(By.id("email"));
    email.clear();
    email.sendKeys("new@email.com");

    WebElement password = driver.findElement(By.id("password"));
    password.clear();
    password.sendKeys("987654321");

    WebElement address = driver.findElement(By.id("address"));
    address.clear();
    address.sendKeys("Viebrug");

    WebElement address2 = driver.findElement(By.id("address2"));
    address2.clear();
    address2.sendKeys("1");

    WebElement city = driver.findElement(By.id("city"));
    city.clear();
    city.sendKeys("Utrecht");

    WebElement zipCode = driver.findElement(By.id("zipcode"));
    zipCode.clear();
    zipCode.sendKeys("3511 AJ");
}

Как вы можете видеть, мы определяем местоположение каждого элемента, присваиваем ему WebElement . После мы отправляем две команды: сначала clean() для очистки значения в поле ввода и после SendKeys() для заполнения его новым значением.

Выполнение этого теста заняло 1 сек 506 мс.

Первая более быстрая альтернатива

Вместо вызова функции очистки с помощью вашего любимого фреймворка вы можете отправить команду Javascript для очистки всех полей. Один из способов сделать это – найти элемент формы и затем выполнить метод reset() для очистки всех полей внутри формы.

Код Javascript для очистки всех полей в форме:

document.getElementById('my-form').reset()

У нас есть следующий тест для очистки полей ввода с помощью команды Javascript:

// pre and post conditions ignored

@Test
void cleanByJSExecutor() {
    ((JavascriptExecutor) driver).executeScript("document.getElementById('my-form').reset()");

    driver.findElement(By.id("email")).sendKeys("new@email.com");
    driver.findElement(By.id("password")).sendKeys("987654321");
    driver.findElement(By.id("address")).sendKeys("Viebrug");
    driver.findElement(By.id("address2")).sendKeys("1");
    driver.findElement(By.id("city")).sendKeys("Utrecht");
    driver.findElement(By.id("zipcode")).sendKeys("3511 AJ");
}

Вы можете увидеть на рисунке 5 код Javascript, прежде чем приступить к заполнению элементов. Поскольку в коде используется Selenium WebDriver + Java, класс JavascriptExecutor используется для того, чтобы драйвер мог выполнять код Javascript.

В строках с 7 по 12 вы можете видеть только команду SendKeys() , потому что мы уже очистили все поля ввода, устранив необходимость в методе clean() .

Выполнение этого теста заняло 845 мс.

Сравнение

Я знаю, это базовое сравнение, но мы видим, что подход Javascript на 56% быстрее, чем метод фреймворка clean() .

Это происходит потому, что мы отправляем одну дополнительную команду с использованием фреймворка (Selenium WebDriver). Таким образом, вероятно, ваше решение, очищающее поле и заполняющее его внутри метода объекта страницы, может замедлить ваш тест.

Представьте, что у вас много тестов, для которых требуется чистый ввод. Вы можете повторить это когда-нибудь во время выполнения теста, и это один из фокусов автоматизации: более быстрая обратная связь!

Вещи, которые следует принять во внимание

Цикл во всех полях займет одинаковое время в JS

Вместо того, чтобы находить элемент формы и запускать метод reset() , вы можете найти все элементы, которые являются полями ввода, и очистить их. Это хорошая альтернатива его очистке, если у вас несколько форм.

Следующий код Javascript может выполнить эту работу:

Array.from(document.getElementsByTagName('input')).forEach( 
   function(element) {
      element.value = '';
   }
);

Зацикливание на всех полях с использованием фреймворка может быть ненадежным

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

Проблема в том, что эта альтернатива ненадежна, так как элементы могут иметь другую внутреннюю ссылку на элемент, поэтому при попытке очистки или заполнения может возникнуть исключение/проблема.

Вы можете увидеть этот конкретный пример:

driver.findElements(By.tagName("input")).forEach(WebElement::clear);

Этот код находит все элементы, являющиеся полями ввода, и убивает их все. Проблема заключается в исключении InvalidElementStateException это будет вызвано обновлением страницы или загрузкой данных во время загрузки страницы.

Заключительные соображения

В этой статье показаны альтернативные способы сокращения времени выполнения теста.

Вы можете использовать любой подход, который работает, и это нормально, но если вы ищете улучшения, это хорошая альтернатива.

Окончательный код Java со всеми упомянутыми методами можно найти по адресу https://gist.github.com/eliasnogueira/67da81c62cab3de2383052148e7ecafa

Оригинал: “https://dev.to/eliasnogueira/a-faster-way-to-clean-all-inputs-in-an-html-form-using-selenium-webdriver-1pdm”