在Cypress中迷失在“in ()”中

Question

我再一次有一个关于Cypress的问题。我在页面上有许多发布预览块，每个块都包含一个标题和几个发布本身及其用户的状态，我需要用测试检查某些块的状态。我不能使用' eq()‘，因为数据是动态的，而且由于某些原因，测试也不会以相同的顺序运行，因此我经常通过计算eq()得到错误的发布。所以我试着使用“it”，但它失败了。

我的测试：

cy.get('[data-test="list-item"]').within(() => {
      cy.get('[data-test="title-link"]')
        .contains('Empty text')
        .find('[data-test="status"]')
        .contains('Draft');
    });

我知道我的错误出在“contains()”中，因为它试图在那里搜索，但正如我上面提到的，除了标题之外，我没有其他方法来过滤元素。我需要检查标题A的块的状态是“草稿”，标题B的块的状态是“发布”，等等。

我尝试测试的代码(UPD: HTML，因为react包含了太多不必要的信息)：

<div class="list-item bg-white cursor-pointer" data-test="list-item">
<div class="content-grid grid grid-rows-1 sm:grid-cols-2">
<div>
<a data-test="title-link" class="leading-lg font-medium text-lg text-black" href="/edit/details/5ecf5deb49ec7431bca16759">Empty text</a>
</div>
<div class="text-right mt-4 sm:mt-0">
<div class="leading-caption font-medium" data-test="status">Draft</div>
<div class="mt-4" data-test="phase">
</div>
</div>
</div>
</div>

Answer 1

如果我没弄错你的React组件结构，我想你可以像这样测试它

/*
 Specify the title-link by it's text, ensuring it's within a list-item 
*/
cy.contains('[data-test="list-item"] [data-test="title-link"]', 'Empty text')

   /*
     Now switch Cypress subject to list-item,
     using '.parents()' instead of '.parent()' 
     in case React has added some layers between title-link and list-item.
   */
   .parents('[data-test="list-item"]')

    /*
      Now restrict search to target list-item
   */
   .within(() => {

      cy.contains('[data-test="status"]', 'Draft');   

});

当内容是异步的时，命令cy.contains(selector, content)还有一个额外的好处，那就是重写。

参考：parents()