Selenium 简明教程

Selenium WebDriver - Input Boxes

Selenium WebDriver 可用于处理输入框（也称为文本框）。在 HTML 术语中，每个输入框都由标签名 input 识别。

Selenium Webdriver can be used to handle input boxes (also referred to as a text box). In HTML terminology, every input box is identified by the tagname called input.

Identification of Input Boxes in HTML

打开任意一个浏览器（例如 Chrome），右键单击网页，然后单击“检查”按钮。然后，网页的完整 HTML 代码将显示出来。要检查页面上的输入框，请单击 HTML 代码顶部提供的左上箭头，如下图中突出显示所示。

Open any browser, say Chrome, right click on the web page, and then click on the Inspect button. Then, the complete HTML code for the page would appear. For inspecting an input box on a page, click on the left upward arrow, available to the top of the HTML code as highlighted in the below image.

在单击箭头并将箭头指向输入框（下图中突出显示）后，其 HTML 代码便可见，反映了 input 标签名（<> 中包含）。

Once we had clicked and pointed the arrow to the input box (highlighted in the below image), its HTML code was visible, reflecting the input tagname (enclosed in <>).

Example 1- Input Text with sendKeys

我们以上述页面为例，首先在 * input box* 中输入一些文本，方法是使用 sendKeys() 方法。然后，我们用 clear() 方法清除输入的文本。

Let us take an example of the above page, where we would first enter some text in the input box using the sendKeys() method. Then, we wipe out the text entered with the clear() method.

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.edge.EdgeDriver;
import java.util.concurrent.TimeUnit;

public class EnterText{
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new EdgeDriver();

      // adding implicit wait of 10 secs
      driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

      // Opening the webpage
      driver.get("https://www.tutorialspoint.com/selenium/practice/text-box.php");

      // Identify the input box
      WebElement elm = driver.findElement(By.xpath("//*[@id='fullname']"));

      // enter text
      elm.sendKeys("Java");

      // Get the value
      String txt = driver.findElement(By.xpath("//*[@id='fullname']")).getAttribute("value");
      System.out.println("Entered text: " + text);

      // clear the text entered
      elm.clear();

      // Get no text
      String txt1 = driver.
      findElement(By.xpath("//*[@id='fullname']")).getAttribute("value");
      System.out.println("Get text after clearing: " + txt1);

      // Closing browser
      driver.quit();
   }
}

Output

Entered text: Java
Get text after clearing:

Process finished with exit code 0

在上述示例中，我们首先在编辑框中输入文本 Java ，并通过消息 - Entered text: Java 从控制台中获取输入的值。然后，清除输入的值，删除文本后没有在编辑框中获取到值，并从控制台中收到消息： Get text after clearing: 。

In the above example, we had first entered the text Java in the edit box, and also obtained the value entered in the console with the message - Entered text: Java. Then cleared the value entered and got no value in the edit box after removing the text and received the message in the console: Get text after clearing:.

最后，收到了消息 Process finished with exit code 0 ，表示代码成功执行。

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

Example 2 - Input Text with Actions Class

我们还可以将 sendKeys() 方法与 Selenium 中的 * Actions Class* 一起使用。我们将采用上面讨论的相同示例，并查看实施情况。

We can also use the sendKeys() method along with the Actions Class in Selenium. We would take the same example discussed above and see the implementation.

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
import java.util.concurrent.TimeUnit;

public class HandlingInputBoxWithActions {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will identify edit box to enter        driver.get("https://www.tutorialspoint.com/selenium/practice/text-box.php");

      // Identify the input box with xpath locator
      WebElement e = driver.findElement(By.xpath("//*[@id='fullname']"));

      // enter text in input box using Actions class
      Actions action = new Actions(driver);
      action.sendKeys(e, "SeleniumS").perform();

      // Get the value entered
      String text = driver.
      findElement(By.xpath("//*[@id='fullname']")).getAttribute("value");
      System.out.println("Entered text with Actions class is: " + text);

      // clear the text entered
      e.clear();

      // Get no text after clearing text
      String text1 = driver.
      findElement(By.xpath("//*[@id='fullname']")).getAttribute("value");
      System.out.println("Get text after clearing: " + text1);

      // Closing browser
      driver.quit();
   }
}

Output

Entered text with Actions class is: SeleniumS
Get text after clearing:

Process finished with exit code 0

在上述示例中，我们首先在输入框中输入文本 SeleniumS ，并通过消息 - Entered text with Actions class is: SeleniumS 从控制台中获取输入的值。然后，清除输入的值，并在清除文本后没有在输入框中获取到值。因此，我们还从控制台中接收到了消息： Get text after clearing: 。

In the above example, we had first entered the text SeleniumS in the input box, and also retrieved the value entered in the console with the message- Entered text with Actions class is: SeleniumS. Then cleared the value entered and got no value in the input box after clearing up the text. Hence, we had also received the message in the console: Get text after clearing:.

Example 3 - Input Text with JavaScriptExecutor

我们还可以使用 * JavaScriptExecutor* 在 Selenium 中的输入框中输入文本。我们将采用上面讨论的相同示例。

We can also use the JavaScriptExecutor to input text in the input box in Selenium. We would take the same example discussed above.

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class HandlingInputBoxWithJS {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will identify edit box to enter
      driver.get("https://www.tutorialspoint.com/selenium/practice/text-box.php");

      // Identify the input box with xpath locator
      WebElement e = driver.findElement(By.xpath("//*[@id='fullname']"));

      // enter text in input box using JavascriptExecutor
      JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
      javascriptExecutor.executeScript("arguments[0].setAttribute('value', 'Selenium Java')", e);

      // Get the value entered
      String text = driver.findElement(By.xpath("//*[@id='fullname']")).getAttribute("value");
      System.out.println("Entered text with JavaScript Executor is: " + text);

      // clear the text entered
      e.clear();

      // Get no text after clearing text
      String text1 = driver.
      findElement(By.xpath("//*[@id='fullname']")).getAttribute("value");
      System.out.println("Get text after clearing: " + text1);

      // Closing browser
      driver.quit();
   }
}

Output

Entered text with JavaScript Executor is: Selenium Java
Get text after clearing:

Process finished with exit code 0

在上述示例中，我们首先在输入框中输入文本 Selenium Java ，并通过消息 - Entered text with JavaScript Executor is: Selenium Java 从控制台中获取输入的值。然后，清除输入的值，并在清除文本后没有在输入框中获取到值，随后从控制台中收到消息： Get text after clearing: 。

In the above example, we had first entered the text Selenium Java in the input box, and retrieved the value entered in the console with the message - Entered text with JavaScript Executor is: Selenium Java. Then cleared the value entered and got no value in the input box then received the message in the console: Get text after clearing:.

Conclusion

这些是有关 Selenium WebDriver 输入框教程的全面思考的结论。我们首先介绍了 HTML 中输入框的识别，以及说明如何使用 Selenium WebDriver 中的 sendKeys 方法、动作类和 JavaScript 在输入框中输入文本的示例。这会为你提供有关 Selenium WebDriver 输入框的深入知识。明智的做法是不断练习你所学到的知识，并探索与 Selenium 相关以加深理解和扩展视野的其他内容。

This concludes our comprehensive take on the tutorial on Selenium Webdriver Input Boxes. We’ve started with describing identification of input boxes in HTML, and examples to illustrate how to enter text in an input box using sendKeys method, Actions class, and JavaScript in Selenium Webdriver. This equips you with in-depth knowledge of the Selenium Webdriver Input Boxes. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.