javascript - 如何在 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

为了使用语法:

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

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

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

{CurrentElement}.highlight();

恕我直言，哪个更优雅。

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

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