web-dev-qa-db-fra.com

sélectionner un élément de la liste déroulante à l'aide de cyprès

J'ai besoin de tester une liste déroulante sur l'application angularjs en utilisant cyprès.

Je devrais cliquer sur une liste déroulante et sélectionner ou cliquer sur un élément de la liste déroulante. J'ai essayé comme ci-dessous, ce qui a fonctionné pour une instance, mais pas pour une autre fois, car le numéro d'identification dans la deuxième méthode get () change constamment car il est généré dynamiquement. Ce n'est pas une sélection standard avec des options comme en html.

1) Existe-t-il de toute façon que je peux définir un attribut unique pour chaque option et simplement sélectionner celui qui est requis ou puis-je simplement sélectionner en fonction de la description de l'élément de liste? Comment puis je faire ça?

2) La bonne façon de tester une liste déroulante est-elle la suivante? Je suis sûr qu'il pourrait y avoir une meilleure façon que cela?

S'il vous plaît quelqu'un peut-il aider

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>
angularjscypress
6
ChinnaR

Sélection de conception de matériaux et cyprès

C'est le même problème de base que élément Access dont le parent est caché - cypress.io , sauf que cette question est angularjs + md-select et que cette question était angular + mdc -sélectionner.

Néanmoins, les deux versions de sélection de conception de matériau utilisent la même astuce pour rendre le contrôle parent invisible (en définissant la largeur et la hauteur à 0) après avoir cliqué dessus pour ouvrez les options.

cyprès ne permettra pas un clic sur une option, car il pense que les options sont invisibles car le parent est invisible.

La solution consiste à utiliser .then() pour accéder à l'élément de liste non encapsulé et à utiliser jquery cliquez pour le sélectionner au lieu de cliquez sur cyprès .

Je l'ai testé sur une configuration Angular 5, et en raison de la similitude du problème, attendez-vous à ce qu'il fonctionne avec une configuration AngularJS.


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

});
5
Richard Matsen

Pour Angular utilisant la liste déroulante des matériaux:

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

Déclencher 'mousemove' a résolu ce problème pour moi.

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