如何在 Protractor.js E2E 测试中下拉选择框

Protractor 是一个流行的端到端测试框架，它支持 Angular 应用的自动化测试。在编写 E2E 测试时，经常需要模拟用户与下拉选择框的交互。本文将介绍如何使用 Protractor 定位和操作下拉选择框。

1. 找到下拉选择框元素

通常情况下，下拉选择框是通过 <select> 元素实现的。我们可以使用 element(by.css()) 或 element(by.xpath()) 等定位器来找到该元素。

const dropdown = element(by.css('select'));

2. 选中下拉选项

有两种方法可以选中下拉选项：通过选项值或显示文本。

2.1 通过选项值选中

可以使用 element(by.cssContainingText()) 方法找到包含指定选项值的 <option> 元素，并调用 .click() 方法选中该选项。

const optionValue = 'option1';
const option = element(by.cssContainingText('option', optionValue));
dropdown.click();
option.click();

2.2 通过显示文本选中

可以使用 element(by.cssContainingText()) 方法找到包含指定显示文本的 <option> 元素，并调用 .click() 方法选中该选项。

const optionText = 'Option 1';
const option = element(by.cssContainingText('option', optionText));
dropdown.click();
option.click();

3. 验证选中的选项

可以使用 getAttribute() 方法获取选中选项的值或文本，并与预期值进行比较。

3.1 验证选项值

const expectedValue = 'option1';
dropdown.getAttribute('value').then(function(value) {
  expect(value).toEqual(expectedValue);
});

3.2 验证显示文本

const expectedText = 'Option 1';
dropdown.getText().then(function(text) {
  expect(text).toEqual(expectedText);
});

总结

在 Protractor.js E2E 测试中下拉选择框是一个常见的测试场景，我们可以通过定位下拉选择框元素、选中选项和验证选项值或显示文本来完成这个任务。以上提到的技巧能够帮助开发者更好地编写 E2E 测试用例。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11287