In automatic tests, it is often difficult to work with pages that differ depending on the screen size, type of user, localization, or other conditions. And when you work with such pages - a strong desire arises - “the page is almost the same, i just need one additional click for mobile version ...”, and often “if / else” becomes the solution. In this talk, I want to show the approach that I use in the current project, which allows me to support and develop tests for 12 versions of the same web application. I called this Versioned Page Objects. It allows to reuse common logic between different versions of page through inheritance, and also override or remove some logic where necessary, without any if / else blocks across the code. TypeScript code examples

1. Versioned Page Objects:
How to handle 12 versions of
web application
Oleksandr Khotemskyi, 2020
xotabu4.github.io

2. Oleksandr Khotemskyi
• Software Development Engineer in Test
• Independent Contractor
• 8+ years of experience in test automation and QA
• Primary stack - JavaScript/TypeScript (NodeJS)
xotabu4.github.io

3. Versions?

4. Business versions
• Different variants of same application
• Not a separate apps - lot of logic is reused
• It is needed for better targeting to specific clients/markets
• Can be temporary - special Christmas versions, some
cooperation with other brands…

7. 230 000$

9. Device/screen type
• Mostly known type of versions
• Mobile, Desktop, Tablet versions of same app
• Also sometimes special versions for TV and consoles
should be included

16. Localization
• Special version for country/language
• Usually needed to better adapt to some local markets
• Similar with business versions, but mostly related to some
country specific things
• Hardest parts here: translations and legal requirements

19. A/B tests
• Special experiments to prove/disprove some hypothesis
about user behaviors in application
• It is done by splitting traffic to 2 or more variants (versions),
and tracking metrics that should be affected
• Used to optimize user experience, increase important
metrics (time spend on website, conversion rate, etc…)
• For test automation this means our UI/logic will be changed
even more often

22. https://www.youtube.com/watch?v=sxBE3XMsQCw

23. How to automate?

26. if/else

27. Appium annotations

28. CSS selector: comma
span#mobile .blue,div#desktop .red
OR

30. Lets invent some
bicycles

31. Wanted
• Easier to support new possible versions
• Avoid using if/else everywhere in code
• Same tests for all versions
• Code reuse

32. Configuration

33. package.json

34. Jenkins matrix builds

35. Jenkins matrix builds

36. Abstract Home
Page
Mobile Home Page Desktop Home Page
Shared logic here
Shared locators here
Desktop specific logic here
Desktop locators here
Can override base methods/properties

38. Real versions

42. Same test for all versions

43. Filtering tests

44. +
•No if/else hell in project
•One version - one object
•Also applicable for Components (Fragments, Elements, …)

45. https://www.npmjs.com/package/madge
Circular dependencies

46. WIP

47. WIP

48. •Seems like inheritance works badly for
more complex versions trees
•Probably need to try mixins here
WIP

49. Dependency Injection? 🤔

50. Versioned cucumber steps? 🤔 🤔

51. xotabu4.github.io

52. Materials
• https://github.com/Xotabu4/versioned-pageobjects
• https://downloads.ctfassets.net/ut4a3ciohj8i/22TdlDVRckMEk0MYKku
ooe/e90e4ece99b0c8409743c5ebff2e9152/Igor_Balagurov__Don___t_re
peat_yourself_-
_UI_tests_for_web__iOS_and_Android_simultaneously.pdf
• https://github.com/inversify/InversifyJS
• https://github.com/microsoft/tsyringe
• https://www.npmjs.com/package/madge