Selenium Java - moveToElement does not work in headless but works in chrome

Question

I have a canvas element and I am trying to mouse hover on the Canvas element with below code. It works perfectly fine in Chrome. However in headless browser, there is no error at moveToElement step but mouse hover has not been performed at the offset I wanted. I even set the window size for which the offsets work, still it is not working as expected


        Dimension bd = new Dimension(1296, 696);
        driver.manage().window().setSize(bd);
        canvasElementDimensions = driver.manage().window().getSize().toString();
        WebElement canvas = driver.findElement(By.xpath(canvasElementXpath));
        
        Dimension canvasDimension = canvas.getSize();    
        int canvas_center_x = canvasDimension.getWidth()/2;
        int canvas_center_y = canvasDimension.getHeight()/2;
        
        int mouse_hover_x = (canvas_center_x/-9)*2;
        canvasElementXOffset = String.valueOf(mouse_hover_x);
        int mouse_hover_y = (canvas_center_y/-9)*2;
        canvasElementYOffset = String.valueOf(mouse_hover_y);
        
        Actions action = new Actions(driver);
        action.moveToElement(canvas, mouse_hover_x, mouse_hover_y)
        .perform();

Please show us what you set to `ChromeOptions opts = new ChromeOptions();` ? — Prophet, Aug 18 '21 at 07:44
try taking a screenshot right after performing the move in order to confirm whether the page in headless really looks like it should — Marek, Aug 18 '21 at 08:08
@Marek I took the screenshot and it is looks the same. There is no change in the UI — Nirupama, Aug 18 '21 at 08:28
@Prophet I am using default settings and I have not set ChromeOptions — Nirupama, Aug 18 '21 at 09:29

score 0 · Answer 1 · answered Aug 18 '21 at 08:40

0

I'm not sure where exactly you want to move - either to a specific position above the canvas element or just to the middle of the element. If the position above the canvas doesn't matter to you, I'd remove all the offset computations and use just this:

Actions action = new Actions(driver);
action.moveToElement(canvas).perform();

since based on the JavaDoc, this will move the pointer to the middle of the element:

moveToElement(WebElement toElement)

Moves the mouse to the middle of the element.

answered Aug 18 '21 at 08:40

Marek

438
5
10

The canvas element is a doughnut chart and I need to mouse hover on the chart to view the tool tip. If I mouse on the center of the canvas element it does not display the tool tip. So in my code I am trying to mouse hover using offset values moveToElement(canvas, mouse_hover_x, mouse_hover_y) – Nirupama Aug 18 '21 at 09:26

Tal Angel · Answer 2 · 2021-08-18T12:09:32.823

0

In headless mode you don't really have UI elements. All the elements are virtual so they don't have a real location and size.

Try to find the element by:

ID
CSS
Xpath

After you find the element just do:

webElement.click();

Or:

new Actions(browser).moveToElement(element, 0, 0).click().build().perform();

If you need to hover and then click, hover code:

 Actions builder = new Actions(browser);
 builder.moveToElement(lastFoundElement).build().perform();

Find the next element in the tool tip by Xpath or CSS and then click on it.

edited Aug 18 '21 at 12:09

answered Aug 18 '21 at 09:45

Tal Angel

1,301
3
29
63

I have tried this and it is not working. I guess moveToElement(element, 0, 0) will move to the center of the element. But in my case this will not work. I need to mouse hover on an offset to view the tool tip – Nirupama Aug 18 '21 at 10:22
For this you need to do clickAfterHover, look at my updated answer – Tal Angel Aug 18 '21 at 12:05

score 0 · Answer 3 · answered Aug 18 '21 at 11:00

In order to work in headless mode you have to set several settings in ChromeOptions.
Try this setting before initializing your browser driver:

ChromeOptions opts = new ChromeOptions();
opts.setExperimentalOption("prefs", prefs);
opts.addArguments("--headless", "--disable-gpu", "--window-size=1920,1080","--ignore-certificate-errors","--no-sandbox", "--disable-dev-shm-usage");

driver = new ChromeDriver(opts);

Selenium Java - moveToElement does not work in headless but works in chrome

3 Answers3

Linked