前置き
Vue.js + Vue.Draggableでドラッグ＆ドロップ機能を実装しているWebページに対してCypressでテストコードを書いていたところ、ドラッグ＆ドロップがなかなか動作せずハマったので解決方法を記録しておきます。
環境
- OS: Mac OS X 10.14.5 Mojave
- Node.js: v12.6.0
- npm: 6.10.0
- yarn: 1.16.0
- Vue CLI: v3.9.3
- Vue: 2.6.10
- Vue.Draggable: 2.23.0
- Cypress: 3.4.0
- Chrome: 75
- Electron: 61
- cypress-drag-drop: 1.1.1
ドラッグ＆ドロップが動作するテストコード
describe('Drag and Drop test', () => {
it('Swap ITEM-1 and ITEM-2', () => {
cy.visit('/')
cy.get('.items').first().as('sourceItem')
cy.get('.items').last().as('targetItem')
cy.get('@sourceItem')
.trigger('pointerdown', { which: 1, button: 0 })
.trigger('dragstart')
cy.get('@targetItem')
.trigger('dragover')
.trigger('drop')
cy.get('.items').first().should('contain', 'ITEM-2')
cy.get('.items').last().should('contain', 'ITEM-1')
})
})
テスト対象のvueコード
※draggableタグの部分は、class属性を追加した以外は公式のサンプルコードをそのまま流用しています。
<template>
<div id="app">
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
<div v-for="element in myArray" :key="element.id" class="items">{{element.name}}</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'app',
components: {
draggable
},
data () {
return {
myArray: [
{ id: '1', name: 'ITEM-1' },
{ id: '2', name: 'ITEM-2' }
]
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
テスト実行結果
※確認しやすさのためTRIGGER前後のアニメーションの再生速度が遅くなるように編集しています。実際にはCypressの実行はもっと速いです。
ドラッグ＆ドロップによりITEM-1とITEM-2の上下が入れ替わり、ASSERTに成功します。
Chrome 75、Electron 61のどちらでも上記のテストコードでドラッグ＆ドロップを実行できました。
ドラッグ＆ドロップが動作しないテストコード
最初に書いていたテストコードです。
Cypress公式サイトの Plugins で紹介されている cypress-drag-drop の drag() を使いましたが、ドラッグ＆ドロップは動作しませんでした。
describe('Drag and Drop test', () => {
it('Swap ITEM-1 and ITEM-2', () => {
cy.visit('/')
cy.get('.items').first().as('sourceItem')
cy.get('.items').last().as('targetItem')
cy.get('@sourceItem').drag('@targetItem', 'center')
cy.get('.items').first().should('contain', 'ITEM-2')
cy.get('.items').last().should('contain', 'ITEM-1')
})
})
import 'cypress-drag-drop'
テスト実行結果
※動作成功例と同様に、確認しやすさのためTRIGGER前後のアニメーションの再生速度が遅くなるように編集しています。
mousedown、dragstartイベント後、dragoverイベントがループしてしまいドラッグ＆ドロップの処理が完了しません。
要因
デバッグしてみたところ、Vue.Draggableの対象となっているHTML要素に対して pointerdown イベントが発生すると該当要素に draggable="true" の属性が付与され、そのあとでないとドラッグ＆ドロップが実行できないようでした。
最初に利用しようとしていた cypress-drag-drop のプラグインでは pointerdown イベントが発生せず、それが期待通りに動作しなかった原因と考えられます。
事前に該当のHTML要素に対して draggable="true" を書いても動作しませんでした。
2019/3/1に登録された cypress-drag-drop の issue では vuedraggable に対しても動作しているとのコメントがありましたので、いずれかのパッケージやブラウザのバージョンアップなどにより動かなくなってしまったのかもしれません。
なお、以下のように pointerdown イベントと組み合わせれば、cypress-drag-drop プラグインの drag() も期待通りに動作します。
describe('Drag and Drop test', () => {
it('Swap ITEM-1 and ITEM-2', () => {
cy.visit('/')
cy.get('.items').first().as('sourceItem')
cy.get('.items').last().as('targetItem')
cy.get('@sourceItem')
.trigger('pointerdown', { which: 1, button: 0 })
.drag('@targetItem', 'center')
cy.get('.items').first().should('contain', 'ITEM-2')
cy.get('.items').last().should('contain', 'ITEM-1')
})
})