Cypress.io:点击随机元素并获取其文本的函数

Question

我目前正在使用Cypress，并创建了一个函数，可以随机单击列表中的元素。我还试图从同一个函数中获取文本，以便将来进行断言。问题是我无法正确返回文本。我目前拥有的代码是：

export function selectRandomFromList(listLocator, elementLocator) {
cy.get(listLocator).within(() => {
let numberOfElements = Cypress.$(listLocator + ' ' + elementLocator).length
let selected = Cypress._.random(0, numberOfElements - 1)
cy.get(elementLocator).eq(selected).then(($text) => {
const text = $text.text()
return text
}).click()
})
}

我希望我可以在测试中运行这个函数，点击，然后将返回的文本存储在一个变量中，以备将来检查。我做错了什么？还尝试了一些其他带有promise之类的东西，当代码说我正在尝试混合同步和异步时。。

忘记添加。这在支持文件中，我想在测试文件中使用text变量。类似这样的东西：

var text = function.selectRandomFromList('[class*=***]', 'li ul li button')

之后，我应该在text中有单击按钮的文本。

Answer 1

Cypress命令的工作方式与Promises相同。在then()回调中时，需要返回Promise。请参阅此处的文档。

您可以在then()回调中使用cy.wrap($text).invoke('text')，而不是返回字符串。但是，click()将不起作用，因为then()将产生无法单击的文本值。

我建议不要使用within()，直接使用元素。您最终会得到相同的结果，但复杂性较低。例如，当我需要对div容器中的几个元素执行几个操作时，我会使用within()命令。

您可以使用默认命令而不是函数来执行所需的操作：

let mixLocator = listLocator + ' ' + elementLocator;
cy.get(mixLocator).its('length').then(elementCount => {
let selected = Cypress._.random(elementCount - 1); // lower = 0 is default
cy.get(mixLocator).eq(selected).click().invoke('text').as('selectedText'); // saving the text as an alias to be used later
});

这里，即使invoke('text')在click()之后，它也应该仍然工作，但不可能执行相反的invoke('text').click()，因为invoke('text')命令会产生字符串。如果没有，请调用它一次以获取文本，然后再次单击它：

cy.get(mixLocator).eq(selected).invoke('text').as('selectedText');
cy.get(mixLocator).eq(selected).click();

或：

cy.get(mixLocator).eq(selected).then(selectedElement => {
cy.wrap(selectedElement).invoke('text').as('selectedText');
cy.wrap(selectedElement).click();
});

您可以稍后使用保存的别名：

cy.get('@selectedText').then(selectedText => {
// use selectedText here
});

---

我通常更喜欢在测试中选择随机元素，以获得更好的覆盖率。我想出了一个自定义命令：

commands.js

Cypress.Commands.add('any', { prevSubject: 'element' }, (subject, size = 1) => {
cy.wrap(subject).then(elementList => {
elementList = (elementList.jquery) ? elementList.get() : elementList;
elementList = Cypress._.sampleSize(elementList, size);
elementList = (elementList.length > 1) ? elementList : elementList[0];
cy.wrap(elementList);
});
});

我是这样使用的：

cy.get(elementLocator).any().click();

或

cy.get(elementLocator).any(5).each(randomElement => {
cy.wrap(randomElement).click();
});