cypress-drag-drop (英语)

拖放支持的 Cypress 孩子命令 .

设置

使用 npm 安装 :

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

线条

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

在 Cypress 装入之前( 通常在您的 commands.js(b) 将下列文字改为:

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

或者,如果你使用ES模块语法:

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

这将登记 drag 财务报告和审定财务报表 move 命令.

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

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

使用量

拖动

这个 drag 命令是儿童命令. 命令只接受元素 . 由于投放目标只是通过一个选择器作为字符串.

在您的 Cypress 光谱中, 使用命令如下 :

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

选项直接传递给Cypress' trigger 命令. 所以,所有选项来自 https://docs.cypress.io/api/commands/trigger# 参数 这是可能的.

检查命令结果

这个 drag 命令可以显示拖曳尝试是否成功。 所以,命令会屈服 true 当拖曳尝试成功 false 否则:

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

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

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

移动

这个 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# 参数 除外 position, (中文(简体) ), x 财务报告和审定财务报表 y 因为他们没有效果, 因为命令使用 clientX 财务报告和审定财务报表 clientY 内部.

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

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

发展

插件本身在 index.js 文档.

测试

测试可以使用 Cypress 进行:

yarn test

测试装置在下面 src/examples/。使用 setExample 循环命令 固定器已经装入 并准备进行测试。 中的第一个属性 setExample 命令 是需要作为组件文件名的固定符的名称.

cy.setExample('NameOfTheComponent')

释放

发布此软件包的新版本 :

yarn run release

更改日志

看看这个 更改日志