How to use values from DOM in cypress test?

Last Updated : 25 Sep, 2024

Ensuring that applications function correctly in web development is vital for providing a seamless user experience. Cypress has become a go-to testing framework for developers, offering powerful capabilities for end-to-end testing. One of the essential tasks in testing is validating the values displayed in the Document Object Model (DOM). This article will explore how to effectively use Cypress to extract and verify these values, helping you ensure that your web applications perform as intended. We will cover the setup process, writing tests, and interpreting results, equipping you with the knowledge to enhance your testing practices with Cypress.

Cypress Installation Guide

To Experience cypress on your system, follow these steps:

1. Prerequisites

Node.js is installed on your machine.

2. Installation

Open your terminal in vscode and navigate to your project directory.

Run the following command to install Cypress

npm install cypress@"Version"

3. Opening Cypress

After installation of Cypress, we can open Cypress for the first time with this command

npx cypress open

Set up Cypress for Automation

Step 1. Initialize Project

First, by running this command, check that you have a package .Json file in your project folder.

npm init -y

Step 2. Install Cypress

If you don’t have cypress installed, then install it with this command

npm install cypress@"Version"

Step 3. Open Cypress

open the Cypress Test Runner with:

npx cypress open

Step 4. Configuration

Cypress will automatically create a default configuration file cypress.json and necessary folders.

Folder Structure:

Example:

A simple HTML form with an input field and a button:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Form</title>
</head>
<body>
    <input type="text" id="username" value="testuser">
    <button id="submit">Submit</button>
    <p id="message">Hello, testuser!</p>
</body>
</html>

Here's how write a Cypress test to interact with and extract values from this DOM:

JavaScript

describe('DOM Value Extraction Test', () => {
    before(() => {
        cy.visit('/'); // This will go to http://127.0.0.1:8000/
    });

    it('should extract values from DOM elements and validate them', () => {
        cy.get('#username').invoke('val').should('equal', 'testuser');
        cy.get('#message').invoke('text').should('equal', 'Hello, testuser!');
        cy.get('#submit').click();
    });
});

Execute using :

http-server ./public -p 8000
npx cypress open

Output:

Conclusion:

In this article, we explored how to utilize Cypress to extract and validate values from the Document Object Model (DOM) effectively. By leveraging Cypress's powerful features, we can ensure that our web applications present accurate data to users, ultimately enhancing user experience and trust in our applications. We discussed the setup process, wrote comprehensive tests, and examined the results, highlighting the importance of thorough testing in modern web development. As you integrate these practices into your workflow, you'll be better equipped to identify issues early and deliver high-quality applications.