Cypress.
Hype and Reality
Dmitriy Kovalenko
Your friendly OSS developer
0
Advanced issue found▲
Dmitriy Kovalenko
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6620546/megithub.jpeg)
![twt](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6620562/pasted-from-clipboard.png)
dmtrkovalenko
dmtrKovalenko
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6620571/pasted-from-clipboard.png)
slides.com/dkovalenko
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6528905/1_Jkb_tsMBOvL6wQ8bzldu8Q.png)
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?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6645906/pasted-from-clipboard.png)
No Winners
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6645918/pasted-from-clipboard.png)
No pie
Writing tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6528905/1_Jkb_tsMBOvL6wQ8bzldu8Q.png)
Developer Experience
Reliability
Install
brew install node
npm install cypress
Really, that's it
Run
npx cypress open
Really, that's it
Run
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6628456/pasted-from-clipboard.png)
Run
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6659152/pasted-from-clipboard.png)
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')
})
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6993633/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6637940/pasted-from-clipboard.png)
![Web Driver](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6637949/pasted-from-clipboard.png)
Web Driver
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6637954/pasted-from-clipboard.png)
Cypress Architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6637940/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6637954/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6528905/1_Jkb_tsMBOvL6wQ8bzldu8Q.png)
Actionability
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6639798/pasted-from-clipboard.png)
That's why
- One language
- One tab & domain
- One browser
(at least for now )
A little about cross-browsing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6993414/pasted-from-clipboard.png)
That's why
- Less Flaky
- Fast
- Interactive
Extensions
Visual Regression
What?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6638205/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6638208/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6638227/pasted-from-clipboard.png)
Why?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6638153/pasted-from-clipboard.png)
Do you remember?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6648122/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6648151/pasted-from-clipboard.png)
Yeaaah, new regression
Yeaaah, new regression
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6648158/pasted-from-clipboard.png)
How?
npm install @percy/cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1124976/images/6638344/pasted-from-clipboard.png)
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
- 1,395