Project 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 explore how to configure setup and teardown processes at the project level for automated testing. This is crucial when certain preconditions must be met before executing tests, and when cleanup is necessary afterward. Key Concepts Setup: A process that prepares the environment before tests run. Teardown: A process that cleans up after tests have completed. For example, in a project that tests a like counter , we need to ensure that a fresh article is created before tests run, and that it is deleted afterward. This ensures consistent test results. Implementation Steps Create a new test for the like counter functionality. Implement a setup helper to create a new article using setup.createNewArticle . Store the article's slug ID for later deletion. Define a new project for article setup and link it as a dependency in the test configuration. Implement teardown logic to delete the article after tests are executed. To achieve this, we modify the playwright-config.ts file to include dependencies for both setup and teardown processes. This ensures that the access token is created first, followed by the article setup, and finally the execution of the like counter tests. Conclusion By structuring your tests with global setup and teardown processes, you can maintain a clean testing environment and ensure reliable test outcomes. This lesson illustrates the importance of managing dependencies effectively in automated testing frameworks.
Video Transcript
In this lesson, we will talk about how to configure setup and teardown on the project level. For example, you have a project that requires some precondition to be executed before all test scripts executed inside of this project. And the same, the teardown. For example, after all tests inside of this project are executed, certain step to teardown and finalize the test have to be executed. So in this lesson, we will talk how to make this configuration. So let's get into it. So in one of the previous lessons in API test app project, we created a dependency on the setup, which is auth.setup.ts. So every time we run the Chromium project, it has a dependency on setup and auth setup create for us access token that used later inside of the test. But let's imagine the scenario that we want to automate something like this. So this is our test application, and we want to test the like counter. So when we click on the like, it increased by one. And when we click it one more time, it's decreased by one. But this number of this like is not constant. It is currently 1,682. So ideally here, we would need a clean, fresh article that does not have any likes. And we know the initial value of this article, that it will be zero. Then we click on that, and we validate that it is one. So if we want to run the test to test a like counter, ideally, we need to make a setup to create the article, then test the likes counter, and then create a tear down that will remove this article. We already know how to do that using before and after each hook. So we can technically create this step inside of the before each hook, and it would work. But there is other way to create helpers that would create a setup and tear down for us based on the project. One of the example is this one. This is a setup for getting the token. So let's create a new test, a new helper that will create a new article for us. So first of all, I want to create a new test. So for this test, we need to go to our homepage. I'll just copy this step. Then we need to navigate to the global feed. I'll copy this. Then on the global feed, we will need to get a first article, inspect element. So we can take up article preview. We need to take first article, then we need to locate button. And I think this will be a locator for our likes counter. Yeah, button and likes counter. So let's create a new button. And I think this will be a locator for our likes counter. Yeah, button and inside of the button is the counter. This we are looking for and assigning this to a new constant. First like button equals to page.locator and we don't need a weight over here. And the next step, we need to put a weight first like button.click. And then later on, we will add a couple more assertions inside of the test. All right, test is ready. Now we need to create a precondition that will create a test article that we will use. And we will use it using a helper for the setup. In order to do that, I'll create a new test file. And I will call it new article.setup.ts. I'll copy this from the auth.setup because it's very similar. Then setup.createNewArticle.asyncPage. And we need to copy the code that is responsible for creating the article. So let's go to the previous test. This is the request we are looking for. Create new article and instead of page, we need to import the request. All right, and we also need to import the expect. Okay, and we need to save the slug ID for this article because we will need to delete this article after that. So we need to save the slug ID. const response equals to awaitArticleResponse.json. This is response body. And then const slug ID equals to response.article.slug. And we will save it as a process environment variable. process.env.slugID equals to slug ID. All right, I think this is ready. And let's just change the title for this article that we call it LikesTestArticle just to differentiate it for our test. And now we can create a new project that will call this setup as a dependency for our test. Going back to playwright-config.ts. And here, let me refactor a little bit this file and I remove everything that is not relevant. So I remove this WebKit. I remove this. I remove this just to clean this up. I remove this as well. And instead of Chromium, let's call this project regression. Because this project will run everything for us. And for the likes counter specifically, we create independent new project. I just copy this for the convenience. Paste. Call this project name as like counter. And in order to specify the scope, I will type test match. And we want to run only likes counter.spec.ts. Okay, so this particular project will run only this thing. We have the dependencies on the setup section, right? But we also need a second dependency. This dependency is to create a new article, this one. So let's create a new project that will be responsible for creating a new article. I edit right here. So new project. And I call it name article setup. Article setup project should be responsible for the spec that responsible for creating the article, which is a new article.setup.ts. And also this project is dependent on the setup because it needs access token as well. Setup. All right. That is done. And now the project of like counter will be dependent not on the setup project. It will be dependent on article setup project. And I replace it right here. So what we are about to do. So we want to run like counter project. Like counter project will execute like counter.spec.ts. And as a precondition, it will create article setup running new article setup.ts. And this project is dependent on more higher level setup that creates access token. Because we cannot execute new article setup without having access token, right? This is API code. So we need to create token first. And then article setup will be executed. And then this project will be executed running likes counter test. So I guess that's it. And let's run this project. So I just go in right here. Selecting this drop down and running like counter test. Okay. Authentication failed. No test found. So let's run a misspell right here. Ka-un-ter. Let's run it one more time. Likes counter. And right now it's failed. Create article. Cannot read properties of undefined reading slug. And also little misspell article. Okay. Let's run it one more time. Like counter. Now we have 422. Okay. Looks like article already exists. Let's look here. Okay. Remove this article. Going back and one more attempt. Like counter. Okay. So we created. We click on that. And looks like it worked. So click on that. Delete the article. Looks good. So let's add now assertions over here. Now wait. Expect first like button to contain text. Zero. And after we click, it should contain one. Let's run this test one more time. Like counter. All right. It worked perfectly fine. Delete the article. All right. So let's quickly review it one more time. We created a new project that is responsible for running new article setup.ts. This particular project is responsible on getting the token. The actual test is responsible on this parent project article setup. That creating a global setup for us on the project level. Now the last step that need to be executed is to delete this article to clean down the test execution. For that, let's create a new spec file that will be responsible for that. Article clean up.ts. I will copy this. Setup. Delete article. And this one will be much easier. We just need to get the step where we delete the article from our test. So these two steps go into article setup. Pasting it right here. And by the way, I need to put it under the test folder. Right here. Okay. And we need to replace slug ID with process environment variable that we created inside of the new article setup with this one. Process env slug ID. Okay. Process env slug ID. Looks like spelling is correct. That's it. And now we need to define this step as a teardown process in the configuration of the project. So this is the article setup project that's responsible for it. We need to add one setting. Call here teardown. And specify which project will be responsible for teardown. So let me create a name of this project. Article clean up. And I will need to create a new project with this name. So I'm going to name article clean up. And test match is article clean up dot setup dot TS. And comma over here. All right. Let's run the same exact test one more time. And this time, this article clean up should be executed at the end of the test to deleting test article. All right. Like counter is increased. And if I refresh this page, we don't see this article anymore. It means that article was successfully deleted after the test execution. All right. Let's quickly summarize what we did in this lesson. You can create a global setup and teardown using a project level. For that, you need to create a separate project that will match a certain setup test that will create a setup for you. And match an additional project that will make a teardown. In our example, it's article clean up project. And then you just create a dependency inside of your test on the project that you want to run to depend on the project that controls your setup and your teardown. All right. That's it, guys. And see you in the next lesson.