我如何在赛普拉斯中测试 ngIf？答案

【问题标题】：How do I to test ngIf in cypress?我如何在赛普拉斯中测试 ngIf？
【发布时间】：2023-02-18 19:04:46
【问题描述】：

我有代码

<div class="project" *ngIf="role$ | async">
    <button mat-button *ngIf="id !== 5" (click)="doSomething()">DO</button>
</div>

我不确定*ngIf 会调用什么属性？ display或visible或disabled？我该如何测试它？

The following is the wrong code, I guess

cy.get('.project').then(($div) => {
     if ($div.is(':disabled')) {
     cy.log('Div is disabled!')
     return
  } else {
      cy.log('Div is enabled!')
     cy.wrap($div).click()
  }
 })

【问题讨论】：

你能运行这个命令并告诉我记录了什么吗？cy.get('.project').invoke('attr', '*ngIf').then((val) => {cy.log(val)})
如果这不起作用，请尝试使用不带星号的ngIf。
似乎*ngIf 可以无误地调用。我可以嘲笑它是真的还是假的？
记录值是多少？

标签： angular cypress

【解决方案1】：

您正在寻找 div.project 的存在，因此理想情况下测试会知道变量 role$ 的值

if (role$) {

  cy.get('div.project').should('not.exist')

} else {

  cy.get(`div.project`)
    .should('exist')
    .within(() => {

      // work on button
      if (id === 5) {
        cy.contains('button', 'DO').should('not.exist')
      } else {
        cy.contains('button', 'DO').click()
      }
    })
}

这就是我从 HTML 片段中可以告诉您的全部内容。

显然，您想根据功能是否有效来测试页面，因此需要了解更多关于该应用程序的信息以改进测试。

【讨论】：

你不应该在 Cypress 中使用 if 语句，这是一种不好的做法。
Cypress 告诉我们可以在测试中使用 Javascript。所以使用 if 语句非常好，我认为你只是对条件测试感到困惑，这完全是另一回事。 @Oushma
也许你被一个错字弄糊涂了——如果这个词应该是理想情况下，测试会知道变量 role$ 的值.这意味着测试是确定性的（不是有条件的）。

【解决方案2】：

如果您在日志中得到 true 或 false，您可以应用这样的断言：

cy.get('.project').should('have.attr', '*ngIf', 'true') //for true
cy.get('.project').should('have.attr', '*ngIf', 'false') //for false

【讨论】：

我对柏树不强。如果 div 不在根目录中，如何获取元素？
您可以使用其内部文本值获取元素，例如 cy.contains('element text')。用你上面的例子cy.contains('DO')。