Как проверить, что элемент имеет любой из классов в Cypress?

Question

Мы ищем недопустимый элемент следующим образом:

const invalidClasses = '.invalid, .invalid-default';

getInvalidElement() {
    cy.get(invalidClasses)
};

Теперь у меня есть другая функция, которая принимает элемент и проверяет, есть ли у него недопустимые классы:

isInvalid(selector) {
 return cy.get(selector).should('have.class','invalid');
}

Как можно Я проверяю, есть ли у элемента какой-либо из двух классов?

Я знаю, что могу

cy.get(selector).invoke('attr','class').should('match','/invalid/');

Но что, если бы классы были разными?

(Также условное тестирование не применяется к этому случаю, нет logi c, будь то первый из классов или второй, нам просто нужно больше абстрактного класса для повторного использования)

Answer 1

Cypress .should() обертывает утверждения chai, поэтому из как сделать «или» в chai следует

следующий html фрагмент

<div id="1" class="class1"></div>
<div id="2" class="class2"></div>
<div id="3" class="class1 class2"></div>
<div id="4" class="class3"></div>

может быть протестирован следующим образом *$el[0].classList возвращает DomTokenList, который является массивом , поэтому используйте Array.from(), чтобы применить к нему метод массива .includes().

Вы также можете сделать вещи более универсальными c, извлекая функцию,

it('finds either class1 or class2', () => {

  const hasAtLeastOneClass = (expectedClasses) => {
    return ($el) => {
      const classList = Array.from($el[0].classList); 
      return expectedClasses.some(expectedClass => classList.includes(expectedClass));
    }
  }

  cy.get('div#1').should('satisfy', hasAtLeastOneClass(['class1', 'class2']));  //passes

  cy.get('div#2').should('satisfy', hasAtLeastOneClass(['class1', 'class2']));  //passes

  cy.get('div#3').should('satisfy', hasAtLeastOneClass(['class1', 'class2']));  //passes

  cy.get('div#4').should('satisfy', hasAtLeastOneClass(['class1', 'class2']));  //fails

})

Answer 2

Cypress должен предоставить и метод, который принимает предыдущую тему (локатор), и вы можете применить столько условий, сколько условий с помощью и метода.

cy.get('locator')
.should('have.class', 'validClassname')
.and('not.have.class', 'invalidClassname');

Я надеюсь, что это решит вашу проблему ... Проголосуйте за этот ответ чтобы охватить больше людей.