describe("searching", () => {
it("searches for an artist", () => {
// your test goes in here!
})
})
Cypress
Example
cy.visit
describe("searching", () => {
it("searches for an artist", () => {
cy.visit("/")
// ^^^ browse to the root of our site
})
})
Cypress
Example
cy.contains
describe("searching", () => {
it("searches for an artist", () => {
cy.visit("/")
cy.contains("Learn about and collect art")
// ^^^ Find an element containing specific text
})
})
Cypress
Example
cy.get
describe("searching", () => {
it("searches for an artist", () => {
cy.visit("/")
cy.contains("Learn about and collect art")
cy.get('[placeholder="Search"]')
// ^^^ Find an element by CSS selector
})
})
Cypress
Example
click
describe("searching", () => {
it("searches for an artist", () => {
cy.visit("/")
cy.contains("Learn about and collect art")
cy.get('[placeholder="Search"]')
.click()
// ^^^ click on the matching element
})
})
Cypress
Example
type
describe("searching", () => {
it("searches for an artist", () => {
cy.visit("/")
cy.contains("Learn about and collect art")
cy.get('[placeholder="Search"]')
.click()
.type("goldsworthy")
// ^^^ type into the focused element
})
})
Cypress
Example
cy.contains, click
describe("searching", () => {
it("searches for an artist", () => {
cy.visit("/")
cy.contains("Learn about and collect art")
cy.get('[placeholder="Search"]')
.click()
.type("goldsworthy")
cy.contains("Andy Goldsworthy").click()
// ^^^ find a search result and click on it
})
})
Cypress
Example
cy.url
describe("searching", () => {
it("searches for an artist", () => {
cy.visit("/")
cy.contains("Learn about and collect art")
cy.get('[placeholder="Search"]')
.click()
.type("goldsworthy")
cy.contains("Andy Goldsworthy").click()
cy.url().should("contain", "andy-goldsworthy")
// ^^^ verify the navigated URL
})
})
Cypress
Example
cy.contains
describe("searching", () => {
it("searches for an artist", () => {
cy.visit("/")
cy.contains("Learn about and collect art")
cy.get('[placeholder="Search"]')
.click()
.type("goldsworthy")
cy.contains("Andy Goldsworthy").click()
cy.url().should("contain", "andy-goldsworthy")
cy.contains("Andy Goldsworthy creates outdoor sculpture")
})
})
it("logs in user", () => {
// 1. visit home// 2. pop login modal// 3. log in user// 4. verify logged in
})
Cypress at Artsy
Critical Flows
Logging In
it("logs in user", () => {
// 1. visit home
cy.visit("/")
// 2. pop login modal
cy.get("header")
.find("button")
.contains("Log in")
.click()
// 3. log in user// 4. verify logged in
})
Cypress at Artsy
Critical Flows
Logging In
it("logs in user", () => {
// 1. visit home// 2. pop login modal// 3. log in user
cy.get("input[type=email]")
.type(Cypress.env("ADMIN_USER"))
cy.get("input[type=password]")
.type(Cypress.env("ADMIN_PASSWORD"), {
log: false,
})
cy.get("button")
.contains("Log in")
.click()
// 4. verify logged in
cy.get("header").find("a[href='/works-for-you']")
})
Cypress at Artsy
Critical Flows
Finding Art
Cypress at Artsy
Critical Flows
Finding Art
it("filters by medium", () => {
cy.visit("/collect")
cy.contains("Ways to buy")
cy.get("input[type=radio]").contains("Painting").click()
cy.url().should("contain", "/collect/painting")
})
Cypress at Artsy
Critical Flows
Buying Art
Cypress at Artsy
Critical Flows
Buying Art
it("can buy an individual work", () => {
// 1. log in as partner// 2. upload new artwork for sale// 3. log in as collector// 4. buy artwork// 5. verify artwork is sold
})
Cypress at Artsy
Challenges
Cypress at Artsy
Challenges
Why are end-to-end tests hard?
• Many moving parts
• State
•Data
• Tooling
Cypress at Artsy
Challenges
Data
1. Use a live database
👍🏼 Tests the entire stack
👎 Depends on live data not changing
👎 Requires fake data in live DB
Cypress at Artsy
Challenges
Data
2. Use a test database
👍🏼 Tests the entire stack
👍🏼 We can seed it however we want
👎 Hard to set up
Cypress at Artsy
Challenges
Data
3. Use no database (mock data calls)
👍🏼 Easier to set up
👍🏼 We can mock it however we want
👎 Doesn't test the entire stack
Cypress at Artsy
Challenges
Data
1. Use a live database
2. Use a test database
3. Use no database (mock data calls)
Cypress at Artsy
Challenges
Data
1. Use a live database 👈🏼
2. Use a test database
3. Use no database (mock data calls)
Cypress at Artsy
Challenges
Data
1. Use a live database
2. Use a test database
3. Use no database (mock data calls)
Cypress at Artsy
Challenges
Data
3. Use no database (mock data calls)
TDD
Cypress at Artsy
Challenges
Data
TDD
it("renders a Log In link when I'm not logged in", () => {
cy.server();
cy.route({
url: '/api/me',
status: 404,
response: {
error: 'User does not exist',
},
});
cy.visit('/');
cy.contains('Log In');
});
cy.contains("Learn about and collect art")
cy.findByText("Learn about and collect art")
cy.get('[placeholder="Search"]')
cy.findByPlaceholderText("Search")