Debbie O'BrienAre you looking for a more efficient way to execute and debug your end to end tests? Look no further than Playwright's UI Mode. In this guide, we'll explore the features of Playwright's UI Mode and show you how to take advantage of them for your test automation needs. UI mode is only available when using Playwright with Node.js and not with Python, Java or C#.
What is UI Mode?
UI Mode is a powerful graphical user interface that provides a comprehensive trace of each of your tests. With UI Mode, you can explore, run, and debug your tests effortlessly with its time-traveling capabilities. The user-friendly interface enables you to view detailed test results, including logs, DOM snapshots, and trace information.
In addition, UI Mode comes equipped with watch mode, which allows you to monitor any of your tests and automatically rerun them on every code change, providing an optimal developer experience.
Overall, Playwright's UI Mode provides a comprehensive, user-friendly testing experience that allows you to identify and fix issues with your tests quickly and easily.
How to Use UI Mode?
To use UI Mode, you need to run the following command:
npx playwright test --ui
When you launch UI Mode, you'll see a list of all your test files. To run your tests, you have several options: click the triangle icon in the sidebar to run all of your tests, hover over a test file's name, and click on the triangle next to it to run a single test, a block of tests, or an entire test file.
Filtering Tests in UI Mode
You can filter tests by text or @tag, by passed, failed, or skipped tests, and by projects as set in your playwright.config file. If you are using project dependencies, make sure to run your setup tests first before running the tests that depend on them. The UI Mode will not take into consideration the setup tests, so you will have to manually run them first.
Viewing Test Traces
Traces provide detailed information about each test that has been executed. You can access the trace results by clicking on any of the individual test names. By examining the trace results, you can identify the cause of any failures or errors that occurred during the test run and take appropriate action to address them.
Actions and Metadata
The Actions tab provides valuable insights into your test execution. You can view the specific locator used for each action and the time taken to complete it. When you hover over each action, you can observe the changes in the DOM snapshot. Additionally, you can navigate backward and forward in time, and click on any action to inspect and debug it. The Before and After tabs allow you to visually track the changes that occurred before and after each action.
Adjacent to the Actions tab, you'll find the Metadata tab. This tab provides you with additional information on your test, such as the browser used, viewport size, test duration, and more.
Source, Console, Log, and Network
When hovering over a test action, its corresponding source code is highlighted below. To view the entire test's source code, click the "source" tab. Console logs and network logs for each action can be accessed by clicking the "console" and "network" tabs, respectively.
Pop Out and Inspect the DOM
To enhance your debugging experience, you can pop out the DOM snapshot by clicking the dedicated icon located above it. This will open the snapshot in a separate window where you can inspect HTML, CSS, and more using the browser DevTools. You can then go back to UI Mode and pop out another action's snapshot to compare or debug them side by side.
Timeline View
At the top of the trace, you can see a timeline view of each action of your test. Hover back and forth to see an image snapshot for each action.
Pick Locator
One of the most important parts of automated testing is identifying the elements on the page that you want to interact with. The Pick Locator feature in Playwright's UI Mode makes this process much easier by allowing you to easily select an element and retrieve its locator.
To use Pick Locator, simply click on the Pick Locator button in the UI Mode toolbar. This will activate the feature and highlight all the elements on the page as you hover over them. Once you click on a element the corresponding locator will be displayed in the Pick Locator field. Click on the copy button and then paste the locator into your test.
Watch Mode
Watch Mode is another useful feature in Playwright's UI Mode that allows you to automatically re-run your tests as you make changes to your code. This can be particularly helpful when you are working on a large test suite and want to quickly test a change you've made without having to manually re-run the tests every time.
To use Watch Mode, simply click on the Eye icon next to the name of the test you want to watch. This will activate the feature and automatically re-run the test whenever you make changes to its code. You can watch multiple tests at the same time by clicking on the Eye icon next to each test, or you can watch all the tests in your test suite by clicking on the Eye icon at the top of the sidebar.
If you are using VS Code, you can easily open the test file in the editor by clicking on the File icon next to the Eye icon. This will open the test file in VS Code and take you directly to the line of code that corresponds to the test step you are currently watching.
Conclusion
In conclusion, Playwright's UI Mode offers a powerful set of tools for exploring, running, and debugging your automated tests. The time travel experience, complete with watch mode, filtering, and tracing, allows you to quickly identify and fix issues in your test code, while the Pick Locator feature simplifies the process of selecting and interacting with elements on the page. Whether you're a seasoned automated testing pro or just getting started with test automation, Playwright's UI Mode is definitely worth checking out.
