Selenium Element Interaction: Text Version

January 15, 2018

Selenium Element Interaction: Text Version

Now that you know how it is possible to identify an element on the page under test let us move on to actually interacting with these elements.

Clicking On Elements

Often you need to click an element as part of the test. This can be a button, link or any other type of element. The code below shows how you can click on a button identified by the id ‘button’ on the page.

[java]
WebDriver driver = new ChromeDriver();

driver.navigate().to("http://www.selenium.academy/Examples/Interaction.html");

WebElement button = driver.findElement(By.id("button"));

button.click();

driver.quit();
[/java]

Run Example Online
[csharp]
IWebDriver driver = new ChromeDriver();

driver.Navigate().GoToUrl("http://www.selenium.academy/Examples/Interaction.html");

IWebElement button = driver.FindElement(By.Id("button"));

button.Click();

driver.Quit();
[/csharp]

Run Example Online
[ruby]
require ‘selenium-webdriver’
require ‘test/unit’

class ClickTest < Test::Unit::TestCase

def setup
# Start a new instance of Google Chrome
@driver = Selenium::WebDriver.for :chrome
end

def testChrome
@driver.navigate.to ‘http://www.selenium.academy/Examples/Interaction.html’
button = @driver.find_element(:id => ‘button’)
button.click
end

def teardown
@driver.quit
end
end
[/ruby]

Run Example Online
[python]
import unittest
from selenium import webdriver

class TestClick(unittest.TestCase):

def setUp(self):
# Start a new instance of Google Chrome
self.driver = webdriver.Chrome()

def tearDown(self):
# close the Chrome instance
self.driver.quit()

def testChrome(self):
self.driver.get(‘http://www.selenium.academy/Examples/Interaction.html’)

button = self.driver.find_element_by_id(‘button’)
button.click

if __name__ == "__main__":
unittest.main() # run all tests
[/python]

Run Example Online
[javascript]
var assert = require(‘assert’),
test = require(‘selenium-webdriver/testing’),
webdriver = require(‘selenium-webdriver’);

test.describe(‘Selenium Academy’, async function() {
test.it(‘should work in Chrome’, async function() {

this.timeout(5000);

var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();
await driver.get(‘http://www.selenium.academy/Examples/Interaction.html’);

var button = await driver.findElement(webdriver.By.id(‘button’));
await button.click();

await driver.quit();

});
});
[/javascript]

Run Example Online

Simple Text Input

Another very common use case is to set the text of a form element like a text box or password field. With the ‘sendKeys’ method shown below, you can send normal text and special keys (like ENTER) directly to an element on the page.

[java]
WebDriver driver = new ChromeDriver();

driver.navigate().to("http://www.selenium.academy/Examples/Interaction.html");

WebElement textbox = driver.findElement(By.id("textbox"));

textbox.sendKeys("hello");

textbox.sendKeys(Keys.ENTER);

driver.quit();
[/java]

Run Example Online
[csharp]
IWebDriver driver = new ChromeDriver();

driver.Navigate().GoToUrl("http://www.selenium.academy/Examples/Interaction.html");

IWebElement textbox = driver.FindElement(By.Id("textbox"));

textbox.SendKeys("hello");

textbox.SendKeys(Keys.Enter);

driver.Quit();
[/csharp]

Run Example Online
[ruby]
require ‘selenium-webdriver’
require ‘test/unit’

class TextInputTest < Test::Unit::TestCase

def setup
# Start a new instance of Google Chrome
@driver = Selenium::WebDriver.for :chrome
end

def testChrome
@driver.navigate.to ‘http://www.selenium.academy/Examples/Interaction.html’
textbox = @driver.find_element(:id => ‘textbox’)
textbox.send_keys(‘hello’)
textbox.send_keys(:return)
end

def teardown
@driver.quit
end
end
[/ruby]

Run Example Online
[python]
import unittest
from selenium import webdriver
from selenium.webdriver.common.keys import Keys

class TestTextInput(unittest.TestCase):

def setUp(self):
# Start a new instance of Google Chrome
self.driver = webdriver.Chrome()

def tearDown(self):
# close the Chrome instance
self.driver.quit()

def testChrome(self):
self.driver.get(‘http://www.selenium.academy/Examples/Interaction.html’)

textbox = self.driver.find_element_by_id(‘textbox’)
textbox.send_keys(‘hello’)
textbox.send_keys(Keys.ENTER)

if __name__ == "__main__":
unittest.main() # run all tests
[/python]

Run Example Online
[javascript]
var assert = require(‘assert’),
test = require(‘selenium-webdriver/testing’),
webdriver = require(‘selenium-webdriver’);

test.describe(‘Selenium Academy’, async function() {
test.it(‘should work in Chrome’, async function() {

this.timeout(5000);

var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();
await driver.get(‘http://www.selenium.academy/Examples/Interaction.html’);

var textbox = await driver.findElement(webdriver.By.id(‘textbox’));
await textbox.sendKeys(‘hello’);
await textbox.sendKeys(webdriver.Key.ENTER);

await driver.quit();

});
});
[/javascript]

Run Example Online

Checkbox Selection

Selecting or deselecting a checkbox is another necessity if you want to be able to fill forms automatically. To find out if a checkbox is already selected you can use the ‘select’ method. To toggle the state simply click on the checkbox element.

[java]
WebDriver driver = new ChromeDriver();

driver.navigate().to("http://www.selenium.academy/Examples/Interaction.html");

WebElement checkbox = driver.findElement(By.id("checkbox"));

if (!checkbox.isSelected()) {
checkbox.click();
}

driver.quit();
[/java]

Run Example Online
[csharp]
IWebDriver driver = new ChromeDriver();

driver.Navigate().GoToUrl("http://www.selenium.academy/Examples/Interaction.html");

IWebElement checkbox = driver.FindElement(By.Id("checkbox"));

if (!checkbox.Selected)
checkbox.Click();

driver.Quit();
[/csharp]

Run Example Online
[ruby]
require ‘selenium-webdriver’
require ‘test/unit’

class CheckboxTest < Test::Unit::TestCase

def setup
# Start a new instance of Google Chrome
@driver = Selenium::WebDriver.for :chrome
end

def testChrome
@driver.navigate.to ‘http://www.selenium.academy/Examples/Interaction.html’
checkbox = @driver.find_element(:id => ‘checkbox’)
if !checkbox.selected?
checkbox.click
end
end

def teardown
@driver.quit
end
end
[/ruby]

Run Example Online
[python]
import unittest
from selenium import webdriver

class TestCheckbox(unittest.TestCase):

def setUp(self):
# Start a new instance of Google Chrome
self.driver = webdriver.Chrome()

def tearDown(self):
# close the Chrome instance
self.driver.quit()

def testChrome(self):
self.driver.get(‘http://www.selenium.academy/Examples/Interaction.html’)

checkbox = self.driver.find_element_by_id(‘checkbox’)
if not checkbox.is_selected():
checkbox.click

if __name__ == "__main__":
unittest.main() # run all tests
[/python]

Run Example Online
[javascript]
var assert = require(‘assert’),
test = require(‘selenium-webdriver/testing’),
webdriver = require(‘selenium-webdriver’);

test.describe(‘Selenium Academy’, async function() {
test.it(‘should work in Chrome’, async function() {

this.timeout(5000);

var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();
await driver.get(‘http://www.selenium.academy/Examples/Interaction.html’);

var checkbox = await driver.findElement(webdriver.By.id(‘checkbox’));
if (!await checkbox.isSelected())
await checkbox.click();

await driver.quit();

});
});
[/javascript]

Run Example Online

Combobox Selection

The last interaction in this lesson is a little more complicated. It might be necessary to select one of the options present in an HTML select element (so-called Combobox). To do this you need to identify the element first and then select the appropriated option. This can be done by the index, value or visible text of the option you want to select.

[java]
WebDriver driver = new ChromeDriver();

driver.navigate().to("http://www.selenium.academy/Examples/Interaction.html");

Select select = new Select(driver.findElement(By.id("combobox")));

select.selectByIndex(1);

select.selectByValue("01");

select.selectByVisibleText("Option 2");

driver.quit();
[/java]

Run Example Online
[csharp]
IWebDriver driver = new ChromeDriver();

driver.Navigate().GoToUrl("http://www.selenium.academy/Examples/Interaction.html");

SelectElement combobox = new SelectElement(driver.FindElement(By.Id("combobox")));

combobox.SelectByIndex(1);

combobox.SelectByValue("01");

combobox.SelectByText("Option 2");

driver.Quit();
[/csharp]

Run Example Online
[ruby]
require ‘selenium-webdriver’
require ‘test/unit’

class ComboboxTest < Test::Unit::TestCase

def setup
# Start a new instance of Google Chrome
@driver = Selenium::WebDriver.for :chrome
end

def testChrome
@driver.navigate.to ‘http://www.selenium.academy/Examples/Interaction.html’
combobox = @driver.find_element(:id => ‘combobox’)
option = Selenium::WebDriver::Support::Select.new(combobox)
option.select_by(:index, 1)
option.select_by(:value, ’01’)
option.select_by(:text, ‘Option 2’)
end

def teardown
@driver.quit
end
end
[/ruby]

Run Example Online
[python]
import unittest
from selenium import webdriver
from selenium.webdriver.support.ui import Select

class TestCombobox(unittest.TestCase):

def setUp(self):
# Start a new instance of Google Chrome
self.driver = webdriver.Chrome()

def tearDown(self):
# close the Chrome instance
self.driver.quit()

def testChrome(self):
self.driver.get(‘http://www.selenium.academy/Examples/Interaction.html’)

combobox = Select(self.driver.find_element_by_id(‘combobox’))
combobox.select_by_index(1)
combobox.select_by_value(’01’)
combobox.select_by_visible_text(‘Option 2’)

if __name__ == "__main__":
unittest.main() # run all tests
[/python]

Run Example Online
[javascript]
var assert = require(‘assert’),
test = require(‘selenium-webdriver/testing’),
webdriver = require(‘selenium-webdriver’);

test.describe(‘Selenium Academy’, async function() {
test.it(‘should work in Chrome’, async function() {

this.timeout(5000);

var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();
await driver.get(‘http://www.selenium.academy/Examples/Interaction.html’);

var option = await driver.findElement(webdriver.By.id(‘option2’));
await option.click();

await driver.quit();
});
});
[/javascript]

Run Example Online

Next Steps

In our next lesson, we will cover how you can add dynamic waits to your tests.

Elements Selenium