Unable to perform drag-and-drop into PDF Builder iframe

[eser-form-io]

I am trying to automate a drag-and-drop action into the PDF builder, which uses an <iframe> to render the PDF editing area.

In my test, I:

1. Navigate to the PDF builder.

2. Get the iframe body using .contents().find('body').

3. Trigger dragstart on the "Text Field" component in the component panel.

4. Trigger dragover and drop on the drop zone inside the iframe (the PDF page container).

The problem:

• The drop event inside the iframe does not actually add the component to the PDF page, even though the Cypress commands find the drop zone and successfully trigger events.

• I have tried using a DataTransfer object and triggering dragstart, dragover, drop, and dragend in sequence, but Form.io does not register the drop.

• The same manual drag-and-drop works fine when done by hand.

Here’s a simplified, reproducible snippet:

///

describe('drag and drop to the PDF form which has iframe structure', () => {
it('drag and drop the Text Field component', () => {
cy.navigateToProject('test')

    cy.contains('h5', 'PDF').click().wait(5000)

    cy.get('.form-iframe').then($iframe => {
        const $body = $iframe.contents().find('body')
        cy.wrap($body).as('iframeBody')
    })

    const dataTransfer = new DataTransfer()

    cy.contains('[data-type="textfield"]', 'Text Field')
        .trigger('dragstart', { dataTransfer })

    cy.get('@iframeBody')
        .find('#page-container')
        .trigger('dragover', { dataTransfer })
        .wait(500)
        .trigger('drop', { dataTransfer })
        .wait(1000)

    cy.get('@iframeBody')
        .trigger('dragend', { dataTransfer })
})

})

What I’ve tried:

• Using different plugins for drag and drop

• Using { force: true } in all triggers.

• Increasing waits to ensure iframe content is loaded.

• Targeting different potential drop zone selectors inside the iframe.

• Verifying that the element exists and is visible before triggering drop.

• Attempting mousedown / mousemove / mouseup instead of drag events.

• Using cross-origin-safe approaches with cy.origin() when running in remote environments.

What I’m struggling with:

• Even though Cypress can see the element inside the iframe and trigger the events, the PDF Form builder does not respond to them as it would to a real browser drag-and-drop.

• I suspect either Cypress’s synthetic drag events are not fully compatible with HTML5 drag handling, or events inside iframes require a special approach I’m missing.

Questions:

1. Is there an officially supported way in Cypress to perform HTML5 drag-and-drop inside an iframe?

2. Are there known limitations with trigger() events for drag/drop when dealing with nested iframe content?

3. Is there a recommended workaround for this case?