如何在Cypress的自定义命令中记录前一个主题

huangapple
go评论89阅读模式
英文:

How to log the previous subject in custom commands in Cypress

问题

Sure, here's the translated code:

  1. 我想要在Cypress中为我的自定义命令添加日志，例如
  3. <!-- 语言: js -->
  5.     Cypress.Commands.add('shouldBeVisible',
  6.         {
  7.             prevSubject: 'element',
  8.         },
  9.         (subject) => {
  10.             var getText = cy.wrap(subject);
  11.             // cy.wrap(subject).invoke('val').then((element) =>{
  12.             //     cy.log('element:: ' + cy.wrap(subject).get(subject))
  13.             // });
  15.             const log = Cypress.log({
  16.                 name: "shouldBeVisible",
  17.                 displayName: "SHOULD BE VISIBLE",
  18.                 message: [
  19.                   `👁️ (元素: `+subject+` 应该可见)`,
  20.                 ],
  21.                 // @ts-ignore
  22.                 autoEnd: false,
  23.                 consoleProps() {
  24.                   return subject
  25.                 },
  26.               })
  28.             cy.wrap(subject).should('be.visible');
  29.         }
  30.     )
  32. 当我像这样调用它时：
  34. ```js
  35.   cy.visit('https://docs.cypress.io/guides/overview/why-cypress');
  36.   cy.get('.headerWrapper_tu51').shouldBeVisible();

我希望它记录调用函数或调用元素：

  1. ![输入图像说明][1]
英文:

I want to add logs to my custom commands in Cypress,
for example

<!-- language: js -->

  1. Cypress.Commands.add(&#39;shouldBeVisible&#39;,
  2.     {
  3.         prevSubject: &#39;element&#39;,
  4.     },
  5.     (subject) =&gt; {
  6.         var getText = cy.wrap(subject);
  7.         // cy.wrap(subject).invoke(&#39;val&#39;).then((element) =&gt;{
  8.         //     cy.log(&#39;element:: &#39; + cy.wrap(subject).get(subject))
  9.         // });
  11.         const log = Cypress.log({
  12.             name: &quot;shouldBeVisible&quot;,
  13.             displayName: &quot;SHOULD BE VISIBLE&quot;,
  14.             message: [
  15.               `&#128065;️ (element: `+subject+` should be visible)`,
  16.             ],
  17.             // @ts-ignore
  18.             autoEnd: false,
  19.             consoleProps() {
  20.               return subject
  21.             },
  22.           })
  24.         cy.wrap(subject).should(&#39;be.visible&#39;);
  25.     }
  26. )

when I call it like this:

  1.   cy.visit(&#39;https://docs.cypress.io/guides/overview/why-cypress&#39;);
  2.   cy.get(&#39;.headerWrapper_tu51&#39;).shouldBeVisible();

I want it to log the calling function or calling element:

如何在Cypress的自定义命令中记录前一个主题

答案1

得分: 4

"message" 属性需要一个纯字符串，但 subject 是一个 jQuery 对象，无法优雅地进行字符串化。

Cypress 在内部使用 Cypress.utils.stringifyActual()，你也可以在自定义命令中使用它，将 jQuery 对象转换为适合记录的字符串。

这个测试演示了用法：

  1. cy.visit('https://docs.cypress.io/examples/applications');
  3. cy.get('h2').eq(0)
  4.   .then(subject => {
  5.     expect(Cypress.utils.stringifyActual(subject))
  6.       .to.eq('<h2#Kitchen-Sink.anchor.anchorWithStickyNavbar_LWe7>')
  7.   })

所以在你的日志调用中：

  1. const log = Cypress.log({
  2.   name: "shouldBeVisible",
  3.   displayName: "SHOULD BE VISIBLE",
  4.   message: `👁️ (element: ${Cypress.utils.stringifyActual(subject)} should be visible)`,
  5.   ...
英文:

It's expecting a pure string for the message property, but subject is a jQuery object and it does not stringify elegantly.

Cypress internally uses Cypress.utils.stringifyActual() which you can also use in custom commands, to convert the jQuery object into a log-friendly string.

This test illustrates the usage,

  1. cy.visit(&#39;https://docs.cypress.io/examples/applications&#39;);
  3. cy.get(&#39;h2&#39;).eq(0)
  4.   .then(subject =&gt; {
  5.     expect(Cypress.utils.stringifyActual(subject))
  6.       .to.eq(&#39;&lt;h2#Kitchen-Sink.anchor.anchorWithStickyNavbar_LWe7&gt;&#39;)
  7.   })

so in your log call

  1. const log = Cypress.log({
  2.   name: &quot;shouldBeVisible&quot;,
  3.   displayName: &quot;SHOULD BE VISIBLE&quot;,
  4.   message: `&#128065;️ (element: ${Cypress.utils.stringifyActual(subject)} should be visible)`,
  5.   ...

huangapple
  • 本文由 发表于 2023年6月29日 22:19:07
  • 转载请务必保留本文链接：https://go.coder-hub.com/76581938.html
  • cypress
  • cypress-custom-commands
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定