web-dev-qa-db-fra.com

Comment implémenter le glisser-déposer dans le test de cyprès?

J'ai du mal à tester le glisser-déposer avec Cypress et Drag and Drop matériel angulaire . Le but est donc de déplacer "Get to work" de Todo à Done. J'ai créé le test suivant, qui devrait vous faciliter la reproduction:

Vous pouvez jouer avec le Stackblitz ici .

describe('Trying to implement drag-n-drop', () => {

    before(() => {
        Cypress.config('baseUrl', null);

        cy.viewport(1000, 600);
        cy.visit('https://angular-oxkc7l-zirwfs.stackblitz.io')
        .url().should('contain', 'angular')
        .get('h2').should('contain', 'To do');
    });

    it('Should work, based on this https://stackoverflow.com/a/54119137/3694288', () => {

        const dataTransfer = new DataTransfer;

        cy.get('#cdk-drop-list-0 > :nth-child(1)')
            .trigger('dragstart', { dataTransfer });

        cy.get('#cdk-drop-list-1')
            .trigger('drop', { dataTransfer });

        cy.get('#cdk-drop-list-0 > :nth-child(1)')
            .trigger('dragend');

        cy.get('#cdk-drop-list-1').should('contain', 'Get to work');
    });


    it('Should work, with this library https://github.com/4teamwork/cypress-drag-drop', () => {
        cy.get('#cdk-drop-list-0 > :nth-child(1)')
            .drag('#cdk-drop-list-1');

        cy.get('#cdk-drop-list-1').should('contain', 'Get to work');
    });

});

Le résultat de l'exécution du test ci-dessus ressemble à ceci:

enter image description here

Voici n repo pour développer une solution.

Merci pour l'aide.

Événements déclenchés, trouvés à l'aide du débogueur chrome:

Objet

  • pointeur
  • pointeur
  • survol
  • souris vers le bas
  • pointermove
  • déplacer la souris
  • pointeur
  • pointerleave
  • mouseout
  • mouseleave

Zone de dépôt

  • pointeur
  • pointeur
  • survol
  • pointermove
  • déplacer la souris
  • pointerleave
  • mouseout
  • mouseleave

Solution

Après la réponse impressionnante de @Richard Matsen, j'ai fini par ajouter sa réponse comme commande personnalisée. La solution ressemble à ceci

support/drag-support.ts 

export function drag(dragSelector: string, dropSelector: string) {
    // Based on this answer: https://stackoverflow.com/a/55436989/3694288
    cy.get(dragSelector).should('exist')
      .get(dropSelector).should('exist');

      const draggable = Cypress.$(dragSelector)[0]; // Pick up this
      const droppable = Cypress.$(dropSelector)[0]; // Drop over this

      const coords = droppable.getBoundingClientRect();
      draggable.dispatchEvent(<any>new MouseEvent('mousedown'));
      draggable.dispatchEvent(<any>new MouseEvent('mousemove', {clientX: 10, clientY: 0}));
      draggable.dispatchEvent(<any>new MouseEvent('mousemove', {
          // I had to add (as any here --> maybe this can help solve the issue??)
          clientX: coords.left + 10,
          clientY: coords.top + 10  // A few extra pixels to get the ordering right
      }));
      draggable.dispatchEvent(new MouseEvent('mouseup'));
      return cy.get(dropSelector);
}

support/commands.ts 

// Add typings for the custom command
declare global {
    namespace Cypress {
        interface Chainable {
            drag: (dragSelector: string, dropSelector: string) => Chainable;
        }
    }
}
// Finally add the custom command
Cypress.Commands.add('drag', drag);

dans le fichier de spécifications 

it('???? Thx to Stackoverflow, drag and drop support now works ????', () => {
   cy.drag('#cdk-drop-list-0 > :nth-child(1)', '#cdk-drop-list-1')
   .should('contain', 'Get to work');
});

Un petit giph, parce que je suis tellement content que ça marche enfin ????

enter image description here

[~ # ~] ci [~ # ~]

Maintenant ça marche aussi dans CI ???? (et électron localement). Testé avec CircleCI 2.0.

angular-material2cypress
17
DauleDK

Avez-vous jeté un œil à la recette officielle qui fait exactement la même chose?

Il utilise cette combinaison d'événements déclenchés

cy.get('.selector')
  .trigger('mousedown', { which: 1 })
  .trigger('mousemove', { clientX: 400, clientY: 500 })
  .trigger('mouseup', {force: true})

pour faire glisser et déposer l'élément, faites-moi savoir si vous avez besoin d'aide supplémentaire après l'avoir essayé ????

0
NoriSte