如何在 Cypress 中创建命令答案

【问题标题】：How to creat command in Cypress如何在 Cypress 中创建命令
【发布时间】：2019-09-06 05:37:35
【问题描述】：

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

{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。我怎样才能实现这个工作命令？

【问题讨论】：

【解决方案1】：

为了使用语法：

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

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

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

{CurrentElement}.highlight();

恕我直言，哪个更优雅。

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

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

【讨论】：

完美！这正是我想要得到的。但是 prevSubject 的这个魔法有什么作用呢？我想这是关于 $el 的定义。但它是如何工作的？我刚刚添加了 return 并得到了一个非常有用的工具。

【解决方案2】：

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

Commands.js

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

spec.js

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

【讨论】：

将{CurrentElement}.then(highlight()) 更改为{CurrentElement}.then(cy.highlight())。我认为这应该可以解决问题。
Avanthika 的更新确实是正确的。我复制了您的条目，但忘记添加 cy....
如果我通过这种语法使用，我得到 {CurrentElement} 未定义。在使用{CurrentElement}之前我需要做些什么吗？？