Cypress - jQuery

Cypress and jQuery

Cypress bundles jQuery and exposes its methods, allowing you to use jQuery for DOM traversal or manipulation when needed. While Cypress’s own commands (cy.get(), cy.contains(), etc.) are generally preferred for their retry-ability and integration with the test runner, understanding how jQuery interacts within Cypress can be beneficial.

Cypress’s cy.get('selector') command queries the DOM and yields a jQuery object. However, Cypress commands are asynchronous and are queued. Direct jQuery calls like $('selector') are synchronous and operate on the DOM as it is at that exact moment, without Cypress’s retry-ability.

Accessing jQuery in Cypress

• Subject of cy.get(): When cy.get() resolves, it yields a jQuery object. You can use .then() to work with this object directly.
• Cypress.$(): You can use Cypress.$('selector') to synchronously query the DOM using jQuery. This is useful for situations where you need immediate access and Cypress’s command queue is not involved (e.g., within custom utility functions or complex .then() callbacks).

Using jQuery Methods with .then()

Cypress commands are asynchronous and return promises (though this is mostly managed internally by Cypress). When you want to use jQuery methods on an element retrieved by Cypress (which itself is a jQuery object) and then perhaps use its return value, you often use the .then() command. Inside a .then() callback, the code executes synchronously.

For example, to get the text content of an element using jQuery’s .text() method:

describe('Tutorialspoint - jQuery Usage', () => {
    it('Should get text content using jQuery within .then()', () => {
        cy.visit('https://www.cypress.io'); // Example page

        cy.get('h1') // Gets the first h1 element, yields a jQuery object
            .first()
            .then(($h1Element) => {
                // $h1Element is the jQuery object yielded by cy.get().first()
                const textContent = $h1Element.text();
                cy.log('H1 Text:', textContent);
                expect(textContent).to.be.a('string').and.not.be.empty;
            });
    });
});

Note: For simply asserting text, Cypress offers more direct ways like cy.get('h1').first().should('have.text', 'Expected Text') or .invoke('text').should('eq', 'Expected Text'), which benefit from retry-ability.

Using Cypress.$()

Cypress.$() provides direct, synchronous access to jQuery. This can be useful for complex conditional logic or when working with elements outside the main Cypress command chain.

describe('Tutorialspoint - Cypress.$ Example', () => {
    it('Should use Cypress.$ to interact with elements', () => {
        cy.visit('https://example.cypress.io/commands/querying');

        cy.get('#query-btn').then(($button) => {
            // $button is a jQuery object from cy.get()
            // Let's say we want to find a sibling using Cypress.$ for demonstration
            const $sibling = Cypress.$($button).siblings('.query-list');

            if ($sibling.length > 0) {
                cy.log('Found sibling with class .query-list');
                expect($sibling.children().length).to.be.greaterThan(0);
            } else {
                cy.log('Sibling .query-list not found');
            }
        });
    });
});

Key Considerations

• Retry-ability: Standard Cypress commands (cy.get(), cy.click(), assertions) automatically retry until the element is found or the assertion passes (or times out). Direct jQuery operations ($(), Cypress.$()) do not have this built-in retry-ability. If an element doesn’t exist when Cypress.$() is called, it will return an empty jQuery collection immediately.
• When to Use jQuery: Prefer Cypress commands for most interactions and assertions. Use jQuery methods within .then() callbacks or Cypress.$() for specific synchronous manipulations, complex DOM traversals not easily expressed with Cypress commands, or when integrating with third-party libraries that expect jQuery objects.

Understanding this distinction helps write more robust and maintainable Cypress tests. When in doubt, favor Cypress’s built-in commands and assertions.