Menu
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>
722
Select multiple options Note: Passing an array into cy. select() will select only the options matching values in the array, leaving all other options unselected (even those that were previously selected). In the same manner, calling cy. select([]) with an empty array will clear selections on all options.
For a static dropdown, the tagname of the element should be <select> and its child elements should have the tagname <option>. select(value) − The select() command with argument value selects the option with that value. The get method should have the css selector of the static dropdown when chained with select().
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');
});
});
});
For Angular using material dropdown:
cy.get('mat-select').contains('CA').click({ force: true })
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
