Playwright

Automated Web Testing and Monitoring with Playwright

  1. Install Playwright using yarn, npm, or via VS Code as shown below :

Using yarn: 

yarn create playwright

Using npm:

npm init playwright@latest

  • You will be given the option to choose between Typescript and Javascript. By default, it will be Typescript.

  • The name of your Test folder will either be 'tests' or 'e2e'.

  • You can open an already existing file to understand the structure (Example: spec.ts).

Using VS Code:

Install the extension called 'Playwright Test for VSCode'.

Open the Command Palette and type 'Install Playwright' as shown in the reference below.

  1. You will be asked to choose the browsers you would like to run your tests on. Type the following command in the terminal to open Playwright Inspector and Chromium (or, another web driver). 

npx playwright codegen

  1. Type the URL of the application you would like to test in the browser and click ‘Record’ on the Playwright Inspector.

  1. Go back to the application and perform a few actions to create scripts.

  2. Copy the code and paste it to the file created under the extension '.spec.ts'.

  3. Type the following command in the terminal to run the code:

  • To run all tests,

npx playwright test

  • To run a specific test (say, sample.spec.ts),

npx playwright test sample.spec.ts

  • To run a specific test (say, sample.spec.ts) in chromium,

npx playwright test sample.spec.ts --project=chromium

  • To view the HTML report of the test result,

npx playwright show-report

7. Integrate with Perfagents

To take screenshots, add this line of code:

await page.screenshot({ path: '/home/uncloud/monitorings/screenshots/<screenshot name>.png' });

Screen recording is by default turned on for all tests in Playwright

To include multiple tests inside a single file, create each test as different Playwright "test" functions

import { test, expect } from '@playwright/test';

//Test 1
test('test_1', async ({ page }) => {
    // Add your test script here
});

//Test 2
test('test_2', async ({ page }) => {
    // Add your test script here
});

Make sure to save the file using the ".spec.ts" or ".spec.js" extension. Example: "sample.spec.ts"

By performing the above-mentioned steps, you will obtain validated test cases that can be uploaded during the 'Install' step, and by clicking on 'Next' it goes to the next step i.e., 'Device Profile' where the user have to choose the type of device. Next is the Frequency page.

PreviousCypressNextIntegrations

Last updated