Cypress: как проверить, что контент * недоступен * (кликабелен и т.д.) Из-за наложения?

#cypress #e2e-testing

#cypress #e2e-тестирование

Вопрос:

Я внедрил индикатор загрузки в Angular, который выглядит следующим образом:

 <div cdkTrapFocus class="activity-indicator-container">
  <div class="content-container">
    <ng-content></ng-content>
    <div [ngStyle]="{visibility: showLoader ? 'visible': 'hidden'}" class="indicator-overlay">
      <div class="loading-indicator">
      </div>
    </div>
  </div>
</div>

indicator-overlay Оформлено следующим образом:

   .indicator-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.35);
}

Когда отображается индикатор, содержимое затемняется полупрозрачным div.

При отображении наложения выполняется сбой cy.contains('text in content').should('not.be.visible') .

Итак, есть ли способ проверить в Cypress, что текст на самом деле недоступен (выбирается, кликабелен и т.д.)?

1. Существует утверждение Chai-jquery, которое проверяет, скрыт элемент или нет. Можете ли вы попробовать это cy.get('locator').then(($el) => {expect($el).to.be.hidden}) или вы можете проверить, существует элемент или нет cy.get('locator').should('not.exist') . Вы можете сослаться на другие подобные утверждения здесь: docs.cypress.io/guides/references/assertions.html#Chai

2. Насколько я понимаю, скрытый относится к «display: none» и существующий, чтобы присутствовать в DOM, которые оба не будут работать, поскольку элемент одновременно находится в DOM и виден.

3. Да, это имеет смысл. Еще один способ, который я могу придумать, — проверить наличие class .indicator-overlay чем-то вроде . следует (‘have.class ’, ‘индикатор-наложение’)

Ответ №1:

Вы могли бы использовать блок try / catch. Похоже, вы проверяете, что наложение захватывает любые события нажатия, больше, чем вы проверяете, что элементы не кликабельны (поскольку вы не изменяете сами элементы)

Вы могли бы сделать что-то вроде этого

 displayLoadingOverlay();
try{
  // this should fail, since the overlay will be blocking it
  element.click();
} catch(error){
  expect(error).to.contain(message);
}

этот тест гарантирует, что при попытке щелкнуть по элементу (повторите для стольких элементов, сколько захотите) должна быть выдана ошибка, поскольку Cypress не кликабелен на элемент. Если ошибка не выдана, можно считать, что событие click сработало.

1. Из-за очень выразительного, декларативного и асинхронного способа работы Cypress я не знал об использовании таких вещей, как try … catch. Честно говоря, это выглядит не очень элегантно, но это может сработать. Я надеялся на что-то более похожее на .should('not.be.clickable') или .should('not.be.reachable') .