hover on a point in highcharts graph using playwright and typescript

Question

I am trying to automate hovering on a graph point in highcharts. I succeeded to isolate the point element in the web console using an SVG xpath with this code-

     await page.hover(
    "//*[local-name()='svg']//*[name()='g' and @class='highcharts-markers highcharts-series-1 highcharts-spline-series highcharts-tracker']//*[name()='path'][4])[2]"
     );

but received this error-

  page.hover: DOMException: Failed to execute 'evaluate' on 'Document': The string './/*[local-name()='svg']//*[name()='g' and @class='highcharts-markers highcharts-series-1 highcharts-spline-series highcharts-tracker']//*[name()='path'][4])[2]' is not a valid XPath expression.

Working with playwright and typescript. Will be happy also to hear other possible solutions for hovering highcharts. Below you can find the element's html info. Thanks!

element's html

Answer 1

Definitely you'll need Playwright's page.locator() since this method is really helpful for task like this.
I prefer not to use XPath method since the syntax format is ugly and not reliable.

const pathLocator = page.locator('svg > g[class="highcharts-markers highcharts-series-1 highcharts-spline-series highcharts-tracker"] > path')
await pathLocator.nth(4).hover()

Don't forget to select this solution as the right answer if you find this is helpful and correct.

Answer 2

After digging more online I succeded... here is the solution for the community-

   import { test, expect } from '@playwright/test';
import helper from "../../../shared/helper";
import { LoginPage } from '../../pages/login.pages';



test('click on each column in highcarts', async ({ page }) => {
    test.setTimeout(180000);
    const {url, emailInput, passwordInput, loginButton} = helper.loginPage;
    await page.goto(url);
    await page.fill(emailInput, helper.users.automationUser.email);
    await page.fill(passwordInput, helper.users.automationUser.password);
    await page.click(loginButton);
    await page.waitForNavigation({ url: helper.companiesPage.url });
    await page.goto("https://dview2-dev.3dsignals.io/Samson/reports/idle_classification_report");
    await page.waitForTimeout(2000);
    await page.setViewportSize({ width: 1920, height: 1080 })

    const elementsCount = await page.$$eval("(//*[local-name()='svg']//*[name()='g' and @class='highcharts-series-group'])[3]//*[name()='rect']", (el) => el.length);
    for (var index= 0; index < elementsCount ; index++) {
            await page.locator("(//*[local-name()='svg']//*[name()='g' and @class='highcharts-series-group'])[3]//*[name()='rect'] >> nth=" + index).hover();
            await page.waitForTimeout(2000);

    }        
});

Good luck to everyone!