How to test styles changes on hover with cypress

[Hamidrezana]

I want to test styles when hover on element but it doesn't work:

This is my test code:

  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)");
    });
  });

but the background-color value is what is before hover.

This is cypress error:

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

[jennifer-shehane]

@Hamidrezana How are the hover styles applied, via JavaScript, listening to the mouseover event? If so, this will work. If you are applying styles based on the :hover pseudo class in css, then this will not work. See #10

[Hamidrezana]

@jennifer-shehane Tnx for reply.
So there isn't any solution for my problem, yet?

I mean now we can't test pseudo class in css?

[jennifer-shehane]

@Hamidrezana No, there isn't a way to do this in Cypress currently.

[mmonteiroc]

@Hamidrezana you can have a look on "cypress-real-events"