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!