Add automation tests to AMCharts widgets

[maayanLayfer]

Question

Hi, We'd like to create automation tests in PlayWright to our widgets we've created in AMCharts. As it seems there's only 1 canvas element.. how can we test elements like tooltips and pie slices?

[Pauan]

You shouldn't be writing unit tests for DOM nodes like the canvas.

Instead you should use the amCharts methods in order to retrieve information about the chart:

import { test, expect } from "@playwright/test";
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";

test('has xy panY', async ({ page }) => {
    await page.goto("./index.html");

    let root = am5.Root.new("chartdiv");

    let chart = root.container.children.push( 
        am5xy.XYChart.new(root, {
            panY: false,
            layout: root.verticalLayout
        }) 
    );

    // Rest of amCharts code...

    // Write unit tests
    await expect(chart.get("panY")).toBe(false);
});

If you want to test the visual look of the chart, you can use screenshot testing:

https://playwright.dev/docs/test-snapshots

This will take a screenshot of the page and will then make sure that the screenshot matches what you expect.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.