사이프러스를 사용하여 드롭다운 목록 항목 선택

사이프러스를 사용하여 드롭다운 목록 항목 선택

사이프러스를 이용한 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>

소재 디자인 선택과 편백

이 문제는 angularjs + md-select이고 질문이 angular + mdc-select라는 점을 제외하고는 cypress.io 에서 부모가 숨겨진 액세스 요소와 동일한 기본 문제입니다.

그럼에도 불구하고 두 가지 버전의 재료 설계 선택 항목은 옵션을 열기 위해 클릭한 후 부모 컨트롤을 보이지 않게 만드는 동일한 방법을 사용합니다(가로와 높이를 0으로 설정).

사이프러스는 부모가 보이지 않기 때문에 옵션이 보이지 않는다고 생각하기 때문에 옵션 클릭을 허용하지 않습니다.

그 주변의 일은 사용하는 것입니다..then()포장되지 않은 목록 항목에 액세스하고, jquery click을 사용하여 사이프레스 클릭 대신 선택합니다.

Angular 5 설정에서 테스트해 보았는데 문제의 유사성 때문에 Angular와 함께 작동할 것으로 예상됩니다.JS 셋업.

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

});

각도 2+(mdc 포함)-선택

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

});

재료 드롭다운을 사용한 각도의 경우:

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

여러 옵션이 있는 선택 요소를 사용하는 경우 다음을 시도합니다.

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

'마우스 무브'를 촉발시켜 이 문제를 해결해 주었습니다.

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

위의 솔루션 중 어느 것도 각도에서 특별히 작동하지 않았다면 다음을 시도해 보십시오.

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 에서 참조할 수 있습니다.

효과가 있었습니다.

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

언급URL : https://stackoverflow.com/questions/48362422/select-dropdownlist-item-using-cypress