Selenium 中的 WebElement

作者： Krishna Rungta Krishna Rungta
小时 - 权威教程 更新日期

Selenium 中的 WebElement

表单是用于接收网站访问者信息的基本网页元素。网页表单具有不同的 GUI 元素，例如文本框、密码字段、复选框、单选按钮、下拉列表、文件输入等。

我们将看到如何使用 Selenium Web Driver 和 Java 访问这些不同的表单元素。 Selenium 将每个表单元素封装为 WebElement 的对象。 它提供了用于查找元素并对其执行操作的 API，例如在文本框中输入文本、单击按钮等。我们将看到可用于访问每个表单元素的方法。

WebElement 介绍，findElement()，findElements()

Selenium Web Driver 将简单的表单元素封装为 WebElement 对象。

WebDriver 有多种技术可以根据 Web 元素的不同属性（如 ID、名称、类、XPath、标签名、CSS 选择器、链接文本等）来识别表单元素。

Web Driver 提供了以下两种 WebElement 方法来查找元素。

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

让我们看看使用 findElement() 方法获取网页中的单个元素——文本字段作为 WebElement 对象的代码片段。我们将在后续教程中介绍 findElements() 方法来查找多个元素。

步骤 1) 我们需要导入此包来创建 Web 元素对象

Introduction To WebElement FindElement,FindElements

步骤 2) 我们需要调用 WebDriver 类上可用的 findElement() 方法并获取 WebElement 对象。

请参阅下文以了解其操作方法。

相关文章

Selenium 输入文本

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

  1. 文本字段 – Selenium 输入文本框，接受键入值并按原样显示。
  2. 密码字段 – 接受键入值但将其屏蔽为一系列特殊字符（通常是点和星号）以避免显示敏感值的文本框。

    Selenium Input Text

定位器

findElement() 方法接受一个参数，即元素的定位器。不同的定位器，如 By.id()、By.name()、By.xpath()、By.CSSSelector() 等，使用它们的属性（如 id、name 或 path 等）在页面中定位元素。

您可以使用 Firepath 等插件来帮助获取元素的 id、xpath 等。

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

Locators

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

Selenium 中的 sendkeys

Selenium 中的 sendkeys() 是一种在测试执行期间用于在文本和密码字段中输入可编辑内容的方法。这些字段通过名称、类、id 等定位器进行识别。它是 Web 元素上可用的方法。与 type 方法不同，sendkeys() 方法不会替换任何文本框中的现有文本。

如何在 Selenium 中输入文本

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

使用 https://demo.guru99.com/test/login.html 站点的相同示例，以下是我们在 Selenium 中查找文本字段和密码字段并输入文本的方法。

Text in Selenium

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

删除输入框中的值

clear() 方法用于删除输入框中的文本。 此方法不需要参数。下面的代码片段将清除电子邮件或密码字段中的文本

Deleting Values in Input Boxes

Selenium 点击按钮

Selenium 点击按钮可以使用 click() 方法访问。

在上面的例子中

  1. 查找登录按钮
  2. 点击站点登录页面的“登录”按钮以登录站点。

Selenium Click Buttons

Selenium 提交按钮

提交按钮用于将整个表单提交到服务器。我们可以像上面一样在 Web 元素上使用 click() 方法，或者在表单中的任何 Web 元素上或在提交按钮本身上使用 submit() 方法。

Selenium Submit Buttons

当使用 submit() 时，WebDriver 将查找 DOM 以了解该元素属于哪个表单，然后触发其提交功能。

完整代码

这是完整的代码

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()，这意味着在 Web 驱动程序访问页面时页面中未找到该元素。

  1. 使用 Firepath 或 Chrome 中的 Inspect Element 再次检查您的定位器。
  2. 检查您在代码中使用的值是否与 Firepath 中元素的当前值不同。
  3. 某些元素的某些属性是动态的。如果发现值不同且动态变化，请考虑使用 By.xpath() 或 By.cssSelector()，它们更可靠但更复杂。
  4. 有时，也可能是等待问题，即 Web 驱动程序甚至在页面完全加载之前就执行了您的代码。
  5. 在 findElement() 之前添加一个等待，使用隐式或显式等待。

摘要

  • 下表总结了访问上述每种类型元素的命令
元素 命令 描述
输入框 sendKeys() 用于在文本框中输入值
clear() 用于清除文本框的当前值
链接 click() 用于点击链接并等待页面加载完成，然后继续执行下一个命令。
提交按钮 submit()
  • WebDriver 允许在多个 SELECT 元素中选择多个选项。
  • 您可以在表单中的任何元素上使用 submit() 方法。WebDriver 将自动触发该元素所属表单的提交功能。