Overview
This section demonstrates how to use Playwright to iterate through radio butttons and checkboxes. The approach involves two scenarios: one using a local test page and another utilizing the jQuery UI website for practical testing.
Test Page Setup
HTML Structure
For convenience, we'll reuse the radio.html file from the previous example:
<html>
<head>
<meta charset="UTF-8">
<title>Test Radio Buttons</title>
<style type="text/css">
.button1 {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 28px;
margin: 20px 300px 50px 300px;
text-decoration:none;
color: white;
}
#myAnchor
{
text-decoration:none;
color: white;
}
#hg
{
margin: 20px 300px 50px 300px;
}
</style>
</head>
<body>
<button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">Beijing-HongGe</a></button></br>
<div id="hg">
<div>
<h3>Checkbox Selection</h3> Select preferred jungle heroes:<br>
<label><input name="checkbox1" type="checkbox" value="LiBai"/>Li Bai </label><br>
<label><input name="checkbox2" type="checkbox" value="HanXin"/>Han Xin </label><br>
<label><input name="checkbox3" type="checkbox" value="GongsunLi" checked="checked"/>Gongsun Li </label><br>
<label><input name="checkbox4" type="checkbox" value="Luna"/>Luna </label><br>
</div>
<div>
<h3>Radio Selection</h3> Choose preferred jungle hero:<br>
<label><input name="radio" type="radio" value="0" checked="checked"/>Li Bai </label><br>
<label><input name="radio" type="radio" value="1"/>Han Xin </label><br>
<label><input name="radio" type="radio" value="2"/>Luna </label><br>
<label><input name="radio" type="radio" value="3"/>Sun Shangxiang </label><br>
</div>
</div>
</body>
</html>
Iterating Through Radio Buttons
Approach
- Identify common attributes of all radio buttons
- Locate radio elements using shared attributes
- Use loops to iterate through each element
Implementation Code
# encoding: utf-8
'''
Created on 2023-09-27
Author: Beijing-HongGe
Project: Playwright Automation - Radio and Checkbox Handling
'''
from playwright.sync_api import sync_playwright
with sync_playwright() as engine:
browser_instance = engine.chromium.launch(headless=False)
web_page = browser_instance.new_page()
web_page.goto("C:/Users/DELL/Desktop/test/radio.html")
web_page.wait_for_timeout(3000)
# Iterate through unselected radio buttons
radio_elements = web_page.locator('[name="radio"]').all()
for current_radio in radio_elements:
if not current_radio.is_checked():
current_radio.click()
web_page.wait_for_timeout(2000)
browser_instance.close()
Iterating Through Checkboxes
Approach
The same methodology applies to checkboxes, focusing on identifying common attributes.
Implementation Code
# encoding: utf-8
'''
Created on 2023-09-27
Author: Beijing-HongGe
Project: Playwright Automation - Checkbox Handling
'''
from playwright.sync_api import sync_playwright
with sync_playwright() as engine:
browser_instance = engine.chromium.launch(headless=False)
web_page = browser_instance.new_page()
web_page.goto("C:/Users/DELL/Desktop/test/radio.html")
web_page.wait_for_timeout(3000)
# Iterate through unselected checkboxes
checkbox_elements = web_page.locator('[type="checkbox"]').all()
for current_box in checkbox_elements:
if not current_box.is_checked():
current_box.click()
web_page.wait_for_timeout(2000)
browser_instance.close()
jQuery UI Website Example
Target URL
For demonstration purposes, we'll use a jQuery UI example that showcases styled form elements.
Implementation Code
# encoding: utf-8
'''
Created on 2023-11-07
Author: Beijing-HongGe
Project: Playwright Automation - jQuery UI Radio Button Handling
'''
from playwright.sync_api import sync_playwright
with sync_playwright() as engine:
browser_instance = engine.chromium.launch(headless=False)
web_page = browser_instance.new_page()
web_page.goto("https://www.jq22.com/demo/inputStyle201703310052")
web_page.wait_for_timeout(3000)
# Iterate through unselected radio buttons
hot_radio_buttons = web_page.locator('[name="hot"]').all()
for button in hot_radio_buttons:
if not button.is_checked():
button.click()
web_page.wait_for_timeout(2000)
browser_instance.close()
Summary
The key to iterating through radio buttons and checkboxes lies in identifying shared attributes and using locator methods with loops. For radio buttons, only the last selection will remain active, while checkboxes can all be selected simulteneously.