Text in clipboard with protractor js

Question

How can I copy a specific text with protractor ?

I would like to load a text to paste after with this command :

return browser.actions().sendKeys(Keys.CONTROL, 'v').perform();

Sample :

Load my text "test" and after with this command, paste "test"

I would like put a text in my clipboard

Answer 1

Somewhat related to this: I needed to test a dialog, which placed some text in the clipboard when the user pressed the 'Copy' button in the dialog. I wanted to test that the text really got copied to the clipboard. I found this 'copy-paste' library: https://www.npmjs.com/package/copy-paste . "A command line utility that allows read/write (i.e copy/paste) access to the system clipboard. It does this by wrapping pbcopy/pbpaste (for OSX), xclip (for Linux and OpenBSD), and clip (for Windows)." I would say it is a javascript module rather than a command line utility. Anyway, I started using it, as the depenency on xclip (for Linux) was not a problem for me.

Answer 2

Here's the snippet I use with protractor to copy text to the clipboard. I need tabs to be accepted because most of my testing involves cut-and-paste from spreadsheets, where tab is the default column delimiter.

Further, it accommodates nuances in the html body's layout better (overflow: hidden).

function copyToClipboard(browser, text) {
  var id = 'someCustomIdToAvoidAliasing';
  var newInput = browser.element(by.css("#" + id));
  return browser.executeScript(function () {
    var el = document.createElement('textarea');
    el.setAttribute('id', 'someCustomIdToAvoidAliasing');
    el.setAttribute('style', 'position:fixed;z-index:10000;top:0;left:0');
    el.onkeydown = function(e) {
      if (e.keyCode === 9) {
        this.value = this.value + "\t";
        return false;
      }
    };
    document.getElementsByTagName('body')[0].appendChild(el);
  })
  .then(function() {
    return newInput.sendKeys(text);
  })
  .then(function() {
    return newInput.sendKeys(protractor.Key.CONTROL, "a", protractor.Key.NULL);
  })
  .then(function() {
    return newInput.sendKeys(protractor.Key.CONTROL, "c", protractor.Key.NULL);
  })
  .then(function() {
    return browser.executeScript(function() {
      var el = document.getElementById('someCustomIdToAvoidAliasing');
      el.remove();
    });
  });
}

Answer 3

can I put a value directly in my ng-model, not use sendKeys ?

Yes, you can directly set the model value via .evaluate():

var elm = element(by.model("mymodel.field"));
elm.evaluate("mymodel.field = 'test';");

---

Putting a text into clipboard

The idea is to use an existing or dynamically create an input element where you would send the text to, select all the text in the input and copy it with a CTRL/COMMAND + C shortcut.

Sample:

var textToBeCopied = "my text";

// creating a new input element
browser.executeScript(function () {
    var el = document.createElement('input');
    el.setAttribute('id', 'customInput'); 

    document.getElementsByTagName('body')[0].appendChild(el);
});

// set the input value to a desired text
var newInput = $("#customInput");
newInput.sendKeys(textToBeCopied);

// select all and copy
newInput.sendKeys(protractor.Key.chord(browser.controlKey, "a"));
newInput.sendKeys(protractor.Key.chord(browser.controlKey, "c"));

where browser.controlKey is a cross-platform way to handle CTRL/COMMAND keys:

• Using cross-platform keyboard shortcuts in end-to-end testing