How to check if an element exists or not using Cypress?

Test Infrastructure & End-to-End Testing Cloud
How to check if an element
exists or not using Cypress?

Cypress is a tool that helps web developers and testers to make sure
their websites work properly. It can check if a certain part of the
website exists. This is helpful because it helps to catch problems
before users do. Element presence is one of the first things you should
test with Cypress in your project. In this article, we will look at how to
test if an element exists or not. Also, if it exists, how do you check
whether it is visible or not?.
What are Cypress Elements?
● Elements in web applications refer to individual HTML elements
that make up a web page’s structure and content.
● Examples of elements include buttons, text boxes, links, and
images, each with their own attributes like id, class, and style.
● These attributes can be used to interact with CSS or JavaScript
selectors.
● Elements are important because they define a page’s structure
and behavior.
● By selecting and interacting with elements, you can create
automated tests to ensure that the web application behaves as
expected for all users.

● In Cypress, elements are the HTML elements of your website
that you wish to interact with or test.
● To interact with or test these elements, simply select them using
a selector similar to CSS.
Why Element Existence Matters in
Cypress?
A website is like a puzzle with interactive pieces such as buttons and
forms. Testing involves ensuring that these pieces are in the correct
place and functioning properly. Checking if an element exists is
important because different parts of a website can change based on
user actions.
For instance, a “Submit” button may appear after filling out a form, so
it’s necessary to check if it showed up. This helps identify issues
before users encounter them, allowing for smoother experiences.

How to Verify the existence of an
element using Cypress?
Cypress provides several methods to verify the existence of elements
on a webpage. Let’s dive into each approach and understand how to
implement them effectively.
1. cy.get() Method
The cy.get() method in Cypress is used to select and retrieve elements
on the page based on various selectors such as class names, IDs,
attributes, and more. To verify if an element exists, developers can use
the should() command along with the cy.get() method.
Using the .should(‘exist’) assertion with cy.get() ensures that the
selected element is present on the page.

2. cy.contains() Method
The cy.contains() method is used to find an element based on its text
content. This method can also be utilized to check if an element with
specific text exists on the page.
3. cy.find() Method
The cy.find() method is useful when dealing with nested elements
within a parent element. It allows you to search for elements within
the context of another element, ensuring more focused searches.

4. cy.get().should() with Custom Assertions
Cypress enables developers to create custom assertions using the
cy.should() method. This is particularly useful when you want to
implement more specific checks beyond just element existence.
5. Using .should() with Timeout
Sometimes, elements might load asynchronously or with a slight
delay. In such cases, you can use the .should() assertion with a
timeout to ensure that Cypress waits for the element to appear.

Conditional Testing with Cypress:
Conditional testing in Cypress is the act of integrating conditional
logic into your test scripts to make decisions and perform actions
based on specific conditions or outcomes during the test execution.
This method enables you to design more flexible and adaptable tests
that can handle various scenarios and respond accordingly. Cypress
offers a range of commands and APIs that you can utilize to achieve
effective conditional testing. The following is an illustration of how
Cypress can be used for conditional testing.
Example -1

In this example, the test script visits a webpage and performs
conditional testing on an element’s existence as well as the title of the
page. Depending on whether the conditions are met or not, the script
logs corresponding messages to the Cypress testing runner’s output.
Cypress provides a fluent and intuitive syntax for performing
conditional testing within your test scripts. You can use assertions,
promises, and regular JavaScript logic to build complex conditions
and actions based on the results of those conditions.
Conditional testing in Cypress, similar to other testing frameworks,
helps you create more versatile and effective tests that can adapt to

different scenarios, making your testing process more robust and
reliable.
Example 2:
In this code snippet, Cypress first ensures the existence of the button
element using .should(‘exist’). It then retrieves the element using
.then(), and the subsequent conditional check determines whether the
button exists. If the condition is met, indicating the button’s presence,
Cypress clicks the button using cy.wrap(button).click(). If the condition
fails, the else block facilitates the execution of an alternative action.
Real-World Applications of Element Existence Checks:

Let’s think about some everyday situations where checking element
existence is super helpful:
1. Form Success Message
After users submit a form, a success message might appear. Using
Cypress, you can check if that message shows up, making sure users
know their form was submitted successfully.
2. Menu Navigation
You have a dropdown menu that appears when users hover over a
button. You want to confirm that the menu appears when users do
that hover action.
3. Responsive Design
Different elements might appear or disappear on mobile versus
desktop versions of your site. You can use Cypress to ensure that
these elements show up or hide as intended.
4. User Access Control

Certain buttons or links might only be visible to certain types of users.
Cypress helps you verify that these elements are shown to the right
people.
Conclusion:
Web testing is no longer a difficult and time-consuming task, thanks to
tools like Cypress. The “if element exists” capability encapsulates the
essence of conditional testing, enabling developers and testers to
craft tests that closely mimic real user interactions. This functionality
not only simplifies testing but also encourages a more thoughtful
approach to application behaviour. By leveraging Cypress’s intuitive
commands and powerful assertions, developers can streamline their
test suites, reduce redundancy, and build more robust web
applications. So, embrace the power of Cypress and embark on a
journey to elevate the quality of your web development projects.
Source: This blog was originally published at
https://testgrid.io/blog/how-to-check-if-an-element-exists-or-not-using-
cypress/

How to check if an element exists or not using Cypress?

More Related Content

Similar to How to check if an element exists or not using Cypress? (20)

More from ronikakashyap1 (18)

Recently uploaded (20)

How to check if an element exists or not using Cypress?