Question

我有一个下拉列表，当我选择一些元素时。文本在下拉框中显示为切断。我需要能够验证在量角器测试中文本没有被切断。

<select class="form-control add_reason_select ng-pristine ng-empty ng-invalid  ng-invalid-required ng-touched" required="" name="reason_id" ng- options="EntranceReason.Reason for EntranceReason in  selectedTransition.EntranceReasons track by EntranceReason.Id" ng- change="selectReason(selectedTransition.selectedReason)" ng- model="selectedTransition.selectedReason" style="">
<option value="?" selected="selected"></option>
<option label="Candidate withdrew" value="1">Candidate withdrew</option>
<option label="Cannot meet applicant salary requirements" value="2">Cannot meet applicant salary requirements</option>
<option label="Conflict of interest" value="3">Conflict of interest</option>
<option label="Did not meet pre-employment requirements" value="11">Did not meet pre-employment requirements</option>
<option label="Does not meet minimum qualifications" value="12">Does not meet minimum qualifications</option>

我在iPhone 5的Chrome浏览器中使用移动模拟。一旦选中，其中一些下拉选项的文本会被切断。

例如使用iPhone 5仿真。如果我从下拉列表中选择不符合最低资格。实际可见的是“不符合最低资格”。 根据我使用的移动仿真，会删除更多或更少的文本。

我可以选择所选元素并按照我在量角器测试中的操作进行检查。

var el = element(by.model('selectedTransition.selectedReason')).$('option:checked');
expect(el.getText()).toEqual('Cannot not meet pre-employment requirements');

但这实际上并不是读取可见文本而是读取与expect语句匹配的元素值并传递。如何验证可见文本是否被截断？

Answer 1

Protractor旨在用于浏览器中的功能端到端测试。

测试应用程序的可视方面要困难得多，因为：

UI控件的行为，UI效果在很大程度上取决于浏览器，浏览器版本，分辨率，设备，操作系统
可能会被更改
它有更高的失败概率（因为时间，光标位置，当前浏览器/窗口大小等）
难以维护

也就是说，它可能仍然取决于测试中的事物的重要性和价值，我可以设想在e2e测试中检查页面上的视觉效果的用例。

如何验证可见文字是否被截断？

您通常无法通过Selenium WebDriver API直接解决问题，因此也无法直接解决问题，但请查看检查clientWidth，scrollWidth，offsetWidth，innerWidth属性（{{ 3}}）。您可以使用related topic和getAttribute()来访问这些属性。

量角器 - 如何验证下拉列表中的文本选择不会被切断

1 个答案: