Question

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

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

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>

Answer 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 });
  })

})

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

在Cypress中关闭角度材料对话框

2 个答案: