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:

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:

(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

1. The statement from line no. 4 to 6 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 radio button, here 1^st we are locating the element and by using the .check() we are checking the radio button. 
3. 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. 1^st we identified the element by using the getElementById locator and then passed the Boolean value as True to check the radio button. 
4. 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. 
5. 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. 
6.  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 

1. The statement from line no. 5 to 7 is used to launch the browser and navigate to the website. 
2. The statement in line no. 10, we are using the Built-In method of the playwright to check the radio button, here 1^st we are locating the element and by using the .check() we are checking the radio button. 
3. 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.
4. The statement in line no. 16 to 17, 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. 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.
6. 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.