Question

在过去的几个月中，我一直在为SO驱动的SE教育的最后阶段开发工作流建模器。我一直在使用mxGraph和香草javascript，并尝试使用Cypress设置一些基本的E2E测试。

（假设）触发事件侦听器时遇到一些问题。有些按钮确实响应柏树的点击/触发，而另一些则不响应。我的应用程序中的任何按钮都没有onClick动作或包含模型或控制器方法的任何其他属性。相反，所有按钮和键都具有由mxGraph-editor实用程序类创建的处理程序和侦听器。

我尝试对mxGraph的公共示例使用相同的E2E测试来重新创建某些操作（请参见cypress代码）。不幸的是，一个对象的拖动（从菜单到画布（＃1）以及从画布到画布（＃4））和对象的选择（＃2）是行不通的。

双击对象并修改文本（＃3）确实可行...但是我迷路了。我尝试了所有不同的强制，等待，单击和触发方式，但都无济于事。

describe('mxGraph "ports" example', function () {

    it('Start ports example', function () {
        cy.visit('https://jgraph.github.io/mxgraph/javascript/examples/ports.html')
        cy.wait(500)
    })
    // Example #1 : FAIL
    it('#1 Create new object by dragging', function () {
        cy.get('div[id="sidebarContainer"]').find('img[title="Drag this to the diagram to create a new vertex"]').first()
           .trigger('mousedown', { force: true})
            .trigger('mousemove', { clientX: 250, clientY: 250, force: true})
            .trigger('mouseup', {force: true})
        cy.get('div[id="graphContainer"]').find('svg').trigger('drop', { force: true })
        cy.wait(500)
    })
})

describe('mxGraph "user object" example', function () {

    it('Start userobject example', function () {
        cy.visit('https://jgraph.github.io/mxgraph/javascript/examples/userobject.html')
        cy.wait(500)
    })
    // Example #2 : FAIL
    it('#2 Single click on object (green highlight should appear)', function () {
        cy.get('rect').first().click({ force: true })
        cy.wait(500)
    })
    // Example #3 : PASS
    it('#3 Double click & edit object (Text should be modified)', function () {
        cy.get('rect').first().dblclick({ force: true })
        cy.wait(500)
        cy.get('div [class="mxCellEditor mxPlainTextEditor"]').first().type('text modified')
        cy.wait(500)
    })
    // Example #4 : FAIL
    it('#4 Drags object to center of canvas (Object should be moved)', function () {
        cy.get('rect').first()
            .trigger('mousedown', { force: true})
            .trigger('mousemove', { clientX: 250, clientY: 250, force: true})
            .trigger('mouseup', {force: true})
        cy.wait(500)
    })
})

任何帮助将不胜感激。预先感谢！

Answer 1

您的应用似乎正在使用指针事件，因此请尝试在所有这些事件名称中将mouse替换为pointer。

此外，这是有关拖放的更完整的抽象：


const dragTo = (subject, to, opts) => {

  opts = Cypress._.defaults(opts, {
    // delay inbetween steps
    delay: 0,
    // interpolation between coords
    steps: 0,
    // >=10 steps
    smooth: false,
  })

  if (opts.smooth) {
    opts.steps = Math.max(opts.steps, 10)
  }

  const win = subject[0].ownerDocument.defaultView

  const elFromCoords = (coords) => win.document.elementFromPoint(coords.x, coords.y)
  const winMouseEvent = win.MouseEvent

  const send = (type, coords, el) => {

    el = el || elFromCoords(coords)

    if (type.includes('drag') || type === 'drop') {
      return el.dispatchEvent(
        new Event(type, Object.assign({}, { clientX: coords.x, clientY: coords.y }, { bubbles: true, cancelable: true }))
      )
    }

    el.dispatchEvent(
      new winMouseEvent(type, Object.assign({}, { clientX: coords.x, clientY: coords.y }, { bubbles: true, cancelable: true }))
    )
  }

  const toSel = to

  function drag (from, to, steps = 1) {

    const fromEl = elFromCoords(from)

    const _log = Cypress.log({
      $el: fromEl,
      name: 'drag to',
      message: toSel,
    })

    _log.snapshot('before', { next: 'after', at: 0 })

    _log.set({ coords: to })

    send('mouseover', from, fromEl)
    send('pointerover', from, fromEl)
    send('mousedown', from, fromEl)
    send('pointerdown', from, fromEl)
    send('dragstart', from, fromEl)

    cy.then(() => {
      return Cypress.Promise.try(() => {

        if (steps > 0) {

          const dx = (to.x - from.x) / steps
          const dy = (to.y - from.y) / steps

          return Cypress.Promise.map(Array(steps).fill(), (v, i) => {
            i = steps - 1 - i

            let _to = {
              x: from.x + dx * (i),
              y: from.y + dy * (i),
            }

            send('mousemove', _to, fromEl)

            return Cypress.Promise.delay(opts.delay)

          }, { concurrency: 1 })
        }
      })
      .then(() => {

        send('mousemove', to, fromEl)
        send('pointermove', to, fromEl)
        send('drag', to, fromEl)
        send('mouseover', to)
        send('pointerover', to)
        send('dragover', to)
        send('mousemove', to)
        send('pointermove', to)
        send('drag', to)
        send('mouseup', to)
        send('pointerup', to)
        send('dragend', to)
        send('drop', to)

        _log.snapshot('after', { at: 1 }).end()

      })

    })

  }

  const $el = subject
  const fromCoords = getCoords($el)
  const toCoords = getCoords(cy.$$(to))

  drag(fromCoords, toCoords, opts.steps)
}

const getCoords = ($el) => {
  const domRect = $el[0].getBoundingClientRect()
  const coords = { x: domRect.left + (domRect.width / 2 || 0), y: domRect.top + (domRect.height / 2 || 0) }

  return coords
}

Cypress.Commands.addAll(
  { prevSubject: 'element' },
  {
    dragTo,
  }
)

这是您的使用方式：

describe('mxGraph "ports" example', function () {
  beforeEach(() => {
    cy.visit('https://jgraph.github.io/mxgraph/javascript/examples/ports.html')
    cy.get('div#splash').should('not.be.visible')
  })

  // Example #1 : FAIL
  it('#1 Create new object by dragging', function () {
    cy.get('div[id="sidebarContainer"]').find('img[title="Drag this to the diagram to create a new vertex"]').first()
    .dragTo('div[id="graphContainer"]')
  })
})

赛普拉斯的点击/触发不会触发事件监听器

1 个答案: