Interacting with web elements (original) (raw)

A high-level instruction set for manipulating form controls.

There are only 5 basic commands that can be executed on an element:

• click (applies to any element)
• send keys (only applies to text fields and content editable elements)
• clear (only applies to text fields and content editable elements)
• submit (only applies to form elements)
• select (see Select List Elements)

Additional validations

These methods are designed to closely emulate a user’s experience, so, unlike the Actions API, it attempts to perform two things before attempting the specified action.

1. If it determines the element is outside the viewport, itscrolls the element into view, specifically it will align the bottom of the element with the bottom of the viewport.
2. It ensures the element is interactablebefore taking the action. This could mean that the scrolling was unsuccessful, or that the element is not otherwise displayed. Determining if an element is displayed on a page was too difficult todefine directly in the webdriver specification, so Selenium sends an execute command with a JavaScript atom that checks for things that would keep the element from being displayed. If it determines an element is not in the viewport, not displayed, notkeyboard-interactable, or notpointer-interactable, it returns an element not interactable error.

Click

The element click command is executed on the center of the element. If the center of the element is obscured for some reason, Selenium will return an element click intercepted error.

        driver.get("https://www.selenium.dev/selenium/web/inputs.html");

        // Click on the element 
        WebElement checkInput=driver.findElement(By.name("checkbox_input"));
        checkInput.click();

examples/java/src/test/java/dev/selenium/elements/InteractionTest.java

package dev.selenium.elements;

import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.time.Duration;
import static org.junit.jupiter.api.Assertions.assertEquals;

public class InteractionTest{

    @Test
    public void interactWithElements() {
        WebDriver driver = new ChromeDriver();
        driver.manage().timeouts().implicitlyWait(Duration.ofMillis(500));
        // Navigate to Url
        driver.get("https://www.selenium.dev/selenium/web/inputs.html");

        // Click on the element 
        WebElement checkInput=driver.findElement(By.name("checkbox_input"));
        checkInput.click();
        Boolean isChecked=checkInput.isSelected();
        assertEquals(isChecked,false);

        //SendKeys
        // Clear field to empty it from any previous data
        WebElement emailInput=driver.findElement(By.name("email_input"));
        emailInput.clear();
        //Enter Text
        String email="admin@localhost.dev";
        emailInput.sendKeys(email);
        //Verify
        String data=emailInput.getAttribute("value");
        assertEquals(data,email);


        //Clear Element
        // Clear field to empty it from any previous data
        emailInput.clear();
        data=emailInput.getAttribute("value");
        assertEquals(data, ""); 

        driver.quit();
    }

}

    # Navigate to URL
    driver.get("https://www.selenium.dev/selenium/web/inputs.html")

    # Click on the checkbox
    check_input = driver.find_element(By.NAME, "checkbox_input")
    check_input.click()

examples/python/tests/elements/test_interaction.py

from selenium import webdriver
from selenium.webdriver.common.by import By

import pytest


def test_interactions():
    # Initialize WebDriver
    driver = webdriver.Chrome()
    driver.implicitly_wait(0.5)

    # Navigate to URL
    driver.get("https://www.selenium.dev/selenium/web/inputs.html")

    # Click on the checkbox
    check_input = driver.find_element(By.NAME, "checkbox_input")
    check_input.click()

    is_checked = check_input.is_selected()
    assert is_checked == False

    # Handle the email input field
    email_input = driver.find_element(By.NAME, "email_input")
    email_input.clear()  # Clear field
    
    email = "admin@localhost.dev"
    email_input.send_keys(email)  # Enter text

    # Verify input
    data = email_input.get_attribute("value")
    assert data == email

    # Clear the email input field again
    email_input.clear()
    data = email_input.get_attribute("value")
    assert data == ""

    # Quit the driver
    driver.quit()

            // Navigate to Url
                driver.Navigate().GoToUrl("https://www.selenium.dev/selenium/web/inputs.html");
                // Click on the element 
                IWebElement checkInput = driver.FindElement(By.Name("checkbox_input"));
                checkInput.Click();

examples/dotnet/SeleniumDocs/Elements/InteractionTest.cs

using System;
    using Microsoft.VisualStudio.TestTools.UnitTesting;
    using OpenQA.Selenium;
    using OpenQA.Selenium.Chrome;
    
    namespace SeleniumDocs.Elements
    {
        [TestClass]
        public class InteractionTest
        {
            [TestMethod]
            public void TestInteractionCommands()
            {
                IWebDriver driver = new ChromeDriver();
                driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromMilliseconds(500);
    
                // Navigate to Url
                driver.Navigate().GoToUrl("https://www.selenium.dev/selenium/web/inputs.html");
                // Click on the element 
                IWebElement checkInput = driver.FindElement(By.Name("checkbox_input"));
                checkInput.Click();
    
                //Verify
                Boolean isChecked = checkInput.Selected;
                Assert.AreEqual(isChecked, false);
    
                //SendKeys
                // Clear field to empty it from any previous data
                IWebElement emailInput = driver.FindElement(By.Name("email_input"));
                emailInput.Clear();
                //Enter Text
                String email = "admin@localhost.dev";
                emailInput.SendKeys(email);
    
                //Verify
                String data = emailInput.GetAttribute("value");
                Assert.AreEqual(data, email);
    
    
                //Clear Element
                // Clear field to empty it from any previous data
                emailInput.Clear();
                data = emailInput.GetAttribute("value");
                
                //Verify
                Assert.AreEqual(data, "");
    
                //Quit the browser
                driver.Quit();
            }
        }
    }

    driver.find_element(name: 'color_input').click

examples/ruby/spec/elements/interaction_spec.rb

# frozen_string_literal: true

require 'spec_helper'

RSpec.describe 'Element Interaction' do
  let(:driver) { start_session }

  before { driver.get 'https://www.selenium.dev/selenium/web/inputs.html' }

  it 'clicks an element' do
    driver.find_element(name: 'color_input').click
  end

  it 'clears and send keys to an element' do
    driver.find_element(name: 'email_input').clear
    driver.find_element(name: 'email_input').send_keys 'admin@localhost.dev'
  end
end

    await submitButton.click();

examples/javascript/test/getting_started/firstScript.spec.js

const {By, Builder, Browser} = require('selenium-webdriver');
  const assert = require("assert");
  
  (async function firstTest() {
    let driver;
    
    try {
      driver = await new Builder().forBrowser(Browser.CHROME).build();
      await driver.get('https://www.selenium.dev/selenium/web/web-form.html');
    
      let title = await driver.getTitle();
      assert.equal("Web form", title);
    
      await driver.manage().setTimeouts({implicit: 500});
    
      let textBox = await driver.findElement(By.name('my-text'));
      let submitButton = await driver.findElement(By.css('button'));
    
      await textBox.sendKeys('Selenium');
      await submitButton.click();
    
      let message = await driver.findElement(By.id('message'));
      let value = await message.getText();
      assert.equal("Received!", value);
    } catch (e) {
      console.log(e)
    } finally {
      await driver.quit();
    }
  }())
  

    // Navigate to Url
    driver.get("https://www.selenium.dev/selenium/web/inputs.html")

    // Click the element
    driver.findElement(By.name("color_input")).click();
  
  

Send keys

The element send keys commandtypes the provided keys into an editable element. Typically, this means an element is an input element of a form with a text type or an element with a content-editable attribute. If it is not editable,an invalid element state error is returned.

Here is the list of possible keystrokes that WebDriver Supports.

        // Clear field to empty it from any previous data
        WebElement emailInput=driver.findElement(By.name("email_input"));
        emailInput.clear();
        //Enter Text
        String email="admin@localhost.dev";
        emailInput.sendKeys(email);

examples/java/src/test/java/dev/selenium/elements/InteractionTest.java

package dev.selenium.elements;

import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.time.Duration;
import static org.junit.jupiter.api.Assertions.assertEquals;

public class InteractionTest{

    @Test
    public void interactWithElements() {
        WebDriver driver = new ChromeDriver();
        driver.manage().timeouts().implicitlyWait(Duration.ofMillis(500));
        // Navigate to Url
        driver.get("https://www.selenium.dev/selenium/web/inputs.html");

        // Click on the element 
        WebElement checkInput=driver.findElement(By.name("checkbox_input"));
        checkInput.click();
        Boolean isChecked=checkInput.isSelected();
        assertEquals(isChecked,false);

        //SendKeys
        // Clear field to empty it from any previous data
        WebElement emailInput=driver.findElement(By.name("email_input"));
        emailInput.clear();
        //Enter Text
        String email="admin@localhost.dev";
        emailInput.sendKeys(email);
        //Verify
        String data=emailInput.getAttribute("value");
        assertEquals(data,email);


        //Clear Element
        // Clear field to empty it from any previous data
        emailInput.clear();
        data=emailInput.getAttribute("value");
        assertEquals(data, ""); 

        driver.quit();
    }

}

    # Handle the email input field
    email_input = driver.find_element(By.NAME, "email_input")
    email_input.clear()  # Clear field
    
    email = "admin@localhost.dev"
    email_input.send_keys(email)  # Enter text

examples/python/tests/elements/test_interaction.py

from selenium import webdriver
from selenium.webdriver.common.by import By

import pytest


def test_interactions():
    # Initialize WebDriver
    driver = webdriver.Chrome()
    driver.implicitly_wait(0.5)

    # Navigate to URL
    driver.get("https://www.selenium.dev/selenium/web/inputs.html")

    # Click on the checkbox
    check_input = driver.find_element(By.NAME, "checkbox_input")
    check_input.click()

    is_checked = check_input.is_selected()
    assert is_checked == False

    # Handle the email input field
    email_input = driver.find_element(By.NAME, "email_input")
    email_input.clear()  # Clear field
    
    email = "admin@localhost.dev"
    email_input.send_keys(email)  # Enter text

    # Verify input
    data = email_input.get_attribute("value")
    assert data == email

    # Clear the email input field again
    email_input.clear()
    data = email_input.get_attribute("value")
    assert data == ""

    # Quit the driver
    driver.quit()

            //SendKeys
                // Clear field to empty it from any previous data
                IWebElement emailInput = driver.FindElement(By.Name("email_input"));
                emailInput.Clear();
                //Enter Text
                String email = "admin@localhost.dev";
                emailInput.SendKeys(email);

examples/dotnet/SeleniumDocs/Elements/InteractionTest.cs

using System;
    using Microsoft.VisualStudio.TestTools.UnitTesting;
    using OpenQA.Selenium;
    using OpenQA.Selenium.Chrome;
    
    namespace SeleniumDocs.Elements
    {
        [TestClass]
        public class InteractionTest
        {
            [TestMethod]
            public void TestInteractionCommands()
            {
                IWebDriver driver = new ChromeDriver();
                driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromMilliseconds(500);
    
                // Navigate to Url
                driver.Navigate().GoToUrl("https://www.selenium.dev/selenium/web/inputs.html");
                // Click on the element 
                IWebElement checkInput = driver.FindElement(By.Name("checkbox_input"));
                checkInput.Click();
    
                //Verify
                Boolean isChecked = checkInput.Selected;
                Assert.AreEqual(isChecked, false);
    
                //SendKeys
                // Clear field to empty it from any previous data
                IWebElement emailInput = driver.FindElement(By.Name("email_input"));
                emailInput.Clear();
                //Enter Text
                String email = "admin@localhost.dev";
                emailInput.SendKeys(email);
    
                //Verify
                String data = emailInput.GetAttribute("value");
                Assert.AreEqual(data, email);
    
    
                //Clear Element
                // Clear field to empty it from any previous data
                emailInput.Clear();
                data = emailInput.GetAttribute("value");
                
                //Verify
                Assert.AreEqual(data, "");
    
                //Quit the browser
                driver.Quit();
            }
        }
    }

    driver.find_element(name: 'email_input').send_keys 'admin@localhost.dev'

examples/ruby/spec/elements/interaction_spec.rb

# frozen_string_literal: true

require 'spec_helper'

RSpec.describe 'Element Interaction' do
  let(:driver) { start_session }

  before { driver.get 'https://www.selenium.dev/selenium/web/inputs.html' }

  it 'clicks an element' do
    driver.find_element(name: 'color_input').click
  end

  it 'clears and send keys to an element' do
    driver.find_element(name: 'email_input').clear
    driver.find_element(name: 'email_input').send_keys 'admin@localhost.dev'
  end
end

      let inputField = await driver.findElement(By.name('no_type'));

examples/javascript/test/elements/interactions.spec.js

  const {By, Browser, Builder} = require('selenium-webdriver');
  const assert = require("node:assert");
  
  
  describe('Element Interactions', function () {
    let driver;
  
    before(async function () {
      driver = new Builder()
        .forBrowser(Browser.CHROME)
        .build();
    });
  
    after(async () => await driver.quit());
  
    it('should Clear input and send keys into input field', async function () {
  
      try {
        await driver.get('https://www.selenium.dev/selenium/web/inputs.html');
        let inputField = await driver.findElement(By.name('no_type'));
        await inputField.clear();
        await inputField.sendKeys('Selenium');
        const text = await inputField.getAttribute('value');
        assert.strictEqual(text, "Selenium");
      } catch (e) {
        console.log(e)
      }
    });
  });

  
    // Navigate to Url
    driver.get("https://www.selenium.dev/selenium/web/inputs.html")

    //Clear field to empty it from any previous data
    driver.findElement(By.name("email_input")).clear()
    
    // Enter text 
    driver.findElement(By.name("email_input")).sendKeys("admin@localhost.dev")
  
  

Clear

The element clear command resets the content of an element. This requires an element to be editable, and resettable. Typically, this means an element is an input element of a form with a text type or an element with acontent-editable attribute. If these conditions are not met,an invalid element state error is returned.

        //Clear Element
        // Clear field to empty it from any previous data
        emailInput.clear();

examples/java/src/test/java/dev/selenium/elements/InteractionTest.java

package dev.selenium.elements;

import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.time.Duration;
import static org.junit.jupiter.api.Assertions.assertEquals;

public class InteractionTest{

    @Test
    public void interactWithElements() {
        WebDriver driver = new ChromeDriver();
        driver.manage().timeouts().implicitlyWait(Duration.ofMillis(500));
        // Navigate to Url
        driver.get("https://www.selenium.dev/selenium/web/inputs.html");

        // Click on the element 
        WebElement checkInput=driver.findElement(By.name("checkbox_input"));
        checkInput.click();
        Boolean isChecked=checkInput.isSelected();
        assertEquals(isChecked,false);

        //SendKeys
        // Clear field to empty it from any previous data
        WebElement emailInput=driver.findElement(By.name("email_input"));
        emailInput.clear();
        //Enter Text
        String email="admin@localhost.dev";
        emailInput.sendKeys(email);
        //Verify
        String data=emailInput.getAttribute("value");
        assertEquals(data,email);


        //Clear Element
        // Clear field to empty it from any previous data
        emailInput.clear();
        data=emailInput.getAttribute("value");
        assertEquals(data, ""); 

        driver.quit();
    }

}

examples/python/tests/elements/test_interaction.py

from selenium import webdriver
from selenium.webdriver.common.by import By

import pytest


def test_interactions():
    # Initialize WebDriver
    driver = webdriver.Chrome()
    driver.implicitly_wait(0.5)

    # Navigate to URL
    driver.get("https://www.selenium.dev/selenium/web/inputs.html")

    # Click on the checkbox
    check_input = driver.find_element(By.NAME, "checkbox_input")
    check_input.click()

    is_checked = check_input.is_selected()
    assert is_checked == False

    # Handle the email input field
    email_input = driver.find_element(By.NAME, "email_input")
    email_input.clear()  # Clear field
    
    email = "admin@localhost.dev"
    email_input.send_keys(email)  # Enter text

    # Verify input
    data = email_input.get_attribute("value")
    assert data == email

    # Clear the email input field again
    email_input.clear()
    data = email_input.get_attribute("value")
    assert data == ""

    # Quit the driver
    driver.quit()

            //Clear Element
                // Clear field to empty it from any previous data
                emailInput.Clear();
                data = emailInput.GetAttribute("value");

examples/dotnet/SeleniumDocs/Elements/InteractionTest.cs

using System;
    using Microsoft.VisualStudio.TestTools.UnitTesting;
    using OpenQA.Selenium;
    using OpenQA.Selenium.Chrome;
    
    namespace SeleniumDocs.Elements
    {
        [TestClass]
        public class InteractionTest
        {
            [TestMethod]
            public void TestInteractionCommands()
            {
                IWebDriver driver = new ChromeDriver();
                driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromMilliseconds(500);
    
                // Navigate to Url
                driver.Navigate().GoToUrl("https://www.selenium.dev/selenium/web/inputs.html");
                // Click on the element 
                IWebElement checkInput = driver.FindElement(By.Name("checkbox_input"));
                checkInput.Click();
    
                //Verify
                Boolean isChecked = checkInput.Selected;
                Assert.AreEqual(isChecked, false);
    
                //SendKeys
                // Clear field to empty it from any previous data
                IWebElement emailInput = driver.FindElement(By.Name("email_input"));
                emailInput.Clear();
                //Enter Text
                String email = "admin@localhost.dev";
                emailInput.SendKeys(email);
    
                //Verify
                String data = emailInput.GetAttribute("value");
                Assert.AreEqual(data, email);
    
    
                //Clear Element
                // Clear field to empty it from any previous data
                emailInput.Clear();
                data = emailInput.GetAttribute("value");
                
                //Verify
                Assert.AreEqual(data, "");
    
                //Quit the browser
                driver.Quit();
            }
        }
    }

    driver.find_element(name: 'email_input').clear

examples/ruby/spec/elements/interaction_spec.rb

# frozen_string_literal: true

require 'spec_helper'

RSpec.describe 'Element Interaction' do
  let(:driver) { start_session }

  before { driver.get 'https://www.selenium.dev/selenium/web/inputs.html' }

  it 'clicks an element' do
    driver.find_element(name: 'color_input').click
  end

  it 'clears and send keys to an element' do
    driver.find_element(name: 'email_input').clear
    driver.find_element(name: 'email_input').send_keys 'admin@localhost.dev'
  end
end

      await driver.get('https://www.selenium.dev/selenium/web/inputs.html');

examples/javascript/test/elements/interactions.spec.js

  const {By, Browser, Builder} = require('selenium-webdriver');
  const assert = require("node:assert");
  
  
  describe('Element Interactions', function () {
    let driver;
  
    before(async function () {
      driver = new Builder()
        .forBrowser(Browser.CHROME)
        .build();
    });
  
    after(async () => await driver.quit());
  
    it('should Clear input and send keys into input field', async function () {
  
      try {
        await driver.get('https://www.selenium.dev/selenium/web/inputs.html');
        let inputField = await driver.findElement(By.name('no_type'));
        await inputField.clear();
        await inputField.sendKeys('Selenium');
        const text = await inputField.getAttribute('value');
        assert.strictEqual(text, "Selenium");
      } catch (e) {
        console.log(e)
      }
    });
  });

  
    // Navigate to Url
    driver.get("https://www.selenium.dev/selenium/web/inputs.html")

    //Clear field to empty it from any previous data
    driver.findElement(By.name("email_input")).clear()
  
  

Submit

In Selenium 4 this is no longer implemented with a separate endpoint and functions by executing a script. As such, it is recommended not to use this method and to click the applicable form submission button instead.

Support the Selenium Project

Learn more or view the full list of sponsors.