Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
SVG Certification
SVG Certification
Loading in …3
×

Check these out next

1 of 27 Ad

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

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

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

Advertisement
Advertisement

More Related Content

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

More from QAFest (20)

Advertisement

Recently uploaded (20)

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

×