/ Playwright Guide
As we have already seen previously, Playwright is an excellent tool for implementing automatic E2E tests. The tool has numerous features that allow you to write tests easily and with just a few lines of code. Its native integration with the Visual Studio Code development environment greatly increases its versatility and ease of use.
In this article we will analyze in detail the potential of the Playwright Test for VSCode plugin by seeing how to automatically record navigations and how to debug tests.
Installing Playwright Test for VSCode
First of all, you need to install the plugin within your development environment by following these steps:
- Open VSCode.
- Go to Extensions (icon in the left menu).
- In the extension search bar, type “Playwright Test”.
- Select the “Playwright Test for VSCode” extension developed by Microsoft.
- Click on Install to add the plugin.
Once the extension is installed, the environment will be ready to start writing, recording and debugging tests.
Recording test navigations
To use the recording functionality, simply open the plugin tab in the left menu (test tube icon) and click on the “Record New” button:
By starting the recording, a browser window will automatically open where a toolbar with five icons will be visible at the top:
- Record: allows you to stop the recording;
- Pick locator: is used to select elements of the page and display the relative selector (we will see how to use it later);
- Assert visibility: adds a step to the test to verify that an element of the page is visible;
- Assert text: adds a step to the test to verify the presence of a text;
- Assert value: adds a step to the test to verify the presence of a certain value in an input;
To record our first test, we will do a navigation very similar to the one we implemented manually in the previous article:
- Open the Wikipedia home page (https://en.wikipedia.org/wiki/Main_Page);
- Click on the search bar and type “This is a test”;
- Click on the “Search” button;
- Once we arrive at the page with the search result, we use the “Assert test” tool to select the title of the page as in the following image. A popup will open asking you to confirm the content of the test to be tested.
At the end of the procedure, by clicking on the text with the recording icon the test will be saved and you will return to the Visual Studio Code screen where you will be able to view the result.
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://en.wikipedia.org/wiki/Main_Page\'');
await page.getByPlaceholder('Search Wikipedia').click();
await page.getByPlaceholder('Search Wikipedia').fill('This is a test');
await page.getByRole('button', { name: 'Search' }).click();
await expect(page.locator('#firstHeading')).toContainText('This is a test');
});Editing Recorded Navigations
To edit a previously recorded navigation, simply position yourself at the point in the code where you want to make the change and press the “Enter” text to create a new line. At this point, by clicking on the “Record at the cursor” function, you can move around the browser again to record further steps.
If you prefer to edit the script manually you can still use the “Pick locator” feature to retrieve the selectors from the web page. Once you have selected the element on the page you can go back to VS Code to view and copy the ID:
Run and debug tests
From the “Test Explorer” menu you can select the implemented tests and run or debug them using the appropriate buttons:
The debugging feature is very useful for identifying any problems in the execution of tests as it allows you to insert breakpoints in the code and execute the instructions one at a time.
Playwright’s integration with Visual Studio Code via the “Playwright Test for VSCode” extension makes running, recording, and debugging tests a simple and intuitive process. With these features, developers can save time on manual test writing and speed up the development cycle with advanced debugging tools.