Selenium WebDriver - 输入框

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

HTML 中输入框的识别

打开任何浏览器，例如 Chrome，右键单击网页，然后单击“检查”按钮。然后，将显示该页面的完整 HTML 代码。要检查页面上的输入框，请单击位于 HTML 代码顶部的左侧向上箭头，如下面的图像中突出显示的那样。

一旦我们单击并将箭头指向输入框（在下面的图像中突出显示），其 HTML 代码就会可见，反映输入标签名（括在 <> 中）。

示例 1- 使用 sendKeys 输入文本

让我们以上面页面的一个示例为例，我们首先使用 sendKeys() 方法在 输入框 中输入一些文本。然后，我们使用 clear() 方法擦除输入的文本。

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

输出

Entered text: Java
Get text after clearing: 

Process finished with exit code 0

在上面的示例中，我们首先在编辑框中输入了文本 Java，并在控制台中获取了输入的值，消息为 - 输入的文本：Java。然后清除输入的值，并在删除文本后在编辑框中没有获取任何值，并在控制台中收到消息：清除后获取文本：。

最后，收到消息 进程已完成，退出代码为 0，表示代码成功执行。

示例 2 - 使用 Actions 类输入文本

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

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

输出

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

Process finished with exit code 0

在上面的示例中，我们首先在输入框中输入了文本 SeleniumS，并在控制台中获取了输入的值，消息为 - 使用 Actions 类输入的文本为：SeleniumS。然后清除输入的值，并在清除文本后在输入框中没有获取任何值。因此，我们还在控制台中收到了消息：清除后获取文本：。

示例 3 - 使用 JavaScriptExecutor 输入文本

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

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

输出

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

Process finished with exit code 0

在上面的示例中，我们首先在输入框中输入了文本 Selenium Java，并在控制台中获取了输入的值，消息为 - 使用 JavaScript Executor 输入的文本为：Selenium Java。然后清除输入的值，并在输入框中没有获取任何值，然后在控制台中收到消息：清除后获取文本：。

结论

这总结了我们对 Selenium Webdriver 输入框教程的全面介绍。我们从描述 HTML 中输入框的识别开始，并通过示例说明如何使用 sendKeys 方法、Actions 类和 Selenium Webdriver 中的 JavaScript 在输入框中输入文本。这使您能够深入了解 Selenium Webdriver 输入框。明智的做法是不断练习您所学到的知识，并探索与 Selenium 相关的其他内容，以加深您的理解并拓宽您的视野。