The document discusses modern approaches to web testing that go beyond just Selenium. It recommends establishing a testing pyramid with unit tests at the bottom and end-to-end tests at the top. Frameworks like Protractor and Cypress are presented as alternatives to Selenium that are better suited for different applications like Angular and React. The document emphasizes choosing the right tools based on flexibility, use cases, and team expertise rather than just popularity.

1. Modern Web Testing:
Going Beyond Selenium
Dmitry Vinnik
@DmitryVinnik dvinnik.com1

2. What are our goals?
@DmitryVinnik dvinnik.com2

3. Goals
Choosing Right Test Context
Choosing Right Level of Testing
Choosing Right E2E Test Approach
@DmitryVinnik dvinnik.com3

4. Let’s go in more details
@DmitryVinnik dvinnik.com4

5. How do we usually test?
@DmitryVinnik dvinnik.com5

6. Test Pyramid
↑ Fidelity
↓ Speed
↑ Cost
↓ Fidelity
↑ Speed
↓ Cost
@DmitryVinnik dvinnik.com6

7. How do we usually test
Web?
@DmitryVinnik dvinnik.com7

8. How do we usually test
Web?
@DmitryVinnik dvinnik.com8

9. By Tim Cochran@DmitryVinnik dvinnik.com9

10. We need to change that!
@DmitryVinnik dvinnik.com10

11. Let’s test something!
@DmitryVinnik dvinnik.com11

12. What is this “something”?
@DmitryVinnik dvinnik.com12

13. Example App
@DmitryVinnik dvinnik.com13

14. Back to testing!
@DmitryVinnik dvinnik.com14

15. Special Case #1
15
@DmitryVinnik dvinnik.com

16. Backend:
Java
Testing:
Java
16
@DmitryVinnik dvinnik.com

17. Is there a problem?
@DmitryVinnik dvinnik.com17

18. Yes, there is
@DmitryVinnik dvinnik.com18

19. Moving away from
Backend Testing
@DmitryVinnik dvinnik.com19

20. Why not Backend Tests?
Hybrid
Model
DDD
User
Centric
DDD
User
Centric
@DmitryVinnik dvinnik.com20

21. Hybrid Model
Software
Engineers
Software
Principles
Testing
Expertise
@DmitryVinnik dvinnik.com21

22. Why not Backend Tests?
Hybrid
Model
DDD
User
Centric
DDD
User
Centric
@DmitryVinnik dvinnik.com
Hybrid
Model
DDD
22

23. Domain Driven Design
Context Matters
Ubiquitous
Language
@DmitryVinnik dvinnik.com23

24. Why not Backend Tests?
Hybrid
Model
DDD
User
Centric
DDD
User
Centric
@DmitryVinnik dvinnik.com
Hybrid
Model
DDDDDD
User
Centric
24

25. Still not convinced?
@DmitryVinnik dvinnik.com25

26. Modern Web Testing
@DmitryVinnik dvinnik.com26

27. Power of JavaScript
Assertion
Libraries
Process
Libraries
Enterprise
Libraries
Process
Libraries
Enterprise
Libraries
ChaiJasmine
Process
Libraries
BDD
Libraries
Cucumber
Enterprise
Libraries
Applitools
@DmitryVinnik dvinnik.com27

28. Speaking Language
of the Web
@DmitryVinnik dvinnik.com28

29. JavaScript
Node.js
@DmitryVinnik dvinnik.com29

30. Node.js
NPM
Manager
Flexible
Customizable
Isomorphic
@DmitryVinnik dvinnik.com30

31. Going back to the Pyramid
@DmitryVinnik dvinnik.com31

32. Web Test Pyramid
@DmitryVinnik dvinnik.com32

33. Web Test Pyramid
↓ Fidelity
↑ Speed
↓ Cost
@DmitryVinnik dvinnik.com33

34. Unit Testing
In Web Context
@DmitryVinnik dvinnik.com34

35. Example: Jasmine
@DmitryVinnik dvinnik.com35

36. Web Test Pyramid
↓ Fidelity
↑ Speed
↓ Cost
@DmitryVinnik dvinnik.com36

37. Integration Testing
In Web Context
@DmitryVinnik dvinnik.com37

38. Example: Jest
@DmitryVinnik dvinnik.com38

39. Example: Jest
@DmitryVinnik dvinnik.com39

40. Example: Jest
@DmitryVinnik dvinnik.com40

41. Example: Jest
@DmitryVinnik dvinnik.com41

42. Example: Jest
@DmitryVinnik dvinnik.com42

43. Example: Jest
@DmitryVinnik dvinnik.com43

44. Example: Jest
@DmitryVinnik dvinnik.com44

45. Let’s reflect on it
@DmitryVinnik dvinnik.com45

46. Web Test Pyramid
↓ Fidelity
↑ Speed
↓ Cost
@DmitryVinnik dvinnik.com46

47. Every step has
only 1 focus
@DmitryVinnik dvinnik.com47

48. Developers
@DmitryVinnik dvinnik.com48

49. Good for some tests
@DmitryVinnik dvinnik.com49

50. But not for E2E tests
@DmitryVinnik dvinnik.com50

51. Web Test Pyramid
↑ Fidelity
↓ Speed
↑ Cost
↓ Fidelity
↑ Speed
↓ Cost
@DmitryVinnik dvinnik.com51

52. Shifting focus
@DmitryVinnik dvinnik.com52

53. Developers Customers
@DmitryVinnik dvinnik.com53

54. Sounds great!
@DmitryVinnik dvinnik.com54

55. But how do we do it?
@DmitryVinnik dvinnik.com55

56. End-to-End Task Testing
@DmitryVinnik dvinnik.com56

57. User Centric Testing
Interactions Tasks
Page Object
Model
Screenplay
Pattern
@DmitryVinnik dvinnik.com57

58. Back to our app
@DmitryVinnik dvinnik.com58

59. End-to-End Testing
@DmitryVinnik dvinnik.com59

60. Common way to do E2E?
@DmitryVinnik dvinnik.com60

61. Selenium WebDriver
Defacto
E2E Tool
Testing
Standard
Generic ↑ Integrations
@DmitryVinnik dvinnik.com61

62. Selenium WebDriver
@DmitryVinnik dvinnik.com62

63. Selenium WebDriver
From “SeleniumHQ, Selenium RC”
@DmitryVinnik dvinnik.com63

64. WebdriverJs
@DmitryVinnik dvinnik.com64

65. Selenium WebdriverJs
Defacto
E2E Tool
Testing
Standard
Generic ↑ Integrations
@DmitryVinnik dvinnik.com65

66. Selenium WebdriverJs
From “SeleniumHQ, Selenium RC”
@DmitryVinnik dvinnik.com66

67. Example: WebdriverJs
@DmitryVinnik dvinnik.com67

68. Only good parts, right?
@DmitryVinnik dvinnik.com68

69. Not Really...
@DmitryVinnik dvinnik.com69

70. E2E Tests’ Complexity
Selectors
Locator
Strategy
Test Flows SPA Types
@DmitryVinnik dvinnik.com70

71. What about WebdriverJs?
@DmitryVinnik dvinnik.com71

72. Selectors
Locator
Strategy
Test Flows SPA Types
WebdriverJs
Locator
Strategy
Test Flows SPA Types
ID, CSS,
Xpath
Locator
Strategy
By Locators
Test Flows
Promise
Manager
SPA TypesSPA TypesSPA TypesGeneric
@DmitryVinnik dvinnik.com72

73. Looks limited
@DmitryVinnik dvinnik.com73

74. Is there anything better?
@DmitryVinnik dvinnik.com74

75. Special Case #2
@DmitryVinnik dvinnik.com75

76. Angular
Components
Models Controllers
@DmitryVinnik dvinnik.com76

77. Demo App: Closer Look
@DmitryVinnik dvinnik.com77

78. How would we test that?
@DmitryVinnik dvinnik.com78

79. Web Test Pyramid
↑ Fidelity
↓ Speed
↑ Cost
↓ Fidelity
↑ Speed
↓ Cost
@DmitryVinnik dvinnik.com79

80. Do we have to use
WebdriverJs?
@DmitryVinnik dvinnik.com80

81. No!
@DmitryVinnik dvinnik.com81

82. Protractor
E2E Test Framework for Angular Apps
@DmitryVinnik dvinnik.com82

83. @DmitryVinnik dvinnik.com
Protractor
83

84. Protractor
From “Protractor.org”
@DmitryVinnik dvinnik.com84

85. E2E Tests’ Complexity
Selectors
Locator
Strategy
Test Flows SPA Types
@DmitryVinnik dvinnik.com85

86. Protractor
Selectors
Locator
Strategy
Test Flows SPA Types
Locator
Strategy
Test Flows SPA Types
Selectors
Element
Bindings
Locator
Strategy
By Repeaters
Test Flows
Application
State Aware
SPA Types
Angular
Oriented
@DmitryVinnik dvinnik.com86

87. Example: Protractor
@DmitryVinnik dvinnik.com87

88. Angular is great
@DmitryVinnik dvinnik.com88

89. But
@DmitryVinnik dvinnik.com89

90. Many UI Frameworks...
React Vue
Ember Backbone
@DmitryVinnik dvinnik.com90

91. Protractor + React
@DmitryVinnik dvinnik.com91

92. Protractor + React
@DmitryVinnik dvinnik.com92

93. Conclusion
@DmitryVinnik dvinnik.com93

94. Protractor + React
@DmitryVinnik dvinnik.com94

95. What’s Next?
@DmitryVinnik dvinnik.com95

96. Non-Selenium
UI Test Frameworks
TestCafe
Cypress.io
@DmitryVinnik dvinnik.com96

97. What have we
learned so far?
@DmitryVinnik dvinnik.com97

98. Patterns.
Patterns everywhere
@DmitryVinnik dvinnik.com98

99. Common Patterns
Handling
Waits
RTD
Parallel
Execution
Recorder
& IDE
@DmitryVinnik dvinnik.com99

100. Non-Selenium
UI Test Frameworks
TestCafe
Cypress.io
@DmitryVinnik dvinnik.com
Cypress.io
100

101. Common Patterns
@DmitryVinnik dvinnik.com101

102. TestCafe
Handling
Waits
RTD
Parallel
Execution
Recorder
& IDE
@DmitryVinnik dvinnik.com102

103. TestCafe: Example
@DmitryVinnik dvinnik.com103

104. TestCafe: Example
@DmitryVinnik dvinnik.com104

105. TestCafe:
Recorder & IDE
@DmitryVinnik dvinnik.com105

106. TestCafe: Recorder & IDE
@DmitryVinnik dvinnik.com106

107. Non-Selenium
UI Test Frameworks
TestCafe
Cypress.io
@DmitryVinnik dvinnik.com
Cypress.io
TestCafe
Cypress.io
107

108. Common Patterns
@DmitryVinnik dvinnik.com108

109. Cypress.io
Handling
Waits
RTD
Parallel
Execution
Recorder
& IDE
@DmitryVinnik dvinnik.com109

110. Cypress.io: Example
@DmitryVinnik dvinnik.com110

111. Cypress.io: Example
@DmitryVinnik dvinnik.com111

112. Cypress.io:
Recorder & IDE
@DmitryVinnik dvinnik.com112

113. Cypress.io: Reports & IDE
@DmitryVinnik dvinnik.com113

114. Right Tool
for the Right Problem
@DmitryVinnik dvinnik.com114

115. Many Test Frameworks...
WebdriverIO
WD
Nightwatch.js
Nemo
@DmitryVinnik dvinnik.com115

116. Avoid Tool Mixups
No DDD
No Common
Language
↑ Complexity
@DmitryVinnik dvinnik.com116

117. How to Choose?
Github
Stars
NPM
Downloads
External
Integrations
POC
@DmitryVinnik dvinnik.com117

118. But More Importantly
Flexibility
Use CaseUse Case
@DmitryVinnik dvinnik.com118

119. Flexibility
Cost of
Transition
ROI
Ability to
Replace
Ability to
Customize
@DmitryVinnik dvinnik.com119

120. But More Importantly
Flexibility
Use CaseUse Case
@DmitryVinnik dvinnik.com
Flexibility
Use Case
120

121. Use Case
Team
Expertise
Application
Framework
Test
Infrastructure
@DmitryVinnik dvinnik.com121

122. Call For Action
Evaluate Test
Architecture
Have Domain
Boundaries
Unify Test
Strategy
Experiment!
@DmitryVinnik dvinnik.com122

123. Q/A
@DmitryVinnik dvinnik.com123

124. About Speaker
Twitter: @DmitryVinnik
Blog: dvinnik.com
LinkedIn: in/dmitry-vinnik/
Email: dmitry@dvinnik.com