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

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();`);

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.

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