Configuration File Adjustments | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Advanced Tricks and Techniques
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on the Playwright configuration file , detailing its structure and configuration options. The key points discussed include: Cleaning Up the Configuration File A good practice when working with PlayWriteConfig.ts is to remove irrelevant settings. The instructor demonstrates this by: Deleting default annotations that do not pertain to the project. Keeping only essential settings, such as retries and trace on first retry . Setting a default base URL and configuring timeouts. Understanding Configuration Structure The configuration file is divided into two main sections: Global Section : Contains settings applicable to all projects. Project Section : Allows for project-specific overrides of global settings. For example, you can set a different timeout for a specific project, like Chromium, while maintaining a global timeout. Project Organization Projects are not limited to browsers; they can represent different environments or test subsets. For instance: Create a project for page object tests with specific configurations. Available Configuration Options Refer to the Playwright documentation for detailed options, including: Reporter , Retries , Web Server , and Global Setup . Custom configuration files can be created for specific needs, such as production testing. Running Custom Configurations To run a custom configuration file, use the command: npx playwright-test-config= In summary, the Playwright configuration file is crucial for managing test settings, with options for global and project-specific configurations. Custom files can be created for specialized testing scenarios.
Video Transcript
In this lesson, we will talk about PlayWrite configuration file in details. So previously, we already touched this file and made some adjustments to the framework. But in this lesson, I will show you in details how this file is structured, and how to configure it, and what other options are available to configure PlayWrite framework. So let's get into it. So first of all, a good rule of thumb working with PlayWriteConfig.ts is delete everything what is not relevant to your project or to your framework. And let me begin to do this first. So I delete all the annotations that was created by PlayWrite when we configured this project to remove all the noise from the project. For example, test directory, it's set to test. This is a default value, so I don't need this. I can remove it. Fully parallel, false. I can remove it. Forbid only, related to the CI to make sure that we will not test that has run only. We don't need. Remove. Retries process environment. Let's keep it one just for the convenience, and we don't need anything related to CI. Remove the rest. Workers settings. It's set by undefined, and this value works perfectly fine for me. So I delete this as well. Then removing this annotation. Reporter. I will keep the reporter because we will talk about reporters a little bit later. We will remove this annotation, and then we have a use block. Let's see what we have in the use block. We have a base URL. We know about it. Then let me uncomment this one just to keep this as a reference, and I remove this base URL. And here we want to use a default URL without dev or staging as 4200. So I copy this port over here. When we run this test by default, if none of environment variables was provided, it will be defaulted to 4200, and this is what I want. I want to keep it just for you guys as a reference when we talk about environment variables, when you will look into this code in the repository later on. Next one. This. We delete this one. Trace on first retry. Let's keep it. And what else do we have? In previous lessons, we talked about timeouts. Let's keep the timeouts, but for videos, we put it as off. All right. So look how nicely we cleaned up the very first section. And then we have a project section. So removing this as well. We don't need this. So for the environments in this example, let me keep just one for you for the future reference. For the Chromium, we don't need to specify the browsers for the Chromium, because Chromium is a default browser. I forgot the comma here, so I can remove browser over here. Firefox. So instead of using configuration like this, devices, I will use a different key which call browser name and provide the name Firefox. This looks much nicer. All right. What else? I don't need a webkit. I don't care about the webkit. I remove this. I remove all this. And I remove all this. All right, sweet. Look how nicer and more compact our Playwright config right now. So we keep only relevant information that was discussed in this class. So I put even more little nicer formatting like this. And this is a timeouts, summary tries reporter, and then the use block. All right. Now let's talk about the structure about the config file. So generally, you can slice this file into two main sections. This is a global section and project section. And each of those sections also have two sections. Just section with different settings and the runtime settings, which is a use section. Each of those sections has different properties that can be configured. And what is important to know that everything what you can configure here in the global settings can be configured in the project level as well for each project independently. For example, timeout is configured here as 40 seconds right now. But if you want to configure the timeout for your Chromium project to be a different, you can add it right here and override, let's say, 60 seconds. This will work. Same thing going to work about the use block. For example, let's say for Firefox projects, we want to record all the videos. And I just go here to Firefox project and add this video property right here and changing to on. So the relation between settings inside of the project and global settings is this one. So this is the higher level settings and everything that you put inside of the project will override the settings defined in the higher level settings. For example, here in video, we said that, hey, we don't want to record the videos. And for all projects, we will not record the videos except the Firefox. When we run the Firefox, video will be recorded. So that's the main difference. And I would like to mention one more time that projects is not about the browsers. It's just the way how you can slice and organize your test, grouping your test and grouping the settings for your test. It can be projects for different browsers. It can be projects for different environments or projects for different subsets of the test. For example, I want to have a project that will run only page object test and I want them to run in full HD resolution. So I can create a new project for that and call it like that. I create a new object, provide the name for the project and let's say call it page object full screen, something like that. Then I want to specify which test I want to run. Test match. And I specify that it would be use page objects dot spec dot TS. And I also want to run this project in full HD. So I need to configure inside of use block, the view port that will be size of this one. I will copy this settings view port and that's it. And right now, if I run this particular project, only this spec file will be executed in the full screen. And you can also do this from the extension. So going here, selecting the page object full screen and I run it. And you can see right now browser is opened in the full screen and executing tests related to the page object spec dot TS. All right, it's done. This is how you can leverage projects and how you can leverage other settings in the playwright. So what are other options available? If you go to the playwright documentation, here are two sections, test configuration and test use option, where you can find all available options that you can configure. For example, reporter, retries, we already talked about it. Web server or workers. Web server is the ability to spin up the test application when you run the test automatically. Filtering the test, you can ignore certain tests or make a test match. This is exactly what we did right now with the page objects. What else? Global setup and teardown. We will talk about it a little bit later in the separate lesson. Expect options. You can configure your timeouts, have screenshots to match screenshots. We already configured the timeout in the previous lessons when we talk about the timeout. And add custom measures. Custom measures is a custom assertions in case you need those. And that's pretty much it. So not much you can do this. And here's what you can do in the use options. So base URL, storage, we already talked about it. Then you can change, for example, color scheme, geolocation, locale of your browser, time zone, viewport. We just configured this to the full screen. What else? Different network related stuff. Username, password, accept, download, true, false, proxy if you need it. Recording options, screenshots, trace and videos. We already talked about it. And some other little options over here. So that's it. That's all settings that Playwright provides you for configuration file. Additionally, you are not limited to just one configuration file. If you want, you can create your own custom configuration file for certain purposes. For example, let's assume that you want to run a certain test in production, which is a certain subset of the test. Maybe you want to keep certain sensitive information separately from the general config file. And you can add this file into the gitignore as well. So it will be ignored. So you can create your own config file. Let's do this. New file, and I call it playwright-prod, for example, config.ts. And we have our own custom file. Just for the convenience, let me copy the content of previous one. And I will right now delete everything that is absolutely not relevant for our test. So we can, for example, delete this one. I just want to show you how simple can be your configuration file. So we need just a single URL. We can remove all this stuff. We don't need it. And we need just a single project Chromium just to run test with the default settings. Okay, that's it. So technically, what we need to do is to run this framework is just two URLs. Base URL, global SQL URL, and third URL lives here under environment variables. And now in order to run this configuration file, we can use a terminal. npx playwright-test-config equals and provide the name of the configuration file. And hit enter. So right now, playwright is running with all default settings just in the Chromium browser in five workers running the test in parallel. And also you can see that the command line looks a little bit different because we deleted a reporter, which was HTML reporter before. All right, all 22 tests passed. So let me quickly summarize what we did in this lesson. Playwright configuration file is the place where you can keep all your configuration. Generally, it's divided into two sections, global section and the project section. And each project can have a settings from the global section overriding the global settings. Additionally, you can create your own configuration file, naming it whatever you want and providing dash dash config running in the command line. You can run the test using custom configuration file. All right, that's it guys and see you in the next lesson.