如何在 CSS 选择器上使用 Cypress 中的模板文字？答案

【问题标题】：How to use Template literals in Cypress on CSS selectors?如何在 CSS 选择器上使用 Cypress 中的模板文字？
【发布时间】：2019-11-02 00:22:29
【问题描述】：

我正在尝试通过使用模板文字使我的测试在赛普拉斯中更具可扩展性/可重用性。

在 Nightwatch 中，我通过在 Page 对象模型中编写一个函数来做到这一点，我在函数中传递了一个参数，并在测试中调用了该参数，如示例所示。

我是赛普拉斯的新手，我尝试阅读文档，但找不到与我的问题相似的内容。我用变量尝试过，但这并不能真正解决我的问题。

//Nightwatch Page Object model

selectMenuItem: function(name) {
       this.click(`.menuItem${name}`)

    return this; 
}

//Nightwatch Test
//Called in test by: 

.selectMenuItem('Payment')
.selectMenuItem('Contact')

//Cypress test

 it('Select menu item', function() {
        const name = 'Payment';

        .get(`.menuItem${name}`).click()

如果我有多个菜单项，如何在同一个 CSS 选择器上插入字符串？
我问的原因是因为赛普拉斯团队建议不要使用页面对象模型模式。

那么如何解决这个问题呢？

【问题讨论】：

【解决方案1】：

通过对赛普拉斯文档的粗略搜索，.get() 函数内部似乎不支持模板文字，尽管我可能是错的。但是，如果您只是尝试遍历所有 .menuItem 选择器以找到具有特定名称的选择器，则可以使用

it('Select menu item', function() {
    const name = 'Payment';

    cy.get('.menuItem').contains(name).click();
}

【讨论】：