Check out a free preview of the full Testing Web Apps with Cypress course

The "Should Test Method" Lesson is part of the full, Testing Web Apps with Cypress course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates alternative ways to use the should test method. It can be omitted when simply testing for existence since the selector failing to find an element in the DOM will also result in a failed test. The should method can be used in place of the contains method and be chained with other tests that are run on the same selector.


Transcript from the "Should Test Method" Lesson

>> One of the really great things about cypress though is not only we'll go look for these things but it turns out a lot of times when we're writing JavaScript we're doing stuff this asynchronous, right? Maybe we got to make some API calls so on and so forth.

So let's go ahead and let's make this something that will not happen. So we kind of say like there's no such thing as a form of two M's. So go ahead, you'll see that it's trying for a little bit, right, and it timed out after retrying for four seconds.

You can adjust this, it's a configuration. You can adjust it overall for cypress, you can adjust it on a per test at runtime so on and so forth. But the nice part is four seconds seems reasonable especially if you're running on localhost for your API to get back to you.

And if it's an API you don't control, we will talk about that. It's fine, but like four seconds, seems relatively good for any kind of animation that was going to happen. So it will continue trying to look for it or basically run that selector for about four seconds or whatever you decide it should be and then eventually, then it will give up.

So that's super, super interesting as well. The other thing that we're gonna learn about this is while not having any assertions counts as success, not finding something on the page counts as failure. So if it retries and it gives up, that is a failure case. So for instance, the should is super interesting if you want to say like, I should have this class or should have whatever, right?

There's a should but it should exist, right? If it fails to find it, that's a failure. You can just kind of go forward with that not necessarily have to worry about it. So here we can save it, it will still fail in the same way. All right expected to find that we get the same basic fact in there.

If you want to say that like the, the alternate like that you might want to do say that it should not exist. And that's exactly as you think it might be. Mark.
>> Was something like contains is there a good way to handle multiple languages or.
>> So with that you probably like you have access to all so the question was for something like 10s.

What if we were doing internationalization, or we have multiple languages so on, and so forth. With Cypress and we'll kind of explore this as we go through, you do have access to like the window object, the document object, the URL. So if that is maybe the language that the browser is set to or something along those lines, you can both set that and then verify it to make sure that okay, it should say Add item if they're in like, end us.

But if it's the browsers currently set to German, then we should see this other thing as well, right? So you can kind of control all those like some of that will matter what how you have implemented that internationalization, whether it's based on the language preferences of the browser.

Whether like you do it through local store or something along those lines. However the details of the implementation matter a lot around how you've implemented the feature itself, but you have access to everything in the browser from the window object to the document object to the URL bar.

So everything that you had access to implement that you have access to test it as well. The other quick thing that we should point out is like contains for instance that's just gonna look for the word Add Item somewhere, right? You can also chain these. So you could say that the Add Item should only be in the form or something along those lines.

You can also jQuery has a find method which says go find this one thing. And then within that element go find through as children go find another one so you can scope these a little bit better, as well. And you can also say like in your assertion. You can also assert that a given element that you found with its selector has a text or in the case of input field value, you can look for actual markup, so on and so forth, right?

And so the other thing to point out here is if you were worried, about the fact that the should take a series of strings, and you're like, how am I ever going to get autocomplete? I'm not memorizing that. You don't have to that's what that reference above is this pulling the type script definition as well and doing that.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now