Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

24 views

Published on

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

Published in: Education
  • Be the first to comment

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

×