代码之家 › 专栏 › 技术社区 › Atticus29

如果使用材质表单,请使用“角度上的柏树”进行选择

cypress angular-material angular

Atticus29 · 技术社区 · 6 年前

我有一张这样的表格:

<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();
    });
...

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

为什么没有选择一个选项?
尽管如此,为什么考试还是通过了?

我提供回购协议,具体发行日期如下:

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键.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: ""
};

2 回复 | 直到 6 年前

Richard Matsen 6 年前

我发现下面的测试可以用于您的存储库(最新的commit 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')
  });
});

您可以从Cypress测试运行程序中看到,它确实选择了女性选项,所以我相信它涵盖了你最初测试的目的。

如果我想用 click() 像这样

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

柏树发出信息

不能对元素调用cypreserror:cy.click()。改为使用cy.select()命令更改值。

所以,按照这个指令并使用

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

提供以下有关可见性的错误消息,这似乎是 select 使用材料设计(角度材料和物化)。

cypreserror:超时重试:cy.select()失败,因为此元素不可见。。。请修复此问题,或使用{force:true}禁用错误检查。

所以使用 { force: true } 打开选项 cy.select() 解决了这个问题。

我了解可见性问题的发生是因为材质设计使用选项列表覆盖父对象,而Cypress使用基于父对象的可见性标准(请参见 question ),尽管现在力 option可以工作(使用Cypress v3.0.3)。

Enrico Saunders 5 年前

对于Angular 7+中的mat select,您必须使用promises等待模式cdk覆盖中的选项变为可用。

下面是一个可重用的帮助函数:

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