How to Use Cypress in a Web Project

How to Test Buttons and Links with Cypress

Cypress is a powerful testing framework used for end-to-end testing in web applications. It's known for being fast, reliable, and developer-friendly.

In this guide, we’ll focus on testing two key UI elements:

• Buttons

• Links

Let’s break it down step by step.

---

🧪 Why Test Buttons and Links?

Buttons and links are essential parts of any user interface. You want to make sure:

• They are visible and clickable

• They navigate correctly

• They trigger the right actions

• They handle errors or loading states

Cypress makes it easy to automate and repeat these tests.

---

🚀 Setting Up Cypress

Before writing tests, make sure Cypress is installed:

npm install cypress --save-dev

To open Cypress test runner:

npx cypress open

Create your test file in:

cypress/e2e/button_link_test.cy.js

---

🔘 1. How to Test a Button

✅ Basic Button Test

describe('Button Tests', () => {
  it('should find and click the Submit button', () => {
    cy.visit('https://yourwebsite.com')
    cy.contains('Submit').should('be.visible').click()
  })
})

Explanation:

• cy.visit() opens your app

• cy.contains() finds the button by text

• should('be.visible') checks visibility

• .click() performs a click

---

✅ Button with ID

cy.get('#loginBtn').should('exist').click()

Finds a button with id="loginBtn" and clicks it.

---

✅ Button with Class

cy.get('.btn-primary').should('be.enabled').click()

Checks if button is enabled and clicks it.

---

✅ Check Button Action

cy.get('#saveBtn').click()
cy.contains('Saved successfully!').should('exist')

After clicking the button, check if success message appears.

---

✅ Disabled Button

cy.get('#submitBtn').should('be.disabled')

Confirms button is not clickable.

---

🔗 2. How to Test a Link

✅ Check Link Text and Navigation

it('should navigate to About page', () => {
  cy.visit('https://yourwebsite.com')
  cy.contains('About').click()
  cy.url().should('include', '/about')
})

• cy.contains('About') finds the link

• .click() simulates user click

• cy.url() checks if the URL changed

---

✅ Link with Specific Selector

cy.get('a[href="/contact"]').should('have.attr', 'href', '/contact').click()
cy.url().should('include', '/contact')

Confirms correct link path and navigation.

---

✅ External Link (opens in new tab)

cy.get('a[target="_blank"]').should('have.attr', 'href')

Note: Cypress doesn’t support new tabs, but you can test the link target and href.

---

🧪 Combine Button and Link Tests

Example: Login and Redirect

it('should log in and go to dashboard', () => {
  cy.visit('/login')

  cy.get('#username').type('testuser')
  cy.get('#password').type('password123')
  cy.get('#loginBtn').click()

  cy.url().should('include', '/dashboard')
  cy.contains('Welcome').should('be.visible')
})

Tests:

• Button click triggers login

• Redirects to the dashboard

• Shows welcome text

---

🔄 Waiting for Actions

Sometimes the page needs time to update. Use .should() or .wait():

cy.get('#loadDataBtn').click()
cy.get('.loading').should('exist')
cy.get('.loading').should('not.exist')
cy.contains('Data Loaded').should('be.visible')

---

⚠️ Testing Edge Cases

❌ Button Click with No Action

cy.get('#submitBtn').click()
cy.contains('Please fill the form').should('be.visible')

Make sure user errors are shown when expected.

---

🔁 Link that Refreshes or Reloads Page

cy.get('a[href="/refresh"]').click()
cy.reload()
cy.url().should('include', '/refresh')

Test links that reload the same route.

---

📂 Organize Tests in Folders

Structure:

cypress/
  e2e/
    buttons/
      login_button_test.cy.js
    links/
      homepage_links_test.cy.js

Use describe() blocks to group tests clearly.

---

⏳ Handling Slow Responses

Use timeouts if needed:

cy.get('#delayedBtn', { timeout: 10000 }).should('be.visible').click()

Waits up to 10 seconds before failing.

---

✅ Final Checklist

Test Action	Cypress Command Example
Check if button is visible	cy.get('#btn').should('be.visible')
Click a button	cy.get('#btn').click()
Check link destination	cy.get('a').should('have.attr', 'href')
Confirm redirection	cy.url().should('include', '/path')
Validate after-click message	cy.contains('Success')
Test external link	cy.get('a[target="_blank"]')

---

🔚 Conclusion

Testing buttons and links with Cypress is simple and powerful:

• Use cy.get() or cy.contains() to locate elements

• Use .click() to simulate user actions

• Use .should() to check visibility, URLs, and results

Well-tested buttons and links create a smoother, error-free user experience.

Learn Cypress Course in Hyderabad

Read More

What Is Mocha and Chai in Cypress? 

Understanding Cypress Commands – A Beginner’s Guide

Folder Structure in a Cypress Project