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

The cypress command did not work for me.
in Cypress version: 13.8.1

I just ended up writing this simple line for my purpose:

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

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

It is not very "modular" or reusable, but it worked perfectly for my test case.

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.

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

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

Do you have working example ?

I am having Cypress v 13.12.0 and want to simulate the paste event.

Scenarios are like if the user press Ctrl + V after copying any html page content or excel or from image or any text. The pasted text should gets displayed properly in the input or textarea or inside a div.

Any suggestions for that?
tried the solution like

 const text = "text I want to paste in the input";
            cy.get("selector_id").trigger("paste", {
                    clipboardData: { getData: () => text }
            });

OR

cy.get<Subject>(elementSelector).then((subject: any) => {
        cy.window().then((win) => {
            const element = subject[0];
            const dataTransfer = new win.DataTransfer();
            dataTransfer.setData("text/plain", text);

            // Create a custom event
            const event = new win.Event("paste", { bubbles: true }) as any;
            if (event) {
                event.clipboardData = dataTransfer;
            }

            // Dispatch the event
            // const element = win.document.querySelector(elementSelector);
            if (element) {
                element.focus();
                element.dispatchEvent(event);
            }
});

Cypress version: 13.13.2

What worked for me is more of a workaround but still uses the copied clipboard from cypress itself.
Get the copied value from the cypress window, alias it and then type it or perform some assertions on it.

    cy.window().then((win) => {
        return cy.wrap(win.navigator.clipboard.readText()).then((clipboardText) => {
            const expectedText = 'Your expected text, if known previously for assertion';
            expect(clipboardText).to.equal(expectedText);
            // Save the clipboard to "paste" it later
            cy.wrap(clipboardText).as('copiedText');
        });
    });
    cy.get('@copiedText').then((copiedText) => {
        // Use copiedText as needed, use .type() to simulate "paste" if you work with strings
        cy.log(copiedText);
    });