Traverse through a list, perform actions and return back to the next item in list

Question

Is there a way I can traverse through the list, perform click again and then return to the same page again for the next item in list.

cy.get('#collaborators').next().children().each((items) => {
// Here I have to write code to access list element
 cy.log(cy.wrap(items))
}

Log gives me a structure like this and am not sure how to access it. Please help as I am new to cypress.

cy.get('#collaborators').next().children().each( (items,index)=>{
      cy.wrap(items[index]).click()
    }
    )

Having a code written like this, is causing DOM element to be detached although it goes to the next page.

var itemsCount = cy.get('#collaborators').next().children().its('length')

Not sure if I can loop over to get to each of the elements this way.

Each time you navigate back to your page with the anchors, the DOM may have changed and will lead to a 'detached from DOM' error. — jjhelguero, Sep 27 '22 at 15:07

score 0 · Answer 1 · answered Sep 27 '22 at 13:50

0

cy.children() enables you to select child elements and use the selector to filter them. In your case, to get the a tag element, you can do something like:

cy.wrap(items).children('a');

I am also new to cypress, but I believe you can access the href attribute with the invoke() command:

invoke() - https://docs.cypress.io/api/commands/invoke

Try something like this:

cy.wrap(items).children('a').invoke('attr', 'href')
        .then((url) => {
            cy.visit(url);
        });

answered Sep 27 '22 at 13:50

Eva-Anna Klugman

156
1
9

cy.get('#collaborators').next().children().each( (items,index)=>{ cy.wrap(items[index]).click() cy.go('back') } ) This is how am able to click.. However after click, DOM element is detached and I cannot find a way to traverse through the list again. – Anand Kiran Sep 27 '22 at 14:02
Sorry, didn't notice you needed to get back and click again. – Eva-Anna Klugman Sep 27 '22 at 18:18
I suggest you make a separate test for each list element, consisting of cy.visit() and click(). Also, a good idea may be to rethink your link selectors, to find not all of them, but each one exactly. – Eva-Anna Klugman Sep 27 '22 at 18:25

Fody · Answer 2 · 2022-09-27T21:23:06.500

If you evaluate the href attribute before starting the loop, you'll avoid the detached from DOM error.

Essentially, iterate over a string array not an element array.

cy.get('#collaborators').next()
  .find('a')                                  // find all <a> within the <ul>
  .then($els => [...$els].map((a) => a.href)) // extract the href
  .each(href => {                             // now iterate list of URL strings

    cy.visit(href)
    cy.pause()                                // substitute whatever test you need 
    cy.go('back')
  })

Clicking the link

If you prefer to click the link, extract the last part of the href and use it to find the link element inside the loop

cy.get('#collaborators').next()
  .find('a')                                    
  .then($els => [...$els].map((a) => a.href))   
  .each(href => {                              

    const slug = href.split('/')[3]
    cy.get('#collaborators').next().find(`a[href="/${slug}"]`).click()

    const title = slug.replace('~', '')
    cy.contains('h2', title)

    cy.go('back')
  })

Blocked a frame with origin "https://www.npmjs.com" from accessing a cross-origin frame. This is the error am getting.. not able to go back to the previous page. — Anand Kiran, Sep 28 '22 at 14:17

Traverse through a list, perform actions and return back to the next item in list

2 Answers2

Clicking the link

Linked