269 lines
11 KiB
JavaScript
269 lines
11 KiB
JavaScript
import { test, expect } from '@playwright/test';
|
|
import path from 'path';
|
|
import fs from 'fs';
|
|
|
|
const visualizationTests = [
|
|
{ name: 'pztour', viewport: { width: 1440, height: 900, name: 'laptop-hd' } },
|
|
];
|
|
|
|
for (const vis of visualizationTests) {
|
|
test.describe(`Visualization-Drag&Drop Page - ${vis.name}`, () => {
|
|
test(`Drag & Drop Widgets, Save Template, Apply Template, and Remove Widgets in ${vis.name}`, async ({ page }) => {
|
|
// Increase timeout for the whole test
|
|
test.setTimeout(600000); // 10 minutes
|
|
page.setDefaultTimeout(60000);
|
|
|
|
// Create screenshots directory if it doesn't exist
|
|
const screenshotsDir = path.join(process.cwd(), `screenshots/visualization2D/${vis.viewport.name}`);
|
|
if (!fs.existsSync(screenshotsDir)) {
|
|
fs.mkdirSync(screenshotsDir, { recursive: true });
|
|
}
|
|
|
|
// Widget locators
|
|
const widgets = [
|
|
page.locator('.chart.chart-1'),
|
|
page.locator('.chart.chart-2'),
|
|
page.locator('.chart.chart-3'),
|
|
page.locator('.chart.chart-4'),
|
|
page.locator('.chart.chart-5'),
|
|
page.getByText('Widget 7').first(),
|
|
page.getByText('Widget 8').first(),
|
|
];
|
|
|
|
// Panel locators
|
|
const panels = {
|
|
left: page.locator('.left-panel.panel'),
|
|
bottom: page.locator('.bottom-panel.panel'),
|
|
top: page.locator('.top-panel.panel'),
|
|
right: page.locator('.right-panel.panel'),
|
|
};
|
|
|
|
// Remove button locators
|
|
const removeButtons = {
|
|
top: page.getByTitle('Remove all items and close top panel'),
|
|
right: page.getByTitle('Remove all items and close right panel'),
|
|
bottom: page.getByTitle('Remove all items and close bottom panel'),
|
|
left: page.getByTitle('Remove all items and close left panel'),
|
|
};
|
|
|
|
// Helper function to activate panel and wait for visibility
|
|
const activateAndCheckPanel = async (panelLocator, activateButtonTitle) => {
|
|
console.log(`Activating ${activateButtonTitle}...`);
|
|
try {
|
|
console.log(`Waiting for ${activateButtonTitle} button to be visible...`);
|
|
const activationButton = page.locator(`[title="${activateButtonTitle}"]`);
|
|
const isButtonVisible = await activationButton.isVisible();
|
|
if (!isButtonVisible) {
|
|
console.warn(`${activateButtonTitle} button not visible, skipping activation.`);
|
|
return;
|
|
}
|
|
await activationButton.click();
|
|
await expect(panelLocator).toBeVisible({ timeout: 10000 });
|
|
} catch (error) {
|
|
console.error(`Failed to activate panel: ${activateButtonTitle}`);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
// Helper function to drag widgets with retries
|
|
const dragWithRetry = async (source, target, retries = 3) => {
|
|
for (let i = 0; i < retries; i++) {
|
|
try {
|
|
console.log(`Dragging widget to panel (attempt ${i + 1})...`);
|
|
await source.dragTo(target, { force: true });
|
|
return;
|
|
} catch (error) {
|
|
if (i === retries - 1) throw error;
|
|
console.warn(`Drag failed (attempt ${i + 1}), retrying...`);
|
|
await new Promise(res => setTimeout(res, 1000));
|
|
}
|
|
}
|
|
};
|
|
|
|
// Helper function to remove all items from panels
|
|
const removeAllItemsFromPanels = async (zone, panelsToCheck) => {
|
|
console.log(`Removing all items from panels in ${zone}...`);
|
|
let panelsFound = false;
|
|
|
|
for (const panelName of panelsToCheck) {
|
|
try {
|
|
console.log(`Checking for ${panelName} panel in ${zone}...`);
|
|
const isPanelVisible = await panels[panelName].isVisible();
|
|
if (isPanelVisible) {
|
|
panelsFound = true;
|
|
console.log(`${panelName} panel found in ${zone}, proceeding with removal.`);
|
|
await removeButtons[panelName].click();
|
|
await page.waitForTimeout(2000);
|
|
} else {
|
|
console.warn(`${panelName} panel not visible in ${zone}, skipping removal.`);
|
|
}
|
|
} catch (error) {
|
|
console.warn(`Failed to remove items from ${panelName} panel in ${zone}:`, error.message);
|
|
}
|
|
}
|
|
|
|
if (!panelsFound) {
|
|
console.log(`No panels found in ${zone}, skipping removal.`);
|
|
}
|
|
};
|
|
|
|
// Navigate to app
|
|
console.log(`Navigating to app for ${vis.name}...`);
|
|
await page.goto('http://185.100.212.76:8200');
|
|
await page.getByPlaceholder('Email').fill('ramkumar@testdomin.local');
|
|
await page.getByPlaceholder('Password').fill('123456');
|
|
await page.getByRole('button', { name: 'Continue', exact: true }).click();
|
|
await expect(page.getByText('Visualization')).toBeVisible({ timeout: 20000 });
|
|
|
|
// Set viewport size and toggle full-screen mode
|
|
console.log('Setting viewport size and toggling full-screen mode...');
|
|
await page.setViewportSize({
|
|
width: vis.viewport.width,
|
|
height: vis.viewport.height,
|
|
});
|
|
await page.evaluate(() => document.documentElement.requestFullscreen());
|
|
|
|
// ------------------------
|
|
// **CASE 1: Create Template 1 in pztour**
|
|
console.log('Creating Template 1 in pztour...');
|
|
await page.getByText('Visualization').click();
|
|
await page.getByText('pztour').click();
|
|
|
|
// Drag widgets into all panels
|
|
const allPanels = ['left', 'right', 'bottom', 'top'];
|
|
for (const panelName of allPanels) {
|
|
await activateAndCheckPanel(panels[panelName], `Activate ${panelName} panel`);
|
|
for (const widget of widgets) {
|
|
await dragWithRetry(widget, panels[panelName]);
|
|
}
|
|
}
|
|
|
|
// Save Template 1
|
|
console.log('Saving Template 1...');
|
|
await page.getByRole('button', { name: /save template/i }).click();
|
|
await expect(page.getByRole('button', { name: /save template/i })).toBeVisible();
|
|
|
|
// ------------------------
|
|
// **CASE 2: Create Template 2 in Zone 2**
|
|
console.log('Creating Template 2 in Zone 2...');
|
|
await page.getByText('Visualization').click();
|
|
await page.getByText('Zone 2').click();
|
|
|
|
// Activate panels in Zone 2
|
|
const panelsForCase2 = ['top', 'bottom', 'left'];
|
|
for (const panelName of panelsForCase2) {
|
|
await activateAndCheckPanel(panels[panelName], `Activate ${panelName} panel`);
|
|
}
|
|
|
|
// Drag widgets into panels
|
|
for (const panelName of panelsForCase2) {
|
|
for (const widget of widgets) {
|
|
await dragWithRetry(widget, panels[panelName]);
|
|
}
|
|
}
|
|
|
|
// Save Template 2
|
|
console.log('Saving Template 2...');
|
|
await page.getByRole('button', { name: /save template/i }).click();
|
|
await expect(page.getByRole('button', { name: /save template/i })).toBeVisible();
|
|
|
|
// ------------------------
|
|
// **CASE 3: Create Template 3 in Zone 3**
|
|
console.log('Creating Template 3 in Zone 3...');
|
|
await page.getByText('Visualization').click();
|
|
await page.getByText('Zone 3').click();
|
|
|
|
// Activate panels in Zone 3
|
|
const panelsForCase3 = ['top', 'right', 'bottom'];
|
|
for (const panelName of panelsForCase3) {
|
|
await activateAndCheckPanel(panels[panelName], `Activate ${panelName} panel`);
|
|
}
|
|
|
|
// Drag widgets into panels (skip bottom)
|
|
for (const panelName of panelsForCase3) {
|
|
if (panelName !== 'bottom') {
|
|
for (const widget of widgets) {
|
|
await dragWithRetry(widget, panels[panelName]);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Save Template 3
|
|
console.log('Saving Template 3...');
|
|
await page.getByRole('button', { name: /save template/i }).click();
|
|
await expect(page.getByRole('button', { name: /save template/i })).toBeVisible();
|
|
|
|
// ------------------------
|
|
// **Apply Templates**
|
|
console.log('Applying Templates...');
|
|
await page.getByText('Templates', { exact: true }).click();
|
|
|
|
// Apply Template 1 to Zone 4
|
|
console.log('Applying Template 1 to Zone 4...');
|
|
await page.getByText('Zone 4').click();
|
|
await page.locator('.template-item', { hasText: 'Template 1' }).click();
|
|
await page.waitForTimeout(2000);
|
|
|
|
// Apply Template 2 to Zone 5
|
|
console.log('Applying Template 2 to Zone 5...');
|
|
await page.getByText('Zone 5').click();
|
|
await page.locator('.template-item', { hasText: 'Template 2' }).click();
|
|
await page.waitForTimeout(2000);
|
|
|
|
// Apply Template 3 to Zone 6
|
|
console.log('Applying Template 3 to Zone 6...');
|
|
await page.getByText('Zone 6').click();
|
|
await page.locator('.template-item', { hasText: 'Template 3' }).click();
|
|
await page.waitForTimeout(2000);
|
|
|
|
// ------------------------
|
|
// **Delete Zones**
|
|
console.log('Deleting Zones...');
|
|
const zonesToDelete = [
|
|
{ zone: 'pztour', panelsToCheck: allPanels },
|
|
{ zone: 'Zone 4', panelsToCheck: allPanels },
|
|
{ zone: 'Zone 2', panelsToCheck: panelsForCase2 },
|
|
{ zone: 'Zone 5', panelsToCheck: panelsForCase2 },
|
|
{ zone: 'Zone 3', panelsToCheck: panelsForCase3 },
|
|
{ zone: 'Zone 6', panelsToCheck: panelsForCase3 },
|
|
];
|
|
|
|
for (const { zone, panelsToCheck } of zonesToDelete) {
|
|
console.log(`Navigating to Visualization > ${zone}...`);
|
|
await page.getByText('Visualization').click();
|
|
await page.getByText(zone).click();
|
|
|
|
// Remove all items from panels
|
|
await removeAllItemsFromPanels(zone, panelsToCheck);
|
|
}
|
|
|
|
// ------------------------
|
|
// **Delete Templates**
|
|
console.log('Deleting Templates...');
|
|
await page.getByText('Templates', { exact: true }).click();
|
|
|
|
// Wait for templates to load
|
|
await page.waitForSelector('.template-details', { timeout: 20000 });
|
|
|
|
// Delete Template 1
|
|
console.log('Deleting Template 1...');
|
|
const template1DeleteButton = page.locator('.template-details:has(.template-name > .input-value:text("Template 1")) #template-delete-button');
|
|
await template1DeleteButton.waitFor({ state: 'visible', timeout: 20000 });
|
|
await template1DeleteButton.click();
|
|
|
|
// Delete Template 2
|
|
console.log('Deleting Template 2...');
|
|
const template2DeleteButton = page.locator('.template-details:has(.template-name > .input-value:text("Template 2")) #template-delete-button');
|
|
await template2DeleteButton.waitFor({ state: 'visible', timeout: 20000 });
|
|
await template2DeleteButton.click();
|
|
|
|
// Delete Template 3
|
|
console.log('Deleting Template 3...');
|
|
const template3DeleteButton = page.locator('.template-details:has(.template-name > .input-value:text("Template 3")) #template-delete-button');
|
|
await template3DeleteButton.waitFor({ state: 'visible', timeout: 20000 });
|
|
await template3DeleteButton.click();
|
|
|
|
console.log(`Test for ${vis.name} completed successfully.`);
|
|
});
|
|
});
|
|
} |