Run Tests with User Interface | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Getting Started with Playwright
Instructor: Artem Bondar
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.
Video Transcript
In this lesson, I will show you how to run PlayWrite test using UI mode. So there are two ways, using PlayWrite extension for VS Code when you can trigger the test that you want to run and see them executing in the browser. And the second, PlayWrite has a UI mode when you can open the PlayWrite runner and see everything in one place. You see the test steps, you see the browser, and you see the log of execution. So very convenient interface when debugging the test. So let's get into it. So let's start with the PlayWrite extension. Remember, before we installed it in Visual Studio Code. And if you click on this icon in testing, you're going to see a test explorer with the list of the tests that we currently have. So we have a test folder. Under the test folder, we have example.spec.ts. And we have two tests over here that displayed right here. You can run tests right here from the test explorer, just simply clicking on this tab. But before doing that, let me show you a few configurations. So you can put this check mark over here if you want to run this headlessly or headed. Very convenient. So if you don't care about the view, you can just remove the check box. If you want to run the browser, you can click it. And also, you can select which browsers you want to actually run. So if you click on this little dropdown right here, we can click on Select Default Profile. And this is the options that you can choose. So right now, I have only Chromium as my default browser to be executed. But if you want, you can select all of them, Firefox and WebKit to be executed at the time. So let me remove all of them. And I use just Chromium. Click OK. And then just run the test. So I click this button, and browser opened and test executed. The only difference using command line versus this, the browser still stays open after the test execution. It stays at the place where the test actually ended. So if you run this test, we can see that we open main page, clicked on the Get Started, and we were navigated to the other page. This may be very convenient when you want to continue manual exploration of your application after the certain step of your test scenario. So this is very helpful. And if I will remove Show the Browser, of course, automatically it runs the test, but browser is not showed. And also, very convenient thing, you can see that added the milliseconds were added next to the steps. It's giving you insight of how long did it take to execute each of the step of your test. And we see a small check mark also as a definition, is test passed or failed. And by the way, you can run the test not only from the Test Explorer, you can do it directly from the spec file. You just click on this little icon, and it will rerun the test according to configuration in the Test Explorer. So that's the first approach. And the second approach I like, I guess, the more is using UI mode. To run the UI mode, you need to execute command npx playwright test dash dash UI and hit Enter. And we have this very nice Playwright UI runner that has everything you need to understand what your test is doing. For example, on the left side, we have a list of our tests. And if I click on the top example, test.spec.ts, it will run all of them. Okay, just one test was executed because we forgot to remove this test only. Okay, let me run it one more time. Run it again. And right now, both tests have been executed. And if we click on this, we can see that recording of the steps that happened. So let me click on the next one. So first, we navigated to the page, and then we clicked on the Get Started button. And we can see that there is a dot that shows where exactly click happened. And then after the navigation, we have assertion that this page was actually opened. And also for each of the command, you can explore three states of the action. So this is the action state when click happened. Then you can explore what was before the click. This is the state of the page. And this is the after click, the state of the page. And this is very convenient when you're debugging and trying to understand what your actual code is doing. And then before in the source section, you can see a highlighted section of the code that was actually executed. And if I switch here, you can see the code is highlighted below as well. Now we're dealing with this step. So this layout is very, very powerful and useful when you're trying to debug your tests, writing your tests, working on your test, and so on. The only one disadvantage is here with this UI view, is because this image technically is not the website. It's technically a screenshot of your application. You cannot continue navigating like in the normal browser. So that's why sometimes you may need to use a combination of this UI mode when you just debug in the test and trying to understand what it's doing. And running the test using Playwright extension. As I remind you, with Playwright extension, you run the actual live browser, which stays up. And then you can continue to do whatever you want in that browser to explore your scenario. And one more interesting thing here, you can automatically trigger test to rerun if you make any changes to the test. So here you can click on this little watch icon. So I click on that. And right now Playwright runner will watch any changes for the test. So let me go back to the code and I will introduce a failure to our test. I navigate back. And as you can see, the test reruns automatically and it's supposed to fail. Yep, our test failed. And again, look how nicely it is displayed here. Which line of code is failed, timeout exception. We have error message that tells us what exactly happened and execution log that gives us understanding to debug. So this mode is very, very cool. When I use on testing, usually I put this window on one screen, the source code on another screen and in parallel writing the test and see in the lifetime update how my script is progressing. So during the class, we mostly will use this UI mode and sometimes we'll run our test using Playwright extension. So as I mentioned, to use the benefits of both approaches. All right, that's it guys and see you in the next lesson.