The console in Cypress does not display the contents of an array

Currently, I am attempting to store the titles of an iframe header in an array and then display the array with its elements in the console. Although the elements are being added successfully, there is a problem where the console shows "Array[9]" instead of "[Home, Courses, ...]". Is there a way to display the elements rather than the object? Below is the code snippet:

    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)
})

Here is the response shown in the console:

Console Response Screenshot

javascriptarraysautomationcypress

Answer №1

cy.log() may not be the best tool for debugging, since it only displays basic information in a limited format. It's recommended to format messages with a "name" and "description" structure when using logging functions. Any nested content will be condensed or abbreviated.

Consider either stringifying the data:

cy.log(JSON.stringify(headerArray))

or joining the elements:

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

If you simply need to debug, using console.log() is a better alternative:

console.log(headerArray)

Another drawback of using cy.log() in this scenario is that it might output an empty array.

The reason behind this behavior is that cy.log() captures the state of headerArray before any commands are executed, necessitating the use of .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)
  })

Answer №2

Thank you for providing your insight. I also considered utilizing the .toString() method to display the contents similarly to how join does. However, join proves to be more efficient as it correctly separates all elements of the array with commas, unlike toString.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which is better: PHP array string or var string?

I've been working with strings in PHP to develop my own framework... There's something that has me curious. $var = "hello!"; $arr = array("h","e","l","l","o","!"); Could someone clarify which one ($var or $arr) consumes more memory and why? I ...

phparraysstringvar

AngularJS - Oops! Looks like we encountered an error: [$injector:modulerr]

I have a client-server application and I am facing an issue with this error message: "Uncaught Error: [$injector:modulerr]". Despite searching for solutions, none of them seem to be fixing the problem. Here is my client-side code: angular.module('m ...

javascriptangularjshtmlsocket.io

Measuring JSON data with PHP through asynchronous requests

Looking to retrieve a specific count from a json dataset. Here is an example json format: { "tickets": [ { "url": "https://asd.zendesk.com/api/v2/tickets/1.json", "id": 1, "external_id": null, "via": { "channel": "sa ...

javascriptphpjsonajax

jQuery functions perfectly in console but fails to execute when the website is loaded

Below is the code that works perfectly in the console: jQuery(".cf7_wrap_com li").each(function(){ jQuery(this).find(".first_univer input").click(function(){ var label1 = jQuery(this).parent().find("label").html(); if( ...

javascriptjqueryhtml

(pinia, vuex) I am having trouble accessing states and getters in main.js. What could be the reason for this issue?

Issue Resolved While the answer provided by @Po Wen Chen below was somewhat helpful, it didn't fully meet my requirements. Although data in proxy form continued to flow, the conditions were being met. The main issue was that every time the page was r ...

javascriptvue.jsvuexpinia

Issue with animation transition not triggering on initial click

I am currently working on creating an animation for a form using JS and CSS. Here is the code snippet I have: var userInput = document.getElementById("login-user"); var userLabel = document.getElementById("user-label"); // User Label Functions funct ...

javascripthtmlcss

Instructions for including a sentence in an array as a single element with the split method

I have a string and I want to turn it into an array by splitting it into individual elements. For example: let str = "add 2017-04-25 2 USD Jogurt" str.split(" "); ["add", "2017-04-25", "2", "USD", ...

javascriptarrayssplit

Ensure that the pattern meets the regular expression criteria

Must consist of at least 3 characters in lowercase, with a maximum of 2 numbers and no special characters allowed. I attempted to use ^[a-zA-Z0-9]*$ but I couldn't restrict the number of numbers used. Could someone provide assistance, please? ...

javascriptreactjsregexfrontend

Why isn't my asynchronous Jest test throwing the expected failure?

I am facing an issue while testing asynchronous actions using Jest. Currently, my test is passing when it should actually fail. describe('Asynchronous Code', () => { it('should execute promise', () => { console.log(1); ...

javascriptasynchronouses6-promisejestjs

My browser is being overwhelmed by jQuery's each() function while trying to manipulate a large set of elements. How can I optimize my code to reduce the strain on my browser

Currently, I am utilizing two custom plugins to identify and style all the radio/checkbox inputs and select boxes within a form. The issue arises when dealing with a large form that contains numerous checkboxes, causing Firefox to stall as the plugin atte ...

javascriptjqueryperformance

SCRAM-SERVER-FIRST-MESSAGE: The client's password is required to be in string format

After researching documentation from various sources on a similar issue, I have not been successful in resolving this specific error within my code. throw new Error('SASL: SCRAM-SERVER-FIRST-MESSAGE: client password must be a string') ^ ...

javascriptnode.jsexpresssequelize.js

Unable to see my Vue component within Laravel

My Vue component is not appearing on the screen and I am unable to identify the issue. I have checked my console for errors and I am using npm run hot Here is my app.js file: require('./bootstrap'); window.Vue = require('vue').default ...

javascriptlaravelvue.jsvue-component

Combine all elements into a single array using the map method in JavaScript

In my possession, I have an array of objects with IDs and names: [ { "id": 10, "name": "comedy" }, { "id": 12, "name": "documentary" }, { ...

javascriptarraysmaps

Updating lists using PHP and Ajax: a dynamic approach

I am currently using a chat service that relies on polling every 20 seconds for new user data in the chat room. I am looking to improve this process by only downloading information for new users who have just joined, rather than re-downloading old data f ...

javascriptphpmysqlajax

"Compilation error: 'not defined' is not recognized, 'no-undef

I am currently working on a login form that will fetch values from this API: However, the password field is currently empty, allowing any password to be accepted. This results in the error: Failed to compile 'userName' is not defined no-undef; ...

javascriptjsonreactjsapi

Come back with the database date and time

Within my database, I am using a date field. An example entry in this field is 12.12.2012. When executing a request in the database, for instance: "Select date From Date" => The result is 12.12.2012. The output I receive is 12.12.2012. I am utilizin ...

javascriptsqlnode.jspostgresql

I'm having trouble getting rid of this stubborn loader on the website

I am currently utilizing the following template: . My objective is to eliminate the preloader progress bar that displays the loading progress of the page in percentage. The files associated with this preloader are as follows: Loader CSS File - www[dot]the ...

javascripthtmlcsshtml5-canvas

Ways to verify that express middleware triggers an error when calling next(error)

I attempted to capture the error by using next() when stubbing it, but unfortunately it did not work. Below is the function: async getUser (req, res, next) { try { if (!req.user) { throw new CustomError('User not found', 404) } ...

javascriptunit-testingexpresschaisinon

After adding Angularjs code to my webpage, I am encountering an issue where I am unable to use the right-click function

I've been putting together a mock website to showcase my ideas, utilizing a blend of HTML5, Bootstrap, and AngularJS. Everything was smooth sailing until I introduced some AngularJS code - suddenly, the right-click menu ceased to function in Chrome. ...

javascriptangularjs

Accessing a specific value using two separate arrays in SQL: one containing names and the other containing values

Here are two columns I am working with: names: Array(String) ['name_one','name_2','name3'] values:Array(Float64) [1000,2000,3000] I need to retrieve the value of 'name_2', which is 2000. To do this, I plan on first ...

sqlarraysjsonclickhouse