Post
Ask Question

How To Enter Text Into A Textbox Using JavascriptExecutor In Selenium WebDriver

Introduction

This article, will discuss entering text into a textbox using Javascript.

In my previous articles, I have explained about JavascriptExecutor and covered the below points.

As I mentioned in my previous articles, JavascriptExecutor is used for performing javascript operations in a web browser from a Selenium web driver.

In Selenium webdriver, we know the syntax to enter the text into a textbox.

driver.findElement(By.id("<<id>>")).sendKeys("<<text>>");

But here in Javascript, the syntax is quite different than the Selenium webdriver.

To enter the text into a textbox using JavaScript, we have two ways.

FindElement(Javascript) + EnterText(Javascript)
FindElement(WebDriver) + EnterText(Javascript)

In both ways, entering text using Javascript is common, but finding an element is different.

In the first case, both finding an element and entering text use Javascript only.

In the second case, finding the element will be performed in the web driver, and entering the text will be performed in Javascript.

Now we will learn both ways here.

HTML Code Snippet

<div class='container'>
    <input type='text' id='username'/>
    <input type='text' name='password'/>
    <input type='text' class='loginForm'/>
    <button>Login</button>
    <a href='#'>Signup</a>
</div>

To enter the text in textbox using Javascript, we need to use the value command.

Using value command, we can enter the text. We can also get the text which is already entered in the textbox.

Way1

In my previous article, we have already learned how to find the element using Javascript.

Now we use the value command to enter the text first then will get the entered text and print it in the console.

Usage in Selenium code

JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;

// Set the text
jsExecutor.executeScript("document.getElementById('firstName').value='testuser'");

// Get the text
String text = (String) jsExecutor.executeScript("return document.getElementById('firstName').value");

System.out.println(text);

Way2

I hope you already know about "finding an element in the selenium webdriver", if not please follow the below article.

Now we use the value command to enter the text first, then we will get the entered text and print it in the console.

Usage in Selenium code

// Find the element in Selenium WebDriver
WebElement userNameTxt = driver.findElement(By.id("username"));

JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;

// Set the text
jsExecutor.executeScript("arguments[0].value='testuser'", userNameTxt);

// Get the text
String text = (String) jsExecutor.executeScript("return arguments[0].value", userNameTxt);

System.out.println(text);

In way 2, we are using arguments because we are finding the element outside Javascript. We are passing that element as an argument to the javascript.

This is how we handle the textboxes in Javascript. You can choose any way (way 1 or way 2) based on your scenario.

In my next articles, we will see how we can perform click operation and scroll operations, etc.

I hope you find this article useful. Please provide your valuable feedback, questions, or comments about this article.


Similar Articles