Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

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

93 vues

Publié le

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

Publié dans : Formation
  • 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

×