javascript - 如何在 Protractor 中按类型、值或 alt 属性定位元素？

Question

示例 1: 我有一个按钮的 html 代码。

<button class="submit_btn" type="submit" value="Login" ng-disabled="LoginCtrl.loginStatus === LoginCtrl.loginCtrlConfig.LOGIN_LOADING">

使用 Protractor ，如果我不想使用类名，而是使用“类型”或“值”参数。

示例 2:

<img src="someSource" alt="Firewall for Code" width="90" height="46">

我想使用上面的图片的“alt”参数来测试该元素是否位于页面上，因此测试应该通过。

如何在 Protractor 中完成上述两项任务？

Answer 1

您可以/应该使用CSS selectors对元素属性添加过滤条件。

在第一个示例中，可能是:

var submitButton = element(by.css("button[type=submit][value=Login]"));

// element is present
expect(submitButton.isPresent()).toBe(true);

// element is displayed
expect(submitButton.isDisplayed()).toBe(true);

在第二个示例中，它将是:

var sourceImage = element(by.css('img[alt="Firewall for Code"]'));

// element is present
expect(sourceImage.isPresent()).toBe(true);

// element is displayed
expect(sourceImage.isDisplayed()).toBe(true);

请注意，在这种情况下，我们需要在属性值周围加上引号，因为属性值中有空格。以下是有关何时需要报价、何时不需要报价的更多信息:

• CSS attribute selectors: The rules on quotes (", ' or none?)