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

Question

我试图通过使用模板文字来使我的测试在Cypress中更具可扩展性/可重用性。

在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选择器上插入字符串？
我问的原因是因为赛普拉斯团队建议不要使用页面对象模型模式。

那么如何克服这个问题呢？

Answer 1

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

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

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