我需要使用cypress测试angularjs应用程序的下拉列表。
我需要单击一个下拉列表，然后从下拉列表中选择或单击一个项目。我尝试如下所示，它只能在一个实例上使用，而不能在其他情况下使用，因为第二个get（）方法中的ID号随着其动态生成而不断变化。这不是带有html中选项的标准选择。
1）无论如何，我可以在每个选项上设置一个唯一属性并仅选择所需的属性，还是可以仅基于列表项的描述进行选择？我怎样才能做到这一点？
2）是否有以下正确的下拉列表测试方法？我敢肯定还有比这更好的方法吗？
请谁能帮忙
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>
材料设计选择和赛普拉斯
这与隐藏了其父元素的Access元素cypress.io相同，是基本问题，不同的是这个问题是angularjs + md-select，这个问题是angular +mdc-select。
但是，两个版本的 材料设计选择使用相同的技巧，在单击父控件以打开选项后，使父控件不可见（通过将width和height设置为0）。
赛普拉斯 不允许单击选项，因为它认为选项是不可见的，因为父级是不可见的。
解决方法是使用.then()来访问未包装的列表项，并使用 jquery 单击选择它而不是 cypress 单击。
.then()
我已经在Angular 5设置上对其进行了测试，并且由于问题的相似性，预计它可以与AngularJS设置一起使用。
带有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') }); }); });
具有dcdc-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'); }); }); });
