[开发测试] Selenium 4.0 Intro

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 开发测试 -> Selenium 4.0 Intro -> 正文阅读

[开发测试]Selenium 4.0 Intro

文章目录

Overview

I know it’s a cliche to say that it’s a “very great pleasure”, but, being honest with you, it genuinely is.

Selenium 4 不仅对前代版本做了稳定提升，还带来了大量令人兴奋的新功能，这能让我们的测试编写起来更有趣，也能在运行时更加稳定。

Authentication

Selenium 4.0 的一个重要更新是 身份验证 能力。

在过去，我们一直能使用 Selenium 处理一些「登录」请求，譬如通过定位特征元素（如 Input ）来控制 Driver 进行定位（如 find_element_by_xpath() ）、输入（如 send_key() ）、提交（如 click() ）完成身份验。然而，我们使用这套工作流处理一些特殊框架的站点（如 basic or digest authentication）时效果差强人意。因此，我们在使用 Selenium 处理难以应付的登录要求时，总会在启动前携带 cookie。

上述情况将在 Selenium 4.0 时代有所改观。我们可以通过调用 register 方法来添加「username」以及「password」或是其他 Token 执行身份认证任务，而无需再繁琐地定位元素发送消息或是与人机验证勾心斗角，「验证」行为由 Driver 底层实现。

如下 demo 演示了新方法的功能实现：

Java

// This "HasAuthentication" interface is the key!
HasAuthentication authentication (HasAuthentication) driver;

// You can either register something for all sites
authentication.register(() -> new UsernameAndPassword("admin", "admin"));

// Or use something different for specific sites
authentication.register(
  uri -> uri.getHost().contains("mysite.com"),
  new UsernameAndPassword("AzureDiamond", "hunter2"));

Ruby

driver.register(username: 'admin', password: 'admin')

当我们完成 add 添加操作后，每当站点要求或是 driver 加载出身份认证页面时，Selenium 会帮我们自动提供验证信息（如 username 与 password），这样的操作是隐式完成的。以往，我们可能需要单独开一条线程来应对随时可能出现的「运行时身份认证」或是通过「try…exception」机制主动捕获异常并调用相应的处理模块。

这个特性目前是基于 Selenium 4 的 CDP （Chrome DevTools Protocol）实现的，意味着此功能仅能运行在支持这个协议的浏览器上。值得一提的是，Selenium 旗下产品 WebDriver Bidi 的允许开发者在不支持 CDP 的浏览器使用这项功能，好消息是这个项目还未完整孵化出来，我们可以期待一下。

Relative Locators

相对定位器（Relative Locators）是一种基于「自然语言术语」的元素定位解决方案，开发者可通过诸如「上方」「下方」「左侧」「右边」等描述捕获那些「看得见但摸不着」的标记元素，这种描述可以适应 DOM 的变化。

这种方法背后的概念是允许开发者根据在页面上描述元素的方式来查找元素。更自然的说法是「find the element that is below the image」，而不是「find the INPUT inside the DIV with the "id " of “main”」。通常，我们可以将此方案视为一种基于视觉的元素定位方法。

这套方法论最初由 Sahi 提出，这是一个极其强大的基于低代码实现的自动化测试平台，感兴趣的朋友可以了解以下。

我们以 Python 和 Java 举个例子，简要说明这个方案的强大之处。

Above

如下图是一个常见的登录页面，我们像找到位于密码字段上方的电子邮件地址字段。为此，我们通过其 id 找到密码字段，然后使用 relative locators 定位器捕获电子邮件字段。

Asset > Selenium 4 login-form-relative-locators

Python

from selenium.webdriver.common.by import By
from selenium.webdriver.support.relative_locator import locate_with
passwordField = driver.find_element(By.ID, "password")
emailAddressField = driver.find_element(locate_with(By.TAG_NAME,  "input").above(passwordField))

Java

import static org.openqa.selenium.support.locators.RelativeLocator.with;
WebElement password = driver.findElement(By.id("password"));
WebElement email = driver.findElement(with(By.tagName("input")).above(passwordField));

Below

反过来，让我们定位密码字段，它位于电子邮件地址字段下方。

Python

from selenium.webdriver.common.by import By
from selenium.webdriver.support.relative_locator import locate_with
emailAddressField = driver.find_element(By.ID, "email")
passwordField = driver.find_element(locate_with(By.TAG_NAME, "input").below(emailAddressField))

Java

import static org.openqa.selenium.support.locators.RelativeLocator.with;
WebElement emailAddressField = driver.findElement(By.id("email"));
WebElement passwordField = driver.findElement(with(By.tagName("input"))
                                          	.below(emailAddressField));

To the left Of

让我们考虑一下我们想要在「提交」按钮左侧找到元素的情况。

Python

from selenium.webdriver.common.by import By
from selenium.webdriver.support.relative_locator import locate_with
submitButton = driver.find_element(By.ID, "submit")
cancelButton = driver.find_element(locate_with(By.TAG_NAME, "button").
                               	to_left_of(submitButton))

Java

import static org.openqa.selenium.support.locators.RelativeLocator.with;
WebElement submitButton = driver.findElement(By.id("submit"));
WebElement cancelButton = driver.findElement(with(By.tagName("button"))
                                        	.toLeftOf(submitButton));

To the Right Of

现在我们将考虑相反的情况，我们希望找到「取消」按钮右侧的元素。

Python

from selenium.webdriver.common.by import By
from selenium.webdriver.support.relative_locator import locate_with
cancelButton = driver.find_element(By.ID, "cancel")
submitButton = driver.find_element(locate_with(By.TAG_NAME, "button").
                               	to_right_of(cancelButton))

Java

import static org.openqa.selenium.support.locators.RelativeLocator.with;
WebElement cancelButton = driver.findElement(By.id("cancel"));
WebElement submitButton = driver.findElement(with(By.tagName("button")).toRightOf(cancelButton));

Near

上文「适应 DOM 的变化」从何而来？我觉得 near function 是个非常重要的体现，它允许我们通过一定的规则指定所选取的元素周围 50px 以内的其他元素。小伙伴们首先想到什么？欸嘿我不说。官方文档中这一句不起眼的描述，可能在未来，成为万千依靠 Selenium 工作的工程师们实现财富自由的垫脚石。

回到话题，在这个案例中，我们可以通过先定位邮件标签，再通过寻找 input tag 的偏移量，最终定位邮件地址的输入框。

Python

from selenium.webdriver.common.by import By
from selenium.webdriver.support.relative_locator import locate_with

emailAddressLabel = driver.find_element(By.ID, "lbl-email")
emailAddressField = driver.find_element(locate_with(By.TAG_NAME, "input").
near(emailAddressLabel))

Java

import static org.openqa.selenium.support.locators.RelativeLocator.with;
WebElement emailAddressLabel = driver.findElement(By.id("lbl-email"));
WebElement emailAddressField = driver.findElement(with(By.tagName("input")).near(emailAddressLabel));