Creating simple tests using Playwright

About:

Playwright is a new end-to-end testing tool. Its support most of the modern browsers like Chrome, Firefox, Safari etc. I will explain how to write simple automation tests using Playwright tool. Let's start straight into it.

Setup:

As a first step, create a new folder in windows. In my case, I am using ubuntu operating system. I have created a folder named 'study'.

ps: Assume that node/npm, chrome browser is installed in system.

# Run from your project's root directory
  
 npm init playwright
        

Now run below command to install dependencies and install browsers from root

npm i -D @playwright/test
# install supported browsers
npx playwright install        

Open an IDE of your choice, I am using vscode, create a folder called test and create an 'playwright.spec.js ' file under the test folder. Now create a page with name 'playwright-page.js' to write all of the page related functions in a common place.We are following the POM (page object model ) pattern in Playwright.

Create a new class called 'PlaywrightPage' and export the class. Add a constructor section and initialise the object instance. Now create few functions as following 'goto()', 'accessDocsTab() 'and 'getSearchBoxMain()';

const { expect } = require('@playwright/test')

let url = "https://playwright.dev/";

exports.PlaywrightPage = class PlaywrightPage {


  /**
   * @param {import('@playwright/test').Page} page
   */


  
  constructor(page) {
    this.page = page;
    this.getDocsNavTab = page.locator('text=Docs');
    this.getNavSearchBox = page.locator('[placeholder="Search"]');
  }


  async goto(url) {
    await this.page.goto(url);
  }


  async accessDocsTab() {
    await this.getDocsNavTab.first().click();
    await expect(this.getDocsNavTab.first()).toHaveText('Docs');
  }


  async getSearchBoxMain(){
    await this.getNavSearchBox.type('Assertion');
  }
};

        

• Next step is to create a configuration file called 'playwright.config.js' under the root folder and set 'headless: true' and necessary browser settings under 'projects:[{}]' and save.

If you have Firefox installed, add below to config file, else don't add it.

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },        

// playwright.config.js
// @ts-check
const configDotenv = require('dotenv').config()
const { devices } = require('@playwright/test');


/** @type {import('@playwright/test').PlaywrightTestConfig} */


const config = {
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  use: {
    trace: 'on-first-retry',
    headless: true,
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
};
console.log("Print trace here:"+config.use.trace);
module.exports = config;        

Lets create a spec file called 'playwright.spec.js' and import the following

const { test, expect } = require('@playwright/test')
const { PlaywrightPage } = require('./playwright-page');
const Config  = require('../playwright.config');;        

and add our first test as below in the spec file. To access the Playwright site.

test('Access the Playwright Page', async ({ page }) => {
  const playwrightPage = new PlaywrightPage(page);
  await playwrightPage.goto();
 
});
        

Now open a terminal in ubuntu from the root folder, in my case I have added my test in a directory called 'study' and then type

System will run the test in headless mode (as my config 'headless: true') , results given below;

npx playwright test        

Lets add one more test to click on the 'Docs' tab in the Playwright site and run the same test. You could see two tests are passing now.

test('Click on DocsNab Tab', async ({ page }) => {
  const playwrightDev = new PlaywrightDevPage(page);
  await playwrightDev.goto(Config.use.baseURL);
  await playwrightDev.accessDocsTab();
});        

If you want to run the test in headed mode, lets run below command from terminal again

npx playwright test --headed        

Create a another directory called 'my-report' under root folder and add below settings in config file and save.

reporter: [ ['html', { outputFolder: 'my-report' }] ],        

Run the test again, could see both tests are passing and it display below command. Run the below report from terminal again,

npx playwright show-report my-report        

System will open an html as below and display the test results. Perfect !

Note:

You could add the url and other parameters in ".env" file and npm install dotenv to load the .env variables inside the test. This will help to have a common place to have environment variables.