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

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'); 

但这并不是不实际读取可见文本，而是在读这符合预期的语句，并传递元素值。如何验证可见文本是否被切断？

Answer 1

量角器的设计目的是为了在浏览器中使用功能端到端测试。

测试应用程序的视觉方面更加困难，因为：

• UI控件的行为时，UI效果很大程度上依赖于浏览器，浏览器版本，分辨率，设备，操作系统
• 它很可能将被改变
• 它具有（因为定时，光标位置，当前的浏览器/窗口尺寸等）的故障的概率较高
• 难以维持

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

---

我如何可以验证该可见文本被切断？

您不能笼统地解决它通过硒webdriver的API，因此，量角器直接，但考虑检查clientWidth，scrollWidth，offsetWidth，innerWidth性质（related topic）。您可以使用getAttribute()和getCssValue()访问这些属性。

Answer 2

量角器不是检查应用的视觉方面，但功能的最佳工具。恐怕您的案例不可能通过量角器进行检查，因为它会从HTML源文件中获取文本。

要控制每天的基础上应用它的好，有一些屏幕比较工具与模式：

• Wraith
• AET
• Applitools Eyes

希望它可以帮助哪怕是一点点。