有没有办法检查一个元素是否有 cypress.io 中的类？

Question

我不想测试它是否具有该类，就像...should('have.class', "some-class")我只想知道它是否具有该类一样，如果没有，则执行一些为其提供该类的操作。

基本上，我想看看该元素是否有Mui-checked，如果没有，他们会以编程方式检查它。

Answer 1

if() else()一般来说，在测试中这样做是不好的做法。

您希望使测试尽可能具有确定性，以避免不稳定的测试。

在您的示例中，如果异步添加类，则if()检查可能执行得太快。

相反，直接添加类。您不需要检查条件，因为$el.addClass()即使元素已经具有该类也不会失败。

cy.get('selector').then($el => $el.addClass("blue"))

Answer 2

Colin的想法是在正确的轨道上，但.and('contain', 'some-class')仍然导致测试失败（它只是 的同义词should）。

将其更改为.then()检查 classList：

cy.get('div')
  .should('have.attr', 'class')
  .then(classList => {
    const classes = classList.split(' ')
    if (classes.includes('some-class')) {
      // ... action when class is found
    }
  })

笔记

尽可能晚地执行条件检查，在这种情况下，然后.should('have.attr', 'class')重试，直到附加类列表。

如果您遵循已接受的答案，您就有可能进行不稳定的测试。

Answer 3

您可以使用jquery 的hasClass()方法来实现此目的：

cy.get('selector').then(($ele) => {
  if ($ele.hasClass('foo')) {
    //Do something when you have the class
  } else {
    //Do something when you don't have the class
  }
})