Radio Buttons | Bondar Academy

Lesson Summary

This lesson covers how to work with radio buttons and validate their status in a test application. The application features two radio buttons, where selecting one disables the other. Radio Button Structure The radio buttons are organized using the NBRadio tag, with the following structure: Label - Contains the text and the input field. Input Field - Has a type of radio and may be visually hidden for custom styling. Interacting with Radio Buttons To interact with the radio buttons, you can use: getByLabel to locate the radio button by its label. Method check is recommended over click for selecting radio buttons. In cases where the radio button is visually hidden, use the force: true flag to bypass actionability checks, but use it cautiously as it may lead to flaky tests. Validating Radio Button Status Common mistakes include using isChecked for validation, which only returns a Boolean value. Instead, use locator assertions : await expect(radioButton).toBeChecked(); For negative assertions, use: await expect(optionOne).not.toBeChecked(); Summary Use getByRole with radio to select radio buttons. Prefer check over click . Use force: true cautiously. Use locator assertions for proper validation of radio button states. That's it for this lesson!