Проблемы с :hover, видимостью и кликами в Cypress

Сегодня утром у меня возникли некоторые проблемы с моими тестами, и с тех пор, как я начал использовать Cypress, у меня были различные проблемы с состояниями hover и кликами.

  • Иногда получается просто использовать click({force: true}).
  • Иногда работает использование .trigger("show").
  • А иногда ничего из этого не работает.

Я не уверен на 100%, почему это работает или не работает, но в данном случае я думаю, что это связано с тем, что я использовал «visibility» вместо «display» в моем CSS и что у меня был переход, который имел некоторую задержку при показе элемента, который я хотел нажать.

Я уже использовал этот замечательный пакет cypress-real-events, и, похоже, он помог и в этот раз. Эта библиотека добавляет событие «realHover()», которое работает с CSS.

В этом случае мне помогло следующее.

      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");
      });
    });
Войти в полноэкранный режим Выйти из полноэкранного режима

Как обычно в моих сообщениях, это в основном заметки для себя, эта запись в блоге действительно помогла мне в этот раз, так что если вы хотите больше подробностей, перейдите сюда.

Оцените статью
devanswers.ru
Добавить комментарий