Retrieve the Value of an HTML Input in Selenium WebDriver

1. Overview

As we know, automation testing is an important part of software development. Selenium is a widely used tool that uses browser-specific drivers to automate the testing of web applications.

In this tutorial, we’ll learn how to set up a Selenium project and retrieve the value of an HTML input field from a web page.

2. What Is Selenium WebDriver?

Selenium WebDriver is an open-source automation testing framework that drives web browsers natively, interacting with them as a real user would. It supports a series of browsers, including Chrome, Firefox, Edge, and Safari.

It can be used to automate a variety of tasks, such as web testing, web scraping, and user acceptance testing.

Simply put, WebDriver is an Application Programming Interface (API) implemented in different programming languages. The driver is responsible for the communication to and from Selenium and the browser.

3. Setting up a Selenium WebDriver Project

To start using Selenium in any project, we need to install the Selenium library and browser drivers. We can install the Selenium library using Maven by adding its dependency to the pom.xml:

<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>selenium-java</artifactId>
    <version>4.8.3</version>
</dependency>

Furthermore, to install the browser driver, we’ll use driver management software. WebDriverManager is a Java library that provides this functionality. Let’s add its dependency to the pom.xml:

<dependency>
    <groupId>io.github.bonigarcia</groupId>
    <artifactId>webdrivermanager</artifactId>
    <version>5.3.2</version>
</dependency>

Alternatively, we can download the browser driver from the official Selenium website. Once we download the driver, we need to extract it, place it in the project root directory, and point to the location in our code.

In the next section, we’ll retrieve the value of an input field in the DuckDuckGo homepage with a Selenium script.

4. Using Selenium WebDriver to Retrieve HTML Input Values

To begin with, we’ll retrieve the input value in DuckDuckGo‘s search field. The homepage will serve as our sample HTML page. It has an input field with an id, “search_form_input_homepage“, used to enter the search query.

Next, let’s write a Selenium script to retrieve the value of the input field:

class SeleniumWebDriverUnitTest {
    
    private WebDriver driver;
    private static final String URL = "https://duckduckgo.com";
    private static final String INPUT_ID = "search_form_input_homepage"; 
 
    @BeforeEach
    public void setUp() {
        WebDriverManager.chromedriver().set();
        driver = new ChromeDriver();
    }
 
    @AfterEach
    public void tearDown() {
        driver.quit();
    }
 
    @Test
    public void givenDuckDuckGoHomePage_whenInputHelloWorld_thenInputValueIsHelloWorld() {
        
        driver.get(URL);
        WebElement inputElement = driver.findElement(By.id(INPUT_ID));
        inputElement.sendKeys(Keys.chord(Keys.CONTROL, "a"), Keys.DELETE);
        inputElement.sendKeys("Hello World!");
        String inputValue = inputElement.getAttribute("value");
        Assert.assertEquals("Hello World!", inputValue);
    }
}

In the example above, we create a WebDriver instance to control the Chrome web browser. We then use the WebDriver instance to navigate to a web page with the URL “https://duckduckgo.com“.

Also, we invoke chromedriver().set() on WebDriverManager to set a browser driver. It automatically downloads and sets up the Chrome driver for us. Furthermore, we initialize the driver as a ChromeDriver object, which helps to invoke the Chrome browser.

Next, we navigate to the URL by invoking the get() method on the driver. Then, we create a WebElement variable named inputElement and find the input element by its id and assign it to inputElement. WebElement is an interface that represents an HTML element in Selenium WebDriver. It provides various methods to interact with the element, such as sendKeys(), getText(), and more. We can find a web element using different locator strategies, such as id, name, or xpath.

Furthermore, we simulate the browser from the code to clear the input field and enter Hello World! as the input value. We then create a variable inputValue of String type and invoke the getAttribute() method on inputElement with the argument “value” and assign it to inputValue.

Additionally, we have the tearDown() method, which closes the browser window and releases the resources used by the ChromeDriver object.

Finally, we assert that the expected result is equal to the input value from the web page with a specified input id.

5. Conclusion

In this article, we first saw how to install the Selenium browser driver using driver management software and also how to manually download it. Then, we learned how to use Selenium WebDriver to get an input value from an HTML web page.