Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
KYIV 2019
Vladimir Trandafilov
GUI Automation of WEB-application with
SVG-graphics
QA CONFERENCE #1 IN UKRAINE
Тема доклада
Тема доклада
Тема доклада
WITH PASSION TO QUALITY
Few words about presenter
QA CONFERENCE #1 IN UKRAINE KYIV ...
WITH PASSION TO QUALITY
Outline
QA CONFERENCE #1 IN UKRAINE KYIV 2019
 Short overview of our app
 SVG
 yWorks
 Issues ...
WITH PASSION TO QUALITY
Our application: short overview
QA CONFERENCE #1 IN UKRAINE KYIV 2019
toolbar
nodes relations
WITH PASSION TO QUALITY
SVG overview
QA CONFERENCE #1 IN UKRAINE KYIV 2019
1. 2D graphics in XML
2. SVG has methods
3. Eac...
WITH PASSION TO QUALITY
SVG overview: pros & cons
QA CONFERENCE #1 IN UKRAINE KYIV 2019
pros:
1. HTML5 Standard (W3C)
2. S...
WITH PASSION TO QUALITY
SVG: basic shapes
QA CONFERENCE #1 IN UKRAINE KYIV 2019
‘circle’, ‘ellipse’, ‘line’, ‘polygon’, ‘p...
WITH PASSION TO QUALITY
SVG: <rectangle>
QA CONFERENCE #1 IN UKRAINE KYIV 2019
WITH PASSION TO QUALITY
SVG: <path>
QA CONFERENCE #1 IN UKRAINE KYIV 2019
M = moveto, L = lineto, Z = closepath,
H = horiz...
WITH PASSION TO QUALITY
SVG: transformation matrix (CTM)
QA CONFERENCE #1 IN UKRAINE KYIV 2019
xnew
ynew
=
a ∙ xold + c ∙ ...
SVG: configurations of CTM
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
𝟏 𝟎 𝟎
𝟎 𝟏 𝟎
0 0 1
𝟏 𝟎 𝐗
𝟎 𝟏 𝐘
0 0...
SVG: configurations of CTM
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
𝐜𝐨𝐬 𝛉 𝐬𝐢𝐧 𝛉 𝟎
− 𝐬𝐢𝐧 𝛉 𝐜𝐨𝐬 𝛉 𝟎
0 0...
SVG: configurations of CTM (reflection)
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
−𝟏 𝟎 𝟎
𝟎 −𝟏 𝟎
0 0 1
...
SVG: transformation order
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
SVG: transformation order
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
translate & rotate rotate & transl...
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
yWorks diagramming library
WITH PASSION TO QUALITY
Problem #1: drag'n’drop of SVG-elements
QA CONFERENCE #1 IN UKRAINE KYIV 2019
1. SVG-elements on
t...
WITH PASSION TO QUALITY
Problem # 2: zooming on elements
QA CONFERENCE #1 IN UKRAINE KYIV 2019
1. Zoom works relatively
to...
WITH PASSION TO QUALITY
Problem #3: clicking on SVG-lines
QA CONFERENCE #1 IN UKRAINE KYIV 2019
1. WebDriverException
with...
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
Our solution #1
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
Our solution #2
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
Our solution #3
a b
c
length = a+b+c
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
Our solution #3
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
Our solution #3
How we use it:
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
Our solution #3
Does it work?
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
Our solution #3
Valid solution:
WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
Discussion: Q&A
Nächste SlideShare
Wird geladen in …5
×

QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SVG-graphics

94 Aufrufe

Veröffentlicht am

Доклад посвящен автоматизации тестирования WEB-приложений с SVG-графикой. В 1-ой части доклада даны короткое описание процессов разрабатываемого приложения и обоснование необходимости применения SVG-графики. Во 2-ой части сделан короткий обзор SVG-графики, показаны основные преимущества/недостатки такого типа графики, сделан обзор основных SVG-поверхностей и рассмотрен процесс их трансформации с помощью матрицы преобразования с разбором ее основных типов. В 3-ей части обозначены основные проблемы автоматизации действий с SVG-графикой, такие как drag’n’drop графических объектов (SVG на SVG), их масштабирование при помощи колесика мышки и выделение ломаный линий. В 4-ой части показаны решения обозначенных проблем с использованием JavaScript.

Veröffentlicht in: Bildung
  • Login to see the comments

QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SVG-graphics

  1. 1. KYIV 2019 Vladimir Trandafilov GUI Automation of WEB-application with SVG-graphics QA CONFERENCE #1 IN UKRAINE
  2. 2. Тема доклада Тема доклада Тема доклада WITH PASSION TO QUALITY Few words about presenter QA CONFERENCE #1 IN UKRAINE KYIV 2019 Vladimir Trandafilov (Ph.D.), Infopulse, Ukraine • Senior Quality Control Engineer (Test Automation) • >4 years in automation • lecturer, trainer, mentor
  3. 3. WITH PASSION TO QUALITY Outline QA CONFERENCE #1 IN UKRAINE KYIV 2019  Short overview of our app  SVG  yWorks  Issues we were solving  Our solutions  Discussion: Q&A
  4. 4. WITH PASSION TO QUALITY Our application: short overview QA CONFERENCE #1 IN UKRAINE KYIV 2019 toolbar nodes relations
  5. 5. WITH PASSION TO QUALITY SVG overview QA CONFERENCE #1 IN UKRAINE KYIV 2019 1. 2D graphics in XML 2. SVG has methods 3. Each SVG shape is object and available within DOM 4. Browser automatically re-renders SVG-shapes
  6. 6. WITH PASSION TO QUALITY SVG overview: pros & cons QA CONFERENCE #1 IN UKRAINE KYIV 2019 pros: 1. HTML5 Standard (W3C) 2. Small size 3. Vector editing 4. High quality & ∞ resizable 5. Supports JS event handlers cons: 1. Slow rendering if complex (deep DOM usage) 2. Not suited for game applications
  7. 7. WITH PASSION TO QUALITY SVG: basic shapes QA CONFERENCE #1 IN UKRAINE KYIV 2019 ‘circle’, ‘ellipse’, ‘line’, ‘polygon’, ‘polyline’, ‘rect’ and ‘path’
  8. 8. WITH PASSION TO QUALITY SVG: <rectangle> QA CONFERENCE #1 IN UKRAINE KYIV 2019
  9. 9. WITH PASSION TO QUALITY SVG: <path> QA CONFERENCE #1 IN UKRAINE KYIV 2019 M = moveto, L = lineto, Z = closepath, H = horizontal lineto, V = vertical lineto
  10. 10. WITH PASSION TO QUALITY SVG: transformation matrix (CTM) QA CONFERENCE #1 IN UKRAINE KYIV 2019 xnew ynew = a ∙ xold + c ∙ yold + e b ∙ xold + d ∙ yold + f xnew ynew 1 = a c e b d f 0 0 1 CTM ∙ xold yold 1 new old old
  11. 11. SVG: configurations of CTM WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 𝟏 𝟎 𝟎 𝟎 𝟏 𝟎 0 0 1 𝟏 𝟎 𝐗 𝟎 𝟏 𝐘 0 0 1 𝐖 𝟎 𝟎 𝟎 𝐇 𝟎 0 0 1 no changes translate(X, Y) scale(W, H)
  12. 12. SVG: configurations of CTM WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 𝐜𝐨𝐬 𝛉 𝐬𝐢𝐧 𝛉 𝟎 − 𝐬𝐢𝐧 𝛉 𝐜𝐨𝐬 𝛉 𝟎 0 0 1 𝟏 𝐭𝐚𝐧 𝛟 𝟎 𝟎 𝟏 𝟎 0 0 1 rotate(θ) skewX(θ) skewY(ψ) 𝟏 𝟎 𝟎 𝐭𝐚𝐧 𝛙 𝟏 𝟎 0 0 1
  13. 13. SVG: configurations of CTM (reflection) WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 −𝟏 𝟎 𝟎 𝟎 −𝟏 𝟎 0 0 1 𝟏 𝟎 𝟎 𝟎 −𝟏 𝟎 0 0 1 scale(-1, -1) scale(1, -1) scale(-1, 1) −𝟏 𝟎 𝟎 𝟎 𝟏 𝟎 0 0 1
  14. 14. SVG: transformation order WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019
  15. 15. SVG: transformation order WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 translate & rotate rotate & translate
  16. 16. WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 yWorks diagramming library
  17. 17. WITH PASSION TO QUALITY Problem #1: drag'n’drop of SVG-elements QA CONFERENCE #1 IN UKRAINE KYIV 2019 1. SVG-elements on toolbar and preview elements are different 2. Actions class can’t handle it 3. eventListeners works with events “dragstart” and “mouseup”
  18. 18. WITH PASSION TO QUALITY Problem # 2: zooming on elements QA CONFERENCE #1 IN UKRAINE KYIV 2019 1. Zoom works relatively to mouse cursor 2. WebDriver can’t simulate mouse wheel
  19. 19. WITH PASSION TO QUALITY Problem #3: clicking on SVG-lines QA CONFERENCE #1 IN UKRAINE KYIV 2019 1. WebDriverException with msg: “unknown error: Element <path …></path> is not clickable at point (921, 571)…” 2. WebDriver need to know where to click
  20. 20. WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 Our solution #1
  21. 21. WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 Our solution #2
  22. 22. WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 Our solution #3 a b c length = a+b+c
  23. 23. WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 Our solution #3
  24. 24. WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 Our solution #3 How we use it:
  25. 25. WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 Our solution #3 Does it work?
  26. 26. WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 Our solution #3 Valid solution:
  27. 27. WITH PASSION TO QUALITY QA CONFERENCE #1 IN UKRAINE KYIV 2019 Discussion: Q&A

×