关闭 Cypress 中的 Angular 材质对话框

我正在将 Cypress 添加到我的 Angular 6 项目中，并使用 Angular Material。欢迎新用户使用材质对话框（其中包含 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>

它可能只是选择器。以下测试似乎工作正常，使用选择器.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 });
  })

})