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.

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();

Run Example Online

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();

Run Example Online

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

Run Example Online

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

Run Example Online

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();
 
  });
});

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.

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();

Run Example Online

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();

Run Example Online

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

Run Example Online

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

Run Example Online

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();
 
  });
});

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.

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();

Run Example Online

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();

Run Example Online

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

Run Example Online

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

Run Example Online

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();
 
  });
});

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.

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();

Run Example Online

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();

Run Example Online

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

Run Example Online

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

Run Example Online

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();
  });
});

Run Example Online

Next Steps

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

Elements Selenium