web-dev-qa-db-ja.com

サイプレステストでドラッグアンドドロップを実装する方法は？

Cypress および Angular Material Drag and Drop でドラッグアンドドロップをテストするのに苦労しています。したがって、目標は「仕事に取り掛かる」をTodoからDoneに移動することです。以下のテストを作成しました。これにより、再現が簡単になります。

Stackblitz here で遊ぶことができます。

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

});

上記のテストを実行した結果は次のようになります。

enter image description here

これが、ソリューションを開発するための repo です。

助けてくれてありがとう。

chromeデバッガーを使用して検出されたイベントが発生しました：

アイテム

  • ポインタオーバー
  • ポインター
  • マウスオーバー
  • マウスダウン
  • ポインタ移動
  • マウスムーブ
  • ポインタアウト
  • ポインタ
  • マウスアウト
  • ねずみ

ドロップゾーン

  • ポインタオーバー
  • ポインター
  • マウスオーバー
  • ポインタ移動
  • マウスムーブ
  • ポインタ
  • マウスアウト
  • ねずみ

ソリューション

@Richard Matsenの素晴らしい答えの後、私は his answer をカスタムコマンドとして追加しました。ソリューションは次のようになります

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

スペックファイル

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

小さなギフ、私はとても幸せなので、それはついにうまくいきますか????

enter image description here

[〜＃〜] ci [〜＃〜]

今ではCIでも動作しますか???? （そして局所的に電子）。 CircleCI 2.0でテスト済み。

angular-material2cypress
17
DauleDK

まったく同じ 公式レシピ をご覧になりましたか？

トリガーされたイベントのこの組み合わせを使用します

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

アイテムをドラッグ＆ドロップするには、試したときにさらにヘルプが必要な場合はお知らせください????

0
NoriSte