Problem with executing javascript code to do hover event over xpath element in selenium webdriver

fotrenc
March 27, 2024
88 views
2 votes
3 Answers

I try to trigger hover event over an element declared by xpath statement in selenium webdriver:

((JavascriptExecutor) driver).executeScript("$('(//span[@class='attribute-square-container'])[2]').hover();");

but I’m receiving:

org.openqa.selenium.JavascriptException: SyntaxError: missing ) after argument list

What is incorrect in above line?

I changed code a litle bit:

String script = "$(`#image-squares-8 > li:nth-child(2) > label > span > span`).hover();";

((JavascriptExecutor) driver).executeScript(script);

It now executes without exception but it do nothing, namely tooltip window do not appear over small image.

Is it something wrong with this code?

I tried code from @JeffC but it does not work on page demo.nopcommerce.com/nike-floral-roshe-customized-running-shoes

I would like to trigger mouseover event to show tooltip over "print" images but it does not work in javascript and firefox (with chrome it works).
With firefox I received:

org.openqa.selenium.interactions.MoveTargetOutOfBoundsException: Move target (807, 750) is out of bounds of viewport dimensions (1536, 731)

Solution

Such code works with Firefox also:

    public void moveToElemenent(WebElement element) {
        Capabilities cap = ((RemoteWebDriver) driver).getCapabilities();

        if(cap.getBrowserName().startsWith("firefox")) {
            ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);
        }

        Actions action = new Actions(driver);
        action.moveToElement(element).perform();
    }

Answers

- Akshay
- March 23, 2024 at 4:17 pm
- 0 votes
0
It is because the first ' is being closed at ...@class=' instead of at ...container'

Maybe try backtick- (I am not very familiar with Selenium, but for Javascript, this should work.)
```
((JavascriptExecutor) driver).executeScript(`$((//span[@class='attribute-square-container'])[2]").hover();`);
```
Login or Signup to reply.

- Dowjones
- March 23, 2024 at 5:39 pm
- 0 votes
0
It seems the primary issue is with the use of XPath inside a jQuery selector, which isn’t directly supported.

Here’s the problematic line:
```
((JavascriptExecutor) driver).executeScript("$('(//span[@class='attribute-square-container'])[2]').hover();");
```
The jQuery $() function doesn’t understand XPath syntax directly. It uses CSS selectors for identifying elements. Additionally, your approach to triggering a hover event via jQuery’s .hover() might not work as expected since .hover() is designed to attach event handlers for mouseenter and mouseleave events, rather than triggering those events directly.

To fix the issue, you have a couple of options:

Option 1: Use CSS Selectors with jQuery (If Applicable)

If it’s possible to select your element using CSS selectors instead of XPath, you can modify your code to use a CSS selector. For instance, if you’re trying to hover over the second element with the class attribute-square-container, your code in jQuery syntax (assuming you can use a CSS selector) would look like:
```
((JavascriptExecutor) driver).executeScript("$('.attribute-square-container:eq(1)').trigger('mouseover');");
```
This example uses :eq(1) to select the second element (since jQuery is zero-indexed) and .trigger('mouseover') to simulate a mouseover event.

Option 2: Use XPath to Find the Element and Then Simulate Hover

Since you’re using XPath, you may need to stick with Selenium’s way of finding the element and then execute JavaScript to simulate a hover event. Here’s how you can do it:
1. Find the element using Selenium’s XPath.
2. Use JavaScript to trigger a mouseover event on that element.
Here’s how it might look:
```
// Find the element using Selenium
WebElement element = driver.findElement(By.xpath("(//span[@class='attribute-square-container'])[2]"));

// Execute JavaScript to trigger a hover event
String javaScript = "var event = new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }); arguments[0].dispatchEvent(event);";
((JavascriptExecutor) driver).executeScript(javaScript, element);
```
This approach uses Selenium to locate the element via XPath and then uses JavaScript to create and dispatch a mouseover event to simulate hovering over the selected element. This should work around the limitations of trying to mix XPath with jQuery in your original code snippet.
Login or Signup to reply.

- JeffC
- March 23, 2024 at 9:06 pm
- 0 votes
0
To specifically answer your question, the problem is that you have mismatched "s and 's due to too many nestings. You don’t need to use JS code here. Selenium provides the Actions class to handle hovers (and other functionality).

I would make a few suggestions…
1. Use Actions instead of JS. It’s directly supported and much easier to use then trying to debug JS inside of Selenium.
2. I’m assuming you are going to reuse this code so I would put this code into a method that can be called repeatedly. I would write a method that takes a string parameter for the Print name and then hover that Print element.
The method description

We take the parameter, printName, and use it in an XPath to find the Print element, and then use Actions to hover that element.

The method code
```
public static void hoverPrintElement(String printName) {
    String xpath = String.format(String.format("//ul/li[.//div[text()='%s']]/label/span", printName));
    WebElement printElement = new WebDriverWait(driver, Duration.ofSeconds(10))
            .until(ExpectedConditions.visibilityOfElementLocated(By.xpath(xpath)));
    new Actions(driver).moveToElement(printElement).perform();
}
```
Imports
```
import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
```
The script code
```
String url = "https://demo.nopcommerce.com/nike-floral-roshe-customized-running-shoes";
driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get(url);

String print = "Fresh";
hoverPrintElement(print);
# the element has been hovered and the tooltip is now showing
# do stuff
```
Login or Signup to reply.