In this blog, we will cover working with checkbox in Playwright and different ways to handle them on DOM. 

Pre-requisite:

As a pre-requisite we must check whether the following dependencies are installed or not:

1. Project setup
2. Run pip list in PyCharm terminal to check whether playwright is installed or not. 

As shown in the above picture playwright should be installed in the project. 

If the playwright is not installed refer to Web Automation Testing using Playwright.

Using Sync API Code:

(A) Different ways to check the Check box with Syntax in Playwright:-

•  Using the Built-In method .check() of Playwright: 

By using .check() method we can easily check the checkbox. If required, we can provide arguments such as position, timeout, force, no_wait_after. 

• Using JavaScript Code: 

To execute Javascript Code in Playwright we have to use .evaluate() method. 

• Using query_selector of playwright and JavaScript code.

We can execute the Javascript even by using the query_Selector method. In query_selector() we find the locator and store in variable and pass that variable in evaluation() method. 

(B) To check whether the checkbox is checked or not we can use .is_checked() Built-In method of the playwright 

(C)  To Uncheck the checkbox, we can use the .uncheck() Built-In method of Playwright. 

Test Case Scenario for Sync API:

1. Launch any browser. 
2. Navigate to http://demo.guru99.com/test/radio.html 
3. Check the checkbox using Different ways. 
4. Verify checkbox is checked or not. 
5. Once the checkbox is checked then uncheck it. 

from playwright.sync_api import sync_playwright 
with sync_playwright() as page: 
    browser = page.chromium.launch(headless=False) 
    page = browser.new_page() 
    page.goto("http://demo.guru99.com/test/radio.html") 
    #1st Way 
    page.locator('#vfb-6-0').check() 
    #2nd Way 
    page.evaluate('document.getElementById("vfb-6-0").checked=true') 
    #3rd Way 
    ele = page.query_selector('#vfb-6-0') 
    ele.evaluate('ele1 => ele1.checked=true') 
    #To assert wheather checkbox is checked or not using inbuilt method 
    assert page.locator('#vfb-6-0').is_checked() 
    #To uncheck the checkbox using inbuilt method 
    page.locator('#vfb-6-0').uncheck() 
 
    page.close() 
    browser.close() 

As shown in the above code snippet:

1. The statement from line no. 4 to 5 is used to launch the browser and navigate to the website. 
2. In the statement in line no. 9, we are using the Built-In method of the playwright to check the checkbox, here 1^st we are locating the element and by using the .check() we are checking the checkbox. 
3. In the statement in line no. 12, we are checking the checkbox using the JavaScript code. We can execute the JavaScript code using the .evaluate() method. 1^st we identified the element by using the getElementById locator and then passed the Boolean value as True to check the checkbox. 
4. The statement in line no. 15 to 16, In this 1^st we have identified the element using the .query_selectory() method and stored in variable named as ele. After that, by using the variable object, we are executing the JavaScript code as shown in line no. 16. 
5. The statement in line no. 19 is used to assert whether the check box is checked or not. By using the .is_checked() method we can assert whether the checkbox is checked or not. 
6. The statement in line no. 22 represents how to uncheck the checked checkbox. We can uncheck the checkbox using the Built-In method I.e .uncheck() method.  

Using Async API Code:

(A) Different ways to check the checkbox:

• Using the Buit-In method .check() of Playwright:

By using .check() method we can easily check the checkbox. If required, we can provide arguments such as position, timeout, force, and no_wait_after. 

• Using Java Script Code: 

To execute JavaScript Code in Playwright we must use .evaluate() method. 

• Using query_selector of playwright and JavaScript code:

We can execute JavaScript even by using the query_Selector method. In query_selector() we find the locator and store it in the variable, and pass that variable in evaluation() method. 

(B) To check whether the checkbox is checked or not we can use .is_checked() Built-In method of the playwright:

(C) To Uncheck the checkbox, we can use the .uncheck() Built-In method of Playwright:

Test Case Scenario for Async API:

1. Launch any browser.
2. Navigate to http://demo.guru99.com/test/radio.html 
3. Check the checkbox using Different ways. 
4. Verify checkbox is checked or not. 
5. Once the checkbox is checked then uncheck it. 

import asyncio 
from playwright.async_api import async_playwright 
async def checkbox_text(): 
    async with async_playwright() as page: 
        browser = await page.chromium.launch(headless=False) 
        page = await browser.new_page() 
        await page.goto("http://demo.guru99.com/test/radio.html") 
        #1st Way 
        await page.locator('#vfb-6-0').check() 
 
        # #2nd Way 
        await page.evaluate('document.getElementById("vfb-6-0").checked=true') 
        # #3rd Way 
        element = await page.query_selector('#vfb-6-0') 
        await element.evaluate('ele1 => ele1.checked=true') 
        #To assert wheather checkbox is checked or not using inbuilt method 
        assert page.locator('#vfb-6-0').is_checked() 
        #To uncheck the checkbox using inbuilt method 
        await page.locator('#vfb-6-0').uncheck() 
        await page.close() 
        await browser.close() 
asyncio.run(checkbox_text()) 

As shown in the above code snippet, we are using python’s Async API. In this, before every python statement, we are using the await keyboard. By using the Asynio.run()  method we run the Async Code. 

Read the next Playwright blog Here.