Closing an Angular Material Dialog in Cypress

Question

I'm adding Cypress to my Angular 6 project, with Angular Material. New users are welcomed with a Material Dialog (which contains an iFrame) and the dialog is closed by clicking outside the dialog.

I've tried to close this dialog in Cypress in several ways, and introduced waits and excessive timeouts to ensure it's not related to network loading issues:

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

Which fails because it's covered by a cdk-overlay-container. Using click(..., { force: true } ) didn't help. Tried

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

Which also didn't help. The dialog is not dismissed and consecutive clicks wont work, i.e. it always fails when trying to progress with e.g.

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

When debugging, I can see the red dot where the click will happen, outside of the dialog, so the positioning of the mouse is not the issue.

Edit: Material Dialog HTML as requested (note width and height is small enough so dialog doesn't fill page but leaves ample space around, and src has real Youtube video link)

<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

It may just be the selector. The following test seems to work ok, using a selector of .cdk-overlay-backdrop instead of .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 });
  })

})