Simulate a paste event in Cypress

paste.js

/**
 * Simulates a paste event.
 *
 * @param pasteOptions Set of options for a simulated paste event.
 * @param pasteOptions.destinationSelector Selector representing the DOM element that the paste event should be dispatched to.
 * @param pasteOptions.pastePayload Simulated data that is on the clipboard.
 * @param pasteOptions.pasteFormat The format of the simulated paste payload. Default value is 'text'.
 */
function paste({ destinationSelector, pastePayload, pasteType = 'text' }) {
    // https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
    cy.get(destinationSelector).then($destination => {
        const pasteEvent = Object.assign(new Event('paste', { bubbles: true, cancelable: true }), {
            clipboardData: {
                getData: (type = pasteType) => pastePayload,
            },
        });
        $destination[0].dispatchEvent(pasteEvent);
    });
}

I haven’t touched or used this command in years so glad you got something working for your tests @IrvingArmenta!

Hi @IrvingArmenta,

Could you share more about your configuration? I'm using similar setup to yours but it doesn't work.

cy.mount(html`<input />`)

const text = 'text I want to paste in the input';

cy.get('input')
	.eq(0)
	.click()
	.trigger('paste', {
		clipboardData: { getData: () => text }
	});

cy.get("input")
	.should("have.value", text)

@nnaydenow
If you only have one <input /> then no need for eq() , you should just select that one input, also my inputs have a custom onPaste
also not sure why you need click()
listener:

// function
const handleOnPaste = (
    e: React.ClipboardEvent<HTMLInputElement>,
    index: number
  ) => {
    e.preventDefault();
    const pastedData = e.clipboardData.getData('text');
    
    // do something with the pastedData, like set as a value to the input
}

// jsx
<input
  type="text"
 onPaste={(e) => handleOnPaste(e, index)}
 />

But in my case is an array of inputs.

Not working for me too. It pastes "internalCopy" as a value.