Как протестировать элементы «перетаскивания» с помощью Behat/Selenium

Перед командой Смарт Гамма была поставлена задача создать на нашем сайте функционал для сортировки записей методом перетаскивания.

Задача

Но нам нужно не только создать реализацию, но и создать функциональный тест с помощью Behat.

Реализация довольно проста и выглядит так:

поэтому у нас есть 4 элемента, и после того, как последняя строка будет перемещена на 1-ю, мы вызовем запрос AJAX и обновим бэкэнд.

Мы решили использовать плагин jquery Sortable https://jqueryui.com/sortable.

У него есть событие «обновление», которое мы можем использовать для AJAX-вызова бэкенду. Готово!

Проблема

Теперь мы переходим к задаче покрыть нашу реализацию функциональным тестом пользовательского интерфейса. Smart Gamma обычно использует структуру Behat BDD с комбинацией различных веб-драйверов.

«Гугление» дает мало информации о конкретных решениях.

Первое предлагаемое решение — использовать функцию «DragTo» драйвера Selenium.

Нравится:

$this-›getSession()-›getDriver()-›dragTo(‘li:eq(‘.$element.’)’, ‘ul#’.$block);

но в нашем случае мы не смогли поднять его. Функция «DragTo» не смогла найти наш перетаскиваемый элемент и выдала следующую ошибку:

When I drag li "1" in ul block with id "sortQueue" to top # CoreFeatureContext::iDragLiToTop()
      The given selector li:eq(1) is either invalid or does not result in a WebElement. The following error occurred:
      InvalidSelectorError: Unable to locate an element with the xpath expression li:eq(1) because of the following error:
      NamespaceError: An attempt was made to create or change an object in a way which is incorrect with regard to namespaces
      For documentation on this error, please visit: http://seleniumhq.org/exceptions/invalid_selector_exception.html
      Build info: version: '2.53.1', revision: 'a36b8b1', time: '2016-06-30 17:37:03'
      System info: host: 'jekccs-ubuntu', ip: '127.0.1.1', os.name: 'Linux', os.arch: 'amd64', os.version: '3.13.0-55-generic', java.version: '1.7.0_65'
      Driver info: driver.version: unknown (WebDriver\Exception\InvalidSelector)

Второе предложенное решение было найдено в блоге Джоэри Тиммерманса «Тестирование перетаскивания с помощью Behat and Guzzle»

Идея проста:

1. Вызовите URL-адрес перемещения с правильными данными
2. Отправьте запрос
3. Подтвердите успешность запроса
4. Обновите браузер, так как вы хотите просмотреть свой ход

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

Умное гамма-решение

Итак, мы реализовали выполнение реального кода javascript с помощью функции evaluateScript Behat/Mink как:

/**
* @When I drag li :element in ul block with id :block to top
*/
public function iDragLiToTop($element, $block)
{
   $this->getSession()->evaluateScript('$(document).ready(function(){
       $("ul#'.$block.'").prepend($("ul#'.$block.' li:eq('.$element.')"));
       $("ul#'.$block.'").sortable("option", "update")();})'
   );
}

1. изменить положение элементов
2. вручную вызвать событие плагина «обновить»

Feature: In order to sort element 
         As user
         I should be able drag and drop elements
@javascript
  Scenario: I drag list
    Given I am logged as user with login “[email protected]” and password “[email protected]”
    Given I go to "/media/list"
    When I drag element with “http://test.com/torrent-3” to top position
   Then torrent “http://test.com/torrent-3” should be on position “1”

Первоначально опубликовано на www.smart-gamma.com

Как протестировать элементы «перетаскивания» с помощью Behat/Selenium

Похожие вопросы