如何将包含文本匹配的Xpath转换为Cypress可用的CSS选择器

错误原因梳理 #

• 你尝试的cy.get('span:contains("Operator")')存在两处低级错误：一是匹配内容写为Operator和你要找的Manager不符，二是语法缺少闭合的右括号
• 直接用cy.get('.cdk-drop-list').find('.form-control')返回的是列表内所有匹配的span元素集合，对集合直接使用have.text断言会拼接所有元素的文本，所以会出现UndefinedManager这类不符合预期的结果

正确实现方案 #

原生CSS本身没有包含文本匹配的选择器，不过Cypress内置支持jQuery扩展的:contains选择器，可以直接使用，完全匹配你原来XPath的定位逻辑。

定位器正确写法 #

static get AudienceTextfieldSavedValue(): Cypress.Chainable<JQuery<HTMLElement>> {
    // 直接匹配包含Manager文本的span.form-control元素
    return cy.get('span.form-control:contains("Manager")');
}

如果你需要精确匹配文本（避免包含Manager的长文本被误匹配），可以用filter方法实现：

static get AudienceTextfieldSavedValue(): Cypress.Chainable<JQuery<HTMLElement>> {
    return cy.get('.cdk-drop-list .form-control')
        .filter((index, el) => el.textContent.trim() === 'Manager');
}

用例代码优化 #

你原来的代码重复写了断言逻辑，调整后更合理：

it('Add Audience', () => {
    Lists.navigateToLists;
    Audience.clickAdd;        
    Audience.AudienceTextfield.type("Manager");        
    Audience.getSaveButton.click();
    cy.wait(['@savingAudienceRecord']);
    // 断言匹配的元素存在且文本正确
    Audience.AudienceTextfieldSavedValue.should('exist').and('have.text', 'Manager');
});

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