Welcome

Please Sign-in

bit.ly/cy-melbourne-workshop

Testing with Cypress

@amirrustam

Workshop

Amir Rustamzadeh

Head of Developer Experience

@amirrustam

📚

Workshop Repo

github.com/cypress-io/testing-workshop-cypress

@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>

📚 docs.cypress.io/api

API

cy.get('button')

📚 docs.cypress.io/api

API

cy.get('button')
  .click()

  .should('have.class', 'active')

📚 docs.cypress.io/api

API

cy.request('/users/1')
  .its('body')

  .should('deep.eql',{ name:'Amir'})

📚 docs.cypress.io/api

API

cy.get('button')
  .click()

  .should('have.class', 'active')

📚 docs.cypress.io/api

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')

📚 docs.cypress.io/api

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

📚 https://github.com/cypress-io/cypress-example-recipes

@cypress/code-coverage

📚 on.cypress.io/code-coverage

📺 youtu.be/C8g5X4vCZJA

Plugins, Plugins, Plugins

📚 docs.cypress.io/plugins

🏗 Component Testing

📸 Visual Regression

♿️ Accessibility Testing

✨ ...and more ✨

🤝

Community

Gitter

on.cypress.io/chat

GitHub

github.com/cypress-io/cypress

Thank You

Happy Testing

Amir Rustamzadeh

Head of Developer Experience

@amirrustam