使用 cypress 选择下拉列表项 [英] select dropdownlist item using cypress
问题描述
我需要使用 cypress 测试 angularjs 应用程序的下拉列表.
I need to test a dropdown on angularjs application using cypress.
我需要单击下拉列表并从下拉列表中选择或单击一个项目.我尝试如下，它适用于一个实例，但不适用于其他时间，因为第二个 get() 方法中的 id 号随着其动态生成而不断变化.这不是像 html 那样带有选项的标准选择.
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) 无论如何我可以为每个选项设置一个唯一的属性并只选择所需的一个，或者我可以根据列表项的描述进行选择吗?我该怎么做?
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) 以下是测试下拉列表的正确方法吗?我相信还有比这更好的方法吗?
2) Is the following right way of testing for a dropdown? I am sure there could be better way than this?
请任何人帮忙
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>
推荐答案
Material Design Select and Cypress
这是与访问元素相同的基本问题其父隐藏 - cypress.io，除了这个问题是 angularjs + md-select 而那个问题是 angular + mdc-select.
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.
尽管如此，两个版本的material design select使用了相同的技巧，在点击父控件打开选项后使其不可见(通过将宽度和高度设置为0).
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 不允许单击选项，因为它认为选项是不可见的，因为父项是不可见的.
cypress will not allow a click of an option, because it think options are invisible because the parent is invisible.
解决方法是使用 .then() 访问解包的列表项，并使用 jquery 单击选择它而不是 cypress 点击.
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.
我已经在 Angular 5 设置上对其进行了测试，由于问题的相似性，希望它可以与 AngularJS 设置一起使用.
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.
带有 md-select 的 AngularJS
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')
});
});
});
带有 mdc-select 的 Angular 2+
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');
});
});
});
这篇关于使用 cypress 选择下拉列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
