如何在 Cypress 中创建命令

Question

在调试我的 Cypress 测试时，我使用一个命令来突出显示我当前正在使用的元素

{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: highlight is not defined 时。我该如何为此执行工作命令？

Answer 1

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

Commands.js

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

spec.js

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

Answer 2

为了使用语法：

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

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

但是，使用自定义命令，您将能够按如下方式编写：

{CurrentElement}.highlight();

恕我直言，哪个更优雅。

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

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

How to creat command in Cypress