WebElement 中 Selenium

WebElement 中 Selenium

表单是网站的基本元素，用于收集网站访问者的信息。网页表单包含不同的图形用户界面控件，例如文本框、密码输入框、复选框、单选按钮、下拉菜单和文件输入框。

本教程解释了如何使用以下方式访问每个表单元素 Selenium WebDriver 具有 Java. Selenium 将每一个表单元素封装成一个WebElement对象。 它提供了一个 API，用于定位元素并对其进行操作，包括输入文本、点击按钮和提交表单。以下各节介绍了每个表单元素可用的方法。

WebElement、findElement()、findElements() 简介

Selenium WebDriver 将一个简单的表单元素表示为一个对象。 WebElement.

WebDriver 使用 Web 元素的不同属性来识别表单元素，包括 ID、名称、类等。 XPath的标签名称、CSS 选择器和链接文本。

WebDriver 提供了以下两种 WebElement 方法来查找元素：

• 查找元素() – 查找单个 Web 元素并将其作为 WebElement 返回。 Selenium 目的。
• 查找元素() – 返回符合定位器条件的 WebElement 对象列表。

以下示例展示了如何使用 `findElement()` 方法检索网页上的单个元素（例如文本字段）并将其作为 `WebElement` 对象获取。后续教程将介绍如何使用 `findElements()` 方法查找多个元素。

步骤1） 导入创建 WebElement 对象所需的包。

步骤2） 调用 WebDriver 类中提供的 findElement() 方法来检索 WebElement 对象，如下所示。

Selenium 输入文本

输入框指以下两种类型之一：

1. 文字字段 – Selenium 输入文本框，接受输入的值并按输入的内容精确显示。
2. 密码字段 – 文本框可以接受输入的值，但会将这些值隐藏为一系列特殊字符（通常是点或星号），以隐藏敏感输入。

   

定位器

findElement() 方法接受一个参数，即指向元素的定位器。不同的定位器，包括 By.id()、By.name()、By.xpath() 和 By.cssSelector()，使用元素的属性（例如 id、name 或 path）在页面上查找元素。

您可以使用 FirePath 等插件来获取元素的 id、xpath 和其他定位器值。

使用示例站点 https://demo.guru99.com/test/login.html下面的代码使用 id 定位器定位“电子邮件地址”文本字段，使用名称定位器定位“密码”字段。

1. 电子邮件文本字段按 ID 定位。
2. 密码字段按名称定位。

发送密钥 Selenium

sendKeys() Selenium `sendKeys()` 方法用于在测试执行期间向文本框和密码框中输入可编辑内容。这些字段通过名称、类和 ID 等定位符进行标识。该方法适用于 WebElement 对象。与 `type` 方法不同，`sendKeys()` 方法不会替换文本框中的现有文本。

如何在 Selenium

要向文本字段和密码字段中输入文本，可以使用 WebElement 上的 sendKeys() 方法。 Selenium.

使用同样的例子 https://demo.guru99.com/test/login.html以下代码片段会定位文本字段和密码字段，并在其中输入文本。 Selenium.

1. 使用 ID 定位器查找“电子邮件地址”文本字段。
2. 使用名称定位器查找“密码”字段。
3. 使用 Selenium sendKeys 方法。
4. 使用 sendKeys() 方法在“密码”字段中输入密码。

删除输入中的值 Boxes

此 明确（） 该方法会删除输入框内的文本。 此方法不需要参数。 以下代码片段会清除电子邮件或密码字段中的文本。

Selenium 点击按钮

此 Selenium 点击按钮是通过 click() 方法访问的。

在上面的例子中

1. 找到登录按钮。
2. 点击网站登录页面上的“登录”按钮进行身份验证。

Selenium 提交按钮

提交按钮会将整个表单发送到服务器。您可以像上面那样，对 WebElement 调用 click() 方法，也可以对表单中的任何元素或提交按钮本身使用 submit() 方法。

当使用 submit() 时，WebDriver 会查找 DOM 以识别元素所属的表单，然后触发其提交功能。

完成： Code

以下是完整的可运行代码。

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.*;

public class Form {
    public static void main(String[] args) {

        // declaration and instantiation of objects/variables
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        String baseUrl = "https://demo.guru99.com/test/login.html";
        driver.get(baseUrl);

        // Get the WebElement corresponding to the Email Address(TextField)
        WebElement email = driver.findElement(By.id("email"));

        // Get the WebElement corresponding to the Password Field
        WebElement password = driver.findElement(By.name("passwd"));

        email.sendKeys("abcd@gmail.com");
        password.sendKeys("abcdefghlkjl");
        System.out.println("Text Field Set");

        // Deleting values in the text box
        email.clear();
        password.clear();
        System.out.println("Text Field Cleared");

        // Find the submit button
        WebElement login = driver.findElement(By.id("SubmitLogin"));

        // Using click method to submit form
        email.sendKeys("abcd@gmail.com");
        password.sendKeys("abcdefghlkjl");
        login.click();
        System.out.println("Login Done with Click");

        // Using submit method to submit the form. Submit used on password field
        driver.get(baseUrl);
        driver.findElement(By.id("email")).sendKeys("abcd@gmail.com");
        driver.findElement(By.name("passwd")).sendKeys("abcdefghlkjl");
        driver.findElement(By.id("SubmitLogin")).submit();
        System.out.println("Login Done with Submit");

        // driver.close();
    }
}

故障排除

如果在查找元素时遇到 NoSuchElementException()，则表示 WebDriver 访问该元素时，该元素不存在于页面中。

1. 使用 FirePath 或 Chrome 中的“检查元素”选项重新检查您的定位器。
2. 检查代码中使用的值是否与 FirePath 中看到的元素的当前值不同。
3. 某些元素的某些属性是动态的。如果某个属性值会动态变化，请改用 `By.xpath()` 或 `By.cssSelector()`，它们更可靠，但稍微复杂一些。
4. 有时问题出在等待条件上；WebDriver 可能会在页面加载完成之前执行代码。
5. 使用隐式或显式等待在 findElement() 之前添加等待。

结语

• 下表总结了访问上述每种元素类型的命令。

• WebDriver 允许在多个 SELECT 元素中选择多个选项。
• 您可以在表单中的任何元素上使用 submit() 方法。WebDriver 会自动触发该元素所属表单的提交功能。

常见问题