Hidden Elements in Cypress
Last Updated :
04 Jul, 2024
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.
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>
// 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 outputConclusion
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.
Similar Reads
Cypress - not() Method The not() method in Cypress is used to exclude elements from a selection that match certain criteria or selectors. This method is particularly helpful when you want to interact with a group of elements but need to exclude specific ones that meet a condition. It provides a more refined control over e
4 min read
Cypress - within() Method The within() method in Cypress is used to scope the search for DOM elements within a specific element. It is helpful when you want to limit the scope of your Cypress commands (such as get(), find(), contains(), etc.) to a particular section of the DOM. This is especially useful when dealing with nes
3 min read
Cypress - window() Method The window() method allows you to retrieve the window object of the page, which represents the browser's window containing the DOM document. This object is crucial for accessing global variables, managing browser-level events, and manipulating the browser's environment during your tests.Usage of cyp
4 min read
Cypress - wait() Method The wait() method in Cypress pauses test execution for a specified amount of time or until certain conditions are met, such as waiting for network requests, elements to appear, or timers to complete. It is a useful tool for handling asynchronous actions and ensuring that tests are run in the correct
3 min read
Cypress - next() Method The next() method in Cypress allows you to select the immediately following sibling of a DOM element. This is useful when you want to interact with an element that comes directly after another in the DOM structure. It’s commonly used when navigating through lists, tables, forms, or any other HTML st
4 min read