Connect.Tech 2020: Advanced Cypress Testing

import albums from '../../../server/jazz-albums-test-pristine.json'
describe('Home page', function () {
it('albums can be viewed on home page', function () {
cy.get('.album-list-item').should('have.length', albums.length)
albums.forEach((album) => {
cy.get('.album-list-item h2')
.contains(album.title)
.parent('.album-list-item')
.should('exist')
.find('h3')
.should('contain', album.artists.join(' - '))
})
})
})

View Slide

.should('exist')
.find('h3')
})
})
})

View Slide

.should('exist')
.find('h3')
})
})
})

View Slide

.should('exist')
.find('h3')
})
})
})

View Slide

.should('exist')
.find('h3')
})
})
})

View Slide

.should('exist')
.find('h3')
})
})
})

View Slide

.should('exist')
.find('h3')
})
})
})

View Slide

it('sorts albums', function () {
function albumsSortedLike(albumList) {
albumList.forEach((album, index) => {
cy.get('.album-list-item')
.eq(index)
.find('h2')
.should('contain', album.title)
})
}
cy.contains('.filter-section', 'Sort By').find('select').select('Title')
albumsSortedLike(albumsSortedByTitle)
cy.contains('.filter-section', 'Sort By').find('select').select('Artist')
albumsSortedLike(albumsSortedByArtists)
cy.contains('.filter-section', 'Sort By').find('select').select('Default')
albumsSortedLike(albumsSortedById)
})

View Slide

.eq(index)
.find('h2')
})
}
})

View Slide

.eq(index)
.find('h2')
})
}
})

View Slide

.eq(index)
.find('h2')
})
}
})

View Slide

.eq(index)
.find('h2')
})
}
})

View Slide

.eq(index)
.find('h2')
})
}
})

View Slide

.eq(index)
.find('h2')
})
}
})

View Slide

it('searches for artists', function () {
cy.contains('.filter-section', 'Search Artists')
.find('input')
.type('John Coltrane')
.should('have.length', 2)
.find('h2')
.should('contain', 'A Love Supreme')
.and('contain', 'Blue Train')
.find('h3')
.should('contain', 'John Coltrane')
})

View Slide

.find('input')
.find('h2')
.find('h3')
})

View Slide

.find('input')
.find('h2')
.find('h3')
})

View Slide

.find('input')
.find('h2')
.find('h3')
})

View Slide

.find('input')
.find('h2')
.find('h3')
})

View Slide

.find('input')
.find('h2')
.find('h3')
})

View Slide

.find('input')
.find('h2')
.find('h3')
})

View Slide

Markup or CSS changes?

View Slide

const AlbumListItem = ({ album }) => (
className="album-list-item"
to={`/albums/${album.id}`}
>

{album.title}
{album.artists.join(' - ')}

)

View Slide

className="album"
>

{album.title}

)

View Slide

className="album"
>

{album.title}

)

View Slide

>

{album.title}

)

View Slide

const AlbumListItemSelectors = ({ album }) => (
data-test="album-list-item"
>

{album.title}

)

View Slide

const AlbumListItemSelectors = ({ album }) => (
data-test="album-list-item"
>

{album.title}

)

View Slide

cy.get('[data-test="album-list-item"]')
.should('have.length', albums.length)
cy.get('[data-test="title"]')
.parent('[data-test="album-list-item"]')
.should('exist')
.find('[data-test="artists"]')
})
})

View Slide

.should('exist')
})
})

View Slide

.should('exist')
})
})

View Slide

.should('exist')
})
})

View Slide

.should('exist')
})
})

View Slide

cy.contains('[data-test="album-list-item"]', album.title)
})
})

View Slide

value={sorter}
onChange={(e) => setSorter(e.target.value)}
data-test="sort-by"
>
Default
Title
Artist

View Slide

cy.get('[data-test="sort-by"]').select('Title')
cy.get('[data-test="sort-by"]').select('Artist')
cy.get('[data-test="sort-by"]').select('Default')

View Slide

cy.get('[data-test="search-artists"]')
.and('contain', 'A Love Supreme')
.and('contain', 'John Coltrane')
})

View Slide

})

View Slide

})

View Slide

.should('exist')
})
})

View Slide

.should('exist')
})
})

View Slide

Page Objects

View Slide

// cypress/support/pages/home.js
export const albums = () =>
export const album = (title) =>
cy.contains('[data-test="album-list-item"]', title)
export const sortBy = () =>
cy.get('[data-test="sort-by"]')
export const searchArtists = () =>

View Slide

import * as homePage from '../support/pages/home'
homePage
.albums()
homePage
.album(album.title)
.should('exist')
.and('contain', album.artists.join(' - '))
})
})

View Slide

homePage
.albums()
homePage
.album(album.title)
.should('exist')
})
})

View Slide

homePage
.albums()
homePage
.album(album.title)
.should('exist')
})
})

View Slide

homePage
.albums()
homePage
.album(album.title)
.should('exist')
})
})

View Slide

homePage.albums().eq(index).should('contain', album.title)
})
}
homePage.sortBy().select('Title')
homePage.sortBy().select('Artist')
homePage.sortBy().select('Default')
})

View Slide

})
}
})

View Slide

})
}
})

View Slide

homePage.searchArtists().type('John Coltrane')
homePage
.albums()
})

View Slide

homePage
.albums()
})

View Slide

homePage
.albums()
})

View Slide

Repetition

View Slide

cy.contains('[data-test="album-list-ite"]', title)
cy.get('[data-test=sort-by"]')
cy.get('[data-test="search-artists"')

View Slide

Commands

View Slide

// cypress/support/commands.js
Cypress.Commands.add(
'getByDataTest',
(key) => cy.get(`[data-test="${key}"]`)
)
// cypress/support/index.js
import './commands'

View Slide

'getByDataTest',
)
import './commands'

View Slide

'getByDataTest',
)
import './commands'

View Slide

'getByDataTest',
)
import './commands'

View Slide

'getByDataTest',
)
import './commands'

View Slide

'getByDataTest',
)
import './commands'

View Slide

cy.getByDataTest('album-list-item')
cy.getByDataTest('sort-by')
cy.getByDataTest('search-artists')

View Slide

cy.getByDataTest('album-list-item')
cy.getByDataTest('sort-by')
cy.getByDataTest('search-artists')

View Slide

'containsByDataTest',
(key, content) =>
cy.contains(`[data-test="${key}"]`, content)
)

View Slide

'containsByDataTest',
(key, content) =>
cy.contains(`[data-test="${key}"]`, content)
)

View Slide

cy.containsByDataTest('album-list-item', title)

View Slide

API Timeouts

View Slide

describe('Album page', function () {
// ...
it('can be viewed', function () {
albumPage.title().should('contain', this.album.title)
albumPage.artists().should('contain', this.album.artists)
})
// ...
})

View Slide

describe('Album page', function () {
// ...
})
// ...
})

Wait

cy.wait(6000)
})

cy.wait(6000)
})

cy.wait(6000)
})

beforeEach(function () {
cy.server()
cy.route(buildApiUrl('/albums/*')).as('getAlbum')
// ...
})
Routes and Aliases

View Slide

cy.server()
// ...
})
Routes and Aliases

View Slide

cy.server()
// ...
})
Routes and Aliases

View Slide

cy.server()
// ...
})
Routes and Aliases

View Slide

cy.server()
// ...
})
Routes and Aliases

View Slide

cy.wait('@getAlbum')
})

View Slide

Api Testing

View Slide

describe('REST API: albums', function () {
it('can fetch all albums', function () {
cy.request({
url: buildApiUrl('/albums'),
headers: {
'Content-Type': 'application/json',
},
auth: { bearer: this.token },
})
.its('body')
.should('have.length', this.albums.length)
.each((album) => {
expect(this.albumTitles).to.include(album.title)
})
})
})

View Slide

cy.request({
headers: {
},
})
.its('body')
.each((album) => {
})
})
})

View Slide

cy.request({
headers: {
},
})
.its('body')
.each((album) => {
})
})
})

View Slide

cy.request({
headers: {
},
})
.its('body')
.each((album) => {
})
})
})

View Slide

cy.request({
headers: {
},
})
.its('body')
.each((album) => {
})
})
})

View Slide

cy.request({
headers: {
},
})
.its('body')
.each((album) => {
})
})
})

View Slide

cy.request({
headers: {
},
})
.its('body')
.each((album) => {
})
})
})

View Slide

cy.request({
headers: {
},
})
.its('body')
.each((album) => {
})
})
})

View Slide

it('can fetch an album', function () {
const album = this.albums[0]
cy.request({
url: buildApiUrl(`/albums/${album.id}`),
headers: {
},
})
.its('body')
.should('containSubset', {
id: album.id,
title: album.title,
artists: album.artists,
rating: 'NOT_RATED',
userReviews: [],
})
})

View Slide

cy.request({
headers: {
},
})
.its('body')
id: album.id,
title: album.title,
userReviews: [],
})
})

View Slide

cy.request({
headers: {
},
})
.its('body')
.should('containSubset', { // chai-subset plugin
id: album.id,
title: album.title,
userReviews: [],
})
})

View Slide

cy.request({
headers: {
},
})
.its('body')
id: album.id,
title: album.title,
userReviews: [],
})
})

View Slide

cy.request({
headers: {
},
})
.its('body')
id: album.id,
title: album.title,
userReviews: [],
})
})

View Slide

Cypress.Commands.add('apiRequest', ({ body, url, ...options }) => {
const token = localStorage.getItem('jwt')
return cy.request({
...options,
failOnStatusCode: false,
url: buildApiUrl(url),
headers: {
},
auth: { bearer: token },
...(body && { body: JSON.stringify(body) }),
})
})

View Slide