Cypress.
Hype and Reality

Dmitriy Kovalenko

Your friendly OSS developer

0
 Advanced issue found
 

Dmitriy Kovalenko

twt

dmtrkovalenko

dmtrKovalenko

slides.com/dkovalenko

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

⭐️ 17.8k 

⬇️ 2.8m/month 

Who Is doing Cy?

25 people
all over the world

How much?

MIT Licensed

Dive in

Why?

No Winners

No pie

Writing tests

Developer Experience

Reliability

Install

 brew install node

 npm install cypress 

Really, that's it

Run

 npx cypress open

Really, that's it

Run

Run

Show me the code

describe('Login', () => {
  beforeEach(() => {
    cy.visit('/login')
  })

  it('Should validate email', () => {
    cy.get("#email").type("something{enter}")
    cy.get("#validation-error").should('contain', "Invalid email")
  })

  it('Should submit login form', () => {
    cy.get("#email").type("admin@cypress.io")
    cy.get("#password").type("qwerty")

    cy.get("#loginForm").submit()
    cy.url().should('include', 'dashboard')
  })
})

Show me the code

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

Show me the code

describe('Login', () => {
  beforeEach(() => {
    cy.visit('/login')
  })

  it('Should validate email', () => {
    cy.get("#email").type("something{enter}")
    cy.get("#validation-error").should('contain', "Invalid email")
  })

  it('Should submit login form', () => {
    cy.get("#email").type("admin@cypress.io")
    cy.get("#password").type("qwerty")

    cy.get("#loginForm").submit()
    cy.url().should('include', 'dashboard')
  })
})
describe('Login', () => {
  let user = cy
  
  beforeEach(() => {
    user.visit('/login')
  })

  it('Should validate email', () => {
    user.get("#email").type("something{enter}")
    user.get("#validation-error").should('contain', "Invalid email")
  })

  it('Should submit login form', () => {
    user.get("#email").type("admin@cypress.io")
    user.get("#password").type("qwerty")

    user.get("#loginForm").submit()
    user.url().should('include', 'dashboard')
  })
})

Show me

1 * 👀 > 100 * 👂

Back to Boring

Selenium Architecture

Web Driver

Web Driver

Cypress Architecture

Actionability

That's why

- One language

- One tab & domain

- One browser

(at least for now )

A little about cross-browsing

That's why

- Less Flaky

- Fast

- Interactive

Extensions

Visual Regression

What?

Why?

Do you remember?

Yeaaah, new regression

Yeaaah, new regression

How?

npm install @percy/cypress

How?

// In cypress/plugins/index.js
let percyHealthCheck = require("@percy/cypress/task")

module.exports = (on, config) => {
  on("task", percyHealthCheck);
};
// At the top of cypress/support/commands.js
import "@percy/cypress";

And use it

  it("Shows main page", () => {
    cy.visit("https://fwdays.com/en/event/QA-fwdays20-online-conference")
    cy.percySnapshot('Main')
  })

Show me 

1 * 👀 > 100 * 👂

Be friends
with your
Testing Tools

Cypress. Hype and reality

By dkovalenko

Cypress. Hype and reality

  • 203
Loading comments...

More from dkovalenko