Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The form on the example page also includes some radio buttons: "Radio 1" and "Radio 2". If we select one and click "Submit", we'll see the value of the button we selected in the "Form Results" section. Let's add a test to ensure the form results always get updated when a radio button is selected.
In this video, we'll be using this page.
- The form on the example page also includes some radio buttons: "Radio 1" and "Radio 2".
- If we select one and click "Submit", we'll see the value of the button we selected in the "Form Results" section.
- Let's add a test to ensure the form results always get updated when a radio button is selected.
- You might want to just add code to the test suite and page object from the prior video. But to keep the code in this video uncluttered, I'm starting from scratch.
test/radio_buttons.js
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();
});
});
});
Now, let's update our page example class to add the methods we're going to call.
pages/example.js
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;
The form on the example page also includes
some radio buttons, Radio 1 and Radio 2.
0:00
If we select one and click submit,
0:05
then we'll see the value of the button
we selected in the form results section.
0:09
Let's add a test to ensure
the form results always get
0:14
updated when a radio button is selected.
0:17
You might want to just add
code to the test suite and
0:20
page object from the prior video.
0:23
But to keep the code in
this video uncluttered,
0:24
I'm going to start from scratch.
0:27
I'll add a test to this suite to ensure
the radio buttons update the status text.
0:30
Let's go back to our browser and
right click on our form to inspect it.
0:40
We can see the code for
the radio buttons here inside the form.
0:46
Just like the options for
0:50
the drop-down element, each radio button
has a value attribute that provides
0:51
the string that will be included in
the form data when it's submitted.
0:55
Radio 1 or radio 2.
0:59
Here in our test, I'll call
a method called click radio button,
1:02
that we'll define on our page
object class in just a moment.
1:06
I'll pass at the value of the radio
button that I wanted to click.
1:09
Then we'll call a submit method that we're
also going to define on our page object,
1:13
which will click the Submit button for us.
1:17
The rest of this test code will
look just like the code from
1:20
the drop down selection video.
1:23
First we'll find the form results element.
1:25
Then we'll get its text.
1:32
And finally we'll assert that the text
includes the value of the radio
1:39
button we selected.
1:43
Let's save that, and
1:45
now let's update our page example class
to have the methods we're going to call.
1:47
The form results locator is
unchanged from the previous video.
1:52
The same is true for the submit button.
1:58
Back in our browser, if we look at
the code for the radio buttons,
2:03
we'll see that they're input
elements with a type of radio.
2:07
Knowing that will let us
write a locator for them.
2:11
The radio buttons locator, we use a CSS
selector to find all input elements that
2:14
have a type attribute of radio.
2:19
Now let's define the method that we'll
click on the radio button we want.
2:24
Just like the method that clicked
the drop down option before,
2:28
this method will find the radio button
element based on its value attribute.
2:30
So we take that value as a parameter.
2:34
Within this method,
we take the page object's driver and
2:38
we call the find element method
on it with the CSS locator.
2:42
In our selector, we use multiple square
brackets to match multiple attributes.
2:46
We're looking for an input element
whose type attribute is radio and
2:51
whose value attribute matches value passed
in to this click radio button method.
2:55
We then take whatever element we found and
call it click method to click on it.
3:00
Our submit method is identical
to the previous video,
3:06
we just find the submit button and
click on it.
3:09
Let's save that and
let's go to our terminal and
3:13
try running out with the mocha command.
3:16
Our test passes.
3:20
Let me go back to our test and
comment out the line that quits out of
3:22
our driver browser so that I can
show you the effects on the page.
3:25
Save that, go back to the terminal and
try rerunning it.
3:29
And you can see down here in
the Form Results section.
3:36
That the value of the radio button we've
selected is in included in the text.
3:39
You need to sign up for Treehouse in order to download course files.
Sign up