Testing Radio Buttons with Webship-js
Source: Dev.to
Radio buttons are commonly used in websites when only one option must be selected at a time, such as account registration settings, user permissions, or visibility rules. Because these choices directly affect how a system behaves, it’s essential to ensure that the selected option is saved correctly and remains unchanged after saving and reloading the page.
In this article we demonstrate how to automatically verify radio button behavior in a Drupal CMS website using Webship‑JS, ensuring the selection works exactly as expected.
Selecting a Radio Button
Webship‑JS provides a step definition that selects a radio button by its label text, value, or CSS selector.
When (I | we) select radio button "([^"]*)?"Examples
| Step | Description |
|---|---|
When I select radio button "Male" | Selects the radio button with label Male |
When I select radio button "female" | Selects the radio button with label female |
When I select radio button "#gender-male" | Selects the radio button using the CSS selector #gender-male |
When we select radio button "option1" | Selects the radio button with label option1 |
Real Testing Context
Below is a practical example of testing a radio button in a Drupal CMS system. The test selects a radio button option, saves the configuration, and then verifies that the correct setting is retained.
Feature: Radio Button Validation for Account Registration Settings in Drupal CMS
Performed as an administrator.
Scenario: Validate radio button selection
Given I am on the homepage
When I click "Log in"
And I fill in "#edit-name" with "info@webship.co" by attr
And I fill in "#edit-pass" with "d" by attr
And I press "#edit-submit" by attr
And I go to "/admin/config/people/accounts"
And I scroll down 500
And I select radio button "Visitors, but administrator approval is required"
And I press "Save configuration"
And I scroll down 500
Then the radio button "Visitors, but administrator approval is required" should be selected
And the radio button "Administrators only" should not be selectedWhy It Matters
Imagine selecting the “Youth” age range and later finding the system classifies you as “Old Age”. Such unexpected changes indicate a problem with the radio button handling, as the UI should always reflect a single, clear choice.
Further Reading
Learn more about step definitions in Webship‑JS:
- Documentation site:
See the full article: