import { login } from
'../../../../support/pageObjects/login.page';
describe('Logging In - HTML Web Form - The Internet', () => {
context('Unauthorized', () => {
it('User denied access with invalid details', () => {
login.visit()
login.username.type('invalidUser')
login.password.type('invalidPassword{enter}')
login.errorMsg.contains('Your username is invalid!')
login.logOutButton.should('not.exist')
})
})
})
import { loginIds } from
'../dataTestIds/login.ids';
class LoginPage {
visit() {
cy.visit('/login');
cy.url().should('include', 'login')
}
get username() {
return cy.get(`${loginIds.username}`);
}
get password() {
return cy.get(`${loginIds.password}`);
}
get successMsg() {
return cy.get(`${loginIds.successMsg}`);
}
...
}
export const login = new LoginPage();
import { loginIds } from
'../dataTestIds/login.ids';
class LoginPage {
visit() {
cy.visit('/login');
cy.url().should('include', 'login')
}
get username() {
return cy.get(`${loginIds.username}`);
}
get password() {
return cy.get(`${loginIds.password}`);
}
get successMsg() {
return cy.get(`${loginIds.successMsg}`);
}
...
}
export const login = new LoginPage();
import { login } from
'../../../../support/pageObjects/login.page';
describe('Logging In - HTML Web Form - The Internet', () => {
context('Unauthorized', () => {
it('User denied access with invalid details', () => {
login.visit()
login.username.type('invalidUser')
login.password.type('invalidPassword{enter}')
login.errorMsg.contains('Your username is invalid!')
login.logOutButton.should('not.exist')
})
})
})
import { loginIds } from
'../dataTestIds/login.ids';
export const visit = () => {
cy.visit('/login');
cy.url().should('include', 'login')
}
export const username = () =>
cy.get(`${loginIds.username}`);
export const password = () =>
cy.get(`${loginIds.password}`);
export const successMsg = () =>
cy.get(`${loginIds.successMsg}`);
...
import * as login from
'../../../../support/pageObjects/login.page';
describe('Logging In - HTML Web Form - The Internet', () => {
context('Unauthorized', () => {
it('User denied access with invalid details', () => {
login.visit()
login.username().type('invalidUser')
login.password().type('invalidPassword{enter}')
login.errorMsg().contains('Your username is invalid!')
login.logOutButton().should('not.exist')
})
})
})
import { loginIds } from
'../dataTestIds/login.ids';
let loggedIn = false
export const visit = () => {
cy.visit('/login');
cy.url().should('include', 'login')
}
export const login = (username, password) => {
// do login via UI
// assert logged in
loggedIn = true
}
...
import * as login from
'../../../../support/pageObjects/login.page';
describe('Logging In - HTML Web Form - The Internet', () => {
context('Unauthorized', () => {
it('User denied access with invalid details', () => {
login.visit()
login.login('username', 'password')
})
})
})
Cypress includes bundler!
export const resetDatabase = () => {
console.log('resetDatabase')
cy.request({
method: 'POST',
url: '/reset',
body: {
todos: []
}
})
}
export const getTodoApp = () => cy.get('.todoapp')
export const getTodoItems = () =>
getTodoApp().find('.todo-list').find('li')
import {
getTodoApp,
resetDatabase,
} from '../../support/utils'
beforeEach(resetDatabase)
beforeEach(() => cy.visit('/'))
it('loads application', () => {
getTodoApp().should('be.visible')
})
const store = createStore(reducer)
// expose store when run in Cypress
if (window.Cypress) {
window.store = store
}
app code
it('can drive app by dispatching actions', () => {
cy.visit('/')
// dispatch Redux action
cy.window().its('store')
.invoke('dispatch', { type: 'LOGIN', username, password })
// check if the user is logged in
})
test code
// share code with the application
import { login } from '../../src/actions'
const dispatch = action =>
cy.window().its('store').invoke('dispatch', action)
it('can drive app by dispatching actions', () => {
cy.visit('/')
dispatch(login(username, password))
// check if the user is logged in
})
test code
Cypress.Commands.add('login', (username, password) => {
// response cookies are automatically set
// https://on.cypress.io/request#Cookies
cy.request({
url: '/login',
method: 'POST',
body: {
username,
password
})
})
cypress/support/commands.js
it('can login using custom command', () => {
cy.visit('/')
cy.login(username, password)
// check if the user is logged in
})
cypress/support/commands.js
Deep diving PageObject pattern and using it with Cypress