Mat-Select 下拉菜单不适用于赛普拉斯答案

【问题标题】：Mat-Select drop down not working with CypressMat-Select 下拉菜单不适用于赛普拉斯
【发布时间】：2021-10-11 22:49:27
【问题描述】：

尝试点击来自 Angular 的 mat-select 下拉菜单。

可以在浏览器控制台中看到的HTML代码：

我已经试过了：

实际的 HTML 代码如下所示：

按照我要选择的下拉项目的屏幕截图（E2E阶段）

注意：点击不会引发错误，但在 UI 上我从来没有看到点击，后来它得到以下错误 -

【问题讨论】：

请添加您尝试过的代码版本以及遇到的任何错误。
@AlapanDas ，对于单击下拉元素，我在这种情况下使用[placeholder='Team Member']，从不出错。但在 UI 上它永远不会点击
像cy.get('[placeholder='Team Member']').first().click({force: true}) 一样使用force: true 怎么样？
不，已经这样做了。没用。
如何将定位器改为cy.get('mat-select[placeholder='Team Member']').eq(0).click()

标签： javascript angular cypress e2e-testing

【解决方案1】：

据我所知，Angular 实际上并没有使用placeholder 属性来显示您想要的文本。

相反，它使用 label 定位在带有 css position: absolute 的选择之上。

Angular 选择示例页面

这是一组元素（简化） - mat-select 和 label 是兄弟姐妹。

<div class="mat-form-field-infix">
  <mat-select role="combobox" class="mat-select">
    <div cdk-overlay-origin="" class="mat-select-trigger">
      <div class="mat-select-value">
        <span class="mat-select-placeholder"></span>
      </div>
      <div class="mat-select-arrow-wrapper">
        <div class="mat-select-arrow"></div>
      </div>
    </div>
  </mat-select>
  <span class="mat-form-field-label-wrapper">
    <label class="mat-form-field-label">
      <mat-label>Favorite food</mat-label>
    </label>
  </span>
</div>

您想测试mat-select 的文本内容，但通过标签文本定位它。

cy.viewport(1200, 1000)
cy.visit('https://material.angular.io/components/select/overview')

cy.contains('span', 'Favorite food')
  .siblings('mat-select')
  .invoke('text')
  .should('be.empty')

// open the select
cy.contains('span', 'Favorite food')
  .siblings('mat-select')
  .click()                      

// choose option
cy.contains('mat-option', 'Tacos').click()

// check the select text has option value
cy.contains('span', 'Favorite food')
  .siblings('mat-select')
  .should('contain', 'Tacos')

您的选择

cy.contains('span', 'Team Member')
  .siblings('mat-select')
  .click()

cy.contains('mat-option', 'Stage E2E').click()

cy.contains('span', 'Team Member')
  .siblings('mat-select')
  .should('contain', 'Stage E2E')

【讨论】：

【解决方案2】：

经验告诉我们，明确标识要使用 Cypress 测试的任何元素总是更好，对于 Angular Material 组件尤其如此。

为了测试我们的 mat-selects 我们会使用类似的东西：

HTML

<mat-form-field appearance="outline">
  <mat-label>{{ 'common.team-member' | translate }}</mat-label>
  <mat-select id="e2e-team-member-select" 
              formControlName="teamMember" multiple>
    <mat-option
      *ngFor="let member of teamMembers; let i = index"
      [value]="member.id"
      [id]="'e2e-team-member-' + i"
     >
       {{ member.name }}
     </mat-option>
   </mat-select>
</mat-form-field>

../cypress/integrations/showing.ts

// set team-member 4
cy.get('#e2e-team-member-select').click();
cy.get('#e2e-team-member-4').click();
cy.wait('@loadMembers'); // wait for backend
cy.get('body').click(); // close select if multi

【讨论】：