Router Matcher | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Working with APIs
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to utilize a router matcher for more precise API call interception in your application. Previously, we used a basic pattern with PsyIntercept , which required a method name, a URL, and a router handler. However, the router matcher allows for a more granular approach. Router Matcher Overview The router matcher is an object that provides additional parameters for matching URLs. Instead of relying solely on wildcards, you can configure the matcher to specify: Path or Path Name : Match specific URL paths. Query Parameters : Intercept requests based on specific query parameters. Headers : Filter requests by specific headers, such as security headers. Request Methods : Intercept only certain methods (e.g., PUT and PATCH ). Times : Control how many times a URL can be intercepted. Example Usage To implement the router matcher, you can replace the previous method of providing two arguments with an object containing various properties: { method: 'GET', url: 'your_url_pattern', pathName: 'tags' } This modification allows for the same functionality while enhancing specificity. Summary Using a router matcher enables more granular control over API request interception, allowing you to configure various properties for precise matching. This approach enhances the flexibility and effectiveness of your API testing.
Video Transcript
All right guys, let's continue and in this lesson I will show you how to use a router matcher to make a more granular match for the API call that you want to intercept for your application. All right, so let's jump into it. So previously in our lessons so far we were using this pattern for PsyIntercept. So we provided method name, we provided URL and the third argument was a router handler. So we either provided a mock response or we processed the request and response with the router, either to modify response and so on. But there is more granular approach how you can match the URL that you want to intercept from your API using the router matcher. So here is how you would use it. So router matcher, I clicking here on the documentation. So router matcher essentially is the object like this. And we were using pattern like this, first string of the method and the URL with the URL that we want to match. But you can provide the object and the router matcher object has a lot more parameters that you can configure to more granularly match exactly the URL or exactly the API call that you are looking for. And here is another example. For example, the router matcher object has just a path or path name property that you can use to match your URL instead of using the wildcards like we did before. Or you can match the particular query parameters out of the list of the multiple query parameters in your URL. Another example, you can match by the headers. For example, you won't intercept only a specific API that has a particular header, maybe it is a security header or some other header property that only those you want to intercept. That's another option. Also using the router request object, you can make expressions like this. For example, intercept all their requests for put and patch methods, but do not intercept all other methods for the similar URL pattern. And also a useful property will be like this times one. Now this property defines how many times you want to intercept a certain URL. Let's say on the first attempt, it will be intercepted and let's say a mock request will be provided. But if this URL called second time, then Cypress will not intercept it and let the request to go through. A full list of available options you can also find right here. So these are all available options. Auth, if you want to catch the base authorization request, headers, host name, HTTPS, is it a secure request or not secure request? Maybe you want to catch those. Path, path name, maybe a specific port request as a part of your API request. Maybe you want to intercept those. At times we already talked about it and URL property is to intercept the URL. So using router matcher, let's modify one of the requests that we have so far. For example, we have this first test, it only where we intercept the tags and point. Let me modify this to use a router matcher object. And it should work exactly the same way. So instead of two arguments we provided like this, I will put an object like this. And then inside of this object, I'm looking for method that should be a method. Get, and I want to match either URL. I can provide similar URL as we did. No, this is URL property. I can either provide the URL pattern like we did here with the wildcards. Or I can use a different property, which is path name like this. And I just can provide tags, and this is gonna work as well. So I will remove this thing, should work as it worked before. So here's the Cypress running the test, and here we go. The test passed successfully, we still see three tags loaded from the mock. So that's it, that's how it works, pretty simple. Now we have two object. Object number one is our router matcher, and object number two is the router handler, and we provide the response fixture. So let's quickly summarize. So if you want to make a more granular match for the API request that is performed by your browser, you can use a router matcher. And using a bunch of properties within this object, more granular configure the interception of your API and configure it like that. So that's it, guys, and I'll see you in the next lesson.