What are the different ways Cypress can get multiple elements from a single element?

General Discussions
#1

I’m trying to test the contents of a popup/modal in cypress. My first intuition was to just repeat the command to get the modal element like so:

it(‘filter modal/popup’, () => { cy.get(‘.some-button’).click(); cy.get(‘.some-modal’).contains(‘abc’).should(‘be.visible’); cy.get(‘.some-modal’).contains(‘def’).should(‘be.visible’); cy.getByCyTag(‘.some-modal’).contains(‘xyz’).should(‘be.visible’); });

However, “being a programmer”, querying the ‘folder-tree-filter-modal’ three or even more times makes me a little uncomfortable. Since you can’t store cypress objects in variables because they yield their results, I tried using cypress’s then() promise based syntax, but that also doesn’t really look much better:

it(‘filter modal/popup’, () => { cy.get(‘.some-button’).click(); cy.get(‘.some-modal’).then((modal) => { cy.wrap(modal).should(‘be.visible’); cy.wrap(modal).contains(‘abc’).should(‘be.visible’); cy.wrap(modal).contains(‘def’).should(‘be.visible’); cy.wrap(modal).contains(‘xyz’).should(‘be.visible’); }); });

Can any one guide me if this is the right approach?

#2

To target elements within a modal or popup, you can use the .within() command in Cypress. This command restricts subsequent Cypress commands to search within the specified element.

For example, if you want to verify the visibility of specific text elements within a modal after clicking a button, you can use the following test:

it(‘filters the modal/popup’, () => { // Click the button to open the modal cy.get(‘.some-button’).click();

// Query elements within the modal
cy.get('.some-modal').within(() => {
    cy.contains('abc').should('be.visible');
    cy.contains('def').should('be.visible');
    cy.contains('xyz').should('be.visible');
});

});

#3

Using Variables: You can store the modal element in a variable and then use that variable to target elements within the modal. This approach can make the code more readable and reusable: it(‘filters the modal/popup’, () => { // Click the button to open the modal cy.get(‘.some-button’).click();

// Store the modal element in a variable
cy.get('.some-modal').as('modal');

// Query elements within the modal using the variable
cy.get('@modal').contains('abc').should('be.visible');
cy.get('@modal').contains('def').should('be.visible');
cy.get('@modal').contains('xyz').should('be.visible');

});

#4

Another way to handle targeting elements within a modal or popup in Cypress is by using the cy.wrap() command to wrap the modal element and then chaining the commands to target elements within it:

it(‘filters the modal/popup’, () => { // Click the button to open the modal cy.get(‘.some-button’).click();

// Wrap the modal element and query elements within it
cy.get('.some-modal').then((modal) => {
    cy.wrap(modal)
        .contains('abc').should('be.visible');
    cy.wrap(modal)
        .contains('def').should('be.visible');
    cy.wrap(modal)
        .contains('xyz').should('be.visible');
});

});

In this approach, the cy.wrap() command wraps the modal element, making it the subject of the subsequent Cypress commands. This allows you to target elements within the modal without using .within() or storing the modal in a variable.