In this blog, we will cover working with Radio buttons in Playwright and different ways to handle them on DOM.
As a pre-requisite, we have to check whether the following dependencies or installed or not:
- Project setup.
- 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:
(A) Different ways to handle Radio Buttons in Playwright
- Using the Buit-In method .check() of the Playwright.
By using .check() method we can easily check the radio button. 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 Java Script code.
We can execute the 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 the evaluation() method.

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

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

Test Case Scenario for Sync API:
Step 1: Launch any browser.
Step 2: Navigate to http://demo.guru99.com/test/radio.html
Step 3: Check the radio button using different ways.
Step 4: Verify radio button is checked or not.
Step 5: Once the radio button 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-7-1').check()
#2nd way
page.evaluate('document.getElementById("vfb-7-1").checked=true;')
#3rd Way
element = page.query_selector('#vfb-7-1')
element.evaluate('ele1 => ele1.checked=true')
# Verify radio button is selected or not using assertion
assert page.locator('#vfb-7-1').is_checked()
# to uncheck radio button
page.locator('#vfb-7-1').uncheck()
page.close()
browser.close()

Code Explanation:
As shown in the above code snippet
- The statement from line no. 4 to 6 is used to launch the browser and navigate to the website.
- In the statement in line no. 9, we are using the Built-In method of the playwright to check the radio button, here 1st we are locating the element and by using the .check() we are checking the radio button.
- In the statement in line no. 12, we are checking the radio button using the javascript code. We can execute the javascript code using the .evaluate() method. 1st we identified the element by using the getElementById locator and then passed the Boolean value as True to check the radio button.
- The statement in line no. 15 to 16, In this 1st 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.
- The statement in line no. 19 is used to assert whether the radio button is checked or not. By using the .is_checked() method we can assert whether the radio button is checked or not.
- The statement in line no. 22 represents how to uncheck the checked radio button We can uncheck the radio button using the Built-In method I.e the .uncheck() method.
Using Async API:
(A) Different ways to handle Radio Buttons in Playwright.
- Using the Buit-In method .check() of the Playwright.
By using .check() method we can easily check the radio button. 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 Java Script code
We can execute the 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 the evaluation() method.

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

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

Test Case Scenario for Async API:
Step 1: Launch any browser.
Step 2: Navigate to http://demo.guru99.com/test/radio.html
Step 3: Check the radio button using different ways.
Step 4: Verify radio button is checked or not.
Step 5: Once the radio button is checked then uncheck it.
import asyncio
from playwright.async_api import async_playwright
async def radio_button():
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-7-1').check()
#2nd way
await page.evaluate('document.getElementById("vfb-7-1").checked=true;')
#3rd Way
element = await page.query_selector('#vfb-7-1')
await element.evaluate('ele1 => ele1.checked=true')
# Verify radiobutton is selected or not using assertion
assert page.locator('#vfb-7-1').is_checked()
# to uncheck radio btn
await page.locator('#vfb-7-1').uncheck()
asyncio.run(radio_button())

Code Explanation:
As shown in the above code snippet
- The statement from line no. 5 to 7 is used to launch the browser and navigate to the website.
- The statement in line no. 10, we are using the Built-In method of the playwright to check the radio button, here 1st we are locating the element and by using the .check() we are checking the radio button.
- In the statement in line no. 13, we are checking the radio button using the javascript code. We can execute the javascript code using the .evaluate() method. 1st we identified the element by using the getElementById locator and then passed the Boolean value as True to check the radio button.
- The statement in line no. 16 to 17, In this 1st 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.
- The statement in line no. 20 is used to assert whether the radio button is checked or not. By using the .is_checked() method we can assert whether the radio button is checked or not.
- The statement in line no. 23 represents how to uncheck the checked radio button We can uncheck the radio button using the Built-In method I.e the .uncheck() method.
Read the next Playwright blog Here.