Cypress - end() Method - GeeksforGeeks

The end() method in Cypress is used to terminate a chain of commands and reset the subject to undefined. This can be useful when we want to break the current command chain and start a new one without carrying over the previous subject.

Syntax:

cy.end()

Usage of end() Method

The end() method is helpful in scenarios where:

We want to stop chaining commands and reset the subject.
We want to avoid unintended interactions with the previously selected elements.

Arguments:

None. The end() method does not take any arguments.

Example 1: Breaking the Chain of Commands

In this example, we’ll use the end() method to break the chain of commands and start a new one.

HTML File (index.html)
Save this file in the root directory of our local server (e.g., localhost:3000).

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>End Method Example</title>
</head>
<body>
    <ul id="itemList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <button id="addItem">Add Item</button>

    <script>
        document.getElementById('addItem').addEventListener('click', function() {
            const newItem = document.createElement('li');
            newItem.textContent = 'New Item';
            document.getElementById('itemList').appendChild(newItem);
        });
    </script>
</body>
</html>

Cypress Test File (end_method_spec.js)
Save this file in the cypress/e2e folder (for Cypress v10 and above) or cypress/integration folder (for older versions).

JavaScript

describe('Example of using `end()` to break the command chain', () => {

  beforeEach(() => {
    // Visit the HTML file hosted on localhost
    cy.visit('http://localhost:3000');
  });

  it('should interact with the list and break the chain using `end()`', () => {
    // Select the list item
    cy.get('#itemList').find('li').should('have.length', 3);

    // Break the chain
    cy.end();

    // Start a new chain of commands to interact with the button
    cy.get('#addItem').click();

    // Verify that a new item was added to the list
    cy.get('#itemList').find('li').should('have.length', 4);
  });

});

Explanation of the Test:

HTML Structure: The HTML file contains an unordered list (ul) with three list items (li) and a button to add new items to the list.
Cypress Test:
- First, the test selects the list and asserts that it contains three items.
- Then, it uses cy.end() to break the chain.
- After that, a new command chain is started by selecting the button and simulating a click event.
- Finally, the test verifies that a new item was added to the list.

Output:

The test will visit the page, break the command chain using end(), and successfully add and verify a new list item.

Example 2: Resetting the Subject to Undefined

In this example, we demonstrate how end() can reset the subject and prevent unintentional command chaining.

HTML File (index.html)
Save this file in the root directory of our local server (e.g., localhost:3000).

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reset Subject Example</title>
</head>
<body>
    <div id="container">
        <p id="text">Hello, World!</p>
    </div>
</body>
</html>

Cypress Test File (end_method_reset_spec.js)
Save this file in the cypress/e2e folder (for Cypress v10 and above) or cypress/integration folder (for older versions).

JavaScript

describe('Resetting subject with `end()`', () => {

  beforeEach(() => {
    // Visit the HTML file hosted on localhost
    cy.visit('http://localhost:3000');
  });

  it('should reset the subject and prevent unintended chaining', () => {
    // Select the text element
    cy.get('#text').should('contain', 'Hello, World!');

    // Break the chain and reset the subject to undefined
    cy.end();

    // Try to chain a command, which should now start fresh
    cy.get('#container').should('exist');
  });

});

Explanation of the Test:

HTML Structure: The HTML file contains a div element with an ID of container, which contains a paragraph (p) displaying the text "Hello, World!".
Cypress Test:
- The test starts by selecting the #text element and asserting that it contains the expected text.
- It then uses cy.end() to break the command chain and reset the subject.
- Afterward, a new chain is started by selecting the #container element and verifying its existence.

Output:

The test will run successfully, demonstrating that end() effectively resets the subject, preventing unintended chaining of commands.

Running the Test

Start the Local Server: Ensure that the local server is running and serving the index.html file at http://localhost:3000.
Open Cypress Test Runner: Run the following command in the terminal:
```
npx cypress open
```
Run the Test: Click on end_method_spec.js or end_method_reset_spec.js in the Cypress Test Runner to execute the test and view the results.

Conclusion

The end() method in Cypress is useful for breaking command chains and resetting the subject to undefined. This helps in preventing unintended chaining and allows us to start fresh with new commands. Although it is not commonly used, it can be beneficial when we want more control over the command flow in our tests.

Cypress - end() Method

Usage of end() Method

Arguments:

Example 1: Breaking the Chain of Commands

Explanation of the Test:

Output:

Example 2: Resetting the Subject to Undefined

Explanation of the Test:

Output:

Running the Test

Conclusion

Explore