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
Все права принадлежат авторам изображений
Про покрытие
ISTQB: http://stqbexamcertification.com/what-is-test-coverage-in-software-testing-its-advantages-and-disadvantages/
Тестовое покрытие — мера тестирования, присущая определенному тестовому набору.
Про покрытие
Coverage = Number of exercised items
Total number of itemsx 100 %
ISTQB
ISTQB: http://stqbexamcertification.com/what-is-test-coverage-in-software-testing-its-advantages-and-disadvantages/
Тестовое покрытие — мера тестирования, присущая определенному тестовому набору.
Про покрытие
Coverage = Number of exercised items
Total number of itemsx 100 %
ISTQB
ISTQB: http://stqbexamcertification.com/what-is-test-coverage-in-software-testing-its-advantages-and-disadvantages/
Тестовое покрытие — мера тестирования, присущая определенному тестовому набору.
При подсчете покрытия недостаточно довольствоваться одним аспектом. Надо смотреть на тестируемый объект в
разных измерениях (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 ...
@story-126Scenario: As a user I want ..Given I am ...When I do …Then I see ...
Про наше покрытие
User Story 1AC#1...AC#N
...
User Story 126AC#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
Про 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
EngineEngineDSLDSL VisualizationVisualization
VSDX file format / OMG!
Взято тут
Про 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
Про JetBrains Plugin
Link: https://github.com/esteinberg/plantuml4idea
EngineEngineDSLDSL VisualizationVisualization
Про 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 у всех свой, уж поверьте
PlantUML мало?
Кросс-платформенный Работает там, где работает Java и Graphviz
С открытым исходным кодом http://sourceforge.net/projects/plantuml/
Бесплатный по лицензии GPL Не нравится GPL? Есть LGPL, Apache, Eclipse и даже MIT версии
Активно развивается Не менее 1-го релиза в месяц
Маленький На данный момент plantuml.jar занимает 2.5Mb
Умеет генерить судоку Killer feature!
VisualizationVisualizationDSLDSL EngineEngine
@story-1Scenario: As a user I want ..Given I am ...When I do …Then I see ...
@story-126Scenario: As a user I want ..Given I am ...When I do …Then I see ...
Про наше покрытие
User Story 1AC#1...AC#N
...
User Story 126AC#1...AC#N
@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
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
LoginPage SettingsPage
MyProfilePage
SearchPage
RestorePasswordPage SystemSettingsPage
start
login settings confirm_and_save cancel
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
LoginPage SettingsPage
MyProfilePage
SearchPage
RestorePasswordPage SystemSettingsPage
start
login settings confirm_and_save cancel
profile
confirm_and_save
searchlogin
login_invalid
restore_password change_system_settingsreset_password
Код диаграммы покрытия@startuml...[*] --> HomePage<<Covered>> : start
HomePage -[#green]-> LoginPage<<Covered>> : <font color=green>login</font>HomePage -[#green]-> SettingsPage<<Covered>> : <font color=green>settingsHomePage -[#green]-> MyProfilePage<<Covered>> : <font color=green>profileHomePage -[#grey]-> SearchPage<<Uncovered>> : <font color=grey>search
LoginPage -[#green]-> MyProfilePage : <font color=green>loginLoginPage -[#grey]-> LoginPage : <font color=grey>login_invalidLoginPage -[#grey]-> RestorePasswordPage<<Missed>> : <font color=grey>restore_password
SettingsPage -[#orange]-> RestorePasswordPage<<Missed>> : <font color=orange>reset_password
...*код диаграммы генерируется во время тестов автоматически!
Actions
HomePage
LoginPageinput usernameinput passwordsign up
SettingsPagechange option 1change option 2
MyProfilePageupload photochange bio
SearchPage
RestorePasswordPage SystemSettingsPage
start
login settings confirm_and_save cancel
profile
confirm_and_save
searchlogin
login_invalid
restore_password change_system_settingsreset_password
Код диаграммы покрытия...LoginPage -[#green]-> MyProfilePage : <font color=green>loginLoginPage -[#grey]-> LoginPage : <font color=grey>login_invalidLoginPage -[#grey]-> RestorePasswordPage<<Missed>> : <font color=grey>restore_passwordLoginPage : <b>input username</b>LoginPage : <b>input password</b>LoginPage : <i>sign up</i>
SettingsPage -[#green]-> HomePage : <font color=green>confirm_and_saveSettingsPage -[#grey]-> HomePage : <font color=grey>cancelSettingsPage -[#green]-> SystemSettingsPage<<Covered>> : <font color=green>change_system_settingsSettingsPage -[#orange]-> RestorePasswordPage<<Missed>> : <font color=orange>reset_passwordSettingsPage : <b>change option 1</b>SettingsPage : <font color=orange><b>change option 2</b></font>…
MyProfilePage : <i>upload photo</i>MyProfilePage : <i>change bio</i>
*код диаграммы генерируется во время тестов автоматически!
Привязка к тестам
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
RestorePasswordPage SystemSettingsPage
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>> : <font color=green>settings {3, 2}LoginPage -[#green]-> MyProfilePage : <font color=green>login {1, 1}LoginPage -[#grey]-> LoginPage : <font color=grey>login_invalid {0, 0}LoginPage : <b>input username {1, 1}</b>LoginPage : <b>input password {1, 1}</b>LoginPage : <i>sign up</i>…
*код диаграммы генерируется во время тестов автоматически!
[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