Radio Buttons | Bondar Academy

Lesson Summary

In this lesson, we will explore how to automate radio buttons in Cypress . Here are the key points discussed: Understanding Radio Buttons Radio buttons are elements that allow users to select one option from a set. When one radio button is selected, others are automatically deselected. In the DOM, radio buttons are represented as <input> elements with a type of radio . Cypress Methods for Radio Buttons The check method is specifically designed for radio buttons and checkboxes. While you can use the click command, using check is recommended for better reliability. Actionability Checks Cypress performs actionability checks to ensure elements are visible and enabled before interacting with them. If these checks fail, actions like check or click will not execute. Handling Hidden Elements Sometimes, radio buttons may be visually hidden (e.g., styled with a class like visually hidden ). In such cases, you can bypass actionability checks by using the force: true option: cy.get('selector').check({ force: true }) However, use this option cautiously as it can lead to flaky tests. Assertions and Validations To validate if a radio button is checked, use should('be.checked') . To check if a radio button is not checked, use should('not.be.checked') . To validate if a radio button is disabled, use should('be.disabled') . Selecting Radio Buttons by Label You cannot directly select radio buttons using their labels or adjacent text. Instead, you can: Use the click method on the label element. Target the input field using the label's parent element. Despite these alternatives, the recommended approach is still to use the check method for selecting radio buttons. In summary, focus on the input type, utilize the check method, and be cautious with the force: true option to ensure reliable test automation.