Skip to content

Improve screenshot comparison for column chart flaky test. #1544

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Improve screenshot comparison for column chart flaky test. #1544

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 37 additions & 12 deletions packages/pluggableWidgets/column-chart-web/e2e/ColumnChart.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,37 +9,62 @@ test.describe("column-chart-web", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/");
await page.waitForLoadState("networkidle");
// Disable CSS animations and transitions for stability
await page.addStyleTag({ content: `* { transition: none !important; animation: none !important; }` });
// Wait for all fonts to be loaded
await page.evaluate(async () => {
if (typeof document !== "undefined" && document.fonts) {
await document.fonts.ready;
}
});
});

async function stableScreenshot(locator, screenshotName) {
await locator.scrollIntoViewIfNeeded();
await expect(locator).toBeVisible({ timeout: 10000 });
// Wait for all images to load
await locator.evaluate(async el => {
const images = el.querySelectorAll("img");
await Promise.all(
Array.from(images).map(img => {
if (img.complete) {
return Promise.resolve();
}
return new Promise(resolve => {
img.onload = img.onerror = resolve;
});
})
);
});
// Add a short delay to ensure rendering is complete
await locator.page().waitForTimeout(200);
await expect(locator).toHaveScreenshot(screenshotName, {
animations: "disabled",
fullPage: false
});
}

test.describe("column color", () => {
test("renders column chart with default color and compares with a screenshot baseline", async ({ page }) => {
const defaultColorContainer = page.locator(".mx-name-containerDefaultColor");
await defaultColorContainer.scrollIntoViewIfNeeded();
await expect(defaultColorContainer).toBeVisible({ timeout: 10000 });
await expect(defaultColorContainer).toHaveScreenshot(`columnChartDefaultColor.png`);
await stableScreenshot(defaultColorContainer, `columnChartDefaultColor.png`);
});

test("renders column chart with custom color and compares with a screenshot baseline", async ({ page }) => {
const customColorContainer = page.locator(".mx-name-containerCustomColor");
await customColorContainer.scrollIntoViewIfNeeded();
await expect(customColorContainer).toBeVisible({ timeout: 10000 });
await expect(customColorContainer).toHaveScreenshot(`columnChartCustomColor.png`);
await stableScreenshot(customColorContainer, `columnChartCustomColor.png`);
});
});

test.describe("column format", () => {
test("renders column chart with grouped format and compares with a screenshot baseline", async ({ page }) => {
const groupContainer = page.locator(".mx-name-containerGroup");
await groupContainer.scrollIntoViewIfNeeded();
await expect(groupContainer).toBeVisible({ timeout: 10000 });
await expect(groupContainer).toHaveScreenshot(`columnChartGrouped.png`);
await stableScreenshot(groupContainer, `columnChartGrouped.png`);
});

test("renders column chart with stacked format and compares with a screenshot baseline", async ({ page }) => {
const stackContainer = page.locator(".mx-name-containerStack");
await stackContainer.scrollIntoViewIfNeeded();
await expect(stackContainer).toBeVisible({ timeout: 10000 });
await expect(stackContainer).toHaveScreenshot(`columnChartStacked.png`);
await stableScreenshot(stackContainer, `columnChartStacked.png`);
});
});
});
Loading