select dropdownlist item using cypress
I need to test a dropdown on angularjs application using cypress.
I would need to click on a dropdown and select or click an item from the dropdownlist. I tried as below which worked for one instance but not other time because the id number in the second get() method keeps changing as its dynamically generated. This is not a standard select with options as in html.
1) Is there anyway I can set an unique attribute on each option and just select the required one or can I just select based on the description of the list item? How can I do that?
2) Is the following right way of testing for a dropdown? I am sure there could be better way than this?
Please can anyone help
cy.get('[name="countries"]').click().get.('[id="selection_option_375"]').click()
DOM
<md-select ng-model="target.countryType" name="countries" ng-required="requiredData.AssertRequiredFields" ng-change="oncountryTypeChanged($event)"
md-container-class="large" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" tabindex="0" aria-disabled="false"
role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_297" aria-owns="select_container_298" aria-required="true"
required="required" aria-invalid="true" aria-label="country type" style=""><md-select-value class="md-select-value md-select-placeholder"
id="select_value_label_288">
<span>country type</span><span class="md-select-icon" aria-hidden="true"></span>
</md-select-value>
<div class="md-select-menu-container large" aria-hidden="true" id="select_container_298"><md-select-menu class="_md"><md-content class="_md md-no-flicker">
<!-- ngRepeat: countryType in refData.countryDetails.countryType.Items --><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_369" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country one
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_370" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country two
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_371" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country three
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_372" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country four
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_373" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country five
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_374" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country six
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_375" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country seven
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_376" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country eight
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_377" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country nine
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_378" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country ten
</div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_379" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
Country eleven
</div></md-option><!-- end ngRepeat: countryType in refData.countryDetails.countryType.Items -->
</md-content></md-select-menu></div>
</md-select>
Answer
Material Design Select and Cypress
This is the same basic problem as Access element whose parent is hidden - cypress.io, except this question is angularjs + md-select and that question was angular + mdc-select.
Nevertheless, the two versions of material design select use the same trick of making the parent control invisible (by setting width and height to 0) after clicking it to open the options.
cypress will not allow a click of an option, because it think options are invisible because the parent is invisible.
The work around is to use .then() to get access to the unwrapped list item, and use jquery click to select it instead of cypress click.
I have tested it on an Angular 5 setup, and because of the similarity of the problem expect it to work with an AngularJS setup.
AngularJS with md-select
describe('Testing material design select', function() {
it('selects an option by click sequence (fails due to visibility issue)', function() {
const doc = cy.visit('http://localhost:4200');
cy.get('[name="countries"]').click();
cy.get('md-option').contains('Country seven').click();
});
it('selects an option by click sequence', function() {
const doc = cy.visit('http://localhost:4200')
cy.get('[name="countries"]').click()
cy.get('md-option').contains('Country seven').then(option => {
// Confirm have correct option
cy.wrap(option).contains('Country seven');
option[0].click(); // this is jquery click() not cypress click()
// After click, md-select should hold the text of the selected option
cy.get('[name="countries"]').contains('Country seven')
});
});
});
Angular 2+ with mdc-select
describe('Testing material design select', function() {
it('selects an option by click sequence (fails due to visibility issue)', function() {
const doc = cy.visit('http://localhost:4200');
cy.get('[name="countries"]').click();
cy.get('mdc-select-item').contains('Country seven').click();
});
it('selects an option by click sequence', function() {
const doc = cy.visit('http://localhost:4200')
cy.get('[name="countries"]').click()
cy.get('mdc-select-item').contains('Country seven').then(option => {
// Confirm have correct option
cy.wrap(option).contains('Country seven');
option[0].click();
// After click, mdc-select should hold the text of the selected option
cy.get('[name="countries"]').contains('Country seven');
});
});
});