Vignesh Jayaraman
Vignesh Jayaraman

Reputation: 23

Highlight a text in a web page using Selenium

I need to click and highlight the text either by mouse(click, hold and move) or keyboard (LeftShift Right Arrow) action using Selenium. In the below example I need to highlight the number "1643". In real time we use either mouse or Keyboard to highlight or select the text in similar way we want to select/highlight the text. Please help me on this.

<span>
    #1643 Welcome <span> User!. Please wait... </span>
</span>

private void SelectByMouseAndClickByCharacterPosition(WebDriver driver, String xPathSelector, int startPosition, int endPosition) {
        try {
            Actions actions = new Actions(driver);
            Thread.sleep(1000);
            WebElement element = driver.findElement(By.xpath(xPathSelector));
            actions.moveToElement(element);
            String selectedElementText = element.getText();
            String textToSelect = selectedElementText.substring(startPosition, endPosition);
            String highLightSelector = xPathSelector+"[contains(.,'" + textToSelect + "')]";
            WebElement highlightElement = new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.xpath(highLightSelector)));
            String selec = highlightElement.getText();
            highlightElement.sendKeys(textToSelect);
            highlightElement.click();
            Thread.sleep(2000);
            actions.keyDown(Keys.LEFT_SHIFT);
            for(int i=0;i<textToSelect.length(); i++) {
                actions.keyDown(Keys.ARROW_DOWN);
            }
            actions.keyUp(Keys.LEFT_SHIFT);
            actions.build().perform();
            //actions.clickAndHold().moveByOffset(xcord, ycord);
            //actions.pause(3000);
            Thread.sleep(2000);
            actions.release().perform();
            Thread.sleep(1000);
        } catch (Exception e) {
            // TODO: handle exception
        }

    }

Upvotes: 1

Views: 1933

Answers (1)

Zakaria Shahed
Zakaria Shahed

Reputation: 2707

As i understand your question that you want to highlight one text from the page.

As the easiest way to do it using javascript executor.

  public static void spotlight(WebDriver driver,WebElement element) {
    JavascriptExecutor jsexecute = (JavascriptExecutor) driver;
    jsexecute.executeScript("arguments[0].setAttribute('style', 'background: red; border: 2px solid green;');", element);
}

Now simply highlighted

 public static void main(String[] args) {
         
          driver=new ChromeDriver();
    driver.get("https://www.google.com");
    WebElement searchbar=driver.findElement(By.xpath("//input[@name=\"q\"]"));
    spotlight(driver,searchbar);
    searchbar.sendKeys("Hello World");


    }

Result

enter image description here

Complete program is

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;


public class test {
    WebDriver driver;
    public static void spotlight(WebDriver driver, WebElement element) {
        JavascriptExecutor jsexecute = (JavascriptExecutor) driver;
        jsexecute.executeScript("arguments[0].setAttribute('style', 'background: red; border: 2px solid green;');", element);
    }

    @Test
    public void test(){
        driver=new ChromeDriver();
        driver.get("https://www.google.com");
        WebElement searchbar=driver.findElement(By.xpath("//input[@name=\"q\"]"));
        spotlight(driver,searchbar);
        searchbar.sendKeys("Hello World");
    }
}

Upvotes: 1

Related Questions