In my automation script I have a sentence - "when will my account be ready?". From this sentence I want to select the word "account". So basically I want to highlight that text and then right click on it. I am stuck at highlighting the text "account" using automation tool playwright.
Page element looks like this.
<div class="line-text">when will may account be ready</div>
After trying many things, below code worked for me. Basically the word I was trying to select, didn't have any tag around it so was hard to select that word. I used JavaScript first to select the text and then right clicked using playwright.
// element handle of a complete sentence
const elementHandle = await this.getMessageByText(messageText);
// below code selects the given word from the line. text is the word I want to //select
await elementHandle.evaluate((element, text) => {
const selection = window.getSelection();
const content = element.innerText;
const range = document.createRange();
range.setStart(element.childNodes[0], content.indexOf(text));
range.setEnd(element.childNodes[0], content.indexOf(text) + text.length);
selection.removeAllRanges();
selection.addRange(range);
}, textToMask);
await this.click(SELECTORS.messageBodyTextelementHandle, { button: 'right' });
Related
I'm rolling my own generic wysiwyg editor but Im stuck selecting some text. I'm using a div with contenteditable set to true to enter the text into. The problem is I'm using a <var> tag to highlight some text that the user is supposed to delete and rewrite in their own words. When the text inside the <var> tag is clicked it highlights it as I expect but when you hit backspace it only deletes the text and not the tags (<var>). How can I tell the selection to grab a few more characters on each end of the selection so it also deletes the <var> tags? I'm using the following to make the selection happen.
var range = document.createRange();
range.selectNodeContents(elem);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
Placed function on the div's click event.
Selected the <var> tag.
Used .selectNode rather than .selectNodeContents.
Browsers handle it differently though. Some will add <i></i> tags when you enter more text, others don't, but this does remove the <var> tag completely....
var myDiv = document.getElementById("myDiv");
var elem = document.getElementById("myVar");
myDiv.addEventListener("click", function() {
var range = document.createRange();
range.selectNode(elem);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
});
<div contenteditable="true" id="myDiv">
Hello, this<var id="myVar"> is a test</var> of the editor
</div>
How can I get the multiple elements a user has selected from document.getSelection()?
document.getElementById("hello").onclick = function() {
selection = document.getSelection();
if(selection) {
console.log(selection.anchorNode.textContent);
}
};
http://jsbin.com/qisawudofa/edit?html,js,console,output
It seems to only return the element that was selected first, but in my case I need to get all of them.
Alternatively, is there a way to at least know when multiple elements have been selected?
You're probably most interested in the Ranges that make up the selection. Remember the user can make multiple selections all over the page. Each continuous area of selection will get its own instance of Range.
You'll need to iterate over all of the ranges. For each of them you can see where it starts and where it ends:
if (selection) {
for (i=0; i<selection.rangeCount; i++) {
range = selection.getRangeAt(i);
if (range) {
console.log(range.startContainer);
console.log(range.endContainer);
}
}
}
But for the example described in your code you'll need to consider two more things:
Only if the user very accurately selects a paragraph will you get the paragraph's node in startContainer. They might start their start selection even one character after the beginning of the paragraph and then you'll get a text node with the paragraph as its parent.
The Range only gives you the start and the end of the selection for that range. It doesn't directly give you all of the elements in between. So if the user selects more than 2 paragraphs, you'll need to figure out exactly which paragraphs are between start and end yourself.
How can i get the id of the container (say, id of the p or div) of a user selected text?
I want to make list of selected texts, user selects a text then clicks on a button to add to the list.
And when user clicks the text from the list i want to highlight the place where original selection was made.
I need the id of the container because the selected text may not be unique and appear multiple times in the document.
i get the selected text like this Return HTML from a user-selected text
Here is one way it can be achieved cross browser (untested)
var getSelectionContainer = function() {
if (document.selection){ // IE
return document.selection.createRange().parentElement();
}
var select = window.getSelection();
if (select.rangeCount > 0) {
return select.getRangeAt(0).startContainer.parentNode;
}
};
Demo
(Select some text before 5 Seconds then look in the console)
Links
MDN window.getSelection
MDN selection.getRangeAt
MDN range.startContainer
MDN selection.rangeCount
window.getSelection().anchorNode - Gives you the DOM element where the selection started
window.getSelection().focusNode - Gives you the DOM element where the selection ended
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Selection?redirectlocale=en-US&redirectslug=DOM%2FSelection
I have some html text i.e.
This is line1
I can get the initial user selection using window.getSelection() assume it is 'This'. On a click of a button, I like the user selection to move to the next word i.e. 'is'. How can I do this? I currently have the following code which does not work:
function myFunction()
{
var selection=window.getSelection();
selection.collapse(selection.focusNode, 0);
selection.modify("move","forward","word");
selection.extend(selection.focusNode, selection.focusOffSet);
}
and this is't good for me, because even the earlier word stays selected
var selection = window.getSelection();
selection.modify("extend", "forward", "word");
Is it possible to detect what text has been selected in a text area using Javascript? I'm looking to show the user controls only when they have selected text
I've written a cross-browser function for getting the text selected in a textarea or text input and after some toing and froing the final version is I think the best one I've seen. I've posted it on Stack Overflow a few times before. Here's one example: Is there an Internet Explorer approved substitute for selectionStart and selectionEnd?
To detect when the user makes a selection in a textarea, you can use the select event:
var textarea = document.getElementById("some_id");
textarea.onselect = function() {
var selection = getInputSelection(textarea);
var selectedText = textarea.value.slice(selection.start, selection.end);
console.log("Selected text: " + selectedText);
};