@4tw/cypress-drag-drop 中文文档教程

Question

cypress-drag-drop

用于拖放支持的 Cypress 子命令。

Setup

使用 npm:

npm install --save-dev @4tw/cypress-drag-drop

或 yarn

yarn add --dev @4tw/cypress-drag-drop

安装在加载 Cypress 之前（通常在您的 commands.js 中）放置以下行：

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

或者，如果您使用的是 ES 模块语法：

import '@4tw/cypress-drag-drop'

这将注册 drag 和 move 命令。

如果您使用的是 TypeScript，请将以下配置放入 tsconfig.json

{
  "compilerOptions": {
    "types": ["cypress", "@4tw/cypress-drag-drop"]
  }
}

Usage

drag

drag 命令是一个子命令。 该命令只接受元素。 作为放置目标，只需将选择器作为字符串传递。

在您的赛普拉斯规范中，使用如下命令：

describe('Dragtest', () => {
  it('should dragndrop', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').drag('.targetitem')
  })
})

将选项作为对象传递到第二个参数中。

describe('Dragtest', () => {
  it('should dragndrop', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').drag('.targetitem', options)
  })
})

在拖放交互过程中，涉及两个元素。 被拖动的源元素和放置目标。 为了决定应该将哪些选项应用于源或目标，可以将选项对象分为 source 和 target。 不特定于源或目标的选项同时应用于源和目标。

cy.get('.sourceitem').drag('.target', {
  source: { x: 100, y: 100 }, // applies to the element being dragged
  target: { position: 'left' }, // applies to the drop target
  force: true, // applied to both the source and target element
})

这些选项直接传递给赛普拉斯的 trigger 命令。 因此，https://docs.cypress.io/api/commands/trigger#Arguments 中的所有选项都是可能的。

Check command outcome

drag 命令能够判断拖动尝试是否成功。 因此，当拖动尝试成功时，该命令将产生 true，否则将产生 false：

cy.get('.sourceitem').drag('.target').then((success) => {
  assert.isTrue(success)
})

或者您可能还想检查元素是否不可拖动：

cy.get('.sourceitem').drag('.target').then((success) => {
  assert.isFalse(success)
})

move

move 命令是一个子命令。 该命令只接受元素。 将 deltaX 和 deltaY 定义为对象参数，以相对于元素的当前位置在 x 和 y 位置移动元素。

在您的 Cypress 规范中使用如下命令：

describe('Movetest', () => {
  it('should move', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').move({ deltaX: 100, deltaY: 100 })
  })
})

该命令接受来自 https://docs.cypress.io/api/commands/trigger#Arguments 的所有选项，position、x 和 y 因为它们没有效果，因为该命令在内部使用了 clientX 和 clientY。

describe('Movetest', () => {
  it('should move', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').move({ deltaX: 100, deltaY: 100, ...options })
  })
})

Development

插件本身在 index.js 文件中实现。

Testing

可以使用 Cypress 运行测试：

yarn test

测试装置位于 src/examples/ 下。 使用 setExample Cypress 命令 夹具已加载并准备好运行测试。 setExample 命令中的第一个属性 是夹具的名称，它需要是组件的文件名。

cy.setExample('NameOfTheComponent')

Release

发布此软件包的新版本：

yarn run release

Changelog

查看 Changelog