Welcome

Please Sign-in

bit.ly/cy-melbourne-workshop

Testing with Cypress

@amirrustam

Workshop

Amir Rustamzadeh

Head of Developer Experience

@amirrustam

πŸ“š

Workshop Repo

@amirrustam

@amirrustam

@amirrustam

The way we write our apps changed, but our testing tools did not adapt.

What is Cypress?

A tool for reliably testing anything that runs in web browser.

Free & Open Source

MIT License

Our mission is to build a thriving, open source ecosystem that enhances productivity, makes testing an enjoyable experience, and generates developer happiness. We hold ourselves accountable to champion a testing process that actually works.

Growth in Popularity & Adoption

⭐️ 14.5K +

πŸ“¦ 550K +

GitHub Stars

NPM Weekly Downloads

Growth in Popularity & Adoption

Growth in Popularity & Adoption

Sustainable Open Source

Let's Dive In

Setup & Installation

$ npm install -D cypress
$ npm install -D cypress

Desktop App

CLI

$ npx cypress open

Open Desktop App

  • πŸ“¦ My Project

    • πŸ“ ...

    • πŸ“‚ cypress

      • πŸ“‚ fixtures

      • πŸ“‚ integration

      • πŸ“‚ plugins

      • πŸ“‚ support

Your App

Command Log

Time-Travel

API

Intuitive & English-like

API

cy.<command>

API

cy.get('button')

API

cy.get('button')
Β  .click()
  .should('have.class', 'active')

API

cy.request('/users/1')
Β  .its('body')
  .should('deep.eql',{ name:'Amir'})

API

cy.get('button')
Β  .click()
  .should('have.class', 'active')

Subject is passed

through the chain

Architecture

Backend

Browser

Your Tests

Your App

Browser Provisioning & System-level tasks

Architecture

πŸƒπŸ»β€β™‚οΈ

Faster test runs

Architecture

⚑️

Direct native Access to the DOM & your application.

Architecture

🐞

Better Debuggability

Architecture

πŸ‘Œ

Test commands are executed in aΒ deterministicΒ manner. Resulting in flake-freeΒ testing.

it('send email with contact form', () => {
    cy.get('#name-input').type('Amir')
    cy.get('#email-input').type('amir@cypress.io')
    cy.get('form').submit()
    cy.get('#success-message').should('be.visible')
})
βœ…
βœ…
βœ…
βœ…
    cy.get('#name-input').type('Amir')
    cy.get('#email-input').type('amir@cypress.io')
    cy.get('form').submit()
    cy.get('#success-message').should('be.visible')

Architecture

⏳

Automatic Waiting

API

cy.get('button')
Β  .click()
  .should('have.class', 'active')

Cypress will automatically wait for this assertion (4 seconds by default)

How do you run Cypress in CI?

Headless Mode

$ npx cypress run

Test Run Video Recording

Out-of-the-Box

$ npx cypress run

Record Results to

Cypress Dashboard

$ npx cypress run --record

Cypress Dashboard

Test Run Status & Performance Details

Organized & Shareable Error Reports

Cypress Dashboard

Optimize CI Usage with Parallelization

$ npx cypress run --record --parallel

Upcoming

Test Retries

Reduce pipeline failures and identify true flaky tests.

βœ… 999

❌ 1

Upcoming

Β 

Full-Network Stubbing

Β 

Improved Error Reporting

Β 

Cross-browser Support

Docs

πŸ“š docs.cypress.io

Example Recipes

@cypress/code-coverage

Plugins, Plugins, Plugins

πŸ— Component Testing

πŸ“Έ Visual Regression

♿️ Accessibility Testing

✨ ...and more ✨

🀝

Community

Gitter

on.cypress.io/chat

Thank You

Happy Testing

Amir Rustamzadeh

Head of Developer Experience

@amirrustam

Cypress Workshop Intro

By Amir Rustamzadeh

Cypress Workshop Intro

  • 586

More from Amir Rustamzadeh