.within() doesn't work when the initial node doesn't match the selector

[denis-domanskii]

Current behavior

I have the following test:

cy.contains('div', 'text1').within(() => {
    cy.get('change-text-button').click() // this button changes 'text1' to 'text2' inside the div
    cy.get('change-text-button').click() 
});

Before Cypress 12.0 it worked well, but now the second .get() returns timeout.

Desired behavior

I am expecting that .within() should permanently remember the element, and will work inside it until the element stops existing in the page DOM.

Test code to reproduce

See above.

Cypress Version

13.3.0

Node version

16.20

Operating System

macOS

Debug Logs

No response

Other

It looks like this problem is connected to your re-query functionality introduced in Cypress 12. Before this change you just remembered the node, but now it looks you recalculate it before each instruction. So, it obviously stop working in my case, because after first button click, changing the text used in cy.contains('div', 'text1') statement, this statement returns zero nodes, so second click is impossible.

I'd say it was a very controversial idea, even with as() command. I had to rewrite many tests, which relied to static behaviour. They looked like

cy.get('count').invoke('attr', 'value').as('count')
cy.get('increment-count-button').click()
cy.get('@count').then(count => {
    cy.get('count').invoke('attr', 'value').should('not.contain', count)
})

So, I wrote my custom command asValue() which wraps .as('alias', { type: 'static' }) introduced in 12.4.0 (#25173).

But .within() doesn't have such parameter, and the overall behaviour became unobvious.

[jennifer-shehane]

@denis-domanskii Changing the requerying of the commands solved several issues our users were experiencing, unfortunately this means that a small subset of our users did have to rewrite their tests to account for this new requerying behavior. You'll need to rewrite your tests in this case because we do intend to keep this behavior of requerying previous commands in order to stay current to the state of the DOM and avoid the 'detached DOM' issues.