UI and API Tests in a Single Framework | Bondar Academy
Course: Playwright API Testing with TypeScript
Module: Test Management
Instructor: Artem Bondar
Lesson Summary
In this lesson, the instructor explains how to configure Playwright to manage both UI tests and API tests within a single project. The setup allows for organized testing without conflicts. Key Steps for Configuration Create Separate Folders: Under the tests folder, create two subfolders: API test and UI test . Place API-related spec files in the API test folder and UI-related spec files in the UI test folder. Adjust Configuration File: In the configuration file, define separate projects for UI and API tests. Use the testDirectory property to specify the respective test folders. For UI tests, specify the browser to be used; this is not necessary for API tests. Running Tests To run the tests, you can switch between the projects using the Playwright runner: Select the desired project (API or UI) to execute the corresponding tests. Alternatively, you can switch projects via the command line. Configuration Files Maintain two configuration files: apitestconfig.ts for API testing. playwrightconfig.ts for UI testing and other configurations. This setup allows for a streamlined testing process, ensuring that both UI and API tests can coexist without issues. The instructor encourages organizing the framework for better management of tests.
Video Transcript
Hey, guys, welcome back. In this lesson, I will show you how you can configure Playwright to have UI tests and API tests as part of the single project. In case you have UI tests as well and you want to keep those together in the same project at a time. So I have configured this setup real quick and let me show you how it's organized. So I have added a second spec file with just a UI test. It's a single and simple test through the UI to log into your application, create the article, and then delete the article from the UI without the API at all. And how would you manage API and UI tests? Pretty simple process. So the first step, you will need to create a different folders under the tests folder. So remember before we were just keeping our spec file under the test. If you want to keep UI and API tests together, it would be more convenient to keep just the two folders together. So API test and UI test folder. Under API test, you put API related spec files. Under UI test, you keep the UI related spec files. Then you go to configuration file. In the on configuration file level, you will need to make a few adjustments. So the projects section, this is how you define the UI test and API test separately. In the projects, there is a property called test directory. So for the API and UI test, you will need to configure this test directory as test API test. These two projects are related to API testing. And this project is related to UI testing, so you configure it like that. And for the UI test, of course, you need to define the browser that you want to use to run your test. For API test, we don't need that. And I believe that's pretty much it. You don't need to do anything else. So then to switch between the projects, you can either go right here to the playwright runner. So currently, we have API test selected. And if I run the tests like this, so currently only API tests are executed. You see the entire test suite is executed, all 12 tests were executed. But if I just switch to UI test, and I can select show browser right here, and refresh, the test runner is loaded. And right now, the UI test should be executed. And here we go, this is our UI test running, creating and deleting article. That's it, so simple. And if you want to switch between the different projects, you can also do it through the command line as well. So that's all you need to do to keep those UI test and API test together. And you're not gonna have any conflicts. Because remember, we initially made the configuration for API testing have this apitestconfig.ts. This will be your primary configuration file for your API testing. And for all UI testing and all other stuff, you're gonna keep this playwrightconfig.ts. Configuring, for example, base URL for your UI test for the application, that's it. And the rest of the minor things, you're gonna keep in the projects. So that's all you need to know. So simple, if you want to keep your test together, more than welcome to organize your framework. See you in the next lesson.