Cypress如何根据列表项名称定位对应colour-select类拾色器元素

CSS选择器本身不支持通过子元素的文本内容定位到对应的父元素，所以你可以结合Cypress提供的DOM遍历API实现需求，具体实现逻辑为：先定位到文本为Operator的名称元素，向上查找到它所属的列表项li节点，再在该节点范围内查找拾色器元素。

代码实现 #

通用方法（支持任意角色名称查询） #

// 根据传入的角色名称，返回对应拾色器元素
static getColourPickerByRole(roleName: string): Cypress.Chainable<JQuery<HTMLElement>> {
  return cy.contains("li.cdk-drag.item.container-fluid span.form-control", roleName)
    // 向上查找最近的列表项父节点
    .closest("li.cdk-drag.item.container-fluid")
    // 在当前列表项内查找目标拾色器
    .find(".colour-select");
}

调用示例 #

要获取Operator对应的拾色器，直接调用即可：

// 拿到Operator对应的拾色器后可继续执行点击、断言等操作
YourClassName.getColourPickerByRole("Operator").should("be.visible");

补充说明 #

该方案不受列表排序变化、动态新增项的影响，定位稳定性远高于按索引取值的方案。如果你一定要用纯CSS选择器实现，只有在列表顺序固定的场景下可以按索引定位：

/* 第三个li下的.colour-select元素，对应Operator（索引从0开始） */
li.cdk-drag.item.container-fluid:nth-child(3) .colour-select

注意：按索引定位的方案在列表项新增、排序调整后会失效，不推荐使用。

内容的提问来源于stack exchange，提问作者Riaz Ladhani