在 Selenium 中查找元素与查找元素 - Javascript

Selenium 是一个自动化测试工具，可以模拟人类用户与浏览器的交互并进行自动化测试。在 Selenium 中，查找元素是一个经常使用的操作，因为它允许我们在测试中与页面交互。在这篇文章中，我们将学习如何使用 Javascript 在 Selenium 中查找元素。

Chrome Driver 和 Selenium Webdriver

Selenium Webdriver 是一个开源的自动化测试框架，它允许我们用各种语言编写测试脚本并执行它们。然而，Selenium Webdriver 只提供了一个 API，没有提供任何浏览器驱动程序。因此，我们必须下载和安装标准的浏览器驱动程序，才能在 Selenium Webdriver 中做操作。因为本篇文章是关于在 Selenium 中查找元素的操作，所以我们需要一个浏览器驱动程序，推荐使用 Chrome Driver。

下载 Chrome Driver

我们可以在以下 website 下载 Chrome Driver： https://sites.google.com/a/chromium.org/chromedriver/downloads

注意：需选择与当前使用的 Chrome 版本相适配的 Chrome Driver 版本。安装好 Chrome Driver 之后，我们就可以开始掌握在 Selenium 中查找元素的技能了。

如何查找元素

在 Selenium Webdriver 中，我们可以使用各种方法来查找元素。以下是一些常用的查找元素的方法：

findElement 方法

这个方法用于查找一个元素。它接受一个 By 对象，By 对象又接受一个 Locator，Locator 是一个字符串，它标识了查找元素的方式。以下是一些 Locator 的例子：

• ID

driver.findElement(By.id('myId'))

• Name

driver.findElement(By.name('myName'))

• XPath

driver.findElement(By.xpath("//div[@id='myId']"))

• Link Text

driver.findElement(By.linkText('myLinkText'))

• Partial Link Text

driver.findElement(By.partialLinkText('partialLinkText'))

• CSS Selector

driver.findElement(By.cssSelector('mySelector'))

所以，我们可以使用以下代码打开一个页面并查找其中的一个元素：

// 导入依赖包
const webdriver = require('selenium-webdriver');
const By = webdriver.By;

// 创建一个驱动程序
let driver = new webdriver.Builder()
    .forBrowser('chrome')
    .build();

// 打开一个页面
driver.get('http://www.example.com');

// 查找元素
let myElement = driver.findElement(By.id('myId'));

findElements 方法

这个方法用于查找多个元素，它接受一个 By 对象，By 对象又接受一个 Locator。以下是一个例子：

let myElements = driver.findElements(By.cssSelector('mySelector'));

WebElement 对象

当我们使用 findElement 方法找到元素时，会返回一个 WebElement 对象。这个对象有许多方法，可以在 Selenium 中与元素交互。以下是一些 WebElement 对象的方法：

• click() - 单击元素

myElement.click();

• clear() - 清空元素内容

myElement.clear();

• sendKeys() - 输入内容

myElement.sendKeys('myText');

• getText() - 获取元素文本内容

let text = myElement.getText();

• getAttribute() - 获取元素属性值

let attribute = myElement.getAttribute('myAttribute');

以上是一些常用的 WebElement 对象方法。在实践中，有许多其他方法可用，可用于获取元素的大小、位置、截屏等等。

等待元素

当我们使用 findElement 方法或 findElements 方法查找元素时，可能会遇到元素还没有加载完成的情况。为了解决此问题，我们可以使用等待方法。

Selenium Webdriver 提供了两种类型的等待：隐式等待和显式等待。

隐式等待将告诉 Selenium Webdriver 等待一段时间，只要生成一个元素，则不必在这段时间内等到元素出现，而是查找到元素后立即进行操作。以下是一些等待时间的例子：

driver.manage().timeouts().implicitlyWait(10000);

以上代码会通过等待 10 秒来异步等待元素的出现。

显式等待是确定要等待的元素出现的最精确和最灵活的方式。以下是一个例子：

let wait = new webdriver.WebDriverWait(driver, 5000);
let myElement = wait.until(webdriver.until.elementLocated(By.cssSelector('mySelector')));

以上代码告诉 WebDriver 等待 5 秒，直到元素与指定的定位器匹配为止。如果在等待时间到期之前找不到元素，则会抛出一个异常。

结论

以上是在 Selenium 中查找元素的简介。我们可以使用多种方式来查找元素，包括 ID、Name、XPath、Link Text、Partial Link Text 和 CSS Selector。我们也可以在查找元素时使用等待方法。

这些对于自动化测试来说是基础，对使用 Selenium 进行测试的开发人员来说是必不可少的技能。