Modern Web Testing: Going Beyond Selenium 2020-01-28آ  Modern Web Testing: Going Beyond Selenium...

download Modern Web Testing: Going Beyond Selenium 2020-01-28آ  Modern Web Testing: Going Beyond Selenium Dmitry

of 83

  • date post

    23-May-2020
  • Category

    Documents

  • view

    0
  • download

    0

Embed Size (px)

Transcript of Modern Web Testing: Going Beyond Selenium 2020-01-28آ  Modern Web Testing: Going Beyond Selenium...

  • Modern Web Testing:

    Going Beyond Selenium

    Dmitry Vinnik, @DmitryVinnik Lead Software Engineer, Salesforce

  • Goals End-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

    Model DDD

    User

    Centric

    DDD

    User

    Centric

  • Hybrid Model

    15

    Software

    Engineers

    Software

    Principles

    Testing

    Expertise

  • Why not Server Side Test?

    16

    Hybrid

    Model DDD

    User

    Centric

    DDDDDD Hybrid

    Model

  • Domain Driven Design

    17

    Context Matters

    Ubiquitous

    Language

  • Why not Server Side Test?

    18

    Hybrid

    Model DDD

    User

    Centric

    DDDDDD Hybrid

    Model DDD

    User

    Centric

  • Still not convinced?

    19

  • Modern Web Testing

    20

  • Power of JavaScript

    21

    Assertion

    Libraries

    Process

    Libraries

    Enterprise

    Libraries

    Process

    Libraries

    Enterprise

    Libraries

    ChaiJasmine Process

    Libraries

    BDD

    Libraries Cucumber

    Enterprise

    Libraries Applitools

  • Speaking Language

    of the Web

    22

    JavaScript Node.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

    Selectors Locator

    Strategy

    Test Flows SPA Types

  • What about WebdriverJs?

    47

  • E2E Tests:

    General Complexity

    48

    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

  • 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

    Selectors Locator

    Strategy

    Test Flows SPA Types

    Protractor

    Locator

    Strategy

    Test Flows SPA Types

    Element

    Bindings

    Locator

    Strategy By Repeaters

    Test Flows Application

    State Aware SPA 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

    72 Source:

    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

    Integrations POC

  • But More Importantly

    77

    Flexibility

    Use CaseUse Case

  • Flexibility

    78

    Cost of

    Transition ROI

    Ability to

    Replace Ability 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 Do