自动化测试，让你上班拥有一杯咖啡的时间 | Day 21 - drag and drop 的用法

此系列文章会同步发文到个人部落格，有兴趣的读者可以前往观看喔。

当网站有 to-do list 时，可以用 drag-drop 的方式移动项目。

1. 在命令列输入 npm install --save-dev @4tw/cypress-drag-drop

2. 在 package.json档 会有 "@4tw/cypress-drag-drop": "^2.0.0",
   

3. 在 command.js 输入

   require('@4tw/cypress-drag-drop')
   

   

4. 动手写程序

   describe('测试drag and drop', function() {
       it('Using the cyess-drag-drop plugin on a HTML site', function () {
           cy.visit('http://the-internet.herokuapp.com/drag_and_drop')
           cy.get('#column-a').should('have.text', 'A') //点选栏位A
           cy.get('#column-b').should('have.text', 'B') //点选栏位B
           cy.get('#column-a').drag('#column-b')
           cy.get('#column-a').should('have.text', 'B') //栏位A的值是B
           cy.get('#column-b').should('have.text', 'A') //栏位B的值是A
       })
   })
   

   

参考资料

• https://github.com/saucelabs/the-internet
• https://material.angular.io/cdk/drag-drop/overview