Updated on December 12, 2024

Writing your first Cypress test

Estimated reading: 4 minutes 17 views

Writing Your First Cypress Test

Now that Cypress is set up and ready to go, the next step is to write your first test. Cypress is designed to make writing and running tests straightforward, even for beginners. This article will guide you through the process of creating a simple test and running it using Cypress.

1. Creating Your First Test File

To begin, navigate to the cypress/integration/ directory in your project. Create a new file called firstTest.spec.js. This is where you will write your first Cypress test.

Once the file is created, open it in your preferred IDE (such as Visual Studio Code).

2. Basic Test Structure

A basic Cypress test consists of two key parts: describe and it blocks.

  • describe: Groups related tests together.
  • it: Defines an individual test case and describes the behavior you are testing.

Below is an example of a simple test that visits the Cypress website, clicks a link, and verifies the page content.

				
					// cypress/integration/firstTest.spec.js

describe('My First Cypress Test', () => {
  it('Visits the Cypress website', () => {
    cy.visit('https://www.cypress.io'); // Navigate to the Cypress homepage
    cy.contains('Getting Started').click(); // Find and click the "Getting Started" link
    cy.url().should('include', '/docs'); // Verify the URL includes "/docs"
    cy.get('h1').should('have.text', 'Cypress Documentation'); // Verify the heading text
  });
});

3. Understanding the Code

describe():

  • The describe block is used to group related tests. In this case, we’ve grouped a test about visiting the Cypress website.

it():

  • The it block defines an individual test. It describes the specific action or behavior the test will validate—in this case, visiting the website and verifying the content.

cy.visit():

  • The cy.visit() command tells Cypress to open the specified URL in the browser. Here, we are instructing Cypress to visit the Cypress homepage.

cy.contains():

  • This command searches for an element containing the specified text (“Getting Started” in this case) and clicks on it. Cypress will automatically locate this element and simulate a click.

cy.url().should():

  • This checks the URL of the current page. The .should('include', '/docs') assertion ensures that after clicking the link, the URL contains the /docs path.

cy.get():

  • The cy.get() command selects elements based on the provided CSS selector. Here, cy.get('h1') selects the first <h1> element on the page, and .should('have.text', 'Cypress Documentation') verifies that the text inside the <h1> element is “Cypress Documentation.”

4. Running Your Test

After writing your test, you can run it directly from your IDE. If you are using an IDE like Visual Studio Code, follow these steps:

  1. Open Cypress from Your IDE:

    • From the terminal integrated within your IDE, enter the following command to open Cypress:

				
					npx cypress open

  1. This will launch the Cypress Test Runner, which provides a graphical interface for running your tests.

  2. Run the Test:

    • In the Test Runner window, you will see a list of all the tests. Click on firstTest.spec.js to run your test.

    Cypress will open a browser window, visit the URL, click the link, and verify the heading. You will be able to see each step executed in real time.

5. Viewing Test Results

Cypress provides real-time feedback while running tests. As the test runs, you will see the browser navigate through the steps, from visiting the website to clicking the link and verifying the heading.

If the test passes, Cypress will display a green checkmark next to the test. If the test fails, Cypress will highlight the failed step and provide helpful error messages, which make debugging straightforward.

Conclusion

Writing and running your first Cypress test provides a foundation for developing more complex tests. In this article, you learned the basic structure of a Cypress test, how to interact with web elements, and how to verify page content using assertions. You also learned how to run the test directly from your IDE.

With this knowledge, you are now ready to expand your tests and explore more advanced features in Cypress. Future articles will cover how to handle different types of elements, manage dynamic content, and optimize your tests for better performance and reliability.

Leave a Comment

Share this Doc

Writing your first Cypress test

Or copy link

CONTENTS