Selenium 通过 CSS 选择器查找元素示例

Selenium 是一款用于 Web 自动化测试的工具，它可以模拟浏览器的行为，自动化测试网站的功能。在 Selenium 中，可以使用 CSS 选择器来选择网页中的元素，使得测试代码更加简洁和灵活。

本文将结合 JavaScript 示例，向程序员介绍如何使用 Selenium 的 CSS 选择器来查找元素。

前提条件

在开始使用 Selenium 的 CSS 选择器之前，需要先安装相关的工具和库。具体步骤可以参考 Selenium 和 WebDriver 的官方文档。

以下是一个简单的 JavaScript 程序，用于使用 Selenium 打开浏览器，访问一个网页，并查找网页中的元素。

const { Builder, By, Key, until } = require("selenium-webdriver");

(async function example() {
  let driver = await new Builder().forBrowser("chrome").build();

  try {
    await driver.get("https://google.com");
    await driver.findElement(By.name("q")).sendKeys("Selenium", Key.RETURN);
    await driver.wait(until.titleContains("Selenium"));
    console.log("Page title is: " + await driver.getTitle());
  } finally {
    await driver.quit();
  }
})();

使用 CSS 选择器查找元素

在上面的程序中，我们使用了 By.name 方法来查找输入框元素。实际上，还可以通过 CSS 选择器来定位。

下面是一些常见的 CSS 选择器示例：

• 通过 id 属性查找元素：By.css("#elementId")
• 通过 class 属性查找元素：By.css(".elementClass")
• 通过标签名查找元素：By.css("tagName")
• 通过属性名查找元素：By.css("[attributeName]")
• 通过属性名和属性值查找元素：By.css("[attributeName='attributeValue']")
• 通过复合选择器查找元素：By.css("selector1 selector2")

其中，复合选择器可以通过组合多个简单的选择器来实现更具体的选择，例如：

await driver.findElement(By.css("div.container > h1.title"));

上述代码将查找 class 为 container 的 div 下的 class 为 title 的 h1 元素。

总结

本文介绍了如何使用 Selenium 的 CSS 选择器来查找网页中的元素，并给出了一些常见的选择器示例。在实际使用中，可以根据具体的需求结合 css 选择器来定位元素，从而更加便捷地进行 Web 自动化测试。