Визуализация покрытия автоматизированными UI тестами

Scalable eCommerce Platform Solutions

Визуализация покрытия автоматизированными UI тестами

Лянгузов Алексей

План@startumlskinparam sequence{ ArrowColor #528526 LifeLineBorderColor #528526 ActorBorderColor #528526 ActorBackgroundColor #AAFFAA ParticipantBorderColor #528526 ParticipantBackgroundColor white ParticipantFontSize 18 ParticipantFontName Serif BoxBorderColor #528526 BoxFontSize 18}actor " " as Ubox "Введение" #DDFFDDparticipant "Про\nПокрытие" as P1participant "Про\nМодели" as P2end box

box "Основная часть" #BBFFBBparticipant "Про\nPlantUML" as P3participant "Про\nUI покрытие" as P4participant "Про\nАрхитектуру" as P5end box

U -> P1activate P1P1 --> UP1 -> P2activate P2P2 --> UP2 -> P3activate P3P3 --> UP3 -> P4activate P4P4 --> UP4 -> P5activate P5P5 --> Udestroy P1destroy P2destroy P3destroy P4destroy P5@enduml* Спасибо интернету за картинки, а особенно сайту openclipart.org

Все права принадлежат авторам изображений

http://openclipart.org/

Про покрытие

ISTQB: http://stqbexamcertification.com/what-is-test-coverage-in-software-testing-its-advantages-and-disadvantages/

Тестовое покрытие — мера тестирования, присущая определенному тестовому набору.

http://istqbexamcertification.com/what-is-test-coverage-in-software-testing-its-advantages-and-disadvantages/


Coverage = Number of exercised items

Total number of itemsx 100 %

ISTQB





Coverage = Number of exercised items

Total number of itemsx 100 %

ISTQB



При подсчете покрытия недостаточно довольствоваться одним аспектом. Надо смотреть на тестируемый объект в

разных измерениях (dimensions).


Зачем покрытиеПоказывает места где нет тестирования


Даёт идеи для новых тестовых сценариев / тестовых данных



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

Спор

Send

У вас 200 тестов, а у нас 2,000Ха! У вас 2,000 кейсов, у нас 4,000

Ха-ха! У вас 4,000 проверок, а унас 20,000. Съел?

Ха-ха-ха! У вас 4,000 уникальныхпроверок и у нас 4,000 уникальных.У нас 100% эффективность!

Зато у вас 20 человек их писало,а у нас 5.

EditYet Another QA Lead

Спор

Send

У вас 200 тестов, а у нас 2,000Ха! У вас 2,000 кейсов, у нас 4,000

Ха-ха! У вас 4,000 проверок, а унас 20,000. Съел?

Ха-ха-ха! У вас 4,000 уникальныхпроверок и у нас 4,000 уникальных.У нас 100% эффективность!

Зато у вас 20 человек их писало,а у нас 5.

Ладно, ты победил — ты на 200 грамм тяжелее

EditYet Another QA Lead




Оценивает качество самих автотестов и меру их надёжности




Оценивает качество самих автотестов и меру их надёжности

Отражает скорость написания тестов и помогает в планировании работ

@story-1Scenario: As a user I want ..Given I am ...When I do …Then I see ...


Про наше покрытие

User Story 1AC#1...AC#N

...


@story-1 @story-126Scenario: As a user I want ..Given I am ...When I do …Then I see ...

Про модели

Модель - это система, исследование которой служит средством для получения информации о другой системе, являясь её

упрощённым представлением

Про модели

Модель - это система, исследование которой служит средством для получения информации о другой системе, являясь её

упрощённым представлением

Про проблемы моделейПодвержены частым изменениям


Быстро и заметно стареют


Сложны для восприятия или внесения изменений




Сложны для восприятия или внесения изменений

С «другой планеты» - делаются в сторонних дорогих инструментах

Чтобы модели работалиНадо постоянно проверять их валидность

Чтобы модели работалиНадо постоянно проверять их валидность(постоянно == автоматически)

Т. е. они должны быть легки для понимания машинами



Они должны быть легки для понимания людьми




Они должны быть легки для быстрого внесения изменений




Они должны быть легки для быстрого внесения изменений

DSLDSLEngineEngine

VisualizationVisualization

Про PlantUML

PlantUML решает!

PlantUMLdiagramming

language

PlantUML Graphviz

SVG, PNG, EPSdiagram file

EngineEngineDSLDSL VisualizationVisualization

http://plantuml.sourceforge.net/index.html

http://plantuml.sourceforge.net/index.html

Про PlantUML

EngineEngineDSLDSL VisualizationVisualizationПростой язык создания диаграмм Легко читать, писать и генерировать в автоматическом режиме

Отслеживание изменений Например в системе контроля версий или IDE

Поддержка языков разметки HTML, wiki-like

Стили элементов и связей skinparam — что-то на подобии лёгкого CSS — цвета и классы

С-lang style preprocessing !include(file.puml), !define(set_of_objects), !ifdef(something)

Поддержка встроенных изображений <img filename.jpg>, спрайты и openiconic

Про PlantUML

Main Admin

Use the application

User

Start

Some note

This note is connectedto several objects.

@startumlscale 1.2

:Main Admin: as Admin(Use the application) as (Use)

User -> (Start)User --> (Use)

Admin ---> (Use)

note right of (Use) : Some notenote "This note is connected\nto several objects." as N2

(Start) .. N2N2 .. (Use)@enduml


VSDX file format / OMG!

Взято тут

http://blogs.office.com/2012/09/10/vsdx-the-new-visio-file-format/

Про PlantUML

EngineEngineDSLDSL VisualizationVisualizationИнтеграция с IDE NetBeans, Eclipse, IntelliJ Idea etc

Интеграция с Wiki движками MediaWiki, Confluence, DokuWiki, Redmine, Trac etc

Online diagramming plantuml.com, Google Docs etc

Запуск из командной строки или как GUI-приложение java -jar plantuml.jar -help ИЛИ java -jar plantuml.jar -gui

Интеграция с языками программирования и инструментами python, JS, ant, gradle etc

Работа в разных редакторах vim, emacs, word, ОО etc

http://www.plantuml.com/plantuml

Про JetBrains Plugin

Link: https://github.com/esteinberg/plantuml4idea


https://github.com/esteinberg/plantuml4idea

Про PlantUML

VisualizationVisualizationDSLDSL EngineEngine7 основных UML диаграмм State, Activity, UseCase, Class, Object, Component, Sequence

Различные форматы картинок Растровый(PNG), векторный(SVG), PS, LaTeX

Обычные диаграммы и графики Используется библиотека jcckit.sourceforge.net

Встраивание в сгенерённую документацию JavaDoc, Sphinx, Doxygen etc

Необычные не-диаграммы ASCII диаграммы, GUI-прототипирование, XEarth

Модель в XMI-формате для обмена с другими UML тулами Печально, но XMI у всех свой, уж поверьте

http://jcckit.sourceforge.net/

PlantUML мало?

Кросс-платформенный Работает там, где работает Java и Graphviz

С открытым исходным кодом http://sourceforge.net/projects/plantuml/

Бесплатный по лицензии GPL Не нравится GPL? Есть LGPL, Apache, Eclipse и даже MIT версии

Активно развивается Не менее 1-го релиза в месяц

Маленький На данный момент plantuml.jar занимает 2.5Mb

Умеет генерить судоку Killer feature!

VisualizationVisualizationDSLDSL EngineEngine

http://sourceforge.net/projects/plantuml/



Про наше покрытие


...


@story-1 @story-126Scenario: As a user I want ..Given I am ...When I do …Then I see ...

Про UI покрытие

Нам нужна модель!

Код диаграммы@startumlskinparam state { BackgroundColor<<Uncovered>> #DDDDDD BackgroundColor<<System>> lightblue FontSize 24 ArrowFontSize 18}

[*] --> HomePage : start

HomePage --> LoginPage : loginHomePage --> SettingsPage : settingsHomePage --> MyProfilePage : profileHomePage --> SearchPage<<Uncovered>> : search

LoginPage --> MyProfilePage : loginLoginPage --> LoginPage : login_invalid

SettingsPage --> HomePage : confirm_and_saveSettingsPage --> SystemSettingsPage<<System>> : change_system_settings

MyProfilePage -> HomePage : confirm_and_save@enduml

Про UI покрытие

HomePage

LoginPage SettingsPage

MyProfilePage

SearchPage

SystemSettingsPage

start

login settings confirm_and_save cancel

profile

confirm_and_save

searchlogin

login_invalid

change_system_settings

Screens/Pages

HomePage


MyProfilePage

SearchPage

SystemSettingsPage

start


profile

confirm_and_save

searchlogin

login_invalid

change_system_settings

Screens/Pages

HomePage


MyProfilePage

SearchPage

RestorePasswordPage SystemSettingsPage

start


profile

confirm_and_save

searchlogin

login_invalid

restore_password change_system_settings

Код диаграммы покрытия@startumlskinparam state { FontSize 24 ArrowFontSize 18 BackgroundColor<<Uncovered>> #EEEEEE FontColor<<Uncovered>> #888888 BorderColor<<Uncovered>> #888888 BackgroundColor<<Covered>> LightGreen BorderColor<<Covered>> Green BackgroundColor<<Missed>> Orange BorderColor<<Missed>> Orange}

[*] --> HomePage<<Covered>> : start

HomePage --> LoginPage<<Covered>> : loginHomePage --> SettingsPage<<Covered>> : settingsHomePage --> MyProfilePage<<Covered>> : profileHomePage --> SearchPage<<Uncovered>> : search

LoginPage --> RestorePasswordPage<<Missed>> : restore_password

*код диаграммы генерируется во время тестов автоматически!

Transitions

HomePage


MyProfilePage

SearchPage


start


profile

confirm_and_save

searchlogin

login_invalid

restore_password change_system_settingsreset_password

Код диаграммы покрытия@startuml...[*] --> HomePage<<Covered>> : start

HomePage -[#green]-> LoginPage<<Covered>> : loginHomePage -[#green]-> SettingsPage<<Covered>> : settingsHomePage -[#green]-> MyProfilePage<<Covered>> : profileHomePage -[#grey]-> SearchPage<<Uncovered>> : search

LoginPage -[#green]-> MyProfilePage : loginLoginPage -[#grey]-> LoginPage : login_invalidLoginPage -[#grey]-> RestorePasswordPage<<Missed>> : restore_password

SettingsPage -[#orange]-> RestorePasswordPage<<Missed>> : reset_password

...*код диаграммы генерируется во время тестов автоматически!

Actions

HomePage

LoginPageinput usernameinput passwordsign up

SettingsPagechange option 1change option 2

MyProfilePageupload photochange bio

SearchPage


start


profile

confirm_and_save

searchlogin

login_invalid

restore_password change_system_settingsreset_password

Код диаграммы покрытия...LoginPage -[#green]-> MyProfilePage : loginLoginPage -[#grey]-> LoginPage : login_invalidLoginPage -[#grey]-> RestorePasswordPage<<Missed>> : restore_passwordLoginPage : input usernameLoginPage : input passwordLoginPage : sign up

SettingsPage -[#green]-> HomePage : confirm_and_saveSettingsPage -[#grey]-> HomePage : cancelSettingsPage -[#green]-> SystemSettingsPage<<Covered>> : change_system_settingsSettingsPage -[#orange]-> RestorePasswordPage<<Missed>> : reset_passwordSettingsPage : change option 1SettingsPage : change option 2…

MyProfilePage : upload photoMyProfilePage : change bio


Привязка к тестам

HomePage

LoginPageinput username {1, 1}input password {1, 1}sign up

SettingsPagechange option 1 {1, 1}change option 2 {1, 1}

MyProfilePageupload photochange bio

SearchPage


start

login {1, 1} settings {3, 2} confirm_and_save {2, 1} cancel

profile {1, 1}

confirm_and_save

searchlogin {1, 1}

login_invalid {0, 0}

restore_password change_system_settings {1, 1}reset_password {1, 1}

Код диаграммы покрытия…HomePage -[#green]-> SettingsPage<<Covered>> : settings {3, 2}LoginPage -[#green]-> MyProfilePage : login {1, 1}LoginPage -[#grey]-> LoginPage : login_invalid {0, 0}LoginPage : input username {1, 1}LoginPage : input password {1, 1}LoginPage : sign up…


[Transitions]Transition: HomePage, SettingsPage, settingsTest: features/SettingsTests/test1.feature:8Test: features/SettingsTests/test1.feature:19Transition: LoginPage, MyProfilePage, loginTest: features/LoginTests/test1.feature:8Transition: LoginPage, LoginPage, login_invalid

[Actions]Action: LoginPage, input usernameTest: features/LoginTests/test1.feature:8Action: LoginPage, input passwordTest: features/LoginTests/test1.feature:8

Про АрхитектуруЕдиное место переключения текущего экрана/страницы PageManager.setCurrentPage(pageId)

Объектная модель страниц aka PageObject

Деление на действия и переходы action(:input_password) transition(:login, :MyProfilePage)

1 действие == 1 метод в коде тестов aka DRY — Don't Repeat Yourself

Возможность понять какое действие было сделано callback или ActionManager на крайний случай подойдет и логгирование

Заключение

Всё гениальное — просто!Всё гениальное — просто!

QA

Input author here

Thank you

Education

Визуализация покрытия автоматизированными UI тестами