Cypress - not() Method

Last Updated : 05 Sep, 2024

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 element selection, allowing you to focus only on the elements you want.

In this article, we are going to learn, not() method of Cypress in detail.

Usage of Cypress - not() Method

The not() method in cypress allows you to remove elements from a selection based on a specified condition. This can be useful in complex UI structures where you want to work with multiple elements but exclude specific ones.

Syntax

cy.get(selector).not(excludeSelector);

selector: A detail to select the elements.
excludeSelector: A CSS selector or condition to exclude specific elements from the selection.

Example 1: Excluding Elements from a List

HTML Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cypress not() Example - List</title>
</head>
<body>
    <ul id="itemsList">
        <li class="item">Item 1</li>
        <li class="item exclude">Item 2</li>
        <li class="item">Item 3</li>
        <li class="item exclude">Item 4</li>
        <li class="item">Item 5</li>
    </ul>
</body>
</html>

Cypress Test Code

JavaScript

describe('Cypress not() Method Example - List Items', () => {
    it('should select all list items except those with the class "exclude"', () => {
        cy.visit('http://localhost:3000'); // Adjust to your local environment
        cy.get('.item').not('.exclude').should('have.length', 3);
    });
});

Output

The test will visit the page and select all list items with the class item. The not('.exclude') method will exclude the list items with the class exclude (i.e., Item 2 and Item 4). The test asserts that three elements remain after excluding the ones with the exclude class.

Explanation

HTML Structure: The unordered list contains five list items, and two of them have the class exclude.
Test Strategy: We first select all items using cy.get('.item'), then apply the not() method to exclude those with the class exclude. The test asserts that three list items remain after exclusion.

Example 2: Excluding Disabled Buttons

HTML Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cypress not() Example - Buttons</title>
</head>
<body>
    <button class="btn">Button 1</button>
    <button class="btn" disabled>Button 2</button>
    <button class="btn">Button 3</button>
    <button class="btn" disabled>Button 4</button>
</body>
</html>

Cypress Test Code

JavaScript

describe('Cypress not() Method Example - Buttons', () => {
    it('should select all enabled buttons, excluding disabled ones', () => {
        cy.visit('http://localhost:3000'); // Adjust to your local environment
        cy.get('.btn').not('[disabled]').should('have.length', 2);
    });
});

Output

The test visits the page and selects all buttons with the class btn. The not('[disabled]') method will exclude any buttons that have the disabled attribute (i.e., Button 2 and Button 4). The test asserts that two buttons remain after excluding the disabled ones.

Explanation

HTML Structure: The HTML contains four buttons, two of which are disabled using the disabled attribute.
Test Strategy: The test selects all buttons using cy.get('.btn') and applies not('[disabled]') to exclude the disabled buttons. The test verifies that two enabled buttons remain.

Conclusion

The not() method is a versatile tool in Cypress that helps you exclude specific elements from a selection based on certain criteria. This method is highly useful in tests where you want to interact with most, but not all, elements matching a selector. By using not(), you can streamline your test logic and improve the clarity of your interactions with elements.

Cypress - not() Method

codersaksyevt

Improve

Article Tags :

Cypress - not() Method

Usage of Cypress - not() Method

Syntax

Example 1: Excluding Elements from a List

Output

Explanation

Example 2: Excluding Disabled Buttons

Output

Explanation

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?