PLAYWRIGHT with UI Mode:

Time Travel Debugging is such an interesting feature that all the testers and Developers tend to use because of its user-friendly Features.

Previously we have discussed the 7 amazing features of this UI Mode: here

Now let’s continue the remaining 8 features of UI Mode:

8. Call:

The call tab shows us the information about the action such as the time it took, what locator was used, if in strict mode, and what key was used.

the image displays the call logs recorded during the execution.

9.Log:

Logs are nothing but the records/steps of the expected output.

We can see a full log of our test to better understand what the Playwright is doing behind the scenes such as scrolling into view, waiting for elements to be visible, enabled, and stable, and performing actions such as click, fill, press, etc.

the image shows the logs recorded under logs tab.

10. Errors:

If the test fails, do not panic because we will see the error messages for each test in the Errors tab. The timeline will also show a red line highlighting where the error occurred.

We can also click on the source tab to see on which line of the source code the error is.

the image shows the errors tab where the error message specifies where and how the error produced.

11. Console:

We can view console logs from the browser as well as from our test. Different icons are displayed to show us if the console log came from the browser or the test file.

image displaying the console tab.

12. Network:

The Network tab shows all the network requests that were made during your test. We can sort by different types of requests, status codes, methods, requests, content types, duration, and size. Click on a request to see more information about it such as the request headers, response headers, request body, and response body.

image displaying the network tab.

13. Attachments:

The “Attachments” tab allows us to explore attachments. If we are doing visual regression testing, we will be able to compare screenshots by examining the image diff, the actual image, and the expected image. When we click on the expected image, we can use the slider to slide one image over the other so we can easily see the differences in your screenshots.

image displaying the attachment.

14. Metadata:

Next to the Actions tab, we will find the Metadata tab which will show us more information on our tests such as the Browser, viewport size, test duration, and more.

image displaying the metadata.

15. Watch mode:

Next to the name of each test in the sidebar, we will find an eye icon. Clicking on the icon will activate watch mode which will re-run the test when we make changes to it. We can watch several tests at the same time by clicking the eye icon next to each one or all tests by clicking the eye icon at the top of the sidebar. If we are using VS Code, then we can easily open the test by clicking on the file icon next to the eye icon. This will open the test in VS Code right at the line of code that you clicked on.

the image showing the watch mode.

Below are the special three features that attract users:

(I). Color Theme

(II). Reload

(III). Output

But what’s so special about these? In UI mode this is what grabs the attention of developers and testers since they prefer color themes, can Reload in DOM Page itself without Going back to VS code, and can see the output i.e., how many tests have failed and passed without the need to Go back to VS code.

(I). Color Theme

User can switch the color theme to dark or white depending on their interests.

Image showing the white-colored theme.

image showing the dark colored theme.

(II). Reload:

Users can reload their tests by just clicking on the reload button.

image displaying the loaded tests

image displaying the reloaded tests page.

(III). Output:

the output feature displays the number of pass/fail tests without the need to toggle back to the terminal.

image showing the output tab.

Thank you for Being Patient and going through all the amazing features, hope this is useful.