Ideas2IT’s step-by-step guide to set up a comprehensive Playwright Test Automation Framework using the Page Object model

Pre-Requisites

Step 1: Create a New Folder

Navigate to desired drive on your computer and create a new folder for Playwright (ex: PlaywrightFramework).

Step 2: Open the newly created folder in Visual Studio Code ID

From Visual Studio Code, Navigate to File> Open > Choose the newly created folder (PlaywrightFramework).

Step 3: Create a package.json file

The package.json file helps to keep track of all node modules installed and it also helps to create shortcuts to run Playwright tests.

From your Visual Studio Code > Open Terminal and execute the below command.

Once you execute the above command it asks you a set of questions just answer them or Press Enter until package.json gets created.

Step 4: Install Playwright Tests npm package

The playwright has its own test runner for end-to-end tests, we call it the Playwright Test.

From your Visual Studio Code > Open Terminal and execute the below command.

Install Playwright Tests npm package

Step 5: Install the Playwright npm package

Unlike Playwright Library, Playwright Test does not bundle browsers by default, so you need to install them explicitly.

From your Visual Studio Code > Open Terminal and execute the below Command.

Step 6: Create a src Folder inside your Project Folder

Src folder holds all your tests and page objects, it helps us to manage tests in an easy way.

Create New Folder called src inside Project Folder (Ex: PlaywrightFramework).

Create a src Folder inside your Project Folder

Step 7: Create Folders for Tests and Page Object

Inside your src folder created in the above step create two more folders namely specs and pages.

Your directory structure should look like the below.

tests folder contains all your Playwright test files.

pages folder contains all your Playwright page object files.

Create Folders for Tests and Page Object

Step 8: Create First Page Object File with Playwright

Inside your pages folder create a file name it as example.page.ts

In this tutorial, we are going to write two simple test cases.

  1. Navigate to google.com and Verify
  2. Search for keyword Playwright and verify search results

Copy and Paste the below code into your newly created file example.page.ts

Step 9: Create First Test /Spec File with Playwright

Inside your pages folder create a file name it as example.spec.ts

The example.spec.ts contains your actual test script or specs which you create using Playwright libraries.

Copy and Paste the below code into your newly created example.spec.ts

Step 10: Execute or Run your first test with a Playwright

The playwright provides options to execute your test in both headed mode and headless mode. Let’s try headed mode execution with the chrome browser.

From your Visual Studio Code Terminal Execute the below command.

Once your tests are executed Playwright shows the results in the command line or Visual Studio Terminal.

Execute or Run your first test with a Playwright

Configure PlaywrightFramework behavior with Playwright Global configuration File

The playwright provides the option to create the configuration file, where you can specify values such as browser name, baseUrl, width, and height.

Create a playwright.config.ts file in your Project Folder (root level)

From your Visual Studio Code, Create a new file name as playwright.config.ts, This file must be created inside your Project Folder (ex: PlaywrightFramework) at the root level.

The sample configuration file for Playwright looks like below.

The above is a sample file there are many options that Playwright configuration supports. Read the details here.

Playwright Supported Reporters

  1. Dot Reporter
  2. Line Reporter
  3. JUnit Reporter
  4. JSON Reporter
  5. List Reporter

Playwright allows us to configure multiple reporters as well, Playwright reporters can be mentioned via command line while execution test, or we can set them in the global configuration file.

Example of the global configuration file for Playwright Reporter.

Generating HTML Reporter with Playwright Test Automation Tool

The playwright doesn’t support HTML reports for tests by default, but it supports JUnit XML files, However, using JUnit reporter and third-party npm packages such as XUnit Viewer we can generate the HTML reporter.

Playwright supports allure report as well but as of now, it’s an experimental feature.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ideas2IT

Ideas2IT

We’re a product engineering firm. Our work is cutting-edge, be it in AI-ML, Cloud, DevOps, or IIoT, for an enviable set of clients. Visit www.ideas2it.com.