Global Setup and Teardown | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Advanced Tricks and Techniques
Instructor: Artem Bondar
Lesson Summary
In this lesson, we discuss how to configure global setup and global teardown in a testing framework. These configurations allow certain code to run before and after the entire test suite executes. Key Concepts Global Setup: Code that runs before any tests, useful for initializing resources. Global Teardown: Code that runs after all tests, useful for cleaning up resources. Project Update We updated a regression project to exclude the likes-counter.spec.ts file, which depends on the article setup. Instead, we created a new spec file, likes-counter-global.spec.ts , that relies on global setup and teardown. Configuration Steps Create a new file for global setup: global-setup.ts . Create a file for global teardown: global-teardown.ts . In playwright-config.ts , add settings for global setup and teardown: global-setup: require.resolve('./global-setup.ts'), global-teardown: require.resolve('./global-teardown.ts') Implement the setup function to create a new article and export it. Implement the teardown function to delete the article and export it. Implementation Details The setup function should handle API requests to create resources, while the teardown function should clean up those resources. Both functions must be exported for visibility. Conclusion By using global setup and teardown, you can ensure that necessary operations are performed for any project or spec file within the framework, enhancing the test execution process.
Video Transcript
In this lesson, we will talk about how to configure global setup and global teardown. This kind of a setup is the configuration of certain code have to be executed before entire framework test run. And global teardown is when something have to be executed after the entire framework test run is executed. Sometimes you may need this type of configuration. So in this lesson, I will show you how to do that. Let's get into it. But before we continue, let's make a quick update for the regression project. So in previous lesson, we created a project level setup in teardown. We have a separate project that is running likes-counter.spec.ts. And this project is responsible on article setup project. But if we run the regression project, it will try to run likes-counter.spec.ts. But since this spec file is dependent on the article setup, and this project is not running this dependent setup, we want to exclude this spec file from this project. So it will not be executed when regression project will be executed. So I take likes-counter.spec.ts and add it here. And we're good. So right now when regression project will be executed, it will run only working with api.spec.ts. And the second spec file will be ignored. All right, let's move on. And just for this demonstration, let's create a new spec file that will do exactly the same thing as a likes-counter, but will not be dependent on any other project and will be dependent on global setup and global teardown. So I create a new spec file and call it likes-counter-global.spec.ts. And I simply copy the entire test from here to here. Again, we just want to have certain demonstration. Now we need to create a new project that will run this particular spec file. And I copy it here, paste it right here. Likes-counter-global, I call it like that. Likes-counter-global-spec. It will run, but it will not have any dependencies on any other projects that will make setup. This particular project, when I run it, it will be dependent on the global setup for the entire framework. So how to configure the global setup? I need to create a new file, global-setup.ts. And let's create a second one just for the teardown as a playholder, global-teardown.ts. And inside of these files, we need to put implementation for setup and teardown. And then inside of the playwright-config.ts, we need to add here a setting. In the global settings section right here, we need to add global-setup and type require.resolve and resolve the path to the file that we just created for the global setup, global-setup.ts. All right, and put comma at the end. So now we just need to set up the implementation in the global setup that will be responsible for creating a new article. And let's write this code over here. And global-setup.ts is just a plain JavaScript file. Inside of the global-setup.ts should be just a single JavaScript function that will perform a certain operation for you. So let's create this function, async function global-setup. And this function will need to perform a creation of new article for us. So let's copy some of the code from the previous lessons. So I'll take this code, copy it inside of the global setup. It will have a bunch of red squigglies, but we'll fix it later on. Also, to perform this API request, we're going to need a token. Since we will not execute auth.setup.ts, we need to make a separate API call to get the token. And I copy this code as well and put it inside of the function right here. Click formatting. So now let's fix everything what is broken. So request is requiring a dependency. So let's create the import request from PlayWriteTest. But you can see the squigglies still highlighted. Property post does not exist in API request. Why has that happened? Because we are right now at the very low level of the framework and we need to create a new context. So I create await request, new context, assign this to the new constant, const context equals to await new context. And then I replace request with a context. Context post and here post. And I guess we're good. So what else? We have a conflict of the response constant here and response constant here. So let's add better names. Response token, then I rename it right here, response token.json, response body is fine. Okay, now we need to fix this and add the import for user.json. Let's do this. Copying from here, adding it right here. And we need to fix the path to this file. Okay, this one is fixed. What else? We need FS library as well. Let's take this import, adding it right here as well. This one is fixed and we need path to the auth file. Take this and add it here as well. All right, everything is fixed here. Let's move on. Access token, then next API call to create the article. Let's call it global likes test article. And we have complaint on expect over here. So let's add this into the import. Expect, this one is fixed. Process environment variables, log ID. All right, we don't have any other complaints in this function. One thing left is for this API call, we also need to provide a header with authorization token. Because this function have no idea about this play write config.ts. It cannot get this automatic settings from extra HTTP headers. This is independent function executed. So we need to provide an authorization header for this API call. And provide headers. And provide the token failure, which is process.env.accessToken. All right, and the very last step after we created this function, it is important to export this function to be visible globally. Export, default, global setup. That's it, function is ready. And I guess now we can run the test. So let's double check everything. So new project is created. Global setup is configured. It's pointing to global setup.ts. Now if we run this project, article should be created by global setup function, global setup.ts, and should be executed. Let's try it. Likes counter global project. You can see global likes test article was created and like was clicked. And now we can do something similar for the teardown. So going back, and we need to configure a global teardown. So here I type global teardown require.resolve and provide the path to the file with the function that perform a teardown. Global teardown.ts. Okay, and this is the global teardown function. So we will perform the same thing. We will need to create a new async function. Async function name global teardown. It will not have any parameters. We don't need it. And let's simply copy the step that is responsible for deleting the article. Article cleanup, and we need these two steps. Okay, and same thing. We will need request and exact. Request and exact. We will need to create a new context. Const context equals request new context. And we will need authorization header over here. I simply can copy this thing to speed this up. Headers, authorization, process environment, access token. Okay, it's highlighted. We forgot await request new context. And I think that's pretty much it. The last step, we need to export this function. Export default global teardown. All right, that's it. So let's run this test one more time. I'm going to the projects and something is not working because I forgot comma over here. And now it works fine. Likes counter global execute. All right, test completed. And if I make a refresh, global fit, article does not exist. So our global teardown works perfectly fine. All right, so let's quickly summarize what we did in this lesson. When you need to create a global setup or global teardown for the entire project, no matter what projects do you want to run inside of your test, you can use a global setup or global teardown settings inside of the playwright. For that, you will need to create a TypeScript file responsible for either global setup or teardown. Inside of this file, you need to declare a JavaScript function that will perform a certain operation for you that you want to be executed as a global setup. In our example, we created a new article and then important to create an export of this function at the end. The same thing for the global teardown. You create a function that perform a certain operation for you and then make an export. And inside of the config file, you create a reference to global setup and teardown to execute those functions. Global setup and teardown will be executed for any project and any spec file executed inside of the framework. All right, that's it, guys, and see you in the next lesson.