Working with Assertions in Playwright

Tutorial 4​​ –​​ Input to form and Assertions

What you will Learn​​ in this​​ blog:

• Working with forms​​ /​​ working with Inputs

• Working with Assertions​​ (assert URL)

• Assert page title

• Element visible assertion

• Code snippet​​ 

Working with forms​​ / working with Inputs

Launch​​ http://zero.webappsecurity.com/login.html​​ 

Mouse hover​​ 

Notice that the default ‘Login’ id is ‘username’ and the default ‘Password’ is ‘password’.​​ 

Let us see how to type these credentials​​ using playwright​​ in the ‘Login’ and ‘Password’ text fields.

Let us inspect the 2 fields and note down the value of their ids

There is a ‘type’​​ method​​ that can be used​​ to type any text into the form fields

So, let us use this​​ ‘type’​​ method to type text into​​ username/password​​ fields, see lines#7,8​​ 

Save the file​​ and execute the test

Notice below that the username/password are typed in the credential fields

The below page comes up after the script clicks the ‘Sign in button. Do not worry about the error message​​ seen below

Working with Assertions​​ (assert URL)

We have already seen the introductory usage of assertion in​​ asserting text, see​​ Tutorial#2 (quick snapshot below)​​ https://www.way2automation.com/write-and-execute-your-first-playwright-test/​​ 

In the above case, we asserted if the page header​​ contains​​ the text ‘LIFETIME MEMBERSHIP CLUB’.

Let us now see the usage of few more assertions.

To assert a URL, there is a ‘toHaveURL’ method as can be seen below

So, in line#21, we are using this assertion method to verify if the url that the script launched (mentioned in line#19) is same as the url mentioned in line#21 or not

Save the file and execute.​​ 

Notice below​​ that the assertion got passed. This means that the expected url (in line#21) matches with the actual url (in line#19)  ​​​​ 

Let us now introduce an error or a typo in our expected url

Save the file and execute now.​​ 

The assertion fails​​ this time.​​ The terminal shows the expected and received string

The terminal also displays the arrow mark​​ ​​ against the line that has the problem​​ 

Assert page title

Let us now assert the page title of​​ http://zero.webappsecurity.com/login.html​​ 

Let us first inspect the page title. Copy the below page title

Notice below that there is a ‘toHaveTitle’​​ method available

So we can write line#22​​ 

Save the file​​ and run the test, notice that the test got passed

Let us​​ introduce an error in the expected title, save the file​​ and​​ run​​ the test again.​​ Notice that the test fails.

Element visible assertion

Launch​​ http://zero.webappsecurity.com/login.html​​ and let us inspect the​​ element ‘Log in to ZeroBank’.​​ 

Notice​​ below​​ that​​ this element​​ can be located by​​ h3​​ header

To assert whether​​ the​​ element ‘Log in to ZeroBank’ is visible or not, we can simply write below 2 statements.​​ 

The first one captures the element in a constant variable and the second one asserts if this​​ element is visible​​ or not​​ 

Save the file and run the test

Code snippet

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

test('working with assertions',​​ async​​ ({​​ page​​ })​​ =>​​ {

   ​​ await​​ page.goto('http://zero.webappsecurity.com/login.html')

   ​​ await​​ expect(page).toHaveURL('http://zero.webappsecurity.com/login.html')

   ​​ await​​ expect(page).toHaveTitle('Zero - Log in')

   ​​ const​​ elem​​ =​​ await​​ page.locator('h3')

   ​​ await​​ expect(elem).toBeVisible()    

})

We will continue with assertions in our next blog.

Thank you for reading!