How to deal with the content of a table view in Cypress

In A new journey of web automation, we talked about our very first experience with Cypress. After two months, our test suite has grown up to more than 200 tests！

In these 200 tests, we encounter a variety of testing scenarios. Thus, we have some practical implementations. Today, I’m going to share one of them.

In UI testing, a common testing scenario is to check the content of a table view.

Let’s image you have the following view and DOM structure.

We intend to check the text footer (ie. 31, 28 and 31). How do we get the DOM element? We can leverage command contains and find to achieve it.

Please be aware that you must specify a selector in this case. You should use contains('li', 'February') so that it will yield <li>. If you just use contains('February'), it will yield <div>. Besides that, only the first matched element will be returned.

With this implementation, the test script may look like this.

In addition, we may also use invoke and eq command to have a similar approach.

Actually, using invoke('index') allows us to have more assertions regarding the element of a table view. In case you need a thorough test, invoke is something you should know.

Cypress provides so many commands that we can leverage while composing our test script. With these commands, we can accomplish various testing scenarios.

There are still numerous possibilities of UI testing. We are going to dig them out!