如何在赛普拉斯中创建命令

Question

在调试赛普拉斯测试时，我使用命令突出显示当前正在使用的元素

{CurrentElement}.then($el=> {$el.css('border', '1px solid magenta')})

我想创建一些更翔实和简短的内容。因此，我正在寻找commands.js中的自定义命令。但是我没有成功做到这一点。我试图在commands.js中创建自定义命令：

Cypress.Commands.add("highlight", $el=> {$el.css('border', '1px solid magenta')})

然后以这种方式在我的测试中使用它：

{CurrentElement}.then(highlight())

或类似这样：

{CurrentElement}.then(highlight($el))

但是任何时候我得到ReferenceError：高亮都没有定义。我该如何执行工作命令？

Answer 1

为了使用语法：

{CurrentElement}.then(highlight($el))

您不需要自定义命令。只需将highlight声明为普通函数即可。

但是，使用自定义命令，您将可以编写如下代码：

{CurrentElement}.highlight();

哪种恕我直言更优雅。

为此，您需要指定将命令应用于元素主题，如下所示：

Cypress.Commands.add("highlight", {prevSubject: 'element'}, $el=> {$el.css('border', '1px solid magenta')});

Answer 2

您应该将highlight()称为cy.highlight()，因为它是由cy链接的方法。所以看起来像这样：

Commands.js

Cypress.Commands.add("highlight", $el=> {$el.css('border', '1px solid magenta')})

spec.js

{CurrentElement}.then(cy.highlight())