在执行Selenium测试自动化时，你会遇到许多需要验证WebElements属性和值的场景。例如，你可能需要在自动化测试代码中获得元素的文本值，然后根据所需的值进行验证。在Selenium中，getText()方法被用来获取Web元素的文本值。
如果测试场景比较复杂，仅仅获取元素的文本值是不够的呢？在这种情况下，你需要使用WebElements的额外（和相关）属性。同样，我们可能会面临这样的情况：仅仅验证文本值对测试来说是不够的，我们需要获得DOM中静态或动态的元素的额外属性。无论是JavaScript还是其他Selenium支持的编程语言，获取WebElements的特定属性在Selenium自动化测试中是非常有用的。
在这篇博客中，我们将深入探讨如何在JavaScript中获取数据属性，以构建一流的Selenium自动化测试场景。
什么是HTML中的属性
HTML中的属性通过提供关于HTML元素的额外信息发挥着重要作用。它也可以用来通过实现元素的事件来改变它们的行为。HTML中的属性通常使用名-值对来定义。
名称是你想要设置的属性。例如，例子中的图像标签 元素带有一个属性，其名称是 src，表示图像的来源。
值表示需要设置的相应属性的值。它总是用引号括起来。下面是这个例子，它显示了扩展名为.jpeg的图像的值。
<img src='imagename.jpeg'/>
属性名和属性值是不区分大小写的。然而，万维网联盟（W3C）推荐小写属性（或属性值），作为HTML 4建议的一部分。你可以查看我们之前的博客，它可以帮助你了解如何在Selenium WebDriver中获取属性值。
自动化测试中常用的属性
尽管HTML中有许多属性，但只有其中的一部分主要用于自动化测试。以下是HTML中的一些常用属性。
·id：id属性用于识别整个DOM中唯一的WebElements。
· 类：类属性提供了一种对类似WebElements进行分类的方法。
· 样式：style属性用于为WebElements添加CSS样式。
· 标题：title属性用于提供元素的上下文信息。在几乎所有的网络浏览器中，元素的标题可以在鼠标悬停在窗口上时显示为工具提示。
属性的主要类型
下面列出了一些属性的主要类别（或类型）。
· 必备属性。这些属性不能从HTML标签中省略。例如，如果没有的src，页面上就不会显示图像。
· 可选属性。这些属性应该被添加，以赋予元素更多的意义。例如，的title为图像提供了一个标题，但它不是一个强制性的属性。
· 事件属性。这些属性是基于用户操作而触发的事件。例如 - 任何html元素上的onmouseover事件都是在用户将鼠标指针悬停在该特定WebElement上时触发的。
· 标准属性。这些也被称为全局属性。这类属性几乎可以在所有的HTML标签中使用（如id、class、style等）。
HTML中的属性在Selenium自动化测试中发挥着越来越重要的作用。现在我们已经介绍了HTML中的属性的基本知识，让我们看看如何在Selenium JavaScript中获得属性数据的基本方面。
为什么属性对自动化测试很重要
属性可以改变WebElements的行为，这取决于用于执行自动化测试的场景（或事件）。让我们来看看公共汽车预订应用程序的例子。在这里，预订的座位通常用 "灰色 "表示，而 "绿色 "表示座位可供预订。如果颜色的表述有误，客户在订票时就会面临问题。顾客会失去对品牌的信任，这反过来会妨碍公司的收入。
因此，测试已订票和可用票是否以正确的颜色编码表示变得极为关键。
手动测试不是首选，因为它不是一个可扩展和可靠的方法。然而，这种情况可以通过在Selenium JavaScript中获取属性数据来测试。因此，在构建到生产环境之前，这是一个理想的测试方法。
如何在Selenium JavaScript测试中获取属性数据
Selenium是一个流行的网络自动化测试工具，因为它有大量的开源社区支持，并且容易用你选择的编程语言编写测试。此外，Selenium自动化框架被广泛用于跨浏览器兼容性测试，确保网站（或网络应用）在不同的浏览器、平台和设备组合中统一运行。
使用Selenium和JavaScript，你可以得到网站（或网络应用）上当前状态下显示的HTML元素的属性数据。此外，一旦WebElements的属性（如颜色、锚标签的链接更新等）发生事件变化，你也可以验证属性的变化数据。
Selenium中的getAttribute()
Selenium的getAttribute()方法是用来获取被测试的HTML元素的属性。这个方法是WebElement类的一部分。getAttribute()方法可用于获取不同属性的值，如class、name、src、CSS样式值等。
更确切地说，如果该属性存在，这个Selenium方法会返回给定属性的数据，否则会返回null。例如，getAttribute()方法可以用来获取textarea元素的 "value "属性。style "属性被转换为带有尾部分号的文本表示。
语法
var ele = driver.findElement(By.id('#'));
var attribute_value= ele.getAttribute('attribute_name'); // returns the attribute value
示范--如何在Selenium JavaScript中获取属性的数据
在我们演示如何使用JavaScript在Selenium中获取属性数据之前，必须为Selenium测试自动化准备好基本设置。你可以参考我们之前的博客，题为《用Selenium JavaScript进行自动化测试》，以建立一个用JavaScript绑定在Selenium中编写测试的环境。
另外，你也可以查看LambdaTest YouTube频道的视频，指导你完成Selenium JavaScript之旅。
考虑一个在线销售不同类型钢笔的示例应用程序。这就是我们计划实现的，作为演示如何使用Selenium和JavaScript获得属性数据的一部分。
测试场景
两个场景将使用Selenium和JavaScript进行自动化测试。首先，我们获取页面上相关属性的数据。
验证当用户试图悬停在过滤器部分显示的颜色样本上时，产品的颜色是否与显示给用户的颜色相同。
验证用户看到的产品名称是否正确，因为它是从后端获取的。
实施
测试是在LambdaTest的基于云的Selenium Grid上运行。基于云的网格的优势在于，Selenium测试自动化可以在一系列的浏览器、平台和设备组合中大规模地进行。
你可以在Selenium中执行并行测试，以利用LambdaTest Grid提供的速度和规模优势。一旦你在LambdaTest上创建了一个账户，请记下LambdaTest配置文件部分的用户名和访问密钥。
使用LambdaTest能力生成器来生成所需的浏览器能力，Selenium测试自动化必须针对这些能力进行。将环境变量LT_user和LT_token分别设置为LambdaTest用户名和访问密钥。
require('dotenv').config();
exports.config = {
LT_user: process.env.LT_user, // Your LambdaTest username
LT_pass:process.env.LT_token, // Your LambdaTest token
capabilities: {
'build': 'Mocha-Selenium-Sample', //Build name
'name': 'Test sample for getAttribute()', // Test name
'platform': 'Windows 10', // OS name
'browserName': 'chrome', // Browser name
'version': 'latest', // Browser version
'visual': true, // To take step by step screenshot
'network': true, // To capture network Logs
'console': true, // To capture console logs.
}
}
为了演示，我们使用Selenium 4（Beta 2）版本的Selenium WebDriver。要了解更多关于Selenium 4的信息，请查看LambdaTest学习中心的Selenium 4。
{
"name": "lambdatest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha --recursive --timeout 300000 ./tests/tests.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"chromedriver": "^89.0.0",
"dotenv": "^8.2.0",
"mocha": "^8.3.2",
"selenium-webdriver": "^4.0.0-beta.2"
}
}
require('chromedriver');
const assert = require('assert');
const { Builder, By } = require('selenium-webdriver');
const { config } = require('../conf/conf.js');
const conf=require("../conf/conf.js").config;
const USERNAME = conf.LT_user
const KEY = conf.LT_pass;
const GRID_HOST = 'hub.lambdatest.com/wd/hub';
describe('Check Colours in filter section', function () {
let driver;
before(async function () {
let caps=conf.capabilities;
let gridUrl='https://' + USERNAME + ':' + KEY + '@' + GRID_HOST;
console.log(gridUrl)
driver = await new Builder().usingServer(gridUrl).withCapabilities(caps).build();
await driver.get('https://www.pens.com/ie/c/pens-writing');
});
it('Verify the colour matches the swatch title', async function () {
let list = await driver.findElements(By.css("a[class='colour-swatch ']"));
let colour=[];
for (item of list) {
//Using getAttribute to get the data
let col = await item.getAttribute("title");
colour.push(col)
}
console.log(colour)
});
it('Check the Product name matches with data attribute', async function(){
let product_data_attribute = await driver.findElement(By.id('product-card-1'));
let product_name_displayed = await driver.findElement(By.className('product-card__name'));
console.table([await product_data_attribute.getAttribute('data-prod-name') , await product_name_displayed.getText()])
});
after(() => driver && driver.quit());
})
代码演练
第一步：
在conf.js中声明的浏览器功能被用于测试实现。该测试将在Windows 10平台上的Chrome 89.0上运行。执行Selenium网络自动化的LambdaTest网格被设置为hub.lambdatest.com/wd/hub。
let caps=conf.capabilities;
let gridUrl='https://' + USERNAME +':' + KEY +'@' + GRID_HOST;
第二步：
Selenium WebDriver的get方法被用来设置测试URL。
await driver.get('www.pens.com/ie/c/pens-w…');
第三步：
Selenium中的findElements方法用于使用CSS选择器属性来定位WebElements。你可以查看我们的博客，了解专业测试人员如何利用CSS选择器实现Selenium Web自动化。
let list = await driver.findElements(By.css("a[class='colour-swatch ']"));
Chrome浏览器中的检查工具被用来定位WebElements。
第四步：
浏览整个列表，获取每个元素的 "标题 "属性。
for (item of list) {
//Using getAttribute to get the data
let col = await item.getAttribute("title");
colour.push(col)
}
如下图所示，列表中相应元素的标题是白色。按照类似的思路，你会为列表中的元素设置黑色、浅蓝色、蓝色等标题。
第五步：
在 "检查产品名称与数据属性是否匹配 "的函数中，我们首先使用ID属性定位WebElement（即product-card-1）。
let product_data_attribute = await driver.findElement(By.id('product-card-1'));
第六步：
使用Selenium的className属性，我们找到WebElement product-card__name
let product_name_displayed = await driver.findElement(By.className('product-card__name'));
下面是我们如何使用Chrome中的检查工具（或Chrome DevTools）定位WebElement的。
第七步：
JavaScript中的console.table函数用于以表格的形式显示数据。Selenium中的getAttribute方法被用来获取每个项目的data-prod-name属性。
console.table([await product_data_attribute.getAttribute('data-prod-name') , await product_name_displayed.getText()])
下面是Chrome浏览器中的检查工具是如何用来获取相应属性的细节的。
执行输出
在终端上触发以下命令，运行演示如何使用JavaScript在Selenium中获取属性数据的例子。
npm test
下面是终端的执行快照和LambdaTest自动化仪表板，表明测试执行成功。
就这样了，伙计们
在这篇博客中，我们学习了如何使用JavaScript和Selenium读取（或获取）属性数据。这可以用在Selenium网页自动化场景中，你必须读取页面上的属性值。
Selenium中的getAttribute()方法是用来读取相应属性的值的。我们还在LambdaTest提供的Selenium网格云中实现了getAttribute()，并在Windows 10上安装的Chrome浏览器中进行了测试。因此，可以使用LambdaTest这样基于云的Selenium网格来进行大规模的浏览器兼容性测试。此外，它可以让你在2000多个浏览器和操作系统上在线运行自动化测试。
最好是利用基于云的Selenium网格提供的优势，这样你就能以更有效的方式获得Selenium JavaScript中的属性数据。
祝你使用Selenium和JavaScript测试愉快!
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
