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

Question

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

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

我尝试在 mxGraph 的公共示例上使用相同的 E2E 测试重新创建一些操作（请参阅柏树代码）。拖动对象（从菜单到画布（#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)

    })

任何帮助是极大的赞赏。提前致谢！

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"]')  })})