URL Builder | Bondar Academy
Course: Playwright API Testing with TypeScript
Module: Building a Framework
Instructor: Artem Bondar
Lesson Summary
In this lesson, we developed a new method within our request handler to build API request URLs. The request URL consists of three components: URL , path , and parameters . Depending on the API request, parameters may or may not be required. Key Concepts The base URL can be read from an environment variable . We will create a method called getUrl to handle URL construction. Parameters will be formatted as key=value pairs in the URL. Method Implementation The getUrl method will: Create a constant URL using the built-in URL object in Node.js. Utilize string interpolation to combine the base URL and API path. Convert the URL object to a string for output. Handling Default Values We introduced a field called defaultBaseURL to manage default values for the base URL. The method will check if a custom base URL is provided; if not, it will use the default: this.defaultBaseURL ?? baseURL Appending Query Parameters To append query parameters, we will: Loop through the key-value pairs of the parameters. Use URLSearchParams.append() to add them to the URL. Finally, we converted getUrl to a private method that returns the constructed URL, ensuring it can be used internally within the request handler. In summary, we created a robust method for generating API request URLs, accommodating both default values and dynamic parameters.
Video Transcript
In this lesson, we will create a new method inside of our request handler that will be responsible for building API request URL. So remember, previously we talked about that request URL contains of three parameters, which is URL, path, and parameters of the URL. And sometimes, depends on your API request, you either need those parameters or do not need. And also for the API URL, it would be useful if we can read this base URL from some environment variable or something like this. So in test, we provide only path to the API and the variable for the API used automatically. And when we need to override this URL, we also would have this possibility. So let's jump into it. So here is our smoke test.spec.ts and Currently, we have three methods, URL, path, and params. And by the way, you can see that params we provide also in the form of the object, but the actual format of the URL is this one, limit equals to 10, and then ampersand, and then value equals, and then key equals to value. But we have this format. So we also will need to convert the format of the object into this kind of string format for the URL. And this new method will be responsible for that. All right, so let's start building this, and we will include this into our request builder. I will call this method getUrl. And what it's gonna do, I will create a new constant, const URL. It will be our final result, equals to, and I will use an object which is called URL. So this is a built-in object in Node.js that allows me to create customized URLs and manipulate different parameters of the URL. So very convenient. And now let's build our new URL. So I add interpolation vectix, then dollar sign, and first, let's call this base URL. That will be a first value, and the second will be this dot API path. So I'm basically reading the values of the fields that we pass into this class. And now let's just check how this method works. So I type console dot log, and then I call this URL, and I need to convert it to string. To string, because the type of this value is the URL type. I need to convert it to a string format. And to see how it works, just go back to the test, and I call this getUrl method, and let's execute. Executing this, and yeah, so far so good. You can see that based on these two values, URL and path, we have a resulted value is printed. Now let's add a second argument. So as I mentioned before, we would like to have a behavior when we can use a default value for our API, for example, reading environment variable. And if we need to override this value, we would like to call a URL method and override this value. So when this can be convenient. Sometimes in your API testing, you may use several APIs, several different APIs during the workflow, for example, calling May API for the main test, but to create a data precondition, you may call a completely different API that has a different URL. And for those kinds of scenarios, you want to override the default URL using a URL method calling a different API. So let's add this capability. And for that, inside of our request handler, I will create a new field, private default base URL, which will be also a string. And just temporarily, I will assign a value of this base URL. So let me take this URL as our base URL, and inside of the test, I will change this URL to something else. For example, I don't know, random URL, something like this. So when we provide this value, this value should be printed into the console. If we remove this value from the test like this and use only path, the value for the default base URL should be used, which is this one. So now how to implement this logic inside of the getURL method? There is actually a very simple and very elegant way. So inside of this expression, you can put just double question mark, then type this and default base URL, and that's it. So how this expression works is this way. So if the value of this base URL is null or undefined or not provided, then use this value. Otherwise, this value will be used. So if you provide the value for the base URL, it will be used as part of this expression and default base URL will be ignored. If this will be null or undefined, then this value will be used. All right, so let's test it. So currently, we have this random URL. I run it and look at this randomURL.com API articles. Okay, now I remove method URL, run it again. And now we have a default value of API URL switched automatically. Perfect. So our getURL is working and we only need to figure out the rest is these parameters. We need to convert them also into the values attaching to this URL. How can we do that? So for that, we're going to use this query params object and we will need to convert it to those key and value pairs as part of the string. So we need to loop through the values of key and value pairs and attach them to the string. For that, we can create a for loop. For and I create a constant of key and value pairs of. And JavaScript has a built-in interface object that has method entries. Here we go. So what this guy gonna do, it will convert our query params. It will convert our query params into array of objects with key and value pairs. And then we can do with this key and value pair whatever we need. Okay, so I do this. And now for each set of key and value pairs, we can call URL object with our URL searchparams.append. Here we go. And we can append key and value pair like this. So now this URL have to be updated with the query params that we pass from the test. Let's run it. And perfect. You see, we have a perfect format that we need. Articles, question mark, limit 10, offset zero. Let me add another query param, for example, foo bar, something like this. Run it again. And we can see that next parameter is added as a part of our URL. Then I remove this. And now we have a random URL is used with the parameters that we use inside of the test. So we covered all test cases and all scenarios. If we don't use URL, default URL is used. If we provide parameters, they are converted and appended to the part of our URL. So everything is working. So the only last thing is that we will use this get URL method not as part of the test. This will be a private method that's going to be used inside of request handler. So let's convert this method to be a private private get URL. And instead of console log, we will return this result. Return URL to string. So whenever we call get URL method inside of our request handler, for example, to create any API request, it will provide us a valid URL based on the entries that we provided inside of the test body. So that's the idea behind this method. All right, so let's quickly summarize what we did in this lesson. We created a new method called get URL. It will be private method for our request handler. This method built for us a new URL based on the parameters that we provided, URL, path, and parameters. If the URL inside of the test is not provided, the default value of base URL will be used and parameters provided in the form of key and value pairs converted to the string, appending those to the resulted URL. All right, that's it guys and see you in the next lesson.