Question

我有这个标记：

<body>
  <p>
    Test 1<br/>
    Test 2
  </p>
</body>

现在，我想选择“测试1”，以便能够使用WYSIWIG编辑器来应用某些样式。是否可以选择文本的这一部分？如果不是这样：我将如何选择<p></p>的文本？

Answer 1

需要将样式应用于元素，而不是文本节点。考虑到这一点，您将无法轻松地将更改仅应用于Test 1文本。

为使事情变得简单，您可以要求开发人员在要突出显示的文本周围包裹一些<span>标签，然后将其更改为元素级别。

我敢肯定，有一些可怕的JavaScript技巧可以将文本变成元素并设置其样式，但是我真的建议您不要走这条路。

Answer 2

这是将文本节点加粗的js脚本解决方案。

首先让我展示如何在js中执行此操作（此处使用chrome devtools控制台进行了解）。然后我们可以将其移植到硒中

// get the text node that you want to bold
var textNode = $x('//p/text()[1]')[0];
// create a bold element
var boldEle = document.createElement('b');
// copy the text from text node to boldEle
boldEle.innerText = textNode.nodeValue;
// place the boldEle before the current text which you want to bold
textNode.parentElement.insertBefore(boldEle,textNode.parentElement.childNodes[0]);
// remove the original textNode
textNode.remove();

截屏： Chrome控制台。

现在将其转换为函数，并从硒中获取它。

Python：

jsFunction = """window.boldTextNode =function(parentXpath,textPosition){
                // get the text node that you want to bold
                var parent = arguments[0];
                var textPosition = arguments[1];
                var txtPosition = 0;
                var child = parent.firstChild;debugger;
                while(child) {
                  if (child.nodeType === 3){                        
                    if (txtPosition===(textPosition-1)){
                      var textNode = child;                
                      break;
                    }}else{txtPosition+=1;}
                  child = child.nextSibling;
                }
                // create a bold element
                var boldEle = document.createElement('b');
                // copy the text from text node to boldEle
                boldEle.innerText = textNode.nodeValue;
                // place the boldEle before the current text which you want to bold
                textNode.parentElement.insertBefore(boldEle,textNode.parentElement.childNodes[0]);
                // remove the original textNode
                textNode.remove();}
            """
# load the function so that you can call where ever you want
driver.execute_script(jsFunction)

# get the parent element
ele = driver.find_element_by_xpath("//p")
# now bold the text using the js function
driver.execute_script("boldTextNode(arguments[0],arguments[1]);",ele,1)

Answer 3

使用IJavaScriptExecutor.ExecuteScript，这是可以实现的（元素是包含文本的IWebElement，值是应选择/突出显示的文本部分）：

        IJavaScriptExecutor js = driver as IJavaScriptExecutor;
        js.ExecuteScript("var elem = arguments[0];" +
                         "var searchText = arguments[1];" +
                         "var selection = window.getSelection();" +
                         "var range = document.createRange();" +
                         "if (elem.innerText === searchText) {" +
                           "range.selectNode(elem);" +
                         "}" +
                         "else {" +
                           "var textNode;" +
                           "for (var i = 0; i < elem.childNodes.length; i++) { var node = elem.childNodes[i]; if (node.nodeType === Node.TEXT_NODE && node.nodeValue.indexOf(searchText) >= 0) { textNode = node; } }" +
                           "var startIndex = textNode.nodeValue.indexOf(searchText);" +
                           "var endIndex = startIndex + searchText.length;" +
                           "range.setStart(textNode, startIndex);" +
                           "range.setEnd(textNode, endIndex);" +
                         "}" +
                         "selection.removeAllRanges();" +
                         "selection.addRange(range);", elem, value);

使用WebDriver在p-Tag中选择/突出显示/标记部分文本

3 个答案: