Hidden Elements in Cypress - Coding

Cypress is an open-source website testing tool used to automate tests for JavaScript web applications. It is designed for end-to-end testing and can be used for unit and integration tests. It is fast, reliable, and can run directly in the browser in real time.

It’s built to work with any front-end framework or website, including React, Angular, and Vue. In this article, we will learn about Hidden Elements in Cypress.

Table of Content

Hidden Elements
Commands
Installation Steps
Conclusion
Frequently Asked Questions on Hidden Elements in Cypress

Hidden Elements

In cypress, an element is considered as hidden if it is not visible on the page. There are several reasons such as height and width is 0, the element’s CSS property being visibility: hidden, display: none, opacity:0 or position: fixed, and the element is offscreen or covered up, etc.. can be a reason of element hidden.

Before, we start note that Cypress uses a CSS selector to identify the element. You can target any element just like selecting an element for styling.

Commands

To identify if the element is hidden or not, we can use a .should(‘be.visible’) and .should(‘not.be.visible’) assertions.

//Asserts that the selected element is visible.
cy.get(‘#elementId’).should(‘be.visible’);

//Asserts that the selected element is not visible.
cy.get(‘#elementId’).should(‘not.be.visible’);

To make the element visible or hidden, we can use a Jquery method show and hide.

//Invokes the “show” method to make an element visible.
cy.get(‘#elementId’).invoke(‘show’);

Invokes the hide method to hide an element.
cy.get(‘#elementId’).invoke(‘hide’);

To perform any actions if the element is hidden, we can use a { force:true } option.

//Forces a click action on an element, even if it is not visible.
cy.get(‘#hiddenButton’).click({ force: true });

Installation Steps

Before we begin make sure node.js is installed in your system.

Step 1: Create a Project Folder and move to it by using following command.

mkdir cypress
cd cypress

Step 2: Initialize a project and Install Cypress.

npm init -y
npm install cypress –save-dev

Step 3: After Creating a Project, Run this command to start cypress.

npx cypress open

Step 4: Testing type, Configuration and creating a spec.

Choose a E2E Testing or Component Testing, then after quick configuration choose browser.
After that create a new spec then click on your spec name to open your spec in any IDE.

Step 5: Testing HTML File.

Create a HTML File and open it with any live server extension.
copy that live server file serve link, for later use.

Example

The below example demonstrate the testing ol Hidden Element.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hidden Elements Example</title>
    <style>
        #hiddenParagraph {
            display: none;
        }
        </style>
</head>
<body>
    <h1>Hidden Elements Testing</h1>
    <p id="hiddenParagraph">This is a hidden paragraph.</p>
</body>
</html>

JavaScript

// gfg.cy.js

describe('Hidden Elements Example', () => {
  it('should show the hidden paragraph after invoking the show method', () => {
      // Visit the HTML page
      cy.visit('http://127.0.0.1:5500/index.html');
      
      // Verify the hidden paragraph is initially hidden
      cy.get('#hiddenParagraph').should('not.be.visible');
      
      // Invoke show method to make a hidden element visible
      cy.get('#hiddenParagraph').invoke('show');
      
      // Verify the hidden paragraph is now visible
      cy.get('#hiddenParagraph').should('be.visible');
  });
});

Output

Cypress-Hidden-Element output

Conclusion

In conclusion, Cypress is an end-to-end automated testing tool that enables efficient and reliable testing of web applications. It includes interactions with Hidden elements. By following this article, you can test the visibility and interaction of hidden elements using different given commands. Cypress commands are easy-to-write that make it an ideal choice for automating the testing of elements and other web components.

Frequently Asked Questions on Hidden Elements in Cypress

What is Cypress?

Cypress is a end-to-end testing framework that allows you to write tests script that
interact with the application in a way that simulates user behavior.

How to test hidden elements with Cypress?

You can test the hidden element by first making it visible by using .invoke(‘show’) command
or using { force:true } in a options.

What does the invoke(‘show’) and invoke(‘hide’) command do?

invoke(‘show’) command makes the element visible if it’s hidden and
invoke(‘hide’) command makes the element hidden if it’s visible.

How to check if the element is visible or not?

To check if the element is visible or not you can use a .should(‘be.visible’)
or .should(‘not.be.visible’) assertion.

Reffered: https://www.geeksforgeeks.org

Software Testing

Related
What is Scripted Testing?
Root Causes for Software Defects and How to Overcome them?
Variables in Cypress
Getting Started with Cypress Test Automation
Alerts and Popups in Cypress

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	18