如何使柏树根据是否有行进行不同的测试

Question

在@vue/cli 4.0.5应用程序中为bloc制作柏树，如

<fieldset class="blocks m-1 p-1">
  <legend class="blocks block-wrapper-for-data-listing">Events&nbsp;</legend>
  <div class="table-responsive table-wrapper-for-data-listing" v-if="taskRow.events.length">
    <table class="table table-striped table-data-listing">
      ...
      <!--- DATA TABLE -->
    </table>
  </div>
  <p class="alert alert-info m-1 p-1 wrapper-for-no-rows-data-listing" role="alert" v-if="!taskRow.events.length">
    This task has no events yet!
  </p>
</fieldset>

我想根据是否有taskRow.events行来设置不同的条件。当有taskRow.eventsL的时候，我制定了规则：

var view_event_details_found = false;
cy.get(".block-wrapper-for-data-listing")
  .get(".table-wrapper-for-data-listing")
  .then(listing => {
    alert("::-1");
    cy.get(".tr_view_event_details")
      .find(".view_event_details")
      .first()
      .click();
    cy.contains(".modal-title", "Event Details");
    view_event_details_found = true;
  });

alert("view_event_details_found::" + view_event_details_found);
if (!view_event_details_found) {
}

当view_event_details_found = false时，我尝试对搜索进行其他测试：“这个任务还没有事件！”文本。

但是我得到了一个错误：

CypressError: Timed out retrying: Expected to find element: '.table-wrapper-for-data-listing', but never found it.

就像没有定义“.table-wrapper-for-data-listing”的div一样。哪种方法是进行此测试的有效方法？

谢谢!

Answer 1

阅读这篇https://docs.cypress.io/guides/core-concepts/conditional-testing.html#The-DOM-is-unstable文档，我做了一些测试：

cy.get('.block-wrapper-for-data-listing').then(($legend) => {
    let $nxtElement = $legend.next()
    if ($nxtElement.hasClass('table-wrapper-for-data-listing')  ) {
        cy.get('.tr_view_event_details').find('.view_event_details').first().click()
        cy.contains('.modal-title', 'Event Details')
    } else {
        cy.get('p.wrapper-for-no-rows-data-listing').contains('This task has no events yet!')
    }
})

这在taskRow.events.length == 0和taskRow.events.length> 0这两种情况下都适用！