Write and Execute Your First Playwright Test

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
L
aunch​​ 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!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024