WebdriverIO - XPath 定位器

---

---

导航到网页后，我们必须与页面上可用的 Web 元素进行交互，例如单击链接/按钮、在编辑框中输入文本等等，以完成我们的自动化测试用例。

为此，我们的首要任务是识别元素。我们可以为元素创建一个 XPath 用于识别它。下面讨论创建 XPath 表达式的规则：

XPath 的语法是

//tagname[@attribute='value']

这里，标签名是可选的。

例如：

//img[@alt='tutorialspoint']

让我们看看突出显示的链接“首页”的 HTML 代码。您的电脑上将出现以下屏幕：

元素“首页”的 XPath 如下：

//a[@title='TutorialsPoint - Home']. 

您的电脑上将出现以下屏幕：

在 WebdriverIO 代码中，我们可以按以下格式指定元素的 XPath 表达式：

$('value of the xpath expression')

或者，我们可以将此表达式存储在一个变量中：

const p = $('value of the xpath expression')

让我们识别下图中突出显示的文本并获取其文本：

上面突出显示的元素的 XPath 如下：

//li[@class='heading']

首先，请按照“使用 WebdriverIO 的正常流程”章节中的步骤 1 到 5 进行操作，步骤如下：

步骤 1 - 安装 NodeJS。“使用 NodeJS 入门”章节详细介绍了如何执行此安装。

步骤 2 - 安装 NPM。“NPM 安装”章节详细介绍了如何执行此安装。

步骤 3 - 安装 VS Code。“VS Code 安装”章节详细介绍了如何执行此安装。

步骤 4 - 创建配置文件。“配置文件生成”章节详细介绍了如何执行此安装。

步骤 5 - 创建一个规范文件。“Mocha 安装”章节详细介绍了如何执行此安装。

步骤 6 - 将以下代码添加到创建的 Mocha 规范文件中。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Xpath', function(){        
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with xpath then obtain text
      console.log($("//li[@class='heading']").getText() + " - is the text.")
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js. 

有关如何创建配置文件的详细信息，请参阅“wdio.conf.js 文件”章节和“配置文件生成”章节

您的电脑上将出现以下屏幕：

命令成功执行后，元素“关于 Tutorialspoint”的文本将打印在控制台中。

包含文本的 XPath 定位器

导航到网页后，我们必须与页面上可用的 Web 元素进行交互，例如单击链接/按钮、在编辑框中输入文本等等，以完成我们的自动化测试用例。

我们可以为元素创建一个 XPath 用于识别它。但是，在某些情况下，没有可用的 HTML 属性或标签名来唯一标识元素。

在这种情况下，我们可以使用 text 函数，借助页面上可见的文本为元素创建 XPath。text 函数区分大小写。

下面讨论使用可见文本创建 XPath 表达式的规则：

XPath 的语法如下：

//tagname[text()='displayed text']. 

例如：

//li[text()='WebdriverIO']

让我们使用 XPath 中的可见文本，识别下图中突出显示的元素：

使用 text() 函数，上面突出显示的元素的 XPath 如下：

//li[text()='About Tutorialspoint'] 

首先，请按照“使用 WebdriverIO 的正常流程”章节中的步骤 1 到 5 进行操作，步骤如下：

步骤 1 - 安装 NodeJS。“使用 NodeJS 入门”章节详细介绍了如何执行此安装。

步骤 2 - 安装 NPM。“NPM 安装”章节详细介绍了如何执行此安装。

步骤 3 - 安装 VS Code。“VS Code 安装”章节详细介绍了如何执行此安装。

步骤 4 - 创建配置文件。“配置文件生成”章节详细介绍了如何执行此安装。

步骤 5 - 创建一个规范文件。“Mocha 安装”章节详细介绍了如何执行此安装。

步骤 6 - 将以下代码添加到创建的 Mocha 规范文件中。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Xpath - text()', function(){
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with xpath - visible text then obtain text
      console.log($("//li[text()='About Tutorialspoint']").getText() + " - is the text.")
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js. 

有关如何创建配置文件的详细信息，请参阅“wdio.conf.js 文件”章节和“配置文件生成”章节。

您的电脑上将出现以下屏幕：

命令成功执行后，元素“关于 Tutorialspoint”的文本将打印在控制台中。