I have the following code:
cy.get('input:checkbox').first().as('firstCheckbox').then(() => {
cy.get('@firstCheckbox').should('be.checked').click()
cy.get('.globalMessage-display > :nth-child(1) > .alert').should('be.visible')
cy.get('.globalMessage-display > :nth-child(1) > .alert').should('not.exist')
cy.get('@firstCheckbox').should('not.be.checked').click()
cy.get('.globalMessage-display > :nth-child(1) > .alert').should('be.visible')
cy.get('.globalMessage-display > :nth-child(1) > .alert').should('not.exist')
cy.get('@firstCheckbox').should('be.checked')
})
after cy.get('@firstCheckbox').should('be.checked').click() the checkbox is moved to the last index position instead of the first.
According to my understanding of aliases this should not matter, because I reference it with ('@') and it doesn't matter at which position it is. Unfortunately the next cy.get('@firstCheckbox') accesses the new first element and not the one I originally referenced. I can't figure it out from the documentation either.
where is the error?
https://docs.cypress.io/guides/core-concepts/variables-and-aliases
https://docs.cypress.io/api/commands/as
Update for @agoff:
it seems to work better with your code but there is a new problem I notice with the new code. if you uncheck the checkbox then the class is reloaded with js causing it to briefly disappear from the dom. After that it can't find it anymore and the test aborts. I also tried with reload but it can't find the element anymore. How to deal with this?
the checked checkbox class has the name custom-control-input ng-untouched ng-pristine ng-valid. after unchecking the class name changed to custom-control-input.ng-untouched.ng-valid.ng-dirty for a second and then the element is removed and reloaded to the DOM with with the class name custom-control-input ng-untouched ng-pristine ng-valid. the problem is here that the second cy.wrap($el) tries to find the element custom-control-input.ng-untouched.ng-valid.ng-dirty although the initial element with the class custom-control-input ng-untouched ng-pristine ng-valid was searched and found. that's something else I don't understand.
It happens if during the click event the app removes the input and appends a new one at the end. Then your alias is invalid, because it points to an element no longer in the DOM.
If I move the element within the click handler, your code works.
If I clone the element within the click handler, your code fails.
What to do?
Refresh your alias after the click()
cy.get('input:checkbox').first().as('myCheckbox').then(() => {
cy.get('@myCheckbox').should('be.checked').click()
.then(() => cy.get('input:checkbox').last().as('myCheckbox')) // it's last now!
cy.get('.globalMessage-display > :nth-child(1) > .alert').should('be.visible')
cy.get('.globalMessage-display > :nth-child(1) > .alert').should('not.exist')
cy.get('@myCheckbox').should('not.be.checked').click()
.then(() => cy.get('input:checkbox').last().as('myCheckbox'))
cy.get('.globalMessage-display > :nth-child(1) > .alert').should('be.visible')
cy.get('.globalMessage-display > :nth-child(1) > .alert').should('not.exist')
cy.get('@myCheckbox').should('be.checked')
})
The alias command has another trick as well.
If the element is cloned and replaced, the original element becomes detached from DOM.
The cy.get('@alias') detects detached elements and replays the original command to automatically refresh.
It doesn't work with .first() because the element changes position.
But if you use a data-cy attribute instead of .first(), your code will work.
cy.get('input:checkbox[data-cy="first-checkbox"]')
.as('myCheckbox').then(() => {
cy.get('@myCheckbox')
.should('be.checked').click() // cloned and moved to another position
...
cy.get('@myCheckbox') // detached by previous click
.should('not.be.checked').click() // so alias replays original get
// with [data-cy="first-checkbox"]
...
cy.get('@myCheckbox').should('be.checked') // as above
})
Here's the Cypress code that does it
let { subject, alias, command } = aliasObj
const resolveAlias = () => {
if ($dom.isElement(subject)) { // if this is a DOM element
const replay = () => {
cy.replayCommandsFrom(command)
return undefined
}
if ($dom.isDetached(subject)) { // is it detached?
subject = subject.filter((index, el) => $dom.isAttached(el)) // all detached?
if (!subject.length) {
return replay() // perform the replay
}
}
I think you are confusing and misusing aliases. When you use the .then(), you've already yielded the found element. So, instead of using the alias, you can reference the object directly (after wrapping it). I believe that something like this should fix your problem...
cy.get('input:checkbox').then(($el) => {
cy.wrap($el).should('be.checked').click()
.and('not.be.checked').click()
.and('be.checked')
})