cypress not executing "then" portion - testing

Question

I am trying to write a custom cypress command but the code in my then portion is not executing. any help will be appreciated thanks
my command looks similar to this:
Cypress.Commands.add("ex", () => {
const links=[]
cy.get("*[class='link post']").each((link)=>{
links.push(link.href)
}).then(() => {
var i=0;
while (links[i]) {
cy.visit(link)
i++
}
})
})

Answer 1

There are a few things going on here we should step through.
In your each() block, link.href will return an undefined value, so when you get to your then method, you have no links in your array to visit. Instead of links.push(link.href), try links.push(links.attr('href') to grab the value of your href attribute.
In your then method, your while loop isn't the most efficient way of looping through your array (and it will most likely error out for you with an undefined value). You should instead use a .forEach(), like so:
links.forEach((link)=>{
cy.visit(link)
)
If you do not need to persist the links array, then your entire command can be majorly simplified:
Cypress.Commands.add("ex", () => {
cy.get("*[class='link post']")
.then((links) => {
links.each((link)=>{
cy.visit(link.attr('href'))
})
})
});

Answer 2

To add to Kerry's answer,
The parameter given to a .then() callback is a jQuery object, containing one or more elements found by cy.get(...)
To iterate over the elements, you need to de-structure the jQuery object with the spread operator,
Cypress.Commands.add("visitLinks", () => {
cy.get("*[class='link post']")
.then($links => { // $links is a jQuery wrapper
[...$links].forEach(link => { // link is a raw element
const url = link.getAttribute('href') // apply DOM method
cy.visit(url)
})
})
});
or if you want to use the Cypress iterator .each() instead of .then(),
Cypress.Commands.add("visitLinks", () => {
cy.get("*[class='link post']")
.each($link => { // jQuery wrapped element
const href = $link.attr('href') // apply jQuery method
cy.visit(href)
})
});
However
It's going to break.
cy.visit() navigates the page, which changes the DOM in the page, so on the 2nd iteration of .each(), Cypress sees things have changed and crashes (probably a "detached element" error).
You should separate the query (grabbing the links) from the action (visiting them).
Cypress.Commands.add("getLinks", () => {
const found = [];
cy.get("*[class='link post']")
.each($link => { // jQuery wrapped element
const href = $link.attr('href') // apply jQuery method
found.push(href)
})
.then(() => found) // wait until iteration finishes
// then return the array of links
});
Use it like this
cy.getLinks()
.then(links => {
links.forEach(link => cy.visit(link))
})