Writing Tests In Playwright Test Automation Project

Introduction

In this article, we will discuss how to write test cases in playwright automation.

prerequisite

Setup the Playwright project

Steps

Go to the tests folder.

Create a test file with .ts extension. 

Note: I am using typescript.

Write the below line of code 

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

test.describe('Home page test suite', async () => {
    test('first test', async ({page}) => {
        await page.goto('https://practice.automationbro.com/')
        await expect(page).toHaveTitle('Practice E-Commerce Site – Automation Bro')
    })
    test('second test',async({page})=>{
        await page.goto('https://practice.automationbro.com/about/');
        await expect(page).toHaveTitle('About – Practice E-Commerce Site')
    })
});

Explanation

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

we are importing the playwright library and making use of test and expect objects in order to write our tests.

//Describe block represent a test suite
test.describe('Home page test suite', async () => {

//test block represent each test
    test('first test', async ({page}) => {
        //navigate to required web page
        await page.goto('https://practice.automationbro.com/')
        /*we are putting assertions to check the title of the webpage is matching with the text passed*/
        await expect(page).toHaveTitle('Practice E-Commerce Site – Automation Bro')
    })

Note
Playwright commands are asynchronous hence we are using await in front of the commands to handle the promises.

To run the tests 

we can use the command

npx playwright test <your filename> --headed 

--headed flag will run the test case in the head mode.

By default playwright runs tests in headless mode plus the tests will run on the browsers which are configured in playwright.config.ts file

Example 

projects: [{
            name: 'chromium',
            use: {
                ...devices['Desktop Chrome'],
            },
        }, {
            name: 'firefox',
            use: {
                ...devices['Desktop Firefox'],
            },
        }, {
            name: 'webkit',
            use: {
                ...devices['Desktop Safari'],
            },
        }

To run all the playwright tests use the below command

npx playwright test

To run the test with the title use the below command

npx playwright test -g "fiirst test"

To open the html report of the test after the test has run use the below command

npx playwright show-report

To run the test using debug mode use the below command

npx playwright test example.spec.ts --debug

Playwright debugger is very good debugging tool.We call it as a playwright inspector. This tool comes with the framework itself.

We can also record the tests using playwright inspector as well. And we can also get the locators of the webelement.

There is another way to launch the playwright debugger tool

open the cmd and type

set PWDEBUG=1

and then run the tests using

npx run test

Thanks Happy learning....