Issues with :hover, visibility and clicks in Cypress

I had some issues with my tests this morning and ever since I've started to use Cypress i have had various issues with hover states and clicks.

• Sometimes it works to just use click({force: true})
• Sometimes it works to use .trigger("show")
• And sometimes none of these works.

I'm not 100% sure why it works or doesn't work but in this case i think it had to do with me using "visibility" instead of "display" in my CSS and that i had a transition that had some delay on showing the element that i wanted to click.

I have used this great cypress-real-events package before and it seems to have helped this time as well. This library adds a "realHover()" event that works with CSS.

What finally worked for me in this case was this.

      it("should work to report spam", function () {
        cy.visit("/software/arch-linux/about/");

        cy.intercept(
          {
            url: "https://hooks.slack.com/services/**",
          },
          { test: "hej" }
        ).as("post-to-slack");

        cy.on("window:confirm", () => true);

        cy.findByTestId("app-comment-89111")
          .realHover() // Seems i need this
          .within(() => {
            cy.findByTestId("report-spam")
              .realHover() // AND this, not sure why.
              .should("have.css", "visibility", "visible") // without this my transitions seems to mess and caused flakyness to the test.
              .click();
          });

        cy.wait("@post-to-slack");
      });
    });

As usual with my post these are mainly notes to myself, this blog post really help me this time so if you want more details go here.