Clicking Radio Buttons

const {Browser, By, Key, until} = require("selenium-webdriver");
const {suite} = require("selenium-webdriver/testing");
const assert = require('assert');
const ExamplePage = require('../pages/example.js');

suite(function(env) {
    describe('Radio buttons', function() {
        let driver;
        let page;

        before(async function() {
            driver = await env.builder().build();
            page = new ExamplePage(driver);
            await page.open();
        });

        // I'll add a test to this suite to ensure the radio buttons update
        // the status text.
        it('update status text', async function() {
            // Let's go back to our browser, and right-click on our form to
            // inspect it. We can see the code for the radio buttons here
            // inside the form. Just like the options for the drop-down
            // element, each radio button has a "value" attribute that
            // provides the string that will be included in the form data
            // when it's submitted: "radio1" or "radio2".
            // I'll call a method called clickRadioButton() that we'll define
            // on our page object. I'll pass it the value of the radio button
            // that I want it to click.
            await page.clickRadioButton('radio2');
            // Then we'll call a submit() method that we're also going to
            // define on our page object, which will click the submit button
            // for us.
            await page.submit();
            // The rest of this test's code will look just like the code from
            // the drop-down selection video. First, we find the form results
            // element.
            let results = await driver.findElement(page.locators.formResults);
            // Then, we get its text.
            let text = await results.getText();
            // And finally, we assert that the text includes the value of the
            // radio button we selected.
            assert(text.includes("radio2"));
        });

        after(async function() {
            driver.quit();
        });
    });
});

const {Browser, By, Key, until} = require("selenium-webdriver");

const url = 'http://crossbrowsertesting.github.io/selenium_example_page.html';

class ExamplePage {
    constructor(driver) {
        this.driver = driver;
        this.locators = {
            // The formResults and submit locators are unchanged from the
            // previous video.
            formResults: By.id('form-results'),
            submit: By.id('submitbtn'),
            // Back in our browser, if we look at the code for the radio
            // buttons, we'll see that they're <input> elements with a 
            // "type" attribute of "radio". Knowing that will let us write
            // a locator for them.
            // The radioButtons locator will use a CSS selector to find all
            // <input> elements that have a "type" attribute of "radio".
            radioButtons: By.css('input[type="radio"]'),
        }
    }

    open() {
        this.driver.get(url);
    }

    // Now let's define the method that will click on the radio button we
    // want. Just like the method that clicked a drop-down option before,
    // this method will find the radio button element based on its value
    // attribute, so we take that value as a parameter.
    async clickRadioButton(value) {
        // Within the method, we take the page object's driver...
        await this.driver
            // And we call findElement with a CSS locator. In our selector
            // we use multiple square brackets to match multiple attributes.
            // We're looking for an <input> element whose "type" attribute
            // is "radio", and whose "value" attribute matches the value
            // passed in to this clickRadioButton() method.
            .findElement(By.css('input[type="radio"][value="' + value + '"]'))
            // We then take whatever element we found, and call its
            // click() method to click on it.
            .click();
    }

    // Our submit() method is identical to the previous video.
    // We just find the submit button and click on it.
    async submit(value) {
        await this.driver.findElement(this.locators.submit).click();
    }
}

module.exports = ExamplePage;