Cypress Testing Tasks
Complete these tasks using Cypress to practice your testing skills. Click on "Show Solution" to reveal a possible implementation for each task.
Task 1: Navigation Test
Write a test to verify that clicking on each navigation link takes you to the correct page.
it('load the site and perform the navigation task', () => {
//Visit the Test website
cy.visit('https://testbox.zoonou.com/home-page.html')
const pages = ['Home', 'Form', 'Table', 'Dynamic', 'Tasks', 'Setup']
pages.forEach((page) => {
cy.get('.topnav').contains(page).click()
cy.url().should('include', page.toLowerCase())
if (page === 'Home') {
cy.url().should('include', 'home-page.html')
}
})
})
Task 2: Form Submission
Create a test that fills out the form on the Form page and submits it. Verify that the submitted data is displayed correctly.
it('Submit content to the form and confirm result', () => { //Convert to use fixtures
cy.visit('https://testbox.zoonou.com/form-page.html')
cy.get('#name').type('John Doe')
cy.get('#email').type('john@example.com')
cy.get('#password').type('password123')
cy.get('#color').select('blue')
cy.get('[name="interests"][value="sports"]').check()
cy.get('[name="gender"][value="male"]').check()
cy.get('#testForm').submit()
cy.log("Submission made Successfully")
cy.get('#formResult').should('be.visible')
cy.get('#formResult').should('contain', 'John Doe')
cy.get('#formResult').should('contain', 'john@example.com')
cy.get('#formResult').should('contain', 'blue')
cy.get('#formResult').should('contain', 'sports')
cy.get('#formResult').should('contain', 'male')
cy.log("Form contains expected content")
})
Task 3: Table Interaction
Write a test that clicks the "Edit" button for a specific user in the table and verifies that the correct message is displayed.
it('Interact with the table and ensure the changes are made', () => {
cy.visit('https://testbox.zoonou.com/table-page.html')
// Stub both prompts before clicking Edit
cy.window().then((win) => {
cy.stub(win, 'prompt')
.onFirstCall().returns('John Doe')
.onSecondCall().returns('john@example.com')
})
// Find and click the Edit button for John Doe
cy.contains('tr', 'John Doe')
.find('button')
.contains('Edit')
.click()
// Verify the table has been updated with both new values
cy.get('#tableResult')
.should('be.visible')
.and('contain', 'John Doe')
.and('contain', 'john@example.com')
// Optional: Verify that the prompt was called twice
cy.window().then((win) => {
expect(win.prompt).to.be.calledTwice
})
})
Task 4: Dynamic Content Loading
Test the "Load Data" button functionality on the Dynamic Content page. Verify that the correct data is loaded and displayed.
it('Confirm the dynamic content is loaded correctly', () => {
cy.visit('https://testbox.zoonou.com/dynamic-content-page.html')
cy.get('#loadDataBtn').click()
cy.log("Data loaded")
cy.get('#dataContainer')
.should('be.visible')
.and('contain', 'Item 1')
.and('contain', 'Item 2')
.and('contain', 'Item 3')
cy.get('#dataContainer').find('div').should('have.length', 3)
cy.log("Length as expected")
})
Task 5: Color Change Test
Write a test for the "Change Background Color" button on the Dynamic Content page. Verify that the color changes correctly with each click.
it('ensure the color is changing correctly', () => {
cy.visit('https://testbox.zoonou.com/dynamic-content-page.html')
const colors = ['bg-red-500', 'bg-blue-500', 'bg-green-500', 'bg-yellow-500', 'bg-purple-500']
colors.forEach((color, index) => {
cy.get('#changeColorBtn').click()
cy.get('#colorBox').should('have.class', colors[(index + 1) % colors.length])
})
})
Task 6: Add and Delete User Test
Create a test that adds a new random user to the table, verifies its presence, then deletes the user and confirms its removal.
it('Add and delete a test user', () => {
cy.visit('https://testbox.zoonou.com/table-page.html')
cy.get('#addUserBtn').click()
cy.get('#tableResult')
.should('be.visible')
.and('contain', 'Added new user')
cy.get('#userTable tbody tr').last().as('newUser')
cy.get('@newUser')
.find('td')
.eq(1)
.invoke('text')
.then((userName) => {
cy.get('@newUser')
.find('button')
.contains('Delete')
.click()
cy.get('#tableResult')
.should('be.visible')
.and('contain', `Deleted user`)
.and('contain', userName)
cy.get('#userTable tbody')
.should('not.contain', userName)
})
})
Task 7: Toggle Message Visibility Test
On the Dynamic Content page, create a test that toggles the message visibility multiple times and verifies its state after each toggle.
it('Confirm message visiblity', () => {
cy.visit('https://testbox.zoonou.com/dynamic-content-page.html')
cy.get('#toggleMessage').should('not.be.visible')
cy.get('#showHideBtn').click()
cy.get('#toggleMessage').should('be.visible')
cy.get('#showHideBtn').click()
cy.get('#toggleMessage').should('not.be.visible')
cy.get('#showHideBtn').click()
cy.get('#toggleMessage').should('be.visible')
})
Task 8: Cross-Page Navigation and State Test
Create a test that navigates through multiple pages, performs actions on each, and verifies that the state is maintained or updated correctly.
it('Visit pages and ensure state is maintained', () => {
// Start on the home page
cy.visit('https://testbox.zoonou.com/home-page.html')
// Navigate to the form page and submit a form
cy.contains('Form').click()
cy.get('#name').type('Test User')
cy.get('#email').type('test@example.com')
cy.get('#password').type('password123')
cy.get('#testForm').submit()
cy.get('#formResult').should('contain', 'Test User')
// Navigate to the table page and add a user
cy.contains('Table').click()
cy.get('#addUserBtn').click()
cy.get('#tableResult').should('contain', 'Added new user')
// Navigate to the dynamic content page and toggle the message
cy.contains('Dynamic').click()
cy.get('#showHideBtn').click()
cy.get('#toggleMessage').should('be.visible')
// Return to the table page and confirm added user is no longer present
cy.contains('Table').click()
cy.get('#userTable tbody tr').should('have.length.at.least', 3)
})
Task 9: Performance Test
Create a test that measures the load time of each page and ensures it's below a certain threshold.
const pages = ['https://testbox.zoonou.com/home-page.html', 'https://testbox.zoonou.com/form-page.html', 'https://testbox.zoonou.com/table-page.html', 'https://testbox.zoonou.com/dynamic-content-page.html', 'https://testbox.zoonou.com/tasks-page.html', 'https://testbox.zoonou.com/cypress-setup-tutorial.html']
pages.forEach((page) => {
it(`Iterate each page and confirm load ${page} in less than 1 second`, () => {
cy.visit(page, {
onBeforeLoad: (win) => {
win.performance.mark('start-loading')
},
onLoad: (win) => {
win.performance.mark('end-loading')
}
})
cy.window().then((win) => {
const startTime = win.performance.getEntriesByName('start-loading')[0].startTime
const endTime = win.performance.getEntriesByName('end-loading')[0].startTime
const loadTime = endTime - startTime
expect(loadTime).to.be.lessThan(1000) // 1 second in milliseconds
})
})
})
Task 10: Custom Command Test
Create a custom Cypress command to fill out the form, and then use it in a test to submit the form multiple times with different data.
it('Add a custom command and ensure it functions', () => {
cy.visit('https://testbox.zoonou.com/form-page.html')
const users = [
{ name: 'John Doe', email: 'john@example.com', password: 'pass1', color: 'red', interests: 'sports', gender: 'male' },
{ name: 'Jane Smith', email: 'jane@example.com', password: 'pass2', color: 'blue', interests: 'music', gender: 'female' },
{ name: 'Bob Johnson', email: 'bob@example.com', password: 'pass3', color: 'green', interests: 'reading', gender: 'other' }
]
users.forEach((user) => {
cy.fillForm(user.name, user.email, user.password, user.color, user.interests, user.gender)
cy.get('#formResult').should('contain', user.name).and('contain', user.email)
})
})