Cypress의 :hover, 가시성 및 클릭 관련 문제

오늘 아침 테스트에 몇 가지 문제가 있었고 Cypress를 사용하기 시작한 이후로 호버 상태 및 클릭과 관련된 다양한 문제가 있었습니다.

때로는 그냥 사용하는 것이 효과가 있습니다 click({force: true})

가끔 쓰면 효과가 있다 .trigger("show")

때때로 이러한 작업 중 아무 것도 작동하지 않습니다.

왜 그것이 작동하는지 또는 작동하지 않는지 100% 확신할 수는 없지만 이 경우 내 CSS에서 "표시"대신 "가시성"을 사용하는 것과 관련이 있고 약간의 지연이 있는 전환이 있었던 것과 관련이 있다고 생각합니다. 클릭하고 싶은 요소를 보여줍니다.

나는 전에 이 위대한 cypress-real-events 패키지를 사용했고 이번에도 도움이 된 것 같습니다. 이 라이브러리는 CSS와 함께 작동하는 "realHover()"이벤트를 추가합니다.

이 경우 마지막으로 저에게 효과가 있었던 것은 이것입니다.

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

내 게시물과 마찬가지로 주로 나 자신에 대한 메모입니다. 이 블로그 게시물은 이번에 정말 도움이 되므로 더 많은 정보를 원하시면 details go here .