Можно ли проверить, что сообщение об ошибке кратко не отображается на определенной стадии теста Cypress?

Question

У меня есть приложение, которое требует заполнения некоторых полей перед отправкой формы. Когда поля заполнены и нажата кнопка отправки, появляется модальное сообщение о том, что это отправит информацию получателю. Тем не менее, в Cypress я также вижу сообщение об ошибке, что «форма не может быть отправлена» присутствует. Это почти никогда не может быть воспроизведено вручную, поэтому я предполагаю, что скорость Cypress - то, что показывает это. Тем не менее, иногда пользователь может видеть вспышку красного текста, даже если он не отображается достаточно долго, чтобы прочитать текст. Форма отправляется, как и должно быть, чтобы она не влияла на функциональность.

Есть ли способ заставить Cypress проверить, что определенный текст никогда не виден на определенной стадии теста?

Это фрагмент из DOM. В данном случае сообщение об ошибке не отображается (я не знаю, как его создать при нормальной работе):

<div class="form-inline">
  <div class="button-wrapper">...</div>
  <div class="drCop-top-padding-section ng-hide" ng-show="model.showerror" style="">
    <dc-alert-message alert-severity="danger" class="alert-dialog-error" alert-message-id="error.failedtosend">
      <div ng-attr-id="{{alertId | uvDomIdFilter}}" class="alert alert-danger" ng-class="::{'alert-warning': alertSeverity === 'secrecy'}">
        <div class="alert-icon" ng-switch="::alertSeverity">
          <i ng-switch-when="danger" class="material-icons" style="">warning</i>
          <!---->
        </div>
        <span dynamic-label="" key="error.failedtosend" class="multiline">Could not send form. Try again later.</span>
        <ng-transclude></ng-transclude>
      </div>
    </dc-alert-message>
  </div>
</div>

Answer 1

Можно использовать магию MutationObserver с . Пока нет готовой команды для этого в Cypress (связанная проблема) .

Этот подход использует следующую технику:

1. Создайте MutationObserver, который может установить флаг true, если виден определенный Node
2. Подключите этот MutationObserver к тестируемому приложению
3. Выполните ваши тесты как обычно
4. Убедитесь, что флаг не установлен на true

Пример кода:

let observedErrorMessage = false

cy.visit('index5.html')

// 1. initialize the MutationObserver with a callback
const observer = new MutationObserver((records) => {
  // this will be called for each added or removed
  // node to the DOM
  records.forEach((record) => {
    // addedNodes is a list of `Node` objects
    const { addedNodes } = record
    addedNodes.forEach(addedNode => {
      // you can use anything that works on a normal
      // HTMLElement here
      if (addedNode.className === 'error-message') {
        // we'll assert on this later
        observedErrorMessage = true
      }
    })
  })
})

// 2. hook up the MutationObserver to your app code
cy.document().then($document =>
  // $document is a reference to `window.document`
  // of the application under test
  observer.observe($document.body, {
    childList: true, // emit for add/remove nodes
    subtree: true    // emit for all nodes in tree
  })
)

// 3. run your tests here that cause the spurious
// page change
cy.wait(2000)

// 4. assert that the message has not been observed
cy.wrap().then(() => {
  // we wrap this in a callback so that
  // `observedErrorMessage` is only read after
  // the prior Cypress commands are complete
  expect(observedErrorMessage).to.be.false
})