Protractor - How to verify text selection in dropdown list is not cut off

Question

I have a dropdown list where when I select some elements. The text appears cut off in the dropdown box. I need to be able to validate that the text is not cut off in my protractor test.

<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>

I am using mobile emulation in a Chrome browser of iPhone 5. And the text for some of these drop down selections appears cut off once selected.

For example using a iPhone 5 emulation. If I select Does not meet minimum qualifications from the dropdown list. What is actually visible is "Does not meet minimum qualific". Depending on which mobile emulation I use, more or less text is cut off.

I can select the selected element and check it as I have done below in my protractor test.

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

But this is not not actually reading the visible text but instead is reading the element value which matches the expect statement and passes. How can I verify if the visible text is cut off?

score 0 · Accepted Answer · edited May 23 '17 at 11:53

Protractor is designed and meant to be used for functional end-to-end testing in the browser.

Testing visual aspects of an application is much more difficult because:

the behavior of the UI controls, the UI effects heavily depend on the browser, browser version, resolution, device, operating system
it is likely to be changed
it has a higher probability of failures (because of timing, cursor position, current browser/window size etc)
difficult to maintain

That said, it would probably still depend on the importance and value of things under test and I can imagine use cases where I would check the visual effects on a page in e2e tests.

How can I verify if the visible text is cut off?

You cannot generally solve it through Selenium WebDriver API and, hence, Protractor directly, but look into checking clientWidth, scrollWidth, offsetWidth, innerWidth properties (related topic). You can access these attributes using getAttribute() and getCssValue().

Protractor - How to verify text selection in dropdown list is not cut off

1 Answers1