Tutorial 13 – Checkboxes and dropdown lists in Playwright
What you will Learn in this blog:
Handle checkboxes in PW
Handle dropdown list in PW
Code snippet
Handle checkboxes in PW
Launch https://the-internet.herokuapp.com/checkboxes
As we can see above, by default, one of the checkbox is selected and one of them is not.
Let us see how to select and de-select a checkbox using PW.
On inspecting the checkbox, we find that it is of the ‘input’ type
We can simply use the locator method to locate the first input checkbox and perform the check operation
Save and execute.
Notice below that first checkbox got selected
To uncheck the second checkbox, we can use the ‘uncheck’ method. We have also used the ‘last’ method to instruct PW to uncheck the last checkbox on the page
Save and execute.
Notice below that second checkbox got de-selected
Handle dropdown list in PW
Launch https://the-internet.herokuapp.com/dropdown
Notice the dropdown list as shown above. Let us see how to select an option from dropdown using PW.
Inspect the dropdown, notice below that it is represented by ‘id’
So we can use css selector to locate this dropdown
Next, there is a ‘selectOption’ method to select the desired option from the dropdown list
If we expand the <select> tag, we can see 2 labels:
‘Option 1’ and ‘Option 2’
So we can select the first label
Save and execute.
Notice below that ‘Option 1’ got selected
Similarly we can select ‘Option 2’
Let us also put assertions (see lines#6 and 9 below)
Save and execute. Test gets passed
Code snippet (checkbox)
import {test,expect} from '@playwright/test'
test("checkboxes", async ({ page }) => {
await page.goto('https://the-internet.herokuapp.com/checkboxes')
await page.locator('input[type="checkbox"]').first().check()
await page.locator('input[type="checkbox"]').last().uncheck()
await page.pause()
})
Code snippet (dropdown list)
import {test,expect} from '@playwright/test'
test("dropdown", async ({ page }) => {
await page.goto('https://the-internet.herokuapp.com/dropdown')
await page.locator('#dropdown').selectOption({label: 'Option 1'})
await expect(page.locator('#dropdown')).toHaveValue('1');
await page.locator('#dropdown').selectOption({label: 'Option 2'})
await expect(page.locator('#dropdown')).toHaveValue('2');
await page.pause()
})
Thank you for reading!
