Cypress won't show an array contents into the console-CodePudding

I'm trying to add the titles of an iframe header into an array to then print the array with it's element into the console. The elements are added just fine, the problem is that the console is showing "Array[9]" instead of "[Home, Courses, ...]". Is there any way to show the elements rather than the object? This is the code:

    it("Get the elements from the header of the iframe and add them to an array", () => {

    cy.visit("https://www.rahulshettyacademy.com/AutomationPractice/")
    let headerArray = []
    cy.frameLoaded("#courses-iframe")
    cy.iframe("#courses-iframe").find(".nav-outer > .main-menu > .navbar-collapse > ul > li").each(($row, index, $rows) => {
        headerArray.push($row.text())
    })
        cy.log(headerArray)
})

And this is the console response:

And here is the console response

CodePudding user response：

cy.log() is not great for debugging purposes, the general form for messages is name (left column) and description (right column). Anything nested gets abbreviated.

Try stringifying

cy.log(JSON.stringify(headerArray))

or joining

cy.log(headerArray.join(', '))

or if you just want to debug use console

console.log(headerArray)

The other reason why cy.log() is not good for this, the code as shown will log an empty array.

The cy.log() takes value of headerArray before the commands run so you must use a .then()

const headerArray = []
cy.iframe("#courses-iframe").find(".nav-outer > .main-menu > .navbar-collapse > ul > li")
  .each(($row, index, $rows) => {
    headerArray.push($row.text())
  })
  .then(() => {
    cy.log(headerArray)
  })

CodePudding user response：

Thanks for your answer. I also came up with the idea of using .toString(). In that way i can show the contents in the same way as join do. Still, join is better because it separates all the contents of the array with coma properly, while toString doesn't do that.