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.
-
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();
-
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();
-
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
-
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
-
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(); }); });
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.
-
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();
-
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();
-
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
-
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
-
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(); }); });
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.
-
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();
-
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();
-
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
-
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
-
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(); }); });
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.
-
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();
-
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();
-
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
-
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
-
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(); }); });
Next Steps
In our next lesson, we will cover how you can add dynamic waits to your tests.