Feature request: paste text into textarea

[kgish]

Currently it is only possible to enter text into a textarea by using the type() method. For larger amounts of text this can be quite cumbersome, as each character is inserted separately, even if the delay is reduced, e.g.{delay: 0}.

To speed up this action, it'd be nice if all of the text could be pasted into the textarea in one go, without having to enter the text one character at a time.

Therefore, I'd like to propose a new method called paste() which inserts larger amounts of text in one go.

Thanks in advance for considering this.

[bahmutov]

Can you just put "el.value = text" command?

…

Sent from my iPhone

On Dec 22, 2017, at 18:04, Kiffin Gish ***@***.***> wrote: Currently it is only possible to enter text into a textarea by using the type() method. For larger amounts of text this can be quite cumbersome, as each character is inserted separately, even if the delay is reduced, e.g.{delay: 0}. To speed up this action, it'd be nice if all of the text could be pasted into the textarea in one go, without having to enter the text one character at a time. Therefore, I'd like to propose a new method called paste() which inserts larger amounts of text in one go. Thanks in advance for considering this. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[brian-mann]

This is the proposal for what you're asking about: #566

We won't do cy.paste, we'll simply make cy.type type synchronously which would type all the characters in one shot (and make that the default).

Currently as @bahmutov suggests just do cy.get('textarea').invoke('val', myValue').trigger('change')

[bahmutov]

That's right - with Cypress you have _full and immediate_ access to the DOM so you can do anything you can do from the devtools

…

Sent from my iPhone

On Dec 22, 2017, at 18:52, Brian Mann ***@***.***> wrote: This is the proposal for what you're asking about: #566 We won't do cy.paste, we'll simply make cy.type type synchronously which would type all the characters in one shot (and make that the default). Currently as @bahmutov suggests just do cy.get('textarea').invoke('val', myValue').trigger('change') — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[nachocab]

@brian-mann when using your approach I find that the fields in my form get filled but they're not picked up by the Vue.js two-way binding (which does work when using cy.type. Is there an alternative?

[slaby93]

@nachocab Same with react-form -> it does not pickup this paste.

[nachocab]

That's right - with Cypress you have full and immediate access to the DOM so you can do anything you can do from the devtools

@bahmutov Maybe I'm doing it wrong, but in the console I can do $0.textContent = 'really long text' and I see the text appear in my contenteditable, but when I run it in Cypress it doesn't do anything:

cy.get(`.beam-sequence > .beam--current [contenteditable]`).then($span => {
      $span.textContent = 'really long text';
});

[nachocab]

Ah, never mind. I caught my mistake. This works:

cy.get(`.beam-sequence > .beam--current [contenteditable]`).then($span => {
      $span.text('really long text');
});

[DanWahlin]

I realize this is closed, but for those mentioning they couldn't get change detection to work with some of the SPA libraries/frameworks, here's what worked for me with Angular:

cy.get('[data-cy=markdown-textarea]').clear().invoke('val', text).trigger('input');

[dhair-seva]

Thank you @DanWahlin. I have been trying so many things. Yours did it!

[DanWahlin]

Glad that helped!

[HussamAlHunaiti]

Should this works fine instead of type({cmd} v)

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

https://gist.github.com/nickytonline/bcdef8ef00211b0faf7c7c0e7777aaf6

[jamiljay]

Cypress.Commands.add('paste', {
  prevSubject: true,
  element: true
}, ($element, text) => {
  const subString = text.substr(0, text.length - 1);
  const lastChar = text.slice(-1);

  $element.text(subString);
  $element.val(subString);
  cy.get($element.selector).type(lastChar);
});

[rmallols]

Thank you @jamiljay , I really like your approach!

BTW at least in my case I had to change the last line to avoid conflicts with multiple candidate elements:

Cypress.Commands.add('paste', {
    prevSubject: true,
    element: true
}, ($element, text) => {

    const subString = text.substr(0, text.length - 1);
    const lastChar = text.slice(-1);

    $element.text(subString);
    $element.val(subString);
    cy.get($element).type(lastChar);
});

[navmed]

This mostly works for me, but the last line type(lastChar) clears the rest of the text and enters only the last character.

[Archinowsk]

I had to click the field first though it might be implementation specific.

Cypress.Commands.add(
  'paste',
  {
    prevSubject: true,
    element: true,
  },
  ($element, text) => {
    const subString = text.substr(0, text.length - 1);
    const lastChar = text.slice(-1);

    cy.get($element)
      .click()
      .then(() => {
        $element.text(subString);
        $element.val(subString);
        cy.get($element).type(lastChar);
      });
  }
);

[bmitchinson]

Splicing substrings was giving me issues since I had "s in my input text. The following sets the text and value of the element to the given text, unmodified. Then cypress types a space followed by a backspace in order to properly trigger events.

/**
 * @param text: text to be pasted in
 */
// https://github.com/cypress-io/cypress/issues/1123#issuecomment-672640129
Cypress.Commands.add(
    "paste",
    {
        prevSubject: true,
        element: true
    },
    ($element, text) => {
        cy.get($element)
            .click()
            .then(() => {
                $element.text(text)
                $element.val(text)
                cy.get($element).type(" {backspace}")
            })
    }
)

[vincerubinetti]

In my case I had to very specifically do this for some reason, or else some things got triggered in the wrong order:

Cypress.Commands.add(
  "paste",
  { prevSubject: true, element: true },
  ($element, text) => {
    cy.get($element).invoke("val", text).trigger("input").type(" ");
  }
);

Don't know what's going on with all the slightly different answers in this thread. Wish there was a built-in method that would accomplish this robustly.

[WtfJoke]

type supports the optional property delay since cypress 7.6.0.

cy.get("[data-test-id='note-textarea']").type(some1500characters, {
    delay: 0,
});

[nfantone]

Don't really know why everyone is calling this action "paste". Rather confusing coming from a Google search related to clipboard management in Cypress.

This is not pasting. It's replacing the value of an input.

[yatuvy]

I use cypress to test react application.
After invoking the 'val' method, I also typed in a space character and then typed backspace to delete it.
That did the trick for the app to get the change.

cy.get([id="textInput"]).clear().invoke('val', operation.input).trigger('input');
cy.get([id="textInput"]).type(" {backspace}");