Writing Your First Test in Cypress

Estimated reading: 3 minutes 239 views

With Cypress installed and set up, it’s time to write your first test. This guide will walk you through creating a basic test to validate that Cypress is correctly configured and running. Writing tests in Cypress is intuitive and straightforward. Here’s an example of a basic test:

Writing a Cypress Test

Here’s an example test that checks if the login page loads correctly when the icon is clicked from the Home screen.

Create a New Test File

Create a new file in the cypress/e2e/home directory. In this example we’re going to create a new test file called home.cy.js. This file is going to house all of our scenarios related the Home page.

home.cy.js

describe('Home Screen', () => {
  it('should navigate to the login page when the login icon is clicked', () => {
    const kicksAppsUrl = 'https://jahmalrichard.github.io/kicks-flutter-web-app/';
    cy.viewport(1920, 1080); // Set the viewport to a standard desktop size
    cy.visit(kicksAppsUrl); // Load the web application
    cy.get('flt-semantics[aria-label="login-icon"]')
      .should('be.visible').click(); // Locate and click the login icon
    cy.get('flt-semantics[aria-label="Sign In"]')
      .should('exist'); // Verify navigation to the login page
  });
});

In this example, the describe block is used to group tests related to the Home Screen. Inside the it block, we have a single test case that checks whether the application correctly navigates to the login page when the login icon is clicked.

Test Setup: The first step in the test is setting up the viewport size to 1920x1080 pixels. This ensures the test runs in a simulated screen size that closely mirrors a typical desktop display. This is optional.
Visiting the Application URL: The next step involves visiting the specific URL of the web application. This is done using cy.visit(kicksAppsUrl);, where kicksAppsUrl is a variable holding our application's URL.
Interacting the Login Icon: Once the page is loaded, the test uses cy.get to locate the login icon on the page. This element is identified using a semantic label aria-label="login-icon" within the flt-semantics tag. The should('be.visible') command ensures that the icon is visible before attempting to click it. This step is critical as it validates that the icon is correctly displayed on the page before any action is performed.
Asserting the URL Path: The test asserts that the URL now contains the /sign-in path using cy.url().should('include', '/sign-in'). This check ensures that the application navigates to the correct page after the icon is clicked.
Verifying Navigation to the Login Page: After clicking the login icon, the test checks whether the application has navigated to the login page by looking for an element with the aria-label="Sign In". The should('exist') command is used here to confirm that this element is present in the DOM, which indicates successful navigation.

Run Your Test

Open Cypress Test Runner if it’s not already open

Run Test

npx cypress open

Select your test file home.cy.js from the Test Runner to execute it. You should see your test running in the browser, with all assertions passing.

Conclusion

You’ve written and executed your first Cypress test. This basic test demonstrates how to visit a page, interact with elements, and make assertions. In the next guide, we will delve into Setting Up A Reliable & Scalable Tests to better understand how to organize and manage your test suite effectively.

Tagged:
Cypress