Protractor - Text Selection

Struggling with text selection using Protractor here.

Providing some background; working on an AngularJS CMS system for composing news articles. The text to be highlighted is within a textarea that occupies most of the page, similar to a Google Docs Document.

For webdriver, it seems like I can simply do this:

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

However, being on a MAC, I face issues as our end goal is to transition to using MAC for testing, currently running tests on a windows box in SauceLabs.

I attempted a similar approach using Command (or CMD) key but encountered problems since, as per this post, OSX does not support native key events.

Here are some other methods I have tried:

  1. Tried triple clicking inside the element to select all text...but couldn't get it to work. It's challenging as the mouse cursor needs to be positioned over the text for proper highlighting.

  2. Double-clicked within the field which, on my local machine, selects the last word in the textarea. However, in SauceLabs, due to smaller browser size, it selects a different word. This method appears fragile given variations across machines.

  3. Attempting to move the text cursor to either the start or end of the textarea, holding down Shift and pressing left or right arrow keys based on character count. Struggling with moving the cursor in this implementation.

Appreciate you taking the time to read through this! If you have any suggestions I haven't considered yet or insights into coding the triple click or arrow keys method, it would be immensely valuable!

javascriptangularjsseleniumwebdriverprotractor

Answer №1

I was able to find a workaround for this issue by programmatically selecting the text using the .executeScript method.

It may not perfectly simulate a user's interaction, but after exploring options, it proved to be an acceptable solution.

If you're curious, here is the code that targets 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 №2

For those in search of windows solutions.

let 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();

Link to Source

Answer №3

After trying numerous solutions and workarounds without success, I encountered a situation where none of them seemed to work. I'm not certain if the issue is specific to the operating system or if it's just a unique case involving numeric input fields that are auto-formatted.

However, I did come up with a workaround that worked for me and could be beneficial to others (compatible across different OS platforms, including macOS):

  const newInput = element(by.css('input#newId'));
  updateInputValue(newInput, 'my updated value');

  async function updateInputValue(inputElement: ElementFinder, updatedValue: string) {
    const valueLength = (await inputElement.getAttribute('value')).length;
    await inputElement.sendKeys(
      ...Array(valueLength).fill(protractor.Key.BACK_SPACE),
      updatedValue);
  }

Answer №4

Unfortunately, OSX does not support this function. For more information, please refer to issue 690.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing interactive PDF forms within a JavaScript interface

Wondering if there is a library available for displaying fillable PDFs on a webpage, allowing users to fill out the form and save their changes. Ideally using JavaScript. I've searched for similar questions but my situation is more complex as my page ...

javascriptjquerypdf

Tips for efficiently importing modules from the mocha.opts configuration file

In my mocha unit tests, I am currently using the expect.js library by requiring it on the first line of each file. Here is an example: var expect = require('expect.js'); describe('something', function () { it('should pass&apo ...

javascriptnode.jsgulpmocha.jsrequire

How can I write an if-else statement in JavaScript with Mongoose for MongoDB?

I am facing a challenge where I need to execute a statement only if the object is not null. If the object is null, I should skip executing anything. Is there a correct way to achieve this? I attempted it on MongoDB Playground but unfortunately, it did not ...

javascriptmongodbexpressmongooseecmascript-6

Update and send back variable on the spot

I'm interested in learning the syntax for creating an inline function that can accept a parameter, perform a simple modification on it, and return it all in a single line. Here's an example: (input) => { input.status = 'complete'; ...

javascripttypescript

Jquery's intermittent firing of .ajax within if statement

So, I've inherited a rather messy codebase that I need to modernize. The task involves upgrading from an old version of prototype to the latest jQuery 3.2.1 within a dated website built on php and smarty templates (not exactly my favorite). When a lo ...

javascriptphpjqueryhtmlajax

Using Python to set values with the Selenium library

I'm just starting out with Python, so this might be a silly question. I am trying to insert text into a text field on a website. text = "testing" driver = webdriver.Chrome() driver.get("https://www....") driver.execute_script('document.getElemen ...

pythonselenium

Utilizing JavaScript and Webix to refer to objects in array format

This question revolves around Javascript and JSON, although I'm also open to any solutions using Webix. Context Currently, I am utilizing the Webix Javascript UI framework to populate a Datatable with JSON data structured like this: complexData = { ...

javascriptarraysjsonwebix

`The Bootstrap modal fails to display`

I have a navigation bar with a button that is supposed to open a modal when clicked. I've tried following the guidance from Bootstrap's documentation and even checked out this question: bootstrap modal not working at all Unfortunately, nothing s ...

javascriptflaskbootstrap-4jinja2

Unclear on how this code is utilizing the fadeIn function in JQuery

While using a plugin, I came across a line of code that I'm trying to comprehend: $self.hide().attr("src", $self.data(settings.data_attribute))[settings.effect](settings.effect_speed); In this code snippet, 'self' is a jQuery object repres ...

javascriptjquery

Leveraging Directive Elements in AngularJS Controllers

I'm developing a pagination feature for an app that allows users to navigate through pages within the same window, with each page displayed below the previous one. When a user switches between pages, I want the window to automatically scroll to the co ...

angularjs

The blocking of the HttpPost ActionResult due to the deprecation of synchronous XMLHttpRequest

After adding jquery references to my project, I encountered an issue where the Post from a View is not triggering. The Post ActionResult used to save user-chosen settings, but now a break point inside the Post isn't being hit. Visual Studio does not s ...

javascriptjqueryajaxasp.net-mvcmultithreading

Tips for accessing the 'styled' function in Material UI ReactHow to utilize the 'styled' function

Hey there, I'm facing an issue while trying to export a styled AppBar. Check out my code below: import * as React from 'react'; import { styled, useTheme } from '@mui/material/styles'; import MuiAppBar from '@mui/material/AppB ...

javascriptreactjsecmascript-6material-ui

In search of a way to effortlessly display real-time updates in JSON data on a web browser without the need for constant

I have a node.js / next.js api set up that runs various tasks once the user inputs text into a form on the front end. One of the functions it performs is writing messages to a JSON file at certain stages to indicate the completion of those particular stage ...

javascriptnode.jsreactjsnext.jssocket.io

Using destructuring assignment in a while loop is not functional

[a,b] = [b, a+b] is ineffective here as a and b are always set to 0 and 1. However, using a temporary variable to swap the values does work. function fibonacciSequence() { let [a, b, arr] = [0, 1, []] while (a <= 255) { arr.concat(a) [a, ...

javascriptdestructuring

Displaying a div when an ng-repeat directive is devoid of content, incorporating filters in AngularJS

Currently, I am in need of a solution to display a specific div when my ng-repeat list is empty. The scenario involves a list containing various types of ice cream (with search filter functionality). What I aim to achieve is showing a designated div when t ...

javascriptangularjsionic-framework

Showing the Angular UI Router's loading view without loading the controller

There seems to be an issue with my angular app using ui-router. Despite all templates loading and displaying correctly, only the DashboardCtrl controller is being called. This behavior is quite puzzling. var adminPanel = angular.module('adminPanel&ap ...

angularjsangular-ui-router

Autofill class names in VS Code for Next.js using Emmet

How can I modify Emmet autocomplete to change from className="" to className={styles.}? If it is possible, could you please guide me on how to achieve this? Alternatively, if modifying the autocomplete feature is not an option, is there a way to create a ...

javascriptreactjsnext.jsautocompleteemmet

Is there a way to use Jest to test a Vuex action that contains an API call?

ASYNC ACTION VUEX : Here we have an asynchronous action that is called from the component. It includes a function fetchGaragesData which sends an API request to fetch data from the server. [ACTION_TYPES.FETCH_CASHLESS_GARAGES]: async ( { dispatch ...

javascriptvue.jsvuejs2jestjsvuex

What is the process for locating a file, opening, or generating a Google Sheet within someone else's directory using a service account?

I'm facing a situation where I have an account containing test result spreadsheets. To interact with these spreadsheets programmatically using Java and Google Drive API v3, I utilize a service account. However, I am struggling to create a spreadsheet ...

javaseleniumgoogle-drive-apigoogle-sheets-api

Efficient angular routing with asynchronous authorization

When it comes to default Angular route 1.x (not beta 2.0 or UI route), there is no built-in authorization or access permission functionality. However, I need to implement this feature for my project. The challenge I am facing is that I have a service that ...

angularjsroutesauthorization