Introduction
So, you’ve embarked on your coding journey, and you’ve heard about the magical world of Cypress for E2E testing. But where do you start? Fear not, fellow developer, for we’re here to walk you through common Cypress test examples, cases, and ideas in a way that’s as exciting as discovering a hidden treasure map in your codebase.
Are you new to Cypress? Learn how to set up Cypress testing for your project.
Unpacking Cypress Magic
Before we dive into the wonderful world of Cypress tests, let’s address the elephant in the room: why do we even need E2E tests? Imagine your web application is a labyrinth, and your users are intrepid adventurers navigating it. E2E tests are your trusty guides, making sure your users don’t fall into traps or get lost in the maze.
End-to-end tests are like Gandalfs that guide your users safely through your web app!
Login Test Example
it("Login Test", () => { // Visits a specific URL cy.visit("/login"); // Find input of certain type and type in text cy.get('[type="email"]').type('john.doe@example.com'); // Find button with certain text and click it cy.get("button").contains("Login").click(); // Check whether the new URL contains certain text (e.g. after successful login) cy.url().should("include", "/dashboard"); // Find button with certain `data-test` attribute and click it cy.get('[data-test="test-button"]').click(); });
cy.click()
: Simulates a click on the selected element, triggering any associated eventscy.contains(text)
: Selects an element that contains the specified text, making it useful for locating elements with specific contentcy.get(selector)
: Selects and targets a DOM element based on its CSS selector, allowing you to interact with itcy.should('condition')
: Asserts that the currently selected element or elements meet the specified condition, such as ‘be.visible’, ‘contain’, or ‘have.attr’cy.type(text)
: Types the specified text into the currently selected input field or textareacy.url()
: Retrieves the current URL of the page, enabling you to check if the navigation worked as expectedcy.visit(url)
: Navigates to the specified URL, allowing you to start your test on a particular page
Element Count Example
it("Counting Div", () => { // Expects 10 divs with class `app` cy.get('div.app').should(($div) => { expect($div).to.have.length(10); }); });
cy.expect()
: Asserts that a value meets a certain condition
Image URL Test Example
it("Testing Image URL is Valid", () => { const url = '/img/image.jpg'; cy.request({ encoding: 'base64', url }).should(($response) => { expect($response.status).to.eq(200); const mime = $response.headers['content-type']; expect(mime).to.eq('image/webp'); const base64Content = $response.body; const imageDataUrl = `data:${mime};base64,${base64Content}`; const img = new Image(); img.src = imageDataUrl; img.onload = () => { // Expects width of image to be 1024px expect(img.naturalWidth).to.eq(1024); }; }); }); it("Testing Image URL is invalid", () => { const url = '/img/not-an-image.jpg'; cy.request({ failOnStatusCode: false, url }).should(($response) => { expect($response.status).to.eq(404); }); });
cy.request(url)
: Makes an HTTP request
More Cypress Test Commands
Here are some more Cypress test commands that you may find useful:
cy.blur()
: Blurs a focused DOM elementcy.check()
: Checks a checkboxcy.clear()
: Clears the value of a DOM elementcy.debug()
: Opens a debugger to inspect the current state of the applicationcy.exec(command)
: Executes a shell command on your local system, often used for setting up or tearing down test datacy.fixture(filename)
: Load a fixture filecy.focus()
: Focuses a DOM elementcy.go()
: Navigates to the previous or next page in the browser historycy.intercept(route, handler)
: Intercepts and stubs network requests, which is useful for testing API calls and responsescy.reload()
: Reloads the current pagecy.scrollTo()
: Scrolls to a specific element on the pagecy.select()
: Selects an option from a dropdown menucy.uncheck()
: Unchecks a checkboxcy.wait(time)
: Waits for a specific condition to be metcy.wrap(subject)
: Wraps an object so that it can be chained with Cypress commands
Helpful Tips:
Here are some helpful tips for writing Cypress tests:
- Use descriptive test names: This will make your tests easier to understand and maintain.
- Organize your tests into logical groups: This will help you to keep your tests organized and easy to find.
- Use fixtures to store common data: This will help you to avoid repeating yourself in your tests.
- Use assertions to verify that your tests are passing: Assertions allow you to test the expected behavior of your application.
- Use screenshots and videos to capture failures: This will help you to debug your tests and identify the root cause of failures.
Conclusion
Cypress is a powerful and easy-to-use testing automation framework. By following the tips in this article, you can write Cypress tests that will help you to ensure the quality of your applications.