Your First Cypress Test: Step-by-Step
Cypress is a powerful, modern testing framework used for end-to-end testing of web applications. It’s known for being fast, reliable, and easy to use—even for developers who are new to testing. If you're just starting with Cypress, this guide will walk you through setting up your first Cypress test from scratch.
What is Cypress?
Cypress is a JavaScript-based testing framework designed for modern web applications. Unlike traditional tools like Selenium, Cypress runs in the same execution loop as your application, giving it faster execution and better control over the browser.
Key features:
Real-time reloads
Time travel debugging
Automatic waiting (no need for manual wait statements)
In-browser test execution and recording
Step 1: Set Up Your Project
Before writing tests, you need to set up Cypress in your project.
Prerequisites:
Node.js and npm installed
A web application to test (you can use any site, even a demo one)
Steps:
Open your terminal and create a new project (if needed):
bash
mkdir my-cypress-test && cd my-cypress-test
npm init -y
Install Cypress:
bash
npm install cypress --save-dev
Open Cypress for the first time:
bash
Copy
Edit
npx cypress open
This will generate a default Cypress folder structure in your project, including a cypress folder with integration, fixtures, and support directories.
Step 2: Create Your First Test File
Navigate to the cypress/e2e (or cypress/integration in older versions) folder and create a new file named first_test.cy.js.
javascript
describe('My First Cypress Test', () => {
it('Visits the Example Site and Checks Title', () => {
cy.visit('https://example.cypress.io')
cy.title().should('include', 'Cypress')
})
})
Explanation:
describe() is used to group related tests.
it() defines an individual test.
cy.visit() opens a URL in the browser.
cy.title() checks the page title.
Step 3: Run the Test
If you used npx cypress open, a test runner will open in your browser. Click on first_test.cy.js to execute the test.
You’ll see:
A browser window controlled by Cypress
A visual display of commands being executed
A green check mark if the test passes
Alternatively, you can run it in headless mode:
bash
npx cypress run
Step 4: Add More Assertions
Let’s make the test more informative:
javascript
describe('Cypress Interaction Test', () => {
it('Searches on the Example Page', () => {
cy.visit('https://example.cypress.io')
cy.contains('type').click()
cy.url().should('include', '/commands/actions')
cy.get('.action-email')
.type('test@example.com')
.should('have.value', 'test@example.com')
})
})
What’s happening:
cy.contains() finds and clicks the "type" button.
cy.url() asserts the URL has changed.
cy.get() locates an input field and types into it.
should() verifies the typed value.
Step 5: Organize and Scale
Once you're comfortable with the basics:
Create separate folders for different test categories.
Use fixtures for test data.
Write custom commands in support/commands.js.
Conclusion
Cypress makes web testing intuitive, fast, and developer-friendly. With minimal setup and powerful features, you can start writing your first test in minutes. By following this step-by-step guide, you’ve now created a working Cypress test, interacted with a real web page, and made assertions—all without writing complex configurations. As you continue exploring, you’ll discover Cypress is not only beginner-friendly but also scalable for advanced testing workflows. Happy testing!
Learn Cypress Training
Read More: Installing and Setting Up Cypress Locally
Visit IHUB Talent Training Institute in Hyderabad
Get Direction
Comments
Post a Comment