使用柏树选择下拉列表项

vawmfj5a 于 2022-10-24 发布在 Angular

关注(0)|答案(6)|浏览(156)

我需要使用柏树测试angularjs应用程序上的下拉列表。
我需要点击一个下拉列表，然后从下拉列表中选择或点击一项。我尝试了下面的方法，它在一个示例上有效，但在另一个示例上无效，因为第二个get()方法中的id号在其动态生成时不断变化。这不是带选项的标准SELECT，就像在html中那样。
1)有没有什么我可以在每个选项上设置一个唯一的属性并只选择所需的一个，或者我可以只根据列表项的描述进行选择？我怎么能做到这一点？
2)下面的下拉列表测试方式正确吗？我相信还有比这更好的办法吗？
有谁能帮忙吗？

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

多姆

<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>

angularjs

来源：https://stackoverflow.com/questions/48362422/select-dropdownlist-item-using-cypress

6条答案

按热度按时间

ckocjqey1#

材料设计精选与柏树

这与父元素是隐藏的-cypress.io的Access元素的基本问题相同，不同之处在于这个问题是angularjs+md-select，而那个问题是angularjs+mdc-select。
然而，两个版本的材质设计选择使用相同的技巧，在单击父控件打开选项后使其不可见(通过将宽度和高度设置为0)。

柏树不允许点击选项，因为它认为选项是看不见的，因为父项是看不见的。

解决方法是使用.then()访问解开的列表项，并使用jQuery点击将其选中，而不是柏树点击。
我已经在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')  
    });
  });

});

带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');
    });
  });

});

赞(0）回复(0）举报 2022-10-24

xytpbqjk2#

对于使用材质的Angular 下拉列表：

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

赞(0）回复(0）举报 2022-10-24

sg24os4d3#

如果使用带有多个选项的SELECT元素，请尝试执行以下操作：

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

赞(0）回复(0）举报 2022-10-24

ffx8fchx4#

触发鼠标移动为我解决了这个问题。

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

赞(0）回复(0）举报 2022-10-24

kh212irz5#

这对我来说很管用：

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

赞(0）回复(0）举报 2022-10-24

a0zr77ik6#

如果上面的解决方案都不起作用，特别是对Angular ，试试这个：

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

此外，您还可以参考此链接https://github.com/cypress-io/cypress/issues/757

赞(0）回复(0）举报 2022-10-24

我来回答

使用柏树选择下拉列表项

6条答案

相关问题

热门标签

最新问答