This video shows how the #Ui Mode works in #playwright and its #benefits in your daily work.
In this video, the presenter demonstrates a new feature in Playwright called UI mode. Playwright UI mode is a powerful debugging tool that helps you easily view and run your tests, as well as directly edit code with ease. Let's have a look at how UI mode works and the various capabilities it offers to improve your testing experience.
To use UI mode, simply run the command
playwright test --UI. This opens a new window with two main sections:
You can run one or many tests at the same time and, with the built-in trace-like capabilities, you can easily check all the actions executed during the test. If there's an error, the UI mode will help you identify the error by showing the specific action that went wrong.
In the top part of the UI, there's a timeline that lets you view the browser's activity during test execution. This allows you to see the various stages of the test, from rendering the page to each button click.
Another neat feature is that you can access the test code by clicking on the button in the top right corner. This opens the test file in your default code editor, like VS Code, allowing you to edit and save changes directly from the tool. The UI mode will automatically synchronize the changes made in the code editor, making debugging and development an easier process.
While Playwright's UI mode is still in beta, it's already proving to be a valuable tool for developers and testers alike. It offers a powerful debugging environment with seamless integration into your code editor, making it easy to fix issues and improve your tests.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email email@example.com.