Verifying Sortable Tables with Cypress

Learn how to sort and verify tables with Cypress 

The HTML table element is a great web old way to showcase data structures using rows and columns. 

As we can all imagine, it becomes incredibly critical to make sure we’re showcasing our data, whether it’s health data or financial data, exactly in the way that it was intended to be shown. 

While this isn’t as complex when dealing with a static table, imagine trying to make sure that all the rows and the columns are actually acting appropriately when you’re trying to sort that data. 

Manually Testing Tables with Cypress Code 

We need to make sure that not only does that static data showcase the rows in the exact way that it was intended, so that each value corresponds to that row; but after the sorting action happens, that those values are still sorted together in the exact same rows. 

To do this in traditional code-only testing solutions, we need to really manually define all of our data and make sure that once that table’s displayed that it’s loading as it expects it to.

Since at that point, we can really hook into things like loops, we have the ability to cut down on some of that weight of that code. But we still have to be very manual in that process where we’re defining that data that we want to test. We also need to go through and test a bunch of different instances for how that data is actually being shown. 

On top of that, we also need to make sure that each time we try sorting it, that it’s actually sorting it the way it’s supposed to and that the integrity of that data isn’t compromised. But this ultimately means that anytime that we want to make changes to our table, we need to come here and update the different rows and columns or just simply how the sorting mechanism is working for our particular table solution. 

Using Applitools Eyes SDK to Test Tables with Cypress

Instead of defining all this table data manually, we can get rid of all those different fixtures, and we can use visual testing to make sure that we can maintain the integrity of our tables.

In order to do this, we’re going to use Applitools. In particular, we’re going to use the Applitools Eyes SDK for Cypress, which allows us to install a simple npm package, run the setup command, and we’re really off running where we can easily create new snapshots and compare them using existing Cypress tests. 

To do this, I can start off by running the npm install command for the Applitools Eye’s Cypress package — npm i -D @applitools/eyes-cypress. And once it’s finished installing, I can run npx eyes-setup, where we can see that our Eyes-Cypress package went through and set up any plugins, commands, and even some TypeScript settings if we want. 

We can see that right inside of our plugins file, where at the bottom we have a new require statement for eyes-cypress. So, instead of this loop, we can remove it and we can say cy.eyesOpen, where we can pass in a configuration object, where we define a batchName of “Table”. And let’s call our testName
‘Default”.

Now, once Applitools knows that it’s listening for events, we can say cy.eyesCheckWindow.  Finally, we can say cy.eyesClose. 

Inside of our terminal, we’re going to need to define our API Key, so Applitools Eyes knows which account to associate it with. We can run the export APPLITOOLS_API_KEY command where we’re going to define our “key”. 

Now that we have our environment variable set, we can simply run our cy:open command.  When we run our test, it doesn’t look like much inside of the Cypress UI. We can see that our eyes went through, and it opened with our configuration, it checked our window, and it finally closed.

But, if we go inside of our Applitools account, we can see that we have our Table test. If we open these instances, we can see exactly our table there. And we can see all our table data, exactly how it looked inside of Cypress. 

Now, again, this isn’t much. This is just a screenshot; but here we’re creating a baseline so that our featured tests can run against this image.

If we run this test again, we can see it go through the same exact process. But now we can see that we have a new test where it passes because our snapshot is the same as our baseline.

Viewing Table Errors with Applitools Eyes SDK for Cypress

This works great when things are correct, but how would we test if our table data wasn’t showing up as expected? 

So, in this instance, I’m finding each td inside of our table, which is the first column. And it’s going to say, it’s going to remove that element for each of those rows. 

When our test runs, we can see that it does exactly that — it removes the first column. Once the test finishes, we can see that we see an error and we also get a notice from Applitools to check the console.

Inside, when we select our new test, we can click inside of one of our cells and we can see a highlight of everywhere where we’re seeing an issue. Even better, if we want to see where this issue is happening, we can click on the Code View where we can click on an element inside of our page and we can see the root analysis of what actually is happening inside of our code. 

Now, we don’t want this change to be our new baseline. So, we can reject this change as well as any of the other ones that get tested, which will make sure that our baseline stays exactly how we want it with the correct test. 

But realistically, if we look back at that snapshot, not only are we testing that that table data is working, but we’re also testing that everything inside of that table is working including the header.

So, while before with our manual tests, we both had a test where we checked if the table headers loaded generally, we also had a separate one that tested if the table data loaded. We can remove that test. And we can say that we only want this test to check that we verify that the table data and the headers load.

Testing Sortable Tables with Applitools Eyes SDK for Cypress

Moving on to the next test, we also want to check that when we try to sort the table, that it’s going to actually work. Before, we check the table once with all of our fixture data, we click the column sort, and we also check the data again to make sure that it was sorted properly. 

By using Applitools, we can paste in that same snippet where we’re going to run eyesOpen, but this time let’s call the testName “Ascending”. 

Now, before we click the sort, we’re going to run cy.eyesCheckWindow. This time we’re going to pass in a tag of “Before Sort” so that we can distinguish between that and the one after. Again, instead of this snippet where we run manually, we can run our checkWindow and we can say “After Sort”, where we can finally run cy.eyesClose.

Once it’s finished running, we can see that it goes through and does a similar thing as before where it opens up the eyes, it checks the windows. But this time we run that click command which sorts our table, and we run another eyesCheck. 

Back in our dashboard, we can see our new tests. We now have 4 tests where we can see that we have those new Ascending tests that are working. It goes inside, it checks the table, and then it also goes through and checks after the sort. We also have our original test where we have our default where it’s just the one single page and it’s still checking that table data initially.

Now, the great thing is we can do that exact same thing with all our other tests where we can check that it’s descending by doing 2 clicks. And we can check that it goes back to unsorted with 3 clicks.

They ultimately all go through and run the checks, as well as running the clicks inside of Cypress.

Back inside of Applitools, we can see that we have our new tests for each of our different types of sorting, and we have all our tests. We’re really only running a few things with snapshots that makes it easy to test the integrity of our table.

Summing It Up – Visual Testing of Tables with Cypress

In review, we want to make sure that we’re maintaining the integrity of our table. And while we can manually do that by creating fixtures and going through each and every row and column of our tables, we can instead use visual testing with Applitools Eyes.

We can run our eyesOpen, our eyesCheckWindow, as well as interacting with Cypress to get different parts of the flow, where we can easily test the integrity of our table and everything else on our page. 

If that check fails, we can see exactly what’s happening in a screenshot. If it passes, we get a nice green check and we can continue with our work.

Resources

• Git Repo – table.spec.js
• Applitools Kitchen – Testing Sortable Tables
• Applitools Eyes SDK for Cypress – Eyes-Cypress