使用 JavaScript 通过 XPath 获取元素

Tahseen Tauseef 2023年1月30日 2022年5月10日
  1. 什么是 Selenium
  2. 什么是 Selenium-WebDriver
  3. Selenium 中的 XPath 是什么
  4. 在 Selenium WebDriver 中使用 JavaScript 通过 XPath 获取元素
使用 JavaScript 通过 XPath 获取元素

本文将讨论如何在 Selenium WebDriver 中使用 JavaScript 通过 XPath 获取元素。

什么是 Selenium

Selenium 是一个自动化测试框架,用于在 Google Chrome、Mozilla Firefox、Safari 等多种浏览器中测试网站应用程序。

JavaScript、Java、Python 和 C# 等多种编程语言可以在 Selenium 中创建测试脚本。如果你使用的是 Selenium 提供的工具,则可以称为 selenium 测试。

Selenium 不是一个单一的工具,而是由多个可用于不同类型测试的软件组成,例如:

  • Selenium Grid
  • Selenium WebDriver
  • Selenium 远程控制 (RC)
  • Selenium 集成开发环境(IDE)。

什么是 Selenium-WebDriver

Selenium-Webdriver 用于通过使用各种编程语言(如 JavaScript、Java、Python、C# 等)在多个浏览器上执行测试脚本来执行测试。

Selenium-Webdriver 用于确保 Web 应用程序在生产环境中正常工作。它可以为你创建一个虚拟环境来测试应用程序。

selenium web 驱动程序有四个主要部分。

  • 浏览器
  • 浏览器驱动程序
  • Selenium 客户端库
  • JSON 有线协议

Selenium 中的 XPath 是什么

XPath 用于遍历网页的 XML 和 HTML 结构。

如果不使用 id、class 等 CSS 选择器,XPath 可以在网页上找到元素。XPath 可用于查找静态和动态元素(其属性可能因某些事件而改变)。

Selenium 中有两个 XPath。

  • 绝对路径
  • 相对路径

绝对路径

你可以在绝对路径中指定要定位的元素,从根标签 HTML 标签开始。然后,你可以通过定位子元素并使用正斜杠附加它们来向前移动。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Absoulte Path</title>
  </head>
  <body>
    <form id="login-form">
      <input name="name" type="text" />
      <input name="email" type="text" />
      <input name="password" type="password" />
      <button>Login</button>
    </form>
  </body>
</html>

看看上面的源代码;我们需要给出指向第一个输入的路径。

html/body/form/input[1]

这将首先访问 HTML 元素、body 元素,然后是 form,然后再移动到表单内的第三个输入元素。

相对路径

相对路径与绝对路径的不同之处在于它可以直接定位 HTML 元素。因此,在上面的源代码中,我们将编写双正斜杠(表示它是相对路径),然后从那里遍历,类似于在绝对路径中的方式。

///form/input[1]

在 Selenium WebDriver 中使用 JavaScript 通过 XPath 获取元素

document.evaluate 可以通过向其传递 XPath 表达式来获得 XPath 结果。

let HeadingElements = document.evaluate("/html/body//p", document, null, XPathResult.ANY_TYPE, null);
let NextHeading = HeadingElements.iterateNext();
let HeadingTexts = "";
while (NextHeading) {
  HeadingTexts += NextHeading.textContent + "\n";
  NextHeading = NextHeading.iterateNext();
}
console.log(HeadingTexts); 

上面的源代码将针对每个目标段落元素(因为提供了 XPath)。它将取出每个段落的文本内容,将其附加到变量并注销结果。