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

About Speaker

Twitter: @DmitryVinnik

LinkedIn: in/dmitry-vinnik/

Email: dmitry@dvinnik.com

83