Закрытие углового диалога материалов в Cypress

Question

Я добавляю 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>

Answer 1

Я использовал Cypress.io/support site, чтобы получить 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()
      });
  });
});

Answer 2

Это может быть просто селектор.Следующий тест, кажется, работает нормально, используя селектор .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 });
  })

})