Run Test from UI

In this lesson from the "Test Guild UI Automation with Playwright" course, Artem Bondar demonstrates how to run Playwright tests using the UI mode. Here's what you'll learn:

1. **Playwright Extension for Visual Studio Code**:
- **Test Explorer**: Discover how to navigate the Test Explorer in Visual Studio Code, where you can see a list of your tests and run them directly by clicking on the test names.
- **Configuration Options**: Learn to configure test execution, choosing between headless and headed modes, and selecting specific browsers (Chromium, Firefox, WebKit) for testing.
- **Executing Tests**: Understand how to run tests and view results, with the browser staying open after execution to facilitate further manual exploration.
- **Direct File Execution**: Learn to run tests directly from the spec file by clicking on the icon next to the test name.

2. **Playwright UI Mode**:
- **Launching UI Mode**: Learn to start Playwright UI mode with the command `npx playwright test --ui`. This opens a comprehensive UI runner with a list of tests, browser view, and execution logs.
- **Test Execution and Debugging**:
- **Step-by-Step View**: Understand the steps involved in each test, including navigation, clicks, and assertions, with visual indicators showing where actions occurred.
- **State Exploration**: Explore the state of the page before and after each action, which is invaluable for debugging.
- **Code Highlighting**: View the corresponding code for each action, highlighted in the UI runner, to better understand test execution.
- **Live Browser vs. Screenshot**: Recognize the difference between using the live browser (Playwright extension) for manual navigation and the screenshot-based view (UI mode) for detailed debugging.

3. **Automatic Test Reruns**:
- **Watch Mode**: Learn how to enable watch mode by clicking the watch icon, allowing tests to rerun automatically upon code changes.
- **Handling Test Failures**: See how test failures are displayed with detailed error messages and execution logs, helping you quickly identify and resolve issues.

This lesson equips you with two powerful methods to run and debug Playwright tests, enhancing your productivity and efficiency in UI automation. You’ll use both the Visual Studio Code extension and the Playwright UI mode throughout the course to leverage the benefits of each approach. See you in the next lesson!