在 Cypress 中关闭 Angular Material 对话框答案

【问题标题】：Closing an Angular Material Dialog in Cypress在 Cypress 中关闭 Angular Material 对话框
【发布时间】：2018-12-19 16:01:20
【问题描述】：

我正在使用 Angular Material 将 Cypress 添加到我的 Angular 6 项目中。欢迎新用户使用材质对话框（其中包含 iFrame），并通过单击对话框外部关闭对话框。

我尝试在 Cypress 中以多种方式关闭此对话框，并引入了等待和过度超时以确保它与网络加载问题无关：

cy.get('dialog-element', { timeout: 10000})
.wait(3000).click(-50, -50);

失败是因为它被 cdk-overlay-container 覆盖。使用 click(..., { force: true } ) 没有帮助。试过了

cy.get('.cdk-overlay-container', { timeout: 10000})
.wait(3000).click(-50, -50, { force: true });

这也没有帮助。对话框不会被关闭，连续点击也不起作用，即在尝试继续时它总是失败，例如

cy.get('[data-cy=element-on-page-beneath-dialog]').click();

调试时，我可以在对话框之外看到将发生单击的红点，因此鼠标的定位不是问题。

编辑：根据要求编辑材料对话框 HTML（注意宽度和高度足够小，因此对话框不会填满页面但会留下足够的空间，并且 src 有真正的 Youtube 视频链接）

<div style="overflow: hidden;">
    <iframe style="margin-top: 2px; overflow: hidden;" [width]="videoWidth" [height]="videoHeight" src="..." frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<div>

【问题讨论】：

如果可能的话，你能分享html这个对话框吗

标签： angular cypress

【解决方案1】：

它可能只是选择器。以下测试似乎工作正常，使用 .cdk-overlay-backdrop 选择器而不是 .cdk-overlay-container。

describe('closing-an-angular-material-dialog-in-cypress', () => {

  it('closes the dialog', () => {
    cy.visit('https://material.angular.io/components/dialog/overview')
    cy.contains('button', 'Pick one').click()
    cy.get('.cdk-overlay-backdrop').click(-50, -50, { force: true });
  })

})

【讨论】：

我遇到了类似的问题，使用更具体的选择器确实有帮助。谢谢！
它可以工作，但是使用 css 选择器测试会很弱。

【解决方案2】：

我已经使用Cypress.io/support 站点获取Dialog 并找到close 图标并单击它。我还在关闭对话框之前验证了header text。它对我来说很好，请参阅下面的代码；

describe("Get the Dialog and click on close icon", function() {
  it("Test to click on close icon in a dialog", function() {
    cy.visit("https://www.cypress.io/support/")
    cy.get('h3>a').contains("Custom Support").click()
    cy.get('.modal-dialog')
    .should('be.visible').should('contain', 'Tell us about yourself')
    .then(($dialog)=>{
      cy.wrap($dialog).find('button').find('span').contains("×").click()
      });
  });
});

【讨论】：