Как проверить изменение стилей при наведении курсора на Cypress

Question

Я хочу протестировать стили при наведении курсора на строки таблицы, но не могу этого добиться:

Это мой тестовый код:

  it("Table rows hover styles should be correct", () => {
    cy.get("table>tbody>tr").each(($el, index, $list) => {
      $el.trigger("mouseover");
      expect($el).to.have.css("background-color", "rgb(242, 242, 242)");
    });
  });

, но значение background-color равно что было до наведения.

Это кипарисовая ошибка:

expected '<tr>' to have CSS property 'background-color' with the value 'rgb(242, 242, 242)', but the value was 'rgba(0, 0, 0, 0)'

Answer 1

Почему бы вам не попробовать с проверками кипариса, возможно, тест будет выполнен до завершения наведения, а с кипарисом он будет его ждать:

it("Table rows hover styles should be correct", () => {
    cy.get("table>tbody>tr").each(($el, index, $list) => {
      $el.trigger("mouseover");
      $el.should('have.css', 'background-color', 'rgb(242, 242, 242)');
    });
  });