2
votes

Comment faire glisser et déposer dans Cypress.io

Je teste Trello et j'essaie de faire glisser la dernière liste, puis de la déposer dans une avant-dernière colonne, mais le test ne fonctionne pas sans ".wait". Il serait vraiment utile que quelqu'un puisse vous conseiller sur le problème potentiel ici car je préfère éviter d'utiliser ".wait". Il n'y a pas d'erreurs, mais malgré tout, le glisser-déposer ne se produit pas sans ".wait".

describe("Moving list", () => {
  it("Waiting For Accept list should be moved from last column to the penultimate column", () => {
    cy.get("#board")
      .children(".js-list")
      .should("have.length", 4)
      .and("be.visible");

    cy.get(":nth-child(4) > .list")
      .should("be.visible")
      .and("contain", "Waiting For Accept")

    cy.get(":nth-child(4) > .list").trigger("mousedown", {
      which: 1
    });

    cy.get("#board > div:nth-child(2) > .list")
      .trigger("mousemove");

    cy.get("#board > div:nth-child(3) > .list")
      .trigger("mousemove")
      .trigger("mouseup");

    cy.get(":nth-child(3) > .list")
      .should("contain", "Waiting For Accept");
  });
});

Voir l'image

javascript cypress testing e2e-testing drag-and-drop

0 commentaires

3 Réponses :

2
votes

Cela ne fonctionne pas immédiatement, le problème enregistré pour cela est https : //github.com/cypress-io/cypress/issues/845 . Mais dans ce même ticket, il existe également une solution de contournement disponible en utilisant l'API native glisser-déposer avec un attribut glissant sur les éléments déplaçables:

Créer une commande personnalisée

cy.get(".source").dragTo(".target");

0 commentaires

0
votes

Enfin, j'ai résolu ce problème en utilisant "cy.request"

https://docs.cypress.io/api/commands/request.html#Syntax

describe("Moving list", () => {
        it("Waiting For Accept list should be moved from last column to the penultimate column", () => {
            cy.request("https://trello.com/b/9lfzKIRu/trello-tests").then(response => {
                expect(response.status).to.eq(200);
            });
            cy.get("#board > div:nth-child(4) > .list").trigger("mousedown", {
                which: 1
            });
            cy.get("#board > div:nth-child(2) > .list").trigger("mousemove");
            cy.get("#board > div:nth-child(3) > .list")
                .trigger("mousemove")
                .trigger("mouseup");
            cy.get(":nth-child(3) > .list").should("contain", "Waiting For Accept");
        });
    });

0 commentaires

0
votes

Vous pouvez utiliser le plugin drap and drop Cypress

https://github.com/4teamwork/cypress-drag-drop

0 commentaires