Разделы портала

Онлайн-тренинги

.
Kirk + chrome devtools
20.12.2017 18:15
chrome dev tool

Автор: Сергей Пирогов

Оригинальная публикация: http://automation-remarks.com/2017/kirk-chrome-devtools/index.html

Привет, друзья-айтишники. Сегодня хочу поделиться с вами очередной порцией полезной информации из мира автоматизации тестирования. Поговорим более детально о возможностях использования Сhrome developer tools во время прогонов автотестов.

Записывать видео мы уже давно научились, а вот использовать такой мощный инструмент, как devtools, пока еще нет.

Developer tools обладает обширным кругом возможностей. Мы с вами используем его каждый день: для поиска элеметов, для того, чтобы посмотреть в network, возможно, даже попытаться замедлить браузер, чтобы посмотреть на поведение вашего сайта.

Использование devtools в тестах было невозможно, пока на одной из конференций не был показан инструмент devtools proxy.

Сам прокси написан на Python, но это не ограничивает нас от использования его в Java проектах.

Перед тем, как перейти к основной части, я поясню, чем вообще может помочь devtools именно во время прогона тестов. Во-первых, вы можете смотреть сорс HTML страницы прямо во время исполнения тестов. Во-вторых, можно смотреть табу network, все запросы и ответы. Это позволяет быстрее понять, что во время теста пошло не так и почему же он упал. Хочу отметить, что возможность записывать трафик общения между браузером и бекендом уже давно можно реализовать с помощью browsermob proxy. Но proxy накладывает свои ограничения и вы не можете так прям в live режиме смотреть, что же там происходит.

Я уже давно играюсь с DevTools proxy и буквально недавно сделал интеграцию devtools + Kirk.

Выглядит это так:

class DevToolsDemo {

    @Test fun testCanAddTwoNumbersListener() {
        val chrome = Browser(listener = DevTools())
        chrome.to("http://juliemr.github.io/protractor-demo/") {
            element("input[ng-model='first']") value "1"
            element("input[ng-model='second']") value "2"
            select("select[ng-model='operator']").selectOption("+")
            element("#gobutton").click()
            element("h2.ng-binding").shouldHave(text("3"))
        }
    }
}

В Kirk класс Browser умеет принимать два параметра в конструкторе: WebDriver и реализацию интерфейса KirkListener.

Этим мы и воспользуемся:

class DevTools : AbstractEventListener() {
    override fun onStart() {
        openDevTools()
    }
}

Результат смотрим на видео:

На видео вы видели только один браузер потому, что тесты бежали в headless chrome. Эту возможность Kirk тоже поддерживает "из коробки". Я специально сделал пример с "безголовым хромом", чтобы более ярко продемонстрировать возможности. С наличием такой фичи мы можем дебажить тесты, которые бегут на другой машине или в CI (*).

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

Обсудить в форуме