DOBROMIR HRISTOV

@d_m_hristov

MODERN E2E TESTING WITH

INTRODUCTION TO

Who am I ?

Dobromir Hristov

  • Lead FE Developer @Hypefactors
  • Over 3 years of Vue experience
  • Article Author
  • Open Source Author
  • Vue Ecosystem Contributor
  • Vue Community Leader & Moderator

What is automated testing?

I

I

Why do people skip testing?

Why should we test?

Too hard

Unexpected failing

Maintenance

Too much time

My code is just awesome

I

Testing is hard...

Why should we test?

I

When can we skip tests?

Why should we test?

Little to no end goal*

Quick, very short lifespan projects

I

Well that was easy

Why should we test?

I

Best conditions for testing 🌱

Why should we test?

  • Open Source - 100%
  • Complex applications with multiple external services
  • Projects involving large teams
  • Enterprise level applications - usually combine the above

What types of tests are there?

I

Why should we test?

ESLint, Flow,
TS type check

Jest, Mocha, Jasmine, Ava

Nightwatch, TestCafe,
Puppeteer, Cypress

State of End-to-end testing

II

E2E testing before

II

State of End-to-End testing

  • Finicky installation
  • Verbose syntax
  • Require abstractions
  • Hard to spy on requests
  • Java/Python based
  • Had to manually wait for DOM
  • No access to in App state
  • Slow

New age of E2E testing

II

State of End-to-End testing

  • One line install
  • Easy to write tests
  • Test runner GUI
  • Flexible test organization
  • Outstanding CI integration
  • Extensive Docs

Free, Open Source, MIT License

How to get started

1. Easy installation 👌🏻

npm install cypress

II

State of End-to-End testing

The cool 😎

  1. Falimilliar test organization
  2. Run actions before tests
  3. jQuery dom traversal 🤘🏻
  4. Custom commands and funcs
  5. Lodash, Moment
    Mocha, Chai, Sinon
  6. In-App state access 🤯
  7. Rerun tests on change
  8. Community plugins
  9. Access to OS commands

II

State of End-to-End testing

const next = () => cy.get('.go-next').click()

describe('Checkout', () => {
  beforeEach(() => {
    cy.server()  
    cy.route('POST','/finish-order').as('sendPizzaRequest')
  })

  it('should be able to order a pizza', () => {
    cy.visit('https://marcos-pizza.com')

    cy.get('h1').should('contain', 'Choose your pizza')

    cy.get('.items > .item--pizza')
      .contains('pepperoni')
      .first()
      .click()

    cy.window().its('$app.$store.state.cart').should('not.be.empty')

    next()

    cy.get('input.address-field').type('Alabin 1')

    cy.get('select.city').select('sofia')
    
    cy.get('input.time').type(Cypress.moment('').setTime('14:30'))

    next()

    cy.closeAdPopup()

    cy.wait('@sendPizzaRequest')
      .its('status')
      .should('eql', 200)

    cy.contains('Your pizza is on its way')
  })
})

The unique 🦄

  1. Test runner GUI 😵
  2. Time traveling 🤔
  3. Dom inspection 😳
  4. Before/After snapshots
  5. Async DOM action retry
  6. HTTP Spies and Mocks

II

State of End-to-End testing

The impressive 🏆

  1. Auto screenshot on fail
  2. Auto video generation
  3. Outstanding CI integration
  4. Lots of examples 🙌🏻

II

State of End-to-End testing

5. FREE

Cypress in Action

II

State of End-to-End testing

The yet to come

II

State of End-to-End testing

  • Chromium Only
  • No native events
  • No mobile testing
  • No multiple tab support

DEMO TIME

II

State of End-to-End testing

Find me at

dobromir-hristov

d_m_hristov

dobromir_hristov

dobromir-hristov

Dobromir Hristov

Modern E2E testing with Cypress

By Dobromir Hristov

Modern E2E testing with Cypress

Why testing in general, and how Cypress is a game changer.

  • 235
Loading comments...

More from Dobromir Hristov