1.
Scalable eCommerce Platform Solutions
Визуализация покрытия
автоматизированными UI тестами
Лянгузов Алексей

2.
План
@startuml
skinparam sequence{
ArrowColor #528526
LifeLineBorderColor #528526
ActorBorderColor #528526
ActorBackgroundColor #AAFFAA
ParticipantBorderColor #528526
ParticipantBackgroundColor white
ParticipantFontSize 18
ParticipantFontName Serif
BoxBorderColor #528526
BoxFontSize 18
}
actor " " as U
box "Введение" #DDFFDD
participant "ПроnПокрытие" as P1
participant "ПроnМодели" as P2
end box
box "Основная часть" #BBFFBB
participant "ПроnPlantUML" as P3
participant "ПроnUI покрытие" as P4
participant "ПроnАрхитектуру" as P5
end box
U -> P1
activate P1
P1 --> U
P1 -> P2
activate P2
P2 --> U
P2 -> P3
activate P3
P3 --> U
P3 -> P4
activate P4
P4 --> U
P4 -> P5
activate P5
P5 --> U
destroy P1
destroy P2
destroy P3
destroy P4
destroy P5
@enduml
* Спасибо интернету за картинки, а особенно сайту openclipart.org
Все права принадлежат авторам изображений

3.
Про покрытие
ISTQB: http://stqbexamcertification.com/what-is-test-coverage-in-software-testing-its-advantages-and-disadvantages/
Тестовое покрытие — мера тестирования, присущая
определенному тестовому набору.

4.
Про покрытие
Coverage =
Number of exercised items
Total number of items
x 100 %
ISTQ
B
ISTQB: http://stqbexamcertification.com/what-is-test-coverage-in-software-testing-its-advantages-and-disadvantages/
Тестовое покрытие — мера тестирования, присущая
определенному тестовому набору.

5.
Про покрытие
Coverage =
Number of exercised items
Total number of items
x 100 %
ISTQ
B
ISTQB: http://stqbexamcertification.com/what-is-test-coverage-in-software-testing-its-advantages-and-disadvantages/
Тестовое покрытие — мера тестирования, присущая
определенному тестовому набору.
При подсчете покрытия недостаточно довольствоваться
одним аспектом. Надо смотреть на тестируемый объект в
разных измерениях (dimensions).

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

7.
Зачем покрытие
Показывает места где нет
тестирования
Даёт идеи для новых тестовых
сценариев / тестовых данных

8.
Зачем покрытие
Показывает места где нет
тестирования
Даёт идеи для новых тестовых
сценариев / тестовых данных
Помогает сбалансировать тесты и
тестовые наборы

9.
Спор
Send
У вас 200 тестов, а у нас 2,000
Ха! У вас 2,000 кейсов, у нас 4,000
Ха-ха! У вас 4,000 проверок, а у
нас 20,000. Съел?
Ха-ха-ха! У вас 4,000 уникальных
проверок и у нас 4,000 уникальных.
У нас 100% эффективность!
Зато у вас 20 человек их писало,
а у нас 5.
EditYet Another QA Lead

10.
Спор
Send
У вас 200 тестов, а у нас 2,000
Ха! У вас 2,000 кейсов, у нас 4,000
Ха-ха! У вас 4,000 проверок, а у
нас 20,000. Съел?
Ха-ха-ха! У вас 4,000 уникальных
проверок и у нас 4,000 уникальных.
У нас 100% эффективность!
Зато у вас 20 человек их писало,
а у нас 5.
Ладно, ты победил —
ты на 200 грамм тяжелее
EditYet Another QA Lead

11.
Зачем покрытие
Показывает места где нет
тестирования
Даёт идеи для новых тестовых
сценариев / тестовых данных
Помогает сбалансировать тесты и
тестовые наборы
Оценивает качество самих автотестов
и меру их надёжности

12.
Зачем покрытие
Показывает места где нет
тестирования
Даёт идеи для новых тестовых
сценариев / тестовых данных
Помогает сбалансировать тесты и
тестовые наборы
Оценивает качество самих автотестов
и меру их надёжности
Отражает скорость написания тестов и
помогает в планировании работ

13.
@story-1
Scenario: As a user I want ..
Given I am ...
When I do …
Then I see ...
@story-126
Scenario: As a user I want ..
Given I am ...
When I do …
Then I see ...
Про наше покрытие
User Story 1
AC#1
...
AC#N
...
User Story 126
AC#1
...
AC#N
@story-1 @story-126
Scenario: As a user I want ..
Given I am ...
When I do …
Then I see ...

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

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

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

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

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

19.
Про проблемы моделей
Подвержены
частым
изменениям
Быстро и
заметно
стареют
Сложны для
восприятия или
внесения изменений
С «другой планеты» -
делаются в сторонних
дорогих инструментах

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

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

22.
Чтобы модели работали
Надо постоянно проверять
их валидность
(постоянно ==
автоматически)
Т. е. они должны быть легки
для понимания машинами
Они должны быть легки
для понимания людьми

23.
Чтобы модели работали
Надо постоянно проверять
их валидность
(постоянно ==
автоматически)
Т. е. они должны быть легки
для понимания машинами
Они должны быть легки
для понимания людьми
Они должны быть
легки для быстрого
внесения изменений

24.
Чтобы модели работали
Надо постоянно проверять
их валидность
(постоянно ==
автоматически)
Т. е. они должны быть легки
для понимания машинами
Они должны быть легки
для понимания людьми
Они должны быть
легки для быстрого
внесения изменений
DSLDSL
EngineEngine
VisualizationVisualization

25.
Про PlantUML
PlantUML решает!
PlantUML
diagramming
language
PlantUML
Graphviz
SVG, PNG, EPS
diagram file
EngineEngineDSLDSL VisualizationVisualization
http://plantuml.sourceforge.net/index.html

26.
Про 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

27.
Про PlantUML
Main Admin
Use the application
User
Start
Some note
This note is connected
to several objects.
@startuml
scale 1.2
:Main Admin: as Admin
(Use the application) as (Use)
User -> (Start)
User --> (Use)
Admin ---> (Use)
note right of (Use) : Some note
note "This note is connectednto several objects." as N2
(Start) .. N2
N2 .. (Use)
@enduml
EngineEngineDSLDSL VisualizationVisualization

28.
VSDX file format / OMG!
Взято тут

29.
Про 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

30.
Про JetBrains Plugin
Link: https://github.com/esteinberg/plantuml4idea
EngineEngineDSLDSL VisualizationVisualization

31.
Про PlantUML
VisualizationVisualizationDSLDSL EngineEngine
7 основных 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 у всех свой, уж поверьте

32.
PlantUML мало?
Кросс-платформенный
Работает там, где работает Java и Graphviz
С открытым исходным кодом
http://sourceforge.net/projects/plantuml/
Бесплатный по лицензии GPL
Не нравится GPL? Есть LGPL, Apache, Eclipse и даже MIT версии
Активно развивается
Не менее 1-го релиза в месяц
Маленький
На данный момент plantuml.jar занимает 2.5Mb
Умеет генерить судоку
Killer feature!
VisualizationVisualizationDSLDSL EngineEngine

33.
@story-1
Scenario: As a user I want ..
Given I am ...
When I do …
Then I see ...
@story-126
Scenario: As a user I want ..
Given I am ...
When I do …
Then I see ...
Про наше покрытие
User Story 1
AC#1
...
AC#N
...
User Story 126
AC#1
...
AC#N
@story-1 @story-126
Scenario: As a user I want ..
Given I am ...
When I do …
Then I see ...

34.
Про UI покрытие
Нам нужна модель!

35.
Код диаграммы
@startuml
skinparam state {
BackgroundColor<<Uncovered>> #DDDDDD
BackgroundColor<<System>> lightblue
FontSize 24
ArrowFontSize 18
}
[*] --> HomePage : start
HomePage --> LoginPage : login
HomePage --> SettingsPage : settings
HomePage --> MyProfilePage : profile
HomePage --> SearchPage<<Uncovered>> : search
LoginPage --> MyProfilePage : login
LoginPage --> LoginPage : login_invalid
SettingsPage --> HomePage : confirm_and_save
SettingsPage --> SystemSettingsPage<<System>> : change_system_settings
MyProfilePage -> HomePage : confirm_and_save
@enduml

36.
Про UI покрытие
HomePage
LoginPage SettingsPage
MyProfilePage
SearchPage
SystemSettingsPage
start
login settings confirm_and_save cancel
profile
confirm_and_save
searchlogin
login_invalid
change_system_settings

37.
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

38.
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

39.
Код диаграммы покрытия
@startuml
skinparam 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>> : login
HomePage --> SettingsPage<<Covered>> : settings
HomePage --> MyProfilePage<<Covered>> : profile
HomePage --> SearchPage<<Uncovered>> : search
LoginPage --> RestorePasswordPage<<Missed>> : restore_password
*код диаграммы генерируется во время тестов автоматически!

40.
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

41.
Код диаграммы покрытия
@startuml
...
[*] --> HomePage<<Covered>> : start
HomePage -[#green]-> LoginPage<<Covered>> : <font
color=green>login</font>
HomePage -[#green]-> SettingsPage<<Covered>> : <font
color=green>settings
HomePage -[#green]-> MyProfilePage<<Covered>> : <font
color=green>profile
HomePage -[#grey]-> SearchPage<<Uncovered>> : <font
color=grey>search
LoginPage -[#green]-> MyProfilePage : <font color=green>login
LoginPage -[#grey]-> LoginPage : <font color=grey>login_invalid
LoginPage -[#grey]-> RestorePasswordPage<<Missed>> : <font
color=grey>restore_password
SettingsPage -[#orange]-> RestorePasswordPage<<Missed>> : <font
color=orange>reset_password
...
*код диаграммы генерируется во время тестов автоматически!

42.
Actions
HomePage
LoginPage
input username
input password
sign up
SettingsPage
change option 1
change option 2
MyProfilePage
upload photo
change bio
SearchPage
RestorePasswordPage SystemSettingsPage
start
login settings confirm_and_save cancel
profile
confirm_and_save
searchlogin
login_invalid
restore_password change_system_settingsreset_password

43.
Код диаграммы покрытия
...
LoginPage -[#green]-> MyProfilePage : <font color=green>login
LoginPage -[#grey]-> LoginPage : <font color=grey>login_invalid
LoginPage -[#grey]-> RestorePasswordPage<<Missed>> : <font
color=grey>restore_password
LoginPage : <b>input username</b>
LoginPage : <b>input password</b>
LoginPage : <i>sign up</i>
SettingsPage -[#green]-> HomePage : <font color=green>confirm_and_save
SettingsPage -[#grey]-> HomePage : <font color=grey>cancel
SettingsPage -[#green]-> SystemSettingsPage<<Covered>> : <font
color=green>change_system_settings
SettingsPage -[#orange]-> RestorePasswordPage<<Missed>> : <font
color=orange>reset_password
SettingsPage : <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>
*код диаграммы генерируется во время тестов автоматически!

44.
Привязка к тестам
HomePage
LoginPage
input username {1, 1}
input password {1, 1}
sign up
SettingsPage
change option 1 {1, 1}
change option 2 {1, 1}
MyProfilePage
upload photo
change 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}

45.
Код диаграммы покрытия
…
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, settings
Test: features/SettingsTests/test1.feature:8
Test: features/SettingsTests/test1.feature:19
Transition: LoginPage, MyProfilePage, login
Test: features/LoginTests/test1.feature:8
Transition: LoginPage, LoginPage, login_invalid
[Actions]
Action: LoginPage, input username
Test: features/LoginTests/test1.feature:8
Action: LoginPage, input password
Test: features/LoginTests/test1.feature:8

46.
Про Архитектуру
Единое место переключения текущего экрана/страницы
PageManager.setCurrentPage(pageId)
Объектная модель страниц
aka PageObject
Деление на действия и переходы
action(:input_password)
transition(:login, :MyProfilePage)
1 действие == 1 метод в коде тестов
aka DRY — Don't Repeat Yourself
Возможность понять какое действие было сделано
callback или ActionManager
на крайний случай подойдет и логгирование

47.
Заключение
Всё гениальное — просто!Всё гениальное — просто!

48.
QA
Input author here
Thank you