Protractor - Selecting Text

Question

Im having some real trouble with selecting some text using protractor.

A little context; this is for an AngularJS CMS system for writing news articles. The text I want to highlight is located within a text area which is most of the page. A similar application is a Google Docs Document.

With webdriver, I believe I can simply use something to this effect:

browser.actions().keyDown(protractor.Key.CTRL).sendKeys('a').perform();

However, I code on a MAC and although currently our tests are run on a windows box in SauceLabs, the end goal is to move to a MAC to emulate our users.

I tried a similar line of code but with Command (or CMD) but it doesn't work, according to this post, OSX doesn't support native key events.

Other methods I've explored:

1. Attempting a triple click in the element to select all text...but I couldn't get this to work (any help?). This is complicated by the fact that the mouse cursor has to be over the text for it to highlight all of the text.

2. Double clicking inside the field which on my local machine manages to select the last work in the text area, but in SauceLabs, the browser is smaller so manages to select a different word. This feels too brittle to use as it would be different on most machines.

3. Moving the text cursor to either the beginning or end of the text area, keydown on Shift and pressing the left or right arrow keys based on the number of character in the text area. I am having trouble moving the cursor to the start or end of the text field in this implementation.

Thanks for reading, I realise this is a bit of a long one! If you can think of a method I haven't thought of yet or a way to code the triple click or the arrow keys method, that would be extremely helpful!

Answer 1

Is not possible on OSX, see issue 690

Answer 2

Per an issue with the Selenium driver and MacOS the COMMAND key events are not properly propagated. https://github.com/seleniumhq/selenium-google-code-issue-archive/issues/3101

Answer 3

OK, I managed to get around this by selecting the text programatically using the .executeScript method.

It's a bit of a cheat as it doesn't mimic a user's interaction but I couldn't find an alternative and it was deemed an acceptable work-around.

Here's the code if you're interested, this will select the first paragraph in the text area:

Article.prototype.selectFirstParagraph = function(driver) {
    driver.executeScript(function () {
        var range = document.createRange();
        range.selectNode(document.body.querySelector('.ui-rich-text-editor__input').firstChild);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        return sel;
    });
}

Answer 4

For those who are looking for windows.

var Key = protractor.Key;
var Key = protractor.Key;
browser.actions().sendKeys(Key.chord(Key.CONTROL, 's')).perform();
browser.actions().sendKeys(Key.chord(Key.CONTROL, Key.SHIFT, 'm')).perform();
browser.actions().sendKeys(Key.chord(Key.CONTROL, 'o')).perform();

Source Link