There are different modes of running the playwright tests.
Headless mode
This is the default mode, where no browser window is opened while running the tests and results are shown in the terminal. It’s particularly useful for automated testing scenarios, especially in continuous integration (CI) environments or server environments where there is no need for a graphical user interface.
Ensure that you are in the playwright-tests folder and execute the following command.
Headed mode
This mode allows us to see how playwright interacts with the application by opening a browser window.
Execute the following command to see it in action.
UI mode
This mode provides a better developer experience by opening a graphical user interface where we can walk through each step of the test, see the DOM snapshots, screenshots and videos, use the locator picker, and more.
Debug mode
This mode in Playwright provides a way to pause the execution of our tests and enter a debugging session, allowing us to inspect the state of the browser, step through our test code, set breakpoints, and diagnose any issues.
Execute the following command to see it in action.
Installing extension Playwright Test for VSCode
The Playwright Test for VSCode
allows us to run our tests right in VS Code, see error messages, create breakpoints, and live debug our tests. We can install the extension from the marketplace or from the extensions tab in VS Code.
With this extension, we have the capability to execute individual or multiple tests. Additionally, we can display active browsers, initiate runs with trace viewer and more.
To understand how to use this extension watch the video and go through the documentation mentioned at
their official documentation.
Custom scripts
In BigBinary we have defined custom scripts for executing the tests in each of these modes.
- Headless mode:
yarn playwright:headless
- Headed mode:
yarn playwright:headed
- UI mode:
yarn playwright:ui
- Debug mode:
yarn playwright:debug
There is nothing to commit in here. If you have made some changes to the project, clean them up by executing the following command.
