javascript - Protractor - Selecting Text - Stack Overflow

admin管理员组

文章数量:1334277

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 plicated 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!

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 plicated 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!

• javascript
• angularjs
• selenium
• webdriver
• protractor

Share Improve this question Follow edited Sep 2, 2014 at 11:38 madz asked Sep 2, 2014 at 9:48 madzmadz 45644 silver badges1313 bronze badges 4

• 'mouse cursor has to be over the text' did you try to mouseOver(element,offset), where offset = {x:somePixel,y:somePixel}? – nilsK Commented Sep 2, 2014 at 15:43
• Hi @nilsK, thanks for your reply. I think (correct me if I'm wrong), would the offset be measured in pixels and therefore also be dependant on the window size? If so, this would be quite a brittle way of working as it would be different on most puter. Also, just curious, how would you be able to de-bug to know when you have the correct offset aside from the test passing? – madz Commented Sep 3, 2014 at 9:32
• yes, the offset is measured in pixels, bad idea i guess. i had a problem hovering an element with rounded corners, an offset of 2-3 pixels helped. may not help you though. anyway, to get the right offset, well, i use chrome and its developer tools contain a ruler ;) F12 -> click 'settings wheel' -> elements 'show ruler' – nilsK Commented Sep 3, 2014 at 19:10
• Thanks for the explaination @nilsK – madz Commented Sep 4, 2014 at 10:40

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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

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

I hit the case where none of dozens of solutions and workarounds I found worked. Not sure if it's related to OS or just a specific case where input field is numeric and auto-formatted.

Here is workaround that works for me and I think others may find useful (OS agnostic including macOS):

  const someInput = element(by.css('input#someId'));
  replaceInputValue(someInput, 'my new value');

  async function replaceInputValue(input: ElementFinder, newValue: string) {
    const valLength = (await input.getAttribute('value')).length;
    await input.sendKeys(
      ...Array(valLength).fill(protractor.Key.BACK_SPACE),
      newValue);
  }

Is not possible on OSX, see issue 690

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

本文标签： javascriptProtractorSelecting TextStack Overflow