Run Tests with User Interface | Bondar Academy

Lesson Summary

This lesson covers how to run Playwright tests using two main methods: the Playwright extension for VS Code and the Playwright UI mode . 1. Playwright Extension for VS Code To use the Playwright extension: Ensure the extension is installed in Visual Studio Code . Access the Test Explorer by clicking the testing icon to view your tests. Configure test settings: Run tests headlessly or headed . Select the default browser from options like Chromium , Firefox , and WebKit . Run tests directly from the Test Explorer or the spec file. 2. Playwright UI Mode To run tests in UI mode: npx playwright test --ui This opens the Playwright UI runner, which provides: A list of tests on the left side. Visual representation of test execution steps, including: Action states before and after clicks. Highlighted code sections corresponding to executed commands. Note: The UI mode displays screenshots rather than a live browser, limiting navigation. However, it allows for automatic test reruns upon code changes, enhancing debugging efficiency. In summary, using both the Playwright extension and UI mode together can optimize your testing and debugging process.