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