testing - 迷失在 Cypress 的 'within()'

Question

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

我的测试:

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

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

我正在尝试测试的代码(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()