99 lines
4.1 KiB
JavaScript
99 lines
4.1 KiB
JavaScript
import { test, expect } from '@playwright/test';
|
|
|
|
test('Visualization-Drag&Drop Page', async ({ page }) => {
|
|
test.setTimeout(60000); // Increase timeout if needed
|
|
|
|
// Widget locators
|
|
const BarChart = page.locator("//div[@class='chart chart-1']");
|
|
const DotGraph = page.locator("//div[@class='chart chart-2']");
|
|
const PieChart = page.locator("//div[@class='chart chart-3']");
|
|
const DoughnutChart = page.locator("//div[@class='chart chart-4']");
|
|
const SpieChart = page.locator("//div[@class='chart chart-5']");
|
|
|
|
// Use nth() to resolve ambiguity for duplicate text elements
|
|
const ProgressBar1 = page.getByText("Widget 7").nth(0);
|
|
const ProgressBar2 = page.getByText("Widget 8").nth(0);
|
|
|
|
// Panel locators
|
|
const LeftPanel = page.locator("//div[@class='panel left-panel absolute false']");
|
|
const BottomPanel = page.locator("//div[@class='panel bottom-panel absolute false']");
|
|
const TopPanel = page.locator("//div[@class='panel top-panel absolute false']");
|
|
const RightPanel = page.locator("//div[@class='panel right-panel absolute false']");
|
|
|
|
// Navigate to the application and log in
|
|
await page.goto('http://185.100.212.76:8200');
|
|
await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
|
|
await page.getByPlaceholder('Password').fill('123456');
|
|
await page.waitForSelector('button:has-text("Continue")', { timeout: 10000 });
|
|
await page.getByRole('button', { name: 'Continue', exact: true }).click();
|
|
await page.waitForTimeout(10000); // Wait for the page to load
|
|
await page.getByText('Visualization').click();
|
|
await page.getByText('Zone 1').click();
|
|
|
|
// Activate the left panel
|
|
await page.getByTitle('Activate left panel').click();
|
|
|
|
// Maximize the browser window to full screen
|
|
await page.setViewportSize({ width: 1920, height: 1080 }); // Full HD resolution
|
|
|
|
// Debugging: Take a screenshot before drag-and-drop
|
|
await page.screenshot({ path: 'before-drag.png' });
|
|
|
|
// Perform drag-and-drop operations
|
|
try {
|
|
// Drag widgets to the left panel
|
|
await BarChart.waitFor({ state: 'visible' });
|
|
await LeftPanel.waitFor({ state: 'visible' });
|
|
await BarChart.dragTo(LeftPanel);
|
|
await DotGraph.dragTo(LeftPanel);
|
|
await PieChart.dragTo(LeftPanel);
|
|
await DoughnutChart.dragTo(LeftPanel);
|
|
|
|
// Activate the right panel and drag widgets
|
|
await page.getByTitle('Activate right panel').click();
|
|
await RightPanel.waitFor({ state: 'visible' });
|
|
await DoughnutChart.dragTo(RightPanel);
|
|
await SpieChart.dragTo(RightPanel);
|
|
await ProgressBar1.dragTo(RightPanel);
|
|
await ProgressBar2.dragTo(RightPanel);
|
|
|
|
// Activate the bottom panel and drag widgets
|
|
await page.getByTitle('Activate bottom panel').click();
|
|
await BottomPanel.waitFor({ state: 'visible' });
|
|
await ProgressBar2.dragTo(BottomPanel);
|
|
await PieChart.dragTo(BottomPanel);
|
|
await DotGraph.dragTo(BottomPanel);
|
|
await BarChart.dragTo(BottomPanel);
|
|
|
|
// Activate the top panel and drag widgets
|
|
await page.getByTitle('Activate top panel').click();
|
|
await TopPanel.waitFor({ state: 'visible' });
|
|
await DoughnutChart.dragTo(TopPanel);
|
|
await SpieChart.dragTo(TopPanel);
|
|
await ProgressBar1.dragTo(TopPanel);
|
|
await ProgressBar2.dragTo(TopPanel);
|
|
} catch (error) {
|
|
console.error('Drag-and-drop operation failed:', error.message);
|
|
throw error; // Rethrow the error to fail the test
|
|
}
|
|
|
|
// Wait for panels to update dynamically
|
|
await page.waitForFunction(() => {
|
|
const leftPanel = document.querySelector('.left-panel');
|
|
const rightPanel = document.querySelector('.right-panel');
|
|
const bottomPanel = document.querySelector('.bottom-panel');
|
|
const topPanel = document.querySelector('.top-panel');
|
|
return (
|
|
leftPanel.children.length > 0 &&
|
|
rightPanel.children.length > 0 &&
|
|
bottomPanel.children.length > 0 &&
|
|
topPanel.children.length > 0
|
|
);
|
|
});
|
|
|
|
// Debugging: Take a screenshot after drag-and-drop
|
|
await page.screenshot({ path: 'after-drag.png' });
|
|
|
|
console.log('Drag-and-drop completed successfully.');
|
|
});
|