1 Pytanie: Czy można sprawdzić, czy komunikat o błędzie nie pojawia się na krótko na pewnym etapie testu Cypress?

pytanie utworzone w Tue, Apr 9, 2019 12:00 AM

Mam aplikację, która wymaga wypełnienia niektórych pól przed wysłaniem formularza. Po wypełnieniu pól i naciśnięciu przycisku przesyłania pojawia się modal informujący, że wyśle ​​informacje do odbiorcy. Jednak w Cypressie widzę również komunikat o błędzie, że „nie można wysłać formularza”. Prawie nigdy nie można tego odtworzyć ręcznie, więc sądzę, że prędkość Cypressa jest tym, co ją ujawnia. Czasami jednak użytkownik widzi czerwony tekst migający, mimo że nie wyświetla się wystarczająco długo, aby przeczytać tekst. Formularz jest wysyłany tak, jak powinien, aby nie wpływać na funkcjonalność.

Czy istnieje sposób, aby Cypress zweryfikował, że określony tekst nigdy nie jest widoczny na konkretnym etapie testu?

To fragment kodu z DOM. Komunikat o błędzie nie jest wyświetlany w tym przypadku (nie wiem, jak go wyprodukować podczas normalnego działania):

<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>
    
1
1 odpowiedzi                              1                         

Jest to możliwe dzięki magii MutationObservers . Nie ma jeszcze gotowego polecenia, aby to zrobić w Cypressie jeszcze (powiązany problem) .

To podejście wykorzystuje następującą technikę:

  1. Utwórz serwer mutacji, który może ustawić flagę na true, jeśli widoczny jest Node
  2. Dołącz ten MutationObserver do testowanej aplikacji
  3. Uruchom testy jak zwykle
  4. Sprawdź, czy flaga nie została ustawiona na true

Przykładowy kod:

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
})
    
0
2019-04-09 13: 42: 37Z
  1. To był obszerny przykład, dzięki! Jednak (a teraz całkowicie ujawniam brak wiedzy w JS /HTML itp.), Element jest obecny przez cały czas, po prostu jest zwykle ukryty. Zaktualizowałem moje oryginalne pytanie fragmentem HTML, jeśli to pomaga.
    2019-04-10 11: 48: 36Z
  2. Hmm, używasz ng-switch, aby ukryć element? Jeśli ng-switch po prostu usuwa go z DOM, to powinno nadal działać. Czy próbowałeś, a to nie zadziałało?
    2019-04-10 14: 19: 03Z
źródło umieszczone tutaj