时间戳

首页 > 解决方案 > 如何在 CSS 选择器上使用 Cypress 中的模板文字？

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

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

标签： javascriptnightwatch.jscypress

解决方案

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

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

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

推荐阅读