How to select/highlight text on a page?


#1

I want to select text on a page using Katalon. By “select text” I mean what occurs when you hold down the left mouse button before some text, then move the cursor over that text. This is the action one takes before cutting/copying some text, for example. In the application I am testing, a custom context menu appears when text is selected in this way. I need to test the functionality of this context menu, so I need a way to select some text on the page to get the menu to appear. I’m looking for a generic way to select text on the page, not specific to the application I am testing.

Update: The elements I need to select text within are paragraph and span elements.


#2

You could use ctrl + a:

WebElement element = WebUiCommonHelper.findWebElement(findTestObject('path/to/test/object'))
element.sendKeys(Keys.chord(Keys.CONTROL, "a"))

#3

I don’t want to select all the text on the page, just several words in a sentence. Similar to if I wanted to copy and paste; I don’t want to select all the text on the page.


#4

You would narrow what text you want to select based on the selector for the element. For example, if I had a text node somewhere that I wanted to select:

<input id='some_id'>Hello world!</input>

And I select it by xpath:

WebElement element = driver.findElement(By.xpath("//input[@id='some_id']"))

Then sending keys as I’ve shown would only select that particular text.


#5

Hi Brandon,
Here is my code as generated by the manual view:
WebUI.sendKeys(findTestObject(‘Folder/p_text’), Keys.chord(Keys.CONTROL, ‘a’))

I’m getting the error “Unable to send keys ‘a’ to object ‘Folder/p_text’”. I tried with both single and double quotes, but I get the same error. I tried sending only Keys.CONTROL and received and error “Unable to send keys ‘’ to object ‘Folder/p_text’”.

The object itself can be found using a VerifyElementPresent keyword just before, so I believe the issue is that Katalon is unable to send keys to a non-input-type test object.


#6

Almost correct. It’s not that Katalon can’t send keys to a particular type of element in the DOM. The problem is actually that Katalon’s sendKeys() method cant handle non-character keys.

That’s why I suggested using Selenium instead:

WebElement element = WebUiCommonHelper.findWebElement(findTestObject('path/to/test/object'))
element.sendKeys(Keys.chord(Keys.CONTROL, "a"))

#7

If Katalon cannot handle non-character keys, why does the sendKeys() method allow for the selection of “Keys” as the value type of the parameter?

Thanks for the clarification. I am not familiar with Selenium itself. This is my new code.

import org.openqa.selenium.WebElement
import com.kms.katalon.core.webui.common.WebUiCommonHelper

WebElement element = WebUiCommonHelper.findWebElement(findTestObject(‘Folder/p_text’), 3)
element.sendKeys(Keys.chord(Keys.CONTROL, “a”))

This results in the error:
org.openqa.selenium.ElementNotInteractableException: element not interactable
(Session info: chrome=75.0.3770.100)
(Driver info: chromedriver=74.0.3729.6 (WARNING: The server did not provide any stacktrace information)

Thank you for your continued assistance on this issue!


#8

Because the implementation is bad. Notice in your error:

“Unable to send keys ‘’ to object ‘Folder/p_text’”

The invalid  characters? It’s because the ctrl key cannot be converted into a set of characters, which is what that implementation tries to do (for whatever reason). There have been other topics that point out this problem, but no fixes yet :frowning:

Can you share a screenshot of the HTML for the text you are trying to highlight, as well as the ‘Folder/p_text’ test object?


#9

Hmmm I am seeing the same problem as you, regardless of Katalon vs Selenium. I think you are also in fact correct with “unable to send keys to a non-input” element. Let me look around a bit.


#10

Another idea: Does the menu appear if you double-click and/or simply hover on the text? If so, you can replicate these much easier than trying to “click and drag”.


#11

Brandon, here is an example of my use case.

You have some text on the page.
<p> Some text about something that contains something, such as Company XYZ, which is located in Townville, CA. </p>
You want to select the text “Company XYZ”, right click, and choose “create as object” from the custom context menu. This then creates an object with the text “Company XYZ”. You might also want to select “Townville, CA” and add it to the existing “Company XYZ” object as an additional property.


#12

I don’t know that there’s any way to select a specific a substring of a text node, which sounds like what you’re getting at. It would be possible if it looked something like:

<p> Some text about something that contains something, such as <someothertag>Company XYZ</someothertag>, which is located in Townville, CA. <p>


#13

Once the substring is created as an object, it is put inside a span with a certain class.
<p> Some text about something that contains something, such as <span class="highlight">Company XYZ</span>, which is located in Townville, CA. <p>
From there, I can just click anywhere on the substring to open the menu.
However, before the substring is made into an object, the application does not know it is special relative to any other substring in the text.


#14

Yep, exactly. I can’t offer any good solutions to that problem. There’s no way (that I know of) to select that substring relative to the entire text node. You may need to research outside of Katalon forums (if you haven’t already).


#15

I appreciate your patience in working through this with me. If I find a solution else where, I’ll post it here.


#16

I’m in total agreement with @Brandon_Hein here.

However, if I was expected to test this AUT functionality, I would explain to my management that “teaching” an automation user (i.e. Katalon) to do what is very easy for a human user to do is sometimes extremely difficult. This is one of those scenarios. Humans can see what they’re doing. Your automation user cannot. Human users (mostly) are dexterous, automation users are only as dexterous as you can teach them in your code. Therefore…

This is one scenario where I would offer (to management) the idea of automating calls to the JavaScript code that handles the selection and clicking of menus to create the Company XYZ objects. When you watch the test, of course, you won’t see much activity since your code will be executing the JS behind the scenes, so to speak. The test is testing the outcome - i.e. "was the object created correctly?"

You might phrase your proposal something like this:

"Since the test user is blind, is it ok if I perform an invisible test that proves the outcome?"