Testing 迷失在'；在（）和#x27；柏树

我还有一个关于柏树的问题。我在页面上有许多出版物预览块，每个块包含一个标题和出版物本身及其用户的几个状态，我需要通过测试检查某些块的状态。我不能使用“eq（）”，因为数据是动态的，并且由于某些原因，测试也不以相同的顺序运行，因此我经常通过计算eq（）得到错误的发布。所以我试着用“内”，但失败了

我的测试：

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有太多不必要的信息）：

草稿

如果我正确地遵循了您的React组件结构，我想您可以这样测试它

/*
通过文本指定标题链接，确保其位于列表项中
*/
cy.contains（'[data test=“list item”][data test=“title link”]'，“空文本”）
/*
现在将Cypress主题切换到列表项，
使用“.parents（）”而不是“.parent（）”
以防React在标题链接和列表项之间添加了一些层。
*/
.parents（“[data test=“list item”]”）
/*
现在将搜索限制为目标列表项
*/
.在（（）=>{
cy.contains（“[data test=“status”]”，即“草稿”）；
});

命令

cy.contains（选择器，内容）

具有在内容异步时重试的附加好处

---

REF:

我不熟悉React。是否有一种方法可以附加浏览器中实际显示的HTML？我假设浏览器中显示的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>