SDET: New Playwright UI Mode looks awesome
Hello dear Bug Hunter engineers
A few days ago (from this article), the Playwright team released a new cool feature called “UI Mode”. Release notes details: https://playwright.dev/docs/release-notes#version-132. I already had a chance to have a look at it, face and solve my test project configuration problems. Even though it is still in preview mode, I would like to do a short walkthrough. Spoiler: It looks very promising. Let’s waste no time and jump into the details
How to install/update
All you need to do is make sure you have the latest version of @Playwright/test or at least version 1.32.
npx @playwright/test — version
Update the Playwtight/test version if it is less than version 1.32".
npm install @playwright/test@latest
or
npm install @playwright/test@1.32.1
Note: I still recommend the latest one. Because in my case you might see a patch fix at the end.
Configuration issues I faced with during walkthrough
Problem:
In my case, I have a slightly unusual project structure.
The root repository contains “package.json” and “tsconfig.json”, and three folders of standalone projects. This means that each project contains its own configuration of Playwright, but uses the same node packages.
So the first time I ran the “npx playwright test — ui” command to open UI mode, it was not connected to any of my test projects. I tried running it both from root and from specific ptoject folders.
Solution:
The solution is very simple, but it took me some time to fix. The bug was in the combination of my “playwright.config.ts” and “.env” files. I only found it while running my tests locally.
The problem is that my “playwright.config.ts” file uses some “getEnvVariable” function to read data from “env”. So when I ran the command from the root of the repository it was missing the .env file. Even if you specify the full path to the “playwright.config.ts” file.
So I navigated to the specific project folder and specified the path to “playwright.config.ts” with the “-c” flag.
It fixed my problem.
Note: Some of the guys in the Playwright chat mentioned the possibility of clicking the ‘toggle output’ button in the UI and seeing errors in the output window. In my case, I didn’t see any errors.
UI Mode walkthrough
First of all, it looks very nice and, most importantly, it is useful.
Test Run management and details
You can easily manage the tests and test runs. Now we can forget about Visual Studio extension → “Playwright Test for VSCode”.
You can simply run all the tests or select a test suite/specific test you want to run.
But the most interesting thing is that you can select each step and see what happens inside.
As an example, let’s look at the step where I click the check box.
In the Source window, you can see which line of code was triggered
And the most interesting one is a screenshot of the action.
You can even see what it looked like before and what it looks like after your action.
You may also want to see some step metadata. I know, it is less interesting. But anyway.
Test filters
Another cool option is that you can filter the tests.
In my case, I only have one test project configuration called “Chrome Browser”. I decided to extend “playwright.config.ts” with an additional project with the FireFox browser. Unfortunately, this requires a restart of UI mode.
After restarting the UI mode, I can see that a new project configuration has been added.
Test watch feature
Another great feature.
You can watch all the tests:
Or you can watch a specific test suite or test:
What it gives us. When we change a test logic we are watching, e.g. add new step,
It will automatically start the test(s) run again. So you don’t need to run the test manually if you change it.
My project reference can be found here: https://github.com/dneprokos/playwright-test-demo
Conclusion
That’s all I want to share with you today. Maybe the UI mode will look even cooler when you read this article. Anyway, even the preview mode looks great and very promising.
Good luck and thanks for reading!
