Handle Checkbox and Dropdown list using Playwright

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!

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 10th Nov 2024