when there are multiple elements in a class in within command,test is failing in version 12.3.0 . it is not the same case in 11 version

[Vikramedge]

Current behavior

CypressError: cy.within() can only be called on a single element. Your subject contained 3 elements. Narrow down your subject to a single element (using .first(), for example) before calling .within().

To run .within() over multiple subjects, use .each().

cy.get('div').each($div => {
cy.wrap($div).within(() => { ... })
})

Desired behavior

Within did recognized multiple elements and executed well in 11 version.

Test code to reproduce

it('Delete Saved button',()=>{ 
        const DELETE_BUTTON_POSITION = 3;                 
        cy.get('button').contains('span', 'Save').should('be.visible').click();        
        cy.get('[class^=class_name]').within(()=>{
        //there are 5-10 button in this class as soon as i upgraded to version 12 code started failing
            cy.get('button').each(($button, index) => {
                if ($button.text().includes('button_name')) { 
                    let delete_button = index + DELET_BUTTON_POSITION; 
                    cy.get('button').eq(delete_button).click();
                }
            })
        })
    });

Cypress Version

11.2.0

Node version

16.7.0

Operating System

Ubuntu 22.04

Debug Logs

No response

Other

No response

[nagash77]

Hi @Vikramedge , This is a change that was intentionally made in Cypress 12. See this PR for details - #24975

[Vikramedge]

Is there any alternative to the script. I need to access only few buttons which is present inside one class? Class might have 2 to 3 buttons.

cy.get('[class^=class_name]').within(()=>{
        //there are 5-10 button in this class as soon as i upgraded to version 12 code started failing
            cy.get('button').each(($button, index) => {
                if ($button.text().includes('button_name')) { 
                    let delete_button = index + DELET_BUTTON_POSITION; 
                    cy.get('button').eq(delete_button).click();
                }
            })

[chrisbreiding]

You should be able to accomplish the same thing without .within() like so:

cy.get('[class^=class_name] button').each(($button, index) => {
    if ($button.text().includes('button_name')) { 
        let delete_button = index + DELET_BUTTON_POSITION; 
        cy.get('button').eq(delete_button).click();
    }
})