CODEWITHSUNDEEP
reactjstestingcypress
user2298581
user2298581

Reputation: 682

Cypress get length of a table dynamically

I'm trying to test the length of a react table.

In particular I would want that after a user add a new row to the table it's length would increase by one

In my code I can't extract the length value of the table and save it in the variable rowsLength so that it can be checked later, what am I doing wrong?

It seems rowsLength is an object not a number..

const rowsLength = cy.get(".MuiTableBody-root").find("tr").its("length");

cy.get("#addRowButton").click();//new tr inserted

cy.get(".MuiTableBody-root").find("tr").should("have.length", rowsLength + 1);

enter image description here

Upvotes: 0

Views: 2123

Answers (2)

user14783414
user14783414

Reputation:

Setting a global variable quite often will not work, because of the asynchronous nature of a web app. The docs refer to this as doing a backflip.

The most reliable way to handle this is either with a closure or with an alias.

Closures

To access what each Cypress command yields you use .then().

cy.get(".MuiTableBody-root").find("tr").its('length').then(intialLength => {

  // Code that uses initialLength is nested inside `.then()`

  cy.get("#addRowButton").click();
  cy.get(".MuiTableBody-root").find("tr").should("have.length", intialLength + 1);

})

Aliases

Allows you to separate the code that creates the variable from the code that uses it.

cy.get(".MuiTableBody-root").find("tr").its('length').as('intialLength');

cy.get("#addRowButton").click();

// other test code

cy.get('@intialLength').then(intialLength => {
  cy.get(".MuiTableBody-root").find("tr").should("have.length", intialLength + 1);
})

Why not a global variable?

Using a global variable is anti-pattern because it often creates a race condition between the test code and the queued commands.

By luck, your example will work most times because cy.get("#addRowButton").click() is a slow operation.

But if you want to test that the row count has not changed, then using a global variable will fail.

Try this

var intialLength = 0;
cy.get('table').find("tr").then((tr) => {
  intialLength = tr.length;
})

// Test that row count remains the same
cy.get('table').find("tr").should("have.length", intialLength);  
// fails because it runs before the variable is set

This is because the test code runs much faster than the .get() and .find() commands, which must access the DOM.

Although the above example is trivial, remember that web apps are inherently asynchronous and backflip tests can easily fail.

Upvotes: 2

Alapan Das
Alapan Das

Reputation: 18624

With find() you can do something like:

var tableLen = 0;
cy.get(".MuiTableBody-root").find("tr").then((tr) => {
    tableLen = tr.length,
})

and then:

cy.get("#addRowButton").click(); //new tr inserted
cy.get(".MuiTableBody-root").find("tr").should("have.length", tableLen + 1);

Upvotes: 0

Related Questions