Cypress.
Hype and Reality
Dmitriy Kovalenko
Your friendly OSS developer
0
Advanced issue found▲
Dmitriy Kovalenko


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

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 * 👂
Percy Builds Demo: https://percy.io/Ne/fwdays-cypress-demo
Be friends
with your
Testing Tools
Cypress. Hype and reality
By dkovalenko
Cypress. Hype and reality
- 943