如果您使用的是材质表格，请使用Angular中的cypress进行选择

Question

我有一个看起来像这样的表单：

<form class="col s12" materialize [formGroup]="newUserForm">
...
    <div class="row">
    <div class="input-field col m4 s12">
        <select formControlName="genderBound" materialize="material_select" id="gender" name="test">
            <option value="" disabled selected name="chooseGender">Choose gender</option>
            <option *ngFor="let gender of genders">{{gender}}</option>
        </select>
        <label for="gender">Gender</label>
    </div>
...

当我尝试使用cypress选择下拉菜单时，它告诉我它不可见。当我按照cypress提供的解释性URL时，它建议我在我的点击中使用{force: true}。这允许我的测试通过，但实际上似乎从未选择过这些项目。

我也按照here提供的解决方案，实现了jQuery点击实际选项（注意我的select和option标签不是md-select和md-option标签）

我的cypress目录中的sample.spec.js：

...
it('signs up a new user', () =>{
    cy.get('button[id=new-account-button]').click();
    cy.get('input[id=affiliation]').type(affiliation);
    cy.get('input[id=password]').type(pass);
    cy.get('input[id=userName]').type(name);
    cy.get('input[id=email]').type(email);

    //Now the options
    cy.get('[name="chooseGender"]').click({force: true});
    cy.get('option').contains("Female").then(option =>{
      cy.wrap(option).contains("Female");
      option[0].click();
    });
...

我想有两件事我不太明白：

1. 为什么不选择实际选项？
2. 尽管如此，为什么测试通过？

我在下面提供了我的确切问题的回购：

git clone https://github.com/Atticus29/dataJitsu.git
cd dataJitsu
git checkout cypress-SO

在/ src / app中创建一个api-keys.ts文件，并用随后的文本填充它

npm install
ng serve

（在单独的终端选项卡中）

npm run e2e

API-keys.ts：

export var masterFirebaseConfig = {
    apiKey: "AIzaSyCaYbzcG2lcWg9InMZdb10pL_3d1LBqE1A",
    authDomain: "dataJitsu.firebaseapp.com",
    databaseURL: "https://datajitsu.firebaseio.com",
    storageBucket: "",
    messagingSenderId: "495992924984"
  };

export var masterStripeConfig = {
  publicApiTestKey: "pk_test_NKyjLSwnMosdX0mIgQaRRHbS",
  secretApiTestKey: "sk_test_6YWZDNhzfMq3UWZwdvcaOwSa",
  publicApiKey: "",
  secretApiKey: ""
};

Answer 1

我发现以下测试与您的存储库一起工作（最新提交353633c），

describe('Test Gender Select', () => {

  before(function () {
    cy.visit('http://localhost:4200/')
  })

  it('signs up a new user', () => {
    cy.get('button').contains('Create New Account').click();

    cy.get('#gender').select('Female', {
      force: true
    });
    cy.get('#gender').contains('Female')
  });
});

您可以从赛普拉斯测试赛跑者那里看到它确实选择了女性选项，所以我相信它涵盖了您原始测试的目标。

如果我尝试像这样使用click()

cy.get('#gender').click({
  force: true
});

柏树给出了信息

CypressError：无法在元素上调用cy.click（）。请改用cy.select（）命令来更改值。

所以，遵循这个指示并使用

cy.get('#gender').select('Female');

给出了关于可见性的以下错误消息，这似乎是使用材料设计（角度材料和物化）的select的标准。

CypressError：超时重试：cy.select（）失败，因为此元素不可见...修复此问题，或使用{force：true}禁用错误检查。

所以在{ force: true }上使用cy.select()选项修复了这个问题。

我理解可见性问题的发生是因为材料设计涵盖了带有选项列表的父级，而赛普拉斯使用基于父级的可见性标准（请参阅此question），尽管现在强制选项有效（使用赛普拉斯v3.0.3）。

Answer 2

对于Angular 7+中的mat-select，你必须使用promises来等待模态cdk-overlay中的选项变得可用。

这是一个重用的辅助函数：

function selectMaterialDropDown(formControlName, selectOption) {
  cy.get(`[formcontrolname="${formControlName}"]`).click().then(() => {
    cy.get(`.cdk-overlay-container .mat-select-panel .mat-option-text`).should('contain', selectOption);
    cy.get(`.cdk-overlay-container .mat-select-panel .mat-option-text:contains("${selectOption}")`).first().click().then(() => {
      // After click, mat-select should contain the text of the selected option
      cy.get(`[formcontrolname="${formControlName}"]`).contains(selectOption);
    });
  });
}

通话功能：

selectMaterialDropDown('myMatSelectControlName', 'OptionTextToSelect');