如何使用Cypress在单个元素内执行多条件查询？

我想用Cypress在单个元素内同时验证多个文本内容。下面是目标交互元素的HTML结构：

<tr id="gZMZs190" class="z-listitem z-listbox-odd z-listitem-selected" title="CAN_BE_REPLACED_BY_2L ->  [] - IQOS ILUMA One Kit Pebbe Grey [G0000592] - Tunisia Product Catalog : Staged" aria-label="Row 10 of 10, CAN_BE_REPLACED_BY_2L ->  [] - IQOS ILUMA One Kit Pebbe Grey [G0000592] - Tunisia Product Catalog : Staged selected" aria-selected="true" role="row" aria-rowindex="10"><td id="gZMZy290" class="z-listcell" tabindex="-1"><div id="gZMZy290-cave" class="z-listcell-content"><div id="gZMZz290" class="ye-default-reference-editor-selected-item-container z-div"><span id="gZMZ_390" class="ye-default-reference-editor-selected-item-label ye-editor-disabled z-label">CAN_BE_REPLACED_BY_2L -&gt;  [] - IQOS ILUMA One Kit Pebbe Grey [G0000592] - Tunisia Product Catalog : Staged</span></div></div></td></tr>

目前我用以下Cypress命令可以正常验证产品代码：

cy.get('.z-listitem')
  .contains("G0000592");

现在需要同时验证元素中的替换级别内容（即CAN_BE_REPLACED_BY_2L ->部分）。

方法1：链式调用contains #

直接连续调用contains，Cypress会在已匹配的元素范围内继续查找目标文本：

cy.get('.z-listitem')
  .contains("G0000592")
  .contains("CAN_BE_REPLACED_BY_2L ->");

这种方式简洁高效，因为两个目标文本都在同一个.z-listitem的子元素中，链式调用会自动缩小查找范围。

方法2：获取文本后批量断言 #

通过invoke('text')提取元素文本，再用expect同时验证多个关键词：

cy.get('.z-listitem')
  .invoke('text')
  .then(text => {
    expect(text).to.include('G0000592');
    expect(text).to.include('CAN_BE_REPLACED_BY_2L ->');
  });

这种方式适合需要同时验证多个文本条件的场景，还可以灵活添加更多检查项。

方法3：筛选同时满足条件的元素 #

如果页面存在多个.z-listitem，可以用filter精准定位同时包含两个文本的元素：

cy.get('.z-listitem')
  .filter(':contains("G0000592"):contains("CAN_BE_REPLACED_BY_2L ->")')
  .should('exist');

这种方式直接筛选出符合所有条件的元素，确保目标元素同时满足两个文本验证要求。

内容的提问来源于stack exchange，提问作者No Tools No Craft