Javascript 如何在Cypress中创建命令

在调试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没有定义。我如何实现此操作的工作命令

您应该将

highlight（）

称为

cy.highlight（）

，因为它是一个链接到

cy

的方法。所以看起来是这样的：

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

Commands.js

Cypress.Commands.add（“highlight”，$el=>{$el.css（'border'，'1px实心洋红'））

spec.js

{CurrentElement}。然后（cy.highlight（））

要使用语法：

{CurrentElement}。然后（突出显示（$el））

您不需要自定义命令。只需声明

突出显示

，作为一个正常函数即可

但是，使用自定义命令可以按如下方式编写：

{CurrentElement}.highlight（）

哪个更优雅

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

Cypress.Commands.add（“highlight”，{prevSubject:'element'}，$el=>{$el.css（'border'，'1px实心洋红'））
更改
{CurrentElement}。然后（highlight（））
为
{CurrentElement}。然后（cy.highlight（））
。我认为这应该可以解决问题。Avanthika的更新确实是正确的。我复制了您的条目，但忘了添加
cy.
…如果通过此语法使用，我得到的
{CurrentElement}
未定义。在使用
{CurrentElement}
之前需要做些什么吗？太好了！这正是我想要的。但是这个主题的魔力是什么呢？我猜这是关于$el的定义。但是它是如何工作的呢？我刚刚添加了return，得到了一个非常有用的工具。