select 使用赛普拉斯的下拉列表项

Question

我需要使用 cypress 在 angularjs 应用程序上测试下拉菜单。

我需要单击下拉列表，然后 select 或单击下拉列表中的项目。我尝试了如下方法，它只适用于一个实例，但不适用于其他时间，因为第二个 get() 方法中的 ID 号随着它的动态生成而不断变化。这不是标准的 select，带有 html 中的选项。

1) 无论如何我可以在每个选项上设置一个唯一的属性并且只 select 所需的属性，或者我可以根据列表项的描述 select 吗？我该怎么做？

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>

Answer 1

Material 设计 Select 和 Cypress

这和是同一个基本问题，只是这个问题是angularjs + md-select，那个问题是angular + mdc-select。

然而，material 设计的两个版本 select 使用相同的技巧使父控件不可见（通过将宽度和高度设置为 0 ) 点击它打开选项后。

cypress 不允许点击选项，因为它认为选项是不可见的，因为父级是不可见的。

解决方法是使用 .then() 访问展开的列表项，然后使用 jquery 单击 select 它而不是 cypress 单击。

我已经在 Angular 5 设置上对其进行了测试，并且由于问题的相似性，希望它可以与 AngularJS 设置一起使用。

AngularJS 与 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+ 与 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');
    });
  });

});

Answer 2

触发 'mousemove' 为我解决了这个问题。

cy.get('[name="countries"]').click()
cy.get.('[id="selection_option_375"]').trigger('mousemove').click()

Answer 3

对于 Angular 使用 material 下拉列表：

cy.get('mat-select').contains('CA').click({ force: true })

Answer 4

这对我有用：

cy.get(this.dropdownlocactor).contains(optiontext)
  .then(element => {
    var text = element.text();
    cy.get(this.dropdownlocator).select(text);
});

Answer 5

如果上述解决方案中的 none 对 angular 不起作用，请试试这个：

cy.get({selectlocator}).find("option:contains('text')").then($el =>
   $el.get(0).setAttribute("selected", "selected")
).parent().trigger("change")

另外，你可以参考这个 link https://github.com/cypress-io/cypress/issues/757

Answer 6

如果您使用带有多个选项的 select 元素，试试这个：

cy.get('select').should('be.visible').select('OptionName', {force: true})

select 使用赛普拉斯的下拉列表项

select dropdownlist item using cypress

angularjs

cypress