October 1, 2021
HomePhp / Pear / Mysql / Node.jsWebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门

WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门

By  Php / Pear / Mysql / Node.js  1 Comment
WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门
WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门

 

在任何自动化测试框架中，查找元素是最基本的活动。我们必须非常谨慎地选择 Web 元素，以便自动化脚本执行可以处理静态和动态元素以获得稳定的测试结果。与其他自动化测试框架相比，WebDriverIO 具有许多先进的Selenium 定位器/选择器策略。传统上，每个定位器都有一个特定的By 方法，用于在运行时识别定位器。但是，WebdriverIO 简化了这些By 方法，现在我们不必明确指定它们。WebdriverIO 具有识别已通过的定位器的智能。在本 WebdriverIO 教程结束时，您将了解 WebDriverIO 如何改变 Selenium 定位器策略的方式以及它是多么容易记住和编写。

 

注意：如果您参考WebdriverIO 框架的官方文档，您会注意到他们将定位器称为选择器。如果您熟悉 Selenium 中的其他一些测试自动化框架，您就不必感到困惑。例如，如果您使用 Java 中的 Selenium 定位器，那么 WebdriverIO 中的那些定位器将被称为选择器。

 

为了便于理解，我将在本 WebdriverIO 教程中将它们称为 Selenium 定位器。因为它是关于使用 Selenium 进行自动化测试的更标准化和更熟悉的术语。

 

WebdriverIO 中的 Selenium 定位器是什么？

在我们开始这个关于 Selenium 定位器/选择器的 WebdriverIO 教程之前，让我们快速了解它们的用途。当执行测试自动化脚本时，Selenium 定位器用于通过Selenium WebDriver查找网页上的元素。Selector 是 Selenium 中的一个命令。Selenium 库从脚本中读取此命令，转换为 HTTP 请求，最后与 Web 浏览器交互，根据命令执行操作。

 

Selenium定位器策略

当您使用 WebdriverIO 动手进行 Selenium 自动化测试时，您应该了解用于在网页上定位唯一元素的正确策略。通过 ID、名称和相对 XPath 查找元素将是从网站中查找唯一元素的首选。如果您找不到任何这些方式，那么建议您选择其他类型的 Selenium 定位器/选择器。

如果您使用 Java 执行过 Selenium 自动化测试，您可能已经使用 findElement() 和 findElements() 方法从 DOM 中查找选择器。但是，WebdriverIO 提供了一种使用 WebDriverIO 进行 Selenium 测试的独特方式。使用 WebdriverIO，您不必提及 Selenium 定位器的策略，因为它会自动了解应该使用哪种类型的定位器策略。我们将在本 WebdriverIO 教程中研究每个 Selenium 定位器。

 

在我们开始实际演示之前，请务必记下以下用于在 WebDriverIO 中查找元素的方法：

$()：用于查找单个网页元素的单美元符号
$$()：用于查找多个网页元素的双美元符号

除了这两种方法，WebDriverIO 还支持其他方法，它们是，

custom$()：用于为单个网页元素查找自定义策略
custom$$()：用于为多个网页元素查找自定义策略

react$()：用于通过给定名称查找单个 React 组件，并通过 props 和 state 进行过滤
react$$()：用于通过给定名称查找多个 React 组件，并通过 props 和 state 进行过滤

注意： react$ 和 react$$ 命令仅适用于使用 React v16.x 的应用程序

 

如何在浏览器中查找 Web 元素？

要在浏览器中查找 Web 元素，用户必须通过在 Windows 中按 F12 和在 Mac 操作系统中按 option+command+i 或右键单击网站并选择检查选项来转到浏览器的开发人员工具。

WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门
WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门

 

浏览器开发工具

当您打开开发者工具时，您可以在“元素”选项卡下看到 HTML 标签。此 HTML 选项卡调用 DOM 元素。要查找特定的 Web 元素，请选择选择器图标（在 Elements 选项卡之前）并将鼠标悬停在您希望在 DOM 中查找的元素上。

WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门
WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门

 

WebDriverIO 中的 Selenium 定位器列表

现在您已经对 Selenium 定位器有了很好的了解，让我们在这个 WebdriverIO 教程中看看不同类型的 Selenium 定位器。以下是 WebdriverIO 支持的选择器。

  • CSS 查询选择器  – CSS Query Selector
  • 链接文字 – Link Text
  • 部分链接文本 – Partial Link Text
  • 具有特定文本的元素 – Element with certain text
  • 标签名称 – Tag Name
  • 姓名 – Name
  • 路径 – xPath
  • ID
  • JS函数 – JS Function
  • 链条选择器 – Chain Selectors
  • 反应选择器 – React Selectors
  • 自定义选择器 – Custom Selector

使用 $、$$、Custom$、Custom$$、react$ 和 react$$ 方法，用户可以找到元素并执行所需的操作。让我们在此 WebdriverIO 教程中深入探讨这些 Selenium 定位器中的每一个，以通过示例 DOM 的示例进行Selenium 自动化测试。

 

CSS 查询选择器

在这个用于 Selenium 自动化测试的 WebdriverIO 教程中，第一个定位器是 CSS 查询选择器，它用于从 DOM 中查找元素。

如何找到 CSS 查询？

转到开发人员工具并找到该元素并右键单击 DOM 中的 Selected 元素并复制 CSS 选择器选项。

WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门
WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门

句法： $(‘CSS Query’);

例子：

const assert = require("assert");
 
describe("Selector Example", function() {
   it("CSS Query Selector", function() {
       driver.url("https://lambdatest.github.io/sample-todo-app/");
       $("body > div.ng-scope > div > div > ul").click();     
   });
});

 

输出：

运行上面的脚本，可以找到控制台日志，观察到WebdriverIO用CSS选择器策略转换成findElement方法

[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: COMMAND findElement("css selector", "body > div.ng-scope > div > div > ul")
[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: [POST] http://127.0.0.1:4444/session/839505649081eaf3bef60a252593f2f9/element
[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: DATA { using: 'css selector',
 value: 'body > div.ng-scope > div > div > ul' }

 

请记住，有时使用 CSS 查询选择器可能会导致将多个元素定位为用于整个网站的 CSS 表。现在，让我们进入本 WebdriverIO 教程中的下一个 Selenium 定位器。

 

链接文字

一个网站由不同类型的组件组成，例如文本框、链接、下拉菜单等。即使是一个网页也可以有多个链接。为您的 Selenium 自动化测试脚本选择一个特定的链接可能会变得具有挑战性。这就是作为 WebdriverIO 的 Selenium 定位器的链接文本发挥作用的地方。如果您想查找任何超链接，请使用此链接文本选择器策略。

句法： $(‘=anchorText’);

这里，= 等号用于查找具有“特定文本”的锚元素。

例子：

const assert = require("assert");
describe("Selector Example", function() {
   it("Open URL", function() { 
       driver.url("https://www.lambdatest.com/");     
   });
   it("Link Text Example", function() {
       $("=Automation").click();
   });
});

当你运行上面的自动化测试脚本时，你可以找到控制台日志。如果您注意到日志，您会发现 WebdriverIO 已自动检测到带有链接文本策略的 findElement 方法。

 

输出：

[0-0] 2019-12-24T10:58:56.640Z INFO webdriver: COMMAND findElement("link text", "Automation")
[0-0] 2019-12-24T10:58:56.640Z INFO webdriver: [POST] http://127.0.0.1:4444/session/0a34df231b0b77c5e0e4d687a14829a2/element
[0-0] 2019-12-24T10:58:56.640Z INFO webdriver: DATA { using: 'link text', value: 'Automation' }

 

请注意 WebdriverIO 中此 Selenium Locator 选择的元素，因为它可能会导致多个锚点具有相同的链接文本。现在我们知道了链接文本，现在让我们转到本 WebdriverIO 教程中的部分链接文本定位器。

 

部分链接文本

部分链接文本类似于链接文本，但唯一的区别是当链接的起始几个字符是固定的而其余字符是动态的时，这会有所帮助。

句法： $(‘=anchorMatchedText’);

*= start 等号用于查找具有匹配文本的锚元素’。

$("=Automa")

 

例子：

const assert = require("assert");
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.lambdatest.com/");
   });
   it("Partial Link Text Example", function() {
       $("*=Automa").click();
   });
});

运行上述脚本时，可以找到控制台日志，观察到WebdriverIO转换为带有部分链接文本策略的findElement方法。

 

输出：

[0-0] 2019-12-24T11:15:23.860Z INFO webdriver: COMMAND findElement("partial link text", "Automa")
[0-0] 2019-12-24T11:15:23.860Z INFO webdriver: [POST] http://127.0.0.1:4444/session/592f966aa9382a63642f944c37068533/element
[0-0] 2019-12-24T11:15:23.861Z INFO webdriver: DATA { using: 'partial link text', value: 'Automa' }

 

带有特定文本的元素

在 HTML 中，每个标签都被称为一个元素，很少有元素具有直接文本，也很少有元素环绕其他标签。如果要查找具有特定或部分文本的元素，则首选使用此选择器。

虽然使用 Java 进行 Selenium 自动化测试，但如果您想查找带有某些文本的 HTML 标记，但 WebdriverIO 使用以下方法，您可以使用 XPath 和 normalize-space() 方法来查找文本和 HTML 标记。

句法：

$(‘elementTag=certain text’); used for fixed text
$(‘elementTag*=partial text’); used for partial text

 

这个选择器从=（等于）和*=（开始等于）符号中获取帮助。

WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门
WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门

例如，要从 H1 标签下方找到跨浏览器测试云，使用此命令$(“h1=Cross Browser Testing Cloud”)

< h1 class="big_title text_shadow_black __web-inspector-hide-shortcut__">跨浏览器测试云</h1>

 

同样的事情也适用于元素的 class 和 ID 属性。例如：

$(‘#id=certain text’); 用于固定文本
$(‘#id*=certain text’); 用于部分文本
$(‘.classname=certain text’); 用于固定文本
$(‘.classname*=partial text’); 用于部分文本

在这里，当您想通过 ID 和 查找元素时使用 # 。（点）用于类名。

 

例子：

const assert = require("assert");
 
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.ikeepstudying.com/");
   });
   it("Element with certain text Example", function() {
       $("h1=Cross Browser Testing Cloud").click();
   });
   it("Element with Partial text Example", function() {
       $("h1*=Cross Browser Testing").click();
   });
});

当你运行上面的脚本时，你可以找到控制台日志并观察到 ​​WebdriverIO 转换为带有“normalize-space()”和“contains()”的 findElement 方法。

 

输出：

[0-0] 2019-12-24T11:39:33.082Z INFO webdriver: COMMAND findElement("xpath", ".//h1[normalize-space() = "Cross Browser Testing Cloud"]")
[0-0] 2019-12-24T11:39:33.082Z INFO webdriver: [POST] http://127.0.0.1:4444/session/423097da27eadf53b1fac0f11655e9be/element
[0-0] 2019-12-24T11:39:33.083Z INFO webdriver: DATA { using: 'xpath',
 value: './/h1[normalize-space() = "Cross Browser Testing Cloud"]' }
[0-0] 2019-12-24T11:39:33.099Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': '03328283-f372-423c-8218-48759ac98631' }
[0-0] 2019-12-24T11:39:33.104Z INFO webdriver: COMMAND elementClick("03328283-f372-423c-8218-48759ac98631")
[0-0] 2019-12-24T11:39:33.105Z INFO webdriver: [POST] http://127.0.0.1:4444/session/423097da27eadf53b1fac0f11655e9be/element/03328283-f372-423c-8218-48759ac98631/click
[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: COMMAND findElement("xpath", ".//h1[contains(., "Cross Browser Testing")]")
[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: [POST] http://127.0.0.1:4444/session/423097da27eadf53b1fac0f11655e9be/element
[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: DATA { using: 'xpath',
 value: './/h1[contains(., "Cross Browser Testing")]' }

 

现在，让我们看看这个用于 Selenium 自动化测试的 WebdriverIO 教程中的标签名称定位器。

 

标签名称

我们使用标签名称选择器来查找使用任何 HTML 标签的元素。这是一个很少使用的 Selenium 定位器。但是，如果您正在处理表格或日历元素，这非常重要。在 Selenium 自动化测试中，您可以将标签名称作为 < tag > 或 < tag /> 之一传递。

句法：

$(‘<tag>’);
$(‘<tag />’);

 

例子：

const assert = require("assert");
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.ikeepstudying.com/");
   });
   it("Tag Name Example", function() {
       $("<h1>").getText();
   });
});

这是在 WebdriverIO 中执行上述 Selenium 自动化测试脚本时的输出。

 

输出：

[0-0] 2019-12-26T10:07:37.804Z INFO webdriver: COMMAND findElement("tag name", "h1")
[0-0] 2019-12-26T10:07:37.804Z INFO webdriver: [POST] http://127.0.0.1:4444/session/d67eadf284b85ecd1e641855c194937b/element
2019-12-26T10:07:37.804Z INFO webdriver: DATA { using: 'tag name', value: 'h1' }

 

Name

这个 Selenium 定位器类似于 Selenium 中的 ID 定位器。有时，Web 开发人员会为 HTML 节点命名。如果节点具有名称属性，则首选在 Selenium 自动化测试中合并名称定位器。名称选择器必须在带有 name 属性的方括号内。

句法：

$(‘[<name attribute>]’)

 

例子：

const assert = require("assert");
 
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.facebook.com/");
   });
   it("Name Example", function() {
       $("[name = 'email']").setValue("123");
   });
 
});

 

输出：

[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: COMMAND findElement("css selector", "[name = 'email']")
[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: [POST] http://127.0.0.1:4444/session/aee87e328f63eb11678a49adce17df4b/element
[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: DATA { using: 'css selector', value: '[name = \'email\']' }

 

XPath

本 WebdriverIO 教程中极其关键的 Selenium 定位器。在 WebDriverIO 中，您也可以编写绝对 XPath 和相对 XPath。绝对 XPath 以 / 斜线开头，相对 XPath 以 // 斜线开头。这是一个非常强大且经常使用的选择器/定位器，用于通过 Selenium 自动化测试识别元素。

 

编写 XPath 时会使用以下特殊字符。

. – 点表示从当前节点开始选择
* – 星表示选择任何节点
/ – 单斜线表示从根节点开始并用于绝对 XPath
// – 双斜线表示使用相对 XPath 搜索节点
[ ] – 使用方括号用于索引，也用于通过传递属性和它的值
@来搜索 XPath – 用于在 XPath 中识别 HTML 属性

 

绝对 XPath 的语法：

$(‘<starts with /body>’);

 

相对 XPath 的语法：

$(‘<starts with .//>’);

 

例子：

const assert = require("assert");
 
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.ikeepstudying.com/");
   });
 
   it("Xpath - Absolute Example", function() {
       $("/html/body/div[2]/section[1]/div/div/h1").getText();
   });
 
   it("Xpath - Relative Example", function() {
       $(".//h1[@class='big_title text_shadow_black']").getText();
   });
});

当你运行上面的脚本时，你可以找到控制台日志。观察 WebdriverIO 转换为带有“XPath”的 findElement 方法。

 

输出：

[0-0] 2019-12-25T17:54:37.674Z INFO webdriver: COMMAND findElement("xpath", "/html/body/div[2]/section[1]/div/div/h1")
[0-0] 2019-12-25T17:54:37.675Z INFO webdriver: [POST] http://127.0.0.1:4444/session/5f6efebb541063139a91dec5d13c32f6/element
2019-12-25T17:54:37.675Z INFO webdriver: DATA { using: 'xpath',
 value: '/html/body/div[2]/section[1]/div/div/h1' }
[0-0] 2019-12-25T17:54:37.688Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'bc244c90-ed18-4d94-9b7a-d026ba7d70d4' }
[0-0] 2019-12-25T17:54:37.694Z INFO webdriver: COMMAND getElementText("bc244c90-ed18-4d94-9b7a-d026ba7d70d4")
[0-0] 2019-12-25T17:54:37.694Z INFO webdriver: [GET] http://127.0.0.1:4444/session/5f6efebb541063139a91dec5d13c32f6/element/bc244c90-ed18-4d94-9b7a-d026ba7d70d4/text
[0-0] 2019-12-25T17:54:37.709Z INFO webdriver: RESULT Cross Browser Testing Cloud
[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: COMMAND findElement("xpath", ".//h1[@class='big_title text_shadow_black']")
[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: [POST] http://127.0.0.1:4444/session/5f6efebb541063139a91dec5d13c32f6/element
[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: DATA { using: 'xpath',
 value: './/h1[@class=\'big_title text_shadow_black\']' }

 

ID

本 WebdriverIO 教程的另一个重要 Selenium 定位器。ID 是一个非常强大的选择器，用于从 DOM 中查找元素。这始终是 DOM 中的唯一元素。更重要的一点是，如果您想加快自动化执行速度，那么必须使用 Locator 进行 Selenium 自动化测试。ID 直接从 DOM 中获取搜索，而 XPath 基于相对或绝对路径扫描文档，这是一种耗时的方法。

# 符号用于使用 ID 查找元素。

句法：

$(#<idname>);

 

例子：

const assert = require("assert");
 
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.facebook.com/");
   });
   it("ID Example", function() {
       $("#email").setValue("123");
   });
});

现在，您应该在这里观察这个输出日志。当你运行上面的脚本时，你可以看到 ID 选择器内部转换成 css 选择器并找到元素。

 

输出：

[0-0] 2019-12-25T18:29:26.359Z INFO webdriver: COMMAND findElement("css selector", "#email")
[0-0] 2019-12-25T18:29:26.360Z INFO webdriver: [POST] http://127.0.0.1:4444/session/52e465fa0b2d0dacaf976994dd1edc60/element
2019-12-25T18:29:26.360Z INFO webdriver: DATA { using: 'css selector', value: '#email' }

现在，我们已经介绍了 WebdriverIO 中常用的 Selenium 定位器。接下来，我们看看这个 WebdriverIO 教程中的高级 Selenium 定位器/选择器。

 

自定义选择器

WebdriverIO 中最方便的 Selenium 定位器/选择器之一，在面对 Selenium 自动化测试的复杂场景时会派上用场。自定义选择器允许您使用通过 browser.addLocatorStrategy 声明的自定义策略。

custom$$() 方法有助于找到一组 WebDriverIO 元素。

句法：

browser.custom$(strategyName, strategyArguments)

 

例子：

const assert = require("assert");
describe("Selector Example", function() {
  
   it("Open URL", function() {
       driver.url("https://www.facebook.com/");
   });
   
   it("Custom Selector Example - ", () => {
       browser.addLocatorStrategy("emailById", selector => {
           return document.querySelectorAll(selector);
       });
       const emailID = browser.custom$("emailById", "#email");
emailID.setValue("abc@test.com");
   });
});

在 addLocatorStrategy() 的帮助下，我们为电子邮件 ID 字段创建了“ emailById ”自定义选择器，我们可以使用custom$() 方法使用emailById选择器。在内部，WebDriverIO 将 custom$() 转换为 executeScript() 并找到该元素。

注意：在本 WebdriverIO 教程中，我们讨论了单个 $() 有助于处理单个元素。所有这些选择器都可以与 $$() 一起用于 WebDriverIO 数组。

 

结论

WebDriverIO 是顶级 JavaScript 测试框架之一，当您查看它为您提供的在网页中定位元素的多样性时，您一定会为即将到来的项目记下它。它有一个非常独特的选择器选择，包括 react$ 和 custom$ 选择器。WebDriverIO 有单一的方法来查找元素，但对于选择器有不同的符号，例如 * 、 *= 、 .(period) 和 # 不同。我相信这个 WebdriverIO 教程将帮助您将有关测试自动化的知识带入下一步。测试愉快！

 

 

本文：WebDriverIO 教程五：Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门

 

Loading

Related Posts

Tags:, , ,

Related Posts

About Author

Gideon

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.