Playwright Test

Playwright Installation and Test Recording Guide

This guide provides step-by-step instructions on how to install Playwright into your Visual Studio Code (VSCode) project and use the "record test" feature to create your own Playwright test.

1. Install Node.js

Playwright requires Node.js to be installed on your system. Visit https://nodejs.org/ and download the latest LTS (Long Term Support) version. Install Node.js following the instructions for your operating system.

2. Create a new project folder

Create a new folder for your project, open a terminal or command prompt, and navigate to that folder.

mkdir my-playwright-project
cd my-playwright-project

3. Initialize a new Node.js project

Run the following command to initialize a new Node.js project and create a package.json file.

npm init -y

4. Install Playwright

Install Playwright and its dependencies using the following command:

npm install --save-dev playwright

5. Install the Playwright Test runner

Playwright Test is the recommended test runner for Playwright. Install it using the following command:

npm install --save-dev @playwright/test

6. Configure a test script

Open the package.json file in your project folder and add the following script entry to the "scripts" section:

json
"scripts": {
  "test": "playwright test"
}

7. Create a test folder and file

Create a folder named "tests" in your project folder and a test file inside it, for example, "my-test.spec.js":

mkdir tests
touch tests/my-test.spec.js

8. Open your project in VSCode

Open your project folder in VSCode by either using the "Open Folder" option from the file menu or running the following command in the terminal:

code .

9. Install the Playwright Test Recorder extension

Open the Extensions sidebar in VSCode (or press Ctrl+Shift+X), search for "Playwright Test Recorder," and install it.

10. Start the Test Recorder

Click on the Playwright Test Recorder icon in the VSCode sidebar or press Ctrl+Shift+P and search for "Playwright: Launch Test Recorder." Select the command and press Enter.

11. Record your test

In the Test Recorder, click the "Start Recording" button. This will launch a new browser instance. Perform the actions you want to test on your website, and the recorder will generate the corresponding Playwright code.

12. Save the recorded test

Once you've finished recording your test, click the "Stop Recording" button. The recorder will generate a test file with the recorded code. Save the file to your "tests" folder.

13. Run your test

To run your test, open the terminal or command prompt in your project folder and run the following command:

npm test

The test runner will execute your tests and display the results.