Tutorial 2 – Write and Execute First Playwright Script
What you will Learn in this blog:
Create first Playwright blank Test
Import Testrunner and assertion
Playwright Test Syntax
Launch browser and load a website using playwright (headless mode = default)
Launch browser and load a website using playwright (headed mode)
Verify presence of an element on a page
Complete code
Create first Playwright blank Test
Right click under LEARNPW folder that we created in our last tutorial
Create a new folder or sub-folder ‘PWTests’
Right click this sub-folder and click ‘New File’
The filename should have .spec.ts as suffix as shown below (ts stands for Typescript)
Import Testrunner and assertion
We will now import Testrunner and assertions from Playwright Test package. The functions available in this package will help us automating browsers. Below is the syntax to import the packages
Select @playwright/test within single quotes as shown below
Playwright Test Syntax
To create a ‘Test’, we use the test keyword and the syntax is:
Make sure that the ‘test description’ is within the single quotes and not double.
Do not worry too much about async and page keywords right now. We will look at them later. For right now, just remember that every function in playwright is asynchronous. Also, passing the page argument to the function gives us access to all the functions that we require to control the browser.
Launch browser and load a website using playwright (headless mode = default)
The line number 4 will launch a browser and will load the desired website, see below
Save the file.
The ‘await’ keyword ensures that the script does NOT move to the next promise till the current promise is fulfilled. Right now, there is only one promise that needs to be fulfilled and that promise is to launch the url.
Open a terminal and execute: npx playwright test
Notice below that our test gets executed and it got passed. By default, the execution will be headless viz we will not be able to see the browser
Launch browser and load a website using playwright (headed mode)
To see the browser getting launched, execute the command using --headed option :
npx playwright test --headed
Notice below that the chromium browser gets launched and the website page is loaded
Verify presence of an element on page
Launch https://www.way2automation.com/lifetime-membership-club/ and inspect the header.
Notice below that it’s an h1 tag having the value LIFETIME MEMBERSHIP CLUB
To locate this header element, we will simply use the ‘locator’ method to locate the h1 element, see line#5
Next, when we mouse hover .locator method, we see that this method returns us an element locator
Let us store this element locator in a constant variable
Now we can perform validation action ‘expect’ on ‘pageHeader’ as shown below
Our complete script looks like as shown below
Let us execute this script in headless mode, notice below that our Test got passed
Let us introduce an error in the expected string, see below. We have changed LIFETIME to LFETIME
Save the file and execute the script.
Notice below that our script fails and the log clearly tells us the reason as to why our test failed
Complete code
import {test,expect} from '@playwright/test'
test('test description', async ({ page }) => {
await page.goto('https://www.way2automation.com/lifetime-membership-club/')
const pageHeader = await page.locator('h1')
await expect(pageHeader).toContainText('LFETIME MEMBERSHIP CLUB')
})
So this is how we can execute a simple test using playwright.
Thanks for reading!