Modern Web Testing: Going Beyond Selenium · 2020-01-28 · Modern Web Testing: Going Beyond...
83
Modern Web Testing: Going Beyond Selenium Dmitry Vinnik, @DmitryVinnik Lead Software Engineer, Salesforce
Transcript of Modern Web Testing: Going Beyond Selenium · 2020-01-28 · Modern Web Testing: Going Beyond...
Modern Web Testing:
Going Beyond Selenium
Dmitry Vinnik, @DmitryVinnikLead Software Engineer, Salesforce
GoalsEnd-to-End Testing:
What, Why, How and When
Looking Beyond Selenium WD
Find Right E2E Tool For Your Team
What are our goals?
2
How do we usually test?
3
Let’s go in more details
Test Pyramid↑ Fidelity
↓ Speed
↑ Cost
↓ Fidelity
↑ Speed
↓ Cost 4
Let’s test something!
5
What is this “something”?
6
Example App
Back to testing!
7
End-to-End Testing
8
Today’s Focus
Common way to do E2E?
9
Selenium WebDriver
10
Defacto
E2E Tool
Testing
Standard
Generic ↑ Integrations
Selenium WebDriver
11
Selenium WebDriver
From “SeleniumHQ, Selenium RC”
Case #1
12
Backend:
Java
Testing:
Java
Is there a problem?
13
Yes, there is
Why not Server Side Test?
14
Hybrid
ModelDDD
User
Centric
DDD
User
Centric
Hybrid Model
15
Software
Engineers
Software
Principles
Testing
Expertise
Why not Server Side Test?
16
Hybrid
ModelDDD
User
Centric
DDDDDDHybrid
Model
Domain Driven Design
17
Context Matters
Ubiquitous
Language
Why not Server Side Test?
18
Hybrid
ModelDDD
User
Centric
DDDDDDHybrid
ModelDDD
User
Centric
Still not convinced?
19
Modern Web Testing
20
Power of JavaScript
21
Assertion
Libraries
Process
Libraries
Enterprise
Libraries
Process
Libraries
Enterprise
Libraries
ChaiJasmineProcess
Libraries
BDD
LibrariesCucumber
Enterprise
LibrariesApplitools
Speaking Language
of the Web
22
JavaScriptNode.js
Node.js
23
NPM
Manager
Flexible
Customizable
Isomorphic
Established Medium
24
Going back to the Pyramid
Test Pyramid
↓ Fidelity
↑ Speed
↓ Cost 25
Unit Testing
26
In Web Context
Example: Jasmine
27
Test Pyramid
↓ Fidelity
↑ Speed
↓ Cost 28
Integration Testing
29
In Web Context
Example: Jest
30
Let’s reflect on it
31
Test Pyramid
↓ Fidelity
↑ Speed
↓ Cost 32
Every step has
only 1 focus
33
Developers
34
Good for some testsBut not for E2E tests
Test Pyramid↑ Fidelity
↓ Speed
↑ Cost
↓ Fidelity
↑ Speed
↓ Cost 35
Shifting focus
36
Developers Customers
Sounds great!
37
But how do we do it?
User Centric TestingEnd-to-End Task Testing
38
Interactions Tasks
Page Object
Model
Screenplay
Pattern
Should we use
Java for tests?
39
No!Back to our app
What should we do?
40
Move to Client Side
Continuing with Selenium
41
WebdriverJs
Selenium WebDriver
42
Defacto
E2E Tool
Testing
Standard
Generic ↑ Integrations
WebdriverJs
Selenium WebdriverJs
43
Selenium WebdriverJs
From “SeleniumHQ, Selenium RC”
Example: WebdriverJs
44
Only good parts, right?
45
Not Really...
E2E Tests:
General Complexity
46
SelectorsLocator
Strategy
Test Flows SPA Types
What about WebdriverJs?
47
E2E Tests:
General Complexity
48
SelectorsLocator
Strategy
Test Flows SPA Types
WebdriverJs
Locator
Strategy
Test Flows SPA Types
ID, CSS,
Xpath
Locator
StrategyBy Locators
Test FlowsPromise
ManagerSPA TypesSPA TypesSPA TypesGeneric
Looks limited
49
Is there anything better?
Remember our test app?
50
Case #2Angular
Components
Models Controllers
Demo App: Closer Look
51
How would we test that?
52
Test Pyramid↑ Fidelity
↓ Speed
↑ Cost
↓ Fidelity
↑ Speed
↓ Cost 53
Do we have to use
WebdriverJs?
54
No!
Protractor
55
E2E Test Framework for Angular Apps
Protractor
56
Protractor
From “Protractor.org”
E2E Tests:
General Complexity
57
SelectorsLocator
Strategy
Test Flows SPA Types
Protractor
Locator
Strategy
Test Flows SPA Types
Element
Bindings
Locator
StrategyBy Repeaters
Test FlowsApplication
State AwareSPA Types
Angular
Oriented
Example: Protractor
58
Angular is great
59
But
There are Many More Front-
End Frameworks...
60
React Vue
Ember Backbone
Protractor + React
61
Protractor + React
Protractor + ReactConclusion
62
What’s Next?
63
Non-Selenium
UI Test Frameworks
TestCafe
Cypress.io
What have we
learned so far?
64
Handling
Waits
RTD
Parallel
Execution
Recorder
& IDE
Patterns.
Patterns everywhere
65
Non-Selenium
UI Test Frameworks
TestCafe
Cypress.ioCypress.io
Common Patterns
66
Handling
Waits
RTD
Parallel
Execution
Recorder
& IDE
TestCafe
TestCafe: Recorder & IDE
67
Recorder & IDE
Source:
TestCafe by DevExpress, https://github.com/DevExpress/testcafe
TestCafe: Example
68
TestCafe: Example
Source:
TestCafe by DevExpress, https://github.com/DevExpress/testcafe
69
Non-Selenium
UI Test Frameworks
TestCafe
Cypress.ioCypress.io
TestCafe
Cypress.io
Common Patterns
70
Handling
Waits
RTD
Parallel
Execution
Recorder
& IDE
Cypress.io
71
Cypress.io: Reports & IDE
Source:
Cypress.io Example by Cypress.io, https://www.cypress.io
Cypress.io: Example
72Source:
Basic Example by Cypress.io, https://www.cypress.io
Cypress.io: Example
Right Tool
for the Right Problem
73
There are many other
E2E Test Frameworks
74
WebdriverIO
WD
Nightwatch.js
Nemo
Avoid Tool Mixups
75
No DDD
No Common
Language
↑ Complexity
How to Choose?
76
Github
Stars
NPM
Downloads
External
IntegrationsPOC
But More Importantly
77
Flexibility
Use CaseUse Case
Flexibility
78
Cost of
TransitionROI
Ability to
ReplaceAbility to
Customize
But More Importantly
79
Flexibility
Use CaseUse Case
Flexibility
Use Case
Use Case
80
Team
Expertise
Application
Framework
Test
Infrastructure
Call For Action
Evaluate Test
Architecture
Have Domain
Boundaries
Unify Test
StrategyExperiment!
81
Q/A
82
