Question

我知道您不能分配或使用任何Cypress命令的返回值，但是，我希望能够编写一个实用程序函数，该函数允许我选择希望的任何DOM元素，而不必显式地编写DOM。每次都选择一个选择器，因为我的所有测试的键值都相同。

我的意思的一个例子是这样的：

<div data-e2e="one-div-element">
<div data-e2e="second-div-element>
<div data-e2e="third-div-element>
<div data-e2e="fourth-div-element>

我希望能够做以下允许的等同操作：

const getByE2EID = (id) => cy.get('[data-e2e="${id}"]') // <--- (this of course, would be interpolated)

然后我就可以编写如下测试：

getByE2EID('third-div-element') // <--- and then I'd have the third div

我正在尝试避免这样做：

cy.get('[data-e2e="first-div-element"]')

每一次我希望抓住一个DOM元素，因为它最终都是...

cy.get('[data-e2e="first-div-element"]')
cy.get('[data-e2e="second-div-element"]')
cy.get('[data-e2e="third-div-element"]')
cy.get('[data-e2e="fourth-div-element"]')

一遍又一遍。

Answer 1

谢谢大家的帮助！有了您的建议，我就可以翻译我在Cypress.io中编写的内容，以使此想法可行，最终归结为在支持目录中的commands.js文件内部编写

Cypress.Commands.add('getDataE2EID', function (id) {
  return cy.get(`[data-e2e="${id}"]`)
})

cy.getDataE2EID('first-div-element') <---会给我带来第一个div

现在，我可以有一个自定义的cypress函数，该函数可以让我传入键值是“ data-e2e”的任意值。

Answer 2

您可以使用es6数组函数轻松完成此操作：

function getByE2EIDs(...ids) {
  return ids.map(cy.get(`[data-e2e="${id}"]`));
}

getByEIDs(id1, id2, id3, id4);

或者：

function getByE2EIDs(ids) {
  return ids.map(cy.get(`[data-e2e="${id}"]`));
}

getByEIDs([id1, id2, id3, id4]);

Answer 3

是的！您可以定义以下功能：

const getByE2EID = ( val )=> document.querySelector(`[data-e2e='${val}']`);

您可以使用它getByE2EID（'fourth-div-element'），但是使用此html应该像这样有效：

<div data-e2e="one-div-element">Div 1</div>
<div data-e2e="second-div-element">Div 2</div>
<div data-e2e="third-div-element">Div 3</div>
<div data-e2e="fourth-div-element">Div 4</div>

Answer 4

如果您使用正确的template literals，它将起作用：

const getByE2EID = (id) => cy.get(`[data-e2e="${id}"]`)

请注意：`而非'。

阅读“ Return Values”以了解更多信息。

Cypress.io：如何创建一个函数，该函数可基于输入来选择不同的DOM元素

4 个答案: