如何在量角器中按类型、值或 alt 属性定位元素？答案

【问题标题】：How to locate element by type, value or alt attribute in protractor?如何在量角器中按类型、值或 alt 属性定位元素？
【发布时间】：2018-04-17 23:13:00
【问题描述】：

示例 1：我有这个按钮的 html 代码。

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

使用量角器，如果我不想使用类名，但使用 'type' 或 'value' 参数。

示例 2：

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

我想使用上述img的'alt'参数来测试这个元素是否位于页面上，因此测试应该通过。

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

【问题讨论】：

您当前的代码在哪里？
这个可能的副本包含多种定位元素的方法，通过 css 或 xpath Protractor: Find Element by Attribute

标签： javascript protractor

【解决方案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?)

【讨论】：