Cypress.
Hype and Reality
Dmitriy Kovalenko
Your friendly OSS developer
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 openReally, 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