Updated Script 17/5/25
This commit is contained in:
@@ -198,7 +198,7 @@ async function simulatePointerClick(page, x, y, button = 'left') {
|
||||
async function setupCanvasAndTools(page, toolSelector) {
|
||||
// 1. Navigate to the application
|
||||
await page.goto('http://185.100.212.76:8200');
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@testdomin.local');
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
|
||||
await page.getByPlaceholder('Password').fill('123456');
|
||||
await page.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ const agvCoordinates = [
|
||||
*/
|
||||
async function loginAndSetup(page) {
|
||||
await page.goto('http://185.100.212.76:8200');
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@testdomin.local');
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
|
||||
await page.getByPlaceholder('Password').fill('123456');
|
||||
await page.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
console.log('Switching to full-screen mode...');
|
||||
|
||||
@@ -70,7 +70,7 @@ test('Create walls after moving canvas', async ({ page }) => {
|
||||
|
||||
// 1. Navigate to the application
|
||||
await page.goto('http://185.100.212.76:8200');
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@testdomin.local');
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
|
||||
await page.getByPlaceholder('Password').fill('123456');
|
||||
await page.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
|
||||
@@ -134,7 +134,7 @@ test('Delete walls after moving canvas', async ({ page }) => {
|
||||
|
||||
// 1. Navigate to the application
|
||||
await page.goto('http://185.100.212.76:8200');
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@testdomin.local');
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
|
||||
await page.getByPlaceholder('Password').fill('123456');
|
||||
await page.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
|
||||
|
||||
@@ -172,7 +172,7 @@ async function loginAndSetup(page) {
|
||||
await page.goto('http://185.100.212.76:8200');
|
||||
|
||||
// Log in
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@testdomin.local');
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
|
||||
await page.getByPlaceholder('Password').fill('123456');
|
||||
await page.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
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.');
|
||||
});
|
||||
148
tests/Visualization2D.spec.js
Normal file
148
tests/Visualization2D.spec.js
Normal file
@@ -0,0 +1,148 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
const visualizationTests = [
|
||||
{ name: 'pztour', viewport: { width: 1440, height: 900, name: 'laptop-hd' } },
|
||||
{ name: 'Zone 2', viewport: { width: 1280, height: 1024, name: 'monitor-std' } },
|
||||
{ name: 'Zone 3', viewport: { width: 1920, height: 1080, name: 'fullhd-tv' } },
|
||||
];
|
||||
|
||||
for (const vis of visualizationTests) {
|
||||
test.describe(`Visualization-Drag&Drop Page - ${vis.name}`, () => {
|
||||
test(`Drag & Drop Widgets in ${vis.name}`, async ({ page }) => {
|
||||
test.setTimeout(120000);
|
||||
page.setDefaultTimeout(60000);
|
||||
|
||||
const screenshotsDir = path.join(process.cwd(), `screenshots/visualization2D/${vis.viewport.name}`);
|
||||
if (!fs.existsSync(screenshotsDir)) {
|
||||
fs.mkdirSync(screenshotsDir, { recursive: true });
|
||||
}
|
||||
|
||||
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(),
|
||||
];
|
||||
|
||||
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'),
|
||||
};
|
||||
|
||||
const buttons = {
|
||||
top: {
|
||||
hide: page.locator('.side-button-container.top >> button#hide-panel-visulization'),
|
||||
lock: page.locator('.side-button-container.top >> button#lock-panel-visulization'),
|
||||
clean: page.locator('.side-button-container.top >> button#clean-panel-visulization'),
|
||||
remove: page.getByTitle('Remove all items and close top panel'),
|
||||
},
|
||||
right: {
|
||||
hide: page.locator('.side-button-container.right >> button#hide-panel-visulization'),
|
||||
lock: page.locator('.side-button-container.right >> button#lock-panel-visulization'),
|
||||
clean: page.locator('.side-button-container.right >> button#clean-panel-visulization'),
|
||||
remove: page.getByTitle('Remove all items and close right panel'),
|
||||
},
|
||||
bottom: {
|
||||
hide: page.locator('.side-button-container.bottom >> button#hide-panel-visulization'),
|
||||
lock: page.locator('.side-button-container.bottom >> button#lock-panel-visulization'),
|
||||
clean: page.locator('.side-button-container.bottom >> button#clean-panel-visulization'),
|
||||
remove: page.getByTitle('Remove all items and close bottom panel'),
|
||||
},
|
||||
left: {
|
||||
hide: page.locator('.side-button-container.left >> button#hide-panel-visulization'),
|
||||
lock: page.locator('.side-button-container.left >> button#lock-panel-visulization'),
|
||||
clean: page.locator('.side-button-container.left >> button#clean-panel-visulization'),
|
||||
remove: page.getByTitle('Remove all items and close left panel'),
|
||||
},
|
||||
};
|
||||
|
||||
const activateAndCheckPanel = async (panelLocator, activateButtonTitle) => {
|
||||
await page.getByTitle(activateButtonTitle).click();
|
||||
await expect(panelLocator).toBeVisible({ timeout: 10000 });
|
||||
};
|
||||
|
||||
const managePanel = async (panelName, panelActions) => {
|
||||
try {
|
||||
await panelActions.hide.click();
|
||||
await panelActions.hide.click();
|
||||
|
||||
await panelActions.lock.click();
|
||||
await panelActions.lock.click();
|
||||
|
||||
await panelActions.clean.click();
|
||||
await panelActions.remove.click();
|
||||
|
||||
await page.screenshot({
|
||||
path: path.join(screenshotsDir, `${vis.name}-${panelName}-after-remove.png`),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(`Error managing panel ${panelName}:`, error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
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 screen size based on the current vis entry
|
||||
await page.setViewportSize({
|
||||
width: vis.viewport.width,
|
||||
height: vis.viewport.height,
|
||||
});
|
||||
|
||||
await page.evaluate(() => document.documentElement.requestFullscreen());
|
||||
|
||||
await page.getByText('Visualization').click();
|
||||
await page.getByText(vis.name).click();
|
||||
|
||||
const panelOrder = ['left', 'right', 'bottom', 'top'];
|
||||
for (const panelName of panelOrder) {
|
||||
await activateAndCheckPanel(panels[panelName], `Activate ${panelName} panel`);
|
||||
for (const widget of widgets) {
|
||||
await dragWithRetry(widget, panels[panelName]);
|
||||
}
|
||||
}
|
||||
|
||||
await page.waitForFunction(() => {
|
||||
return (
|
||||
document.querySelector('.left-panel')?.children.length > 0 &&
|
||||
document.querySelector('.right-panel')?.children.length > 0 &&
|
||||
document.querySelector('.bottom-panel')?.children.length > 0 &&
|
||||
document.querySelector('.top-panel')?.children.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
await page.screenshot({ path: path.join(screenshotsDir, `${vis.name}-after-drag.png`) });
|
||||
|
||||
for (const panelName of panelOrder) {
|
||||
await managePanel(panelName, buttons[panelName]);
|
||||
}
|
||||
|
||||
console.log(`Test for ${vis.name} completed.`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function dragWithRetry(source, target, retries = 3) {
|
||||
for (let i = 0; i < retries; i++) {
|
||||
try {
|
||||
await source.dragTo(target, { force: true });
|
||||
return;
|
||||
} catch (error) {
|
||||
if (i === retries - 1) throw error;
|
||||
await new Promise(res => setTimeout(res, 1000));
|
||||
}
|
||||
}
|
||||
}
|
||||
269
tests/VisualizationTemplates.spec.js
Normal file
269
tests/VisualizationTemplates.spec.js
Normal file
@@ -0,0 +1,269 @@
|
||||
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.`);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -4,7 +4,7 @@ test('Login page', async ({ page }) => {
|
||||
// Navigate to the login page
|
||||
await page.goto('http://185.100.212.76:8200');
|
||||
|
||||
await page.getByPlaceholder('Email').fill('nalvazhuthi@hexrfactory.com');
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@testdomain.local');
|
||||
await page.getByPlaceholder('Password').fill('123456');
|
||||
await page.waitForTimeout(3000);
|
||||
await page.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
|
||||
@@ -1,587 +1,201 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
|
||||
test('Create walls using reusable function', async ({ page }) => {
|
||||
// Setup
|
||||
const screenshotDir = 'screenshots';
|
||||
fs.mkdirSync(screenshotDir, { recursive: true });
|
||||
|
||||
// 1. Navigate to the application
|
||||
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.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
|
||||
// 2. Switch to full-screen mode
|
||||
console.log('Switching to full-screen mode...');
|
||||
await page.keyboard.press('F11'); // Simulate pressing F11 to enter full-screen mode
|
||||
|
||||
// 3. Switch to 2D mode and select wall tool
|
||||
await page.locator('.toggle-option:has-text("2d")').click();
|
||||
await page.getByTitle('Wall').getByRole('img').click();
|
||||
|
||||
// 4. Wait for the canvas to be ready
|
||||
const canvas = page.locator('canvas');
|
||||
await canvas.waitFor();
|
||||
|
||||
// 5. Draw walls using reusable function
|
||||
const wallCoordinates = [
|
||||
{ x: 147, y: 212 },
|
||||
{ x: 138, y: 542 },
|
||||
{ x: 619, y: 548 },
|
||||
{ x: 614, y: 286 },
|
||||
{ x: 693, y: 284 },
|
||||
{ x: 696, y: 374 },
|
||||
{ x: 820, y: 369 },
|
||||
{ x: 823, y: 285 },
|
||||
{ x: 889, y: 285 },
|
||||
{ x: 899, y: 662 },
|
||||
{ x: 1249, y: 661 },
|
||||
{ x: 1238, y: 122 },
|
||||
{ x: 142, y: 116 },
|
||||
{ x: 53, y: 124 },
|
||||
{ x: 147, y: 212 },
|
||||
];
|
||||
|
||||
await drawOrDeleteWalls(page, wallCoordinates, 'create');
|
||||
|
||||
// 6. Take a final screenshot after drawing walls
|
||||
const afterPath = `${screenshotDir}/walls-created-fullscreen.png`;
|
||||
await page.screenshot({ path: afterPath });
|
||||
console.log(`Final screenshot saved at: ${afterPath}`);
|
||||
});
|
||||
|
||||
test('Delete walls and 3 dots menu using reusable function', async ({ page }) => {
|
||||
// Setup
|
||||
const screenshotDir = 'screenshots';
|
||||
fs.mkdirSync(screenshotDir, { recursive: true });
|
||||
|
||||
// 1. Navigate to the application
|
||||
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.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
|
||||
// 2. Switch to full-screen mode
|
||||
console.log('Switching to full-screen mode...');
|
||||
await page.keyboard.press('F11'); // Simulate pressing F11 to enter full-screen mode
|
||||
|
||||
// 3. Switch to 2D mode
|
||||
await page.locator('.toggle-option:has-text("2d")').click();
|
||||
|
||||
// 4. Select the delete tool
|
||||
console.log('Opening three-dot menu...');
|
||||
await page.locator('.drop-down-option-button > svg').click();
|
||||
|
||||
console.log('Selecting Delete option...');
|
||||
await page.locator('div').filter({ hasText: /^Delete$/ }).first().click();
|
||||
|
||||
// 5. Wait for the canvas to be ready
|
||||
const canvas = page.locator('canvas');
|
||||
await canvas.waitFor();
|
||||
|
||||
// 6. Delete walls using reusable function
|
||||
const wallCoordinates = [
|
||||
{ x: 147, y: 212 },
|
||||
{ x: 138, y: 542 },
|
||||
{ x: 619, y: 548 },
|
||||
{ x: 614, y: 286 },
|
||||
{ x: 146, y: 343 },
|
||||
{ x: 328, y: 542 },
|
||||
{ x: 618, y: 459 },
|
||||
{ x: 693, y: 284 },
|
||||
{ x: 696, y: 374 },
|
||||
{ x: 820, y: 369 },
|
||||
{ x: 823, y: 285 },
|
||||
{ x: 889, y: 285 },
|
||||
{ x: 899, y: 662 },
|
||||
{ x: 1249, y: 661 },
|
||||
{ x: 1238, y: 122 },
|
||||
{ x: 142, y: 116 },
|
||||
{ x: 53, y: 124 },
|
||||
{ x: 147, y: 212 },
|
||||
];
|
||||
|
||||
await drawOrDeleteWalls(page, wallCoordinates, 'delete');
|
||||
|
||||
// 7. Delete the "3 dots" menu if it's part of the canvas
|
||||
console.log('Deleting the 3 dots menu...');
|
||||
try {
|
||||
// Attempt to locate and click the "3 dots" menu
|
||||
const threeDotsMenu = page.locator('.drop-down-option-button > svg');
|
||||
await threeDotsMenu.waitFor({ state: 'visible', timeout: 5000 }); // Ensure it's visible
|
||||
await threeDotsMenu.click(); // Click to select it
|
||||
await simulatePointerClick(page, 500, 500); // Simulate a delete action on the canvas
|
||||
|
||||
console.log('Successfully deleted the 3 dots menu.');
|
||||
} catch (error) {
|
||||
console.error('Failed to delete the 3 dots menu:', error.message);
|
||||
}
|
||||
|
||||
// 8. Take a final screenshot after deleting walls and the 3 dots menu
|
||||
const afterPath = `${screenshotDir}/walls-deleted-fullscreen.png`;
|
||||
await page.screenshot({ path: afterPath });
|
||||
console.log(`Final screenshot saved at: ${afterPath}`);
|
||||
});
|
||||
|
||||
/**
|
||||
* Simulates a pointer click at specific coordinates.
|
||||
*/
|
||||
async function simulatePointerClick(page, x, y, button = 'left') {
|
||||
// Move to the desired position
|
||||
await page.mouse.move(x, y);
|
||||
|
||||
// Simulate mouse down and up to mimic a real click
|
||||
await page.mouse.down({ button });
|
||||
await page.mouse.up({ button });
|
||||
}
|
||||
|
||||
/**
|
||||
* Reusable function for creating or deleting walls.
|
||||
* @param {Object} page - Playwright page object
|
||||
* @param {Array} coordinates - Array of {x, y} objects representing wall points
|
||||
* @param {String} action - 'create' or 'delete'
|
||||
*/
|
||||
async function drawOrDeleteWalls(page, coordinates, action) {
|
||||
console.log(`${action === 'create' ? 'Creating' : 'Deleting'} walls...`);
|
||||
|
||||
for (const { x, y } of coordinates) {
|
||||
console.log(`${action === 'create' ? 'Creating' : 'Deleting'} at (${x}, ${y})`);
|
||||
await simulatePointerClick(page, x, y);
|
||||
}
|
||||
|
||||
if (action === 'create') {
|
||||
// Finalize wall creation with right-click
|
||||
await simulatePointerClick(page, 100, 160, 'right'); // Right-click to finalize
|
||||
}
|
||||
}
|
||||
|
||||
//Secound config
|
||||
import { test, expect } from '@playwright/test';
|
||||
import fs from 'fs';
|
||||
|
||||
test('Create walls after moving canvas', async ({ page }) => {
|
||||
// Setup
|
||||
const screenshotDir = 'screenshots';
|
||||
fs.mkdirSync(screenshotDir, { recursive: true });
|
||||
|
||||
// 1. Navigate to the application
|
||||
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.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
|
||||
// 2. Switch to full-screen mode
|
||||
console.log('Switching to full-screen mode...');
|
||||
await page.keyboard.press('F11'); // Simulate pressing F11 to enter full-screen mode
|
||||
|
||||
// 3. Switch to 2D mode
|
||||
await page.locator('.toggle-option:has-text("2d")').click();
|
||||
|
||||
// 4. Move the canvas to the top position
|
||||
console.log('Moving canvas to the top position...');
|
||||
const canvas = page.locator('canvas').first();
|
||||
const canvasBox = await canvas.boundingBox();
|
||||
|
||||
if (!canvasBox) {
|
||||
throw new Error('Canvas bounding box not found. Ensure the canvas is visible.');
|
||||
}
|
||||
|
||||
// Start position (center of canvas)
|
||||
const startX = canvasBox.x + canvasBox.width / 2;
|
||||
const startY = canvasBox.y + canvasBox.height / 2;
|
||||
|
||||
// Simulate a drag action to move the canvas
|
||||
await page.mouse.move(startX, startY);
|
||||
await page.mouse.down();
|
||||
|
||||
// Move the mouse down while dragging
|
||||
await page.mouse.move(startX, startY + 100, {
|
||||
steps: 20, // Smooth movement
|
||||
});
|
||||
|
||||
// Simultaneously scroll the page (if needed)
|
||||
await page.mouse.wheel(0, 500); // Scroll down 500px
|
||||
|
||||
await page.mouse.up();
|
||||
|
||||
// 5. Select the wall tool
|
||||
console.log('Selecting wall tool...');
|
||||
await page.getByTitle('Wall').getByRole('img').click();
|
||||
|
||||
// 6. Draw walls using reusable function
|
||||
const wallCoordinates = [
|
||||
{ x: 147, y: 212 },
|
||||
{ x: 138, y: 542 },
|
||||
{ x: 619, y: 548 },
|
||||
{ x: 614, y: 286 },
|
||||
{ x: 693, y: 284 },
|
||||
{ x: 696, y: 374 },
|
||||
{ x: 820, y: 369 },
|
||||
{ x: 823, y: 285 },
|
||||
{ x: 889, y: 285 },
|
||||
{ x: 899, y: 662 },
|
||||
{ x: 1249, y: 661 },
|
||||
{ x: 1238, y: 122 },
|
||||
{ x: 142, y: 116 },
|
||||
{ x: 53, y: 124 },
|
||||
{ x: 147, y: 212 },
|
||||
];
|
||||
|
||||
await drawOrDeleteWalls(page, wallCoordinates, 'create');
|
||||
|
||||
// 7. Take a final screenshot after drawing walls
|
||||
const afterPath = `${screenshotDir}/walls-created-after-moving-canvas.png`;
|
||||
await page.screenshot({ path: afterPath });
|
||||
console.log(`Final screenshot saved at: ${afterPath}`);
|
||||
});
|
||||
|
||||
test('Delete walls after moving canvas', async ({ page }) => {
|
||||
// Setup
|
||||
const screenshotDir = 'screenshots';
|
||||
fs.mkdirSync(screenshotDir, { recursive: true });
|
||||
|
||||
// 1. Navigate to the application
|
||||
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.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
|
||||
// 2. Switch to full-screen mode
|
||||
console.log('Switching to full-screen mode...');
|
||||
await page.keyboard.press('F11'); // Simulate pressing F11 to enter full-screen mode
|
||||
|
||||
// 3. Switch to 2D mode
|
||||
await page.locator('.toggle-option:has-text("2d")').click();
|
||||
|
||||
// 4. Move the canvas to the top position
|
||||
console.log('Moving canvas to the top position...');
|
||||
const canvas = page.locator('canvas').first();
|
||||
const canvasBox = await canvas.boundingBox();
|
||||
|
||||
if (!canvasBox) {
|
||||
throw new Error('Canvas bounding box not found. Ensure the canvas is visible.');
|
||||
}
|
||||
|
||||
// Start position (center of canvas)
|
||||
const startX = canvasBox.x + canvasBox.width / 2;
|
||||
const startY = canvasBox.y + canvasBox.height / 2;
|
||||
|
||||
// Simulate a drag action to move the canvas
|
||||
await page.mouse.move(startX, startY);
|
||||
await page.mouse.down();
|
||||
|
||||
// Move the mouse down while dragging
|
||||
await page.mouse.move(startX, startY + 100, {
|
||||
steps: 20, // Smooth movement
|
||||
});
|
||||
|
||||
// Simultaneously scroll the page (if needed)
|
||||
await page.mouse.wheel(0, 500); // Scroll down 500px
|
||||
|
||||
await page.mouse.up();
|
||||
|
||||
// 5. Open the "3 dots" menu and select the delete tool
|
||||
console.log('Opening three-dot menu...');
|
||||
await page.locator('.drop-down-option-button > svg').click();
|
||||
|
||||
console.log('Selecting Delete option...');
|
||||
await page.locator('div').filter({ hasText: /^Delete$/ }).first().click();
|
||||
|
||||
// Wait for the delete tool to be active
|
||||
await page.waitForTimeout(1000); // Adjust timeout if necessary
|
||||
|
||||
// 6. Define specific points for deletion
|
||||
const deleteCoordinates = [
|
||||
{ x: 147, y: 212 },
|
||||
{ x: 138, y: 542 },
|
||||
{ x: 619, y: 548 },
|
||||
{ x: 614, y: 286 },
|
||||
{ x: 693, y: 284 },
|
||||
{ x: 696, y: 374 },
|
||||
{ x: 820, y: 369 },
|
||||
{ x: 823, y: 285 },
|
||||
{ x: 889, y: 285 },
|
||||
{ x: 899, y: 662 },
|
||||
{ x: 1249, y: 661 },
|
||||
{ x: 1238, y: 122 },
|
||||
{ x: 142, y: 116 },
|
||||
{ x: 53, y: 124 },
|
||||
{ x: 147, y: 212 },
|
||||
];
|
||||
|
||||
// Delete walls using enhanced deletion function
|
||||
await enhancedDeleteWalls(page, deleteCoordinates);
|
||||
|
||||
// 7. Take a final screenshot after deleting walls
|
||||
const afterPath = `${screenshotDir}/walls-deleted-after-moving-canvas.png`;
|
||||
await page.screenshot({ path: afterPath });
|
||||
console.log(`Final screenshot saved at: ${afterPath}`);
|
||||
});
|
||||
|
||||
/**
|
||||
* Reusable function for creating or deleting walls.
|
||||
* @param {Object} page - Playwright page object
|
||||
* @param {Array} coordinates - Array of {x, y} objects representing wall points
|
||||
* @param {String} action - 'create' or 'delete'
|
||||
*/
|
||||
async function drawOrDeleteWalls(page, coordinates, action) {
|
||||
console.log(`${action === 'create' ? 'Creating' : 'Deleting'} walls...`);
|
||||
|
||||
for (const { x, y } of coordinates) {
|
||||
console.log(`${action === 'create' ? 'Creating' : 'Deleting'} at (${x}, ${y})`);
|
||||
await simulatePointerClick(page, x, y);
|
||||
|
||||
// Add a small delay between clicks to ensure proper interaction
|
||||
await page.waitForTimeout(300); // Adjust timeout if necessary
|
||||
}
|
||||
|
||||
if (action === 'create') {
|
||||
// Finalize wall creation with right-click
|
||||
await simulatePointerClick(page, 100, 160, 'right'); // Right-click to finalize
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Simulates a pointer click at specific coordinates.
|
||||
*/
|
||||
async function simulatePointerClick(page, x, y, button = 'left') {
|
||||
// Move to the desired position
|
||||
await page.mouse.move(x, y);
|
||||
|
||||
// Simulate mouse down and up to mimic a real click
|
||||
await page.mouse.down({ button });
|
||||
await page.mouse.up({ button });
|
||||
}
|
||||
|
||||
/**
|
||||
* Enhanced deletion function with retries, expanded click area, and success check.
|
||||
* @param {Object} page - Playwright page object
|
||||
* @param {Array} coordinates - Array of {x, y} objects representing wall points
|
||||
*/
|
||||
async function enhancedDeleteWalls(page, coordinates) {
|
||||
console.log('Enhanced deletion process started...');
|
||||
|
||||
for (const { x, y } of coordinates) {
|
||||
let isDeleted = false;
|
||||
const maxRetries = 2; // Reduced maximum number of retries
|
||||
let retryCount = 0;
|
||||
|
||||
// Attempt deletion with retries
|
||||
while (!isDeleted && retryCount < maxRetries) {
|
||||
console.log(`Attempting to delete at (${x}, ${y}), attempt ${retryCount + 1}`);
|
||||
|
||||
// Expand the click area slightly to account for imprecise targeting
|
||||
const offsets = [
|
||||
{ dx: 0, dy: 0 }, // Exact coordinate
|
||||
{ dx: 5, dy: 0 }, // Slightly to the right
|
||||
{ dx: -5, dy: 0 }, // Slightly to the left
|
||||
{ dx: 0, dy: 5 }, // Slightly below
|
||||
{ dx: 0, dy: -5 }, // Slightly above
|
||||
];
|
||||
|
||||
for (const { dx, dy } of offsets) {
|
||||
const adjustedX = x + dx;
|
||||
const adjustedY = y + dy;
|
||||
|
||||
console.log(`Clicking at adjusted position (${adjustedX}, ${adjustedY})`);
|
||||
await simulatePointerClick(page, adjustedX, adjustedY);
|
||||
|
||||
// Add a small delay between clicks to ensure proper interaction
|
||||
await page.waitForTimeout(100); // Reduced delay
|
||||
|
||||
// Check if the wall is deleted (custom logic can be added here if possible)
|
||||
// For now, assume success after trying all offsets
|
||||
isDeleted = true; // Placeholder for actual deletion check
|
||||
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(120000);
|
||||
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 });
|
||||
}
|
||||
|
||||
retryCount++;
|
||||
}
|
||||
// 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(),
|
||||
];
|
||||
|
||||
if (!isDeleted) {
|
||||
console.warn(`Failed to delete wall at (${x}, ${y}) after ${maxRetries} attempts.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 146,
|
||||
y: 378
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 341,
|
||||
y: 541
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 146,
|
||||
y: 449
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 619,
|
||||
y: 450
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 726,
|
||||
y: 374
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 750,
|
||||
y: 121
|
||||
}
|
||||
});
|
||||
// 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'),
|
||||
};
|
||||
|
||||
await page.getByRole('img', { name: 'forklift' }).click();
|
||||
await page.getByRole('img', { name: 'forklift' }).click();
|
||||
await page.locator('div').filter({ hasText: /^untitledOutlineAssets← BackVehiclesForkliftAgv$/ }).locator('svg').nth(2).click();
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 206,
|
||||
y: 250
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 206,
|
||||
y: 281
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 200,
|
||||
y: 307
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 257,
|
||||
y: 251
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 260,
|
||||
y: 277
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 255,
|
||||
y: 304
|
||||
}
|
||||
});
|
||||
// Helper function to activate panel and wait for visibility
|
||||
const activateAndCheckPanel = async (panelLocator, activateButtonTitle) => {
|
||||
console.log(`Activating ${activateButtonTitle}...`);
|
||||
try {
|
||||
// Wait for the button to be visible and enabled
|
||||
console.log(`Waiting for button with title: ${activateButtonTitle}`);
|
||||
await page.waitForSelector(`[title="${activateButtonTitle}"]`, { state: 'visible', timeout: 20000 });
|
||||
|
||||
// Click the button
|
||||
console.log(`Clicking button with title: ${activateButtonTitle}`);
|
||||
await page.getByTitle(activateButtonTitle).click();
|
||||
|
||||
//values for for forklift
|
||||
await page.getByRole('img', { name: 'forklift' }).click();
|
||||
await page.getByRole('img', { name: 'forklift' }).click();
|
||||
await page.locator('div').filter({ hasText: /^untitledOutlineAssets← BackVehiclesForkliftAgv$/ }).locator('svg').nth(2).click();
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 206,
|
||||
y: 250
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 206,
|
||||
y: 281
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 200,
|
||||
y: 307
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 257,
|
||||
y: 251
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 260,
|
||||
y: 277
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 255,
|
||||
y: 304
|
||||
}
|
||||
});
|
||||
// Wait for the panel to become visible
|
||||
console.log(`Waiting for panel to become visible...`);
|
||||
await expect(panelLocator).toBeVisible({ timeout: 10000 });
|
||||
} catch (error) {
|
||||
console.error(`Failed to activate panel: ${activateButtonTitle}`);
|
||||
console.error(error);
|
||||
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));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//values for for Agv
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 309,
|
||||
y: 325
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 454,
|
||||
y: 287
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 608,
|
||||
y: 282
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 305,
|
||||
y: 417
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 455,
|
||||
y: 424
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 640,
|
||||
y: 173
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 875,
|
||||
y: 227
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 1059,
|
||||
y: 349
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 977,
|
||||
y: 490
|
||||
}
|
||||
});
|
||||
await page.locator('canvas').click({
|
||||
position: {
|
||||
x: 1155,
|
||||
y: 492
|
||||
}
|
||||
});
|
||||
// Helper function to remove all items from panels
|
||||
const removeAllItemsFromPanels = async () => {
|
||||
console.log('Removing all items from panels...');
|
||||
const panelOrder = ['top', 'right', 'bottom', 'left'];
|
||||
for (const panelName of panelOrder) {
|
||||
console.log(`Removing items from ${panelName} panel...`);
|
||||
await removeButtons[panelName].click();
|
||||
await page.waitForTimeout(2000); // Wait for removal animation or transition
|
||||
}
|
||||
};
|
||||
|
||||
// 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());
|
||||
|
||||
// Go to Visualization > Zone
|
||||
console.log(`Navigating to Visualization > ${vis.name}...`);
|
||||
await page.getByText('Visualization').click();
|
||||
await page.getByText(vis.name).click();
|
||||
|
||||
// Drag widgets into all panels
|
||||
console.log('Dragging widgets into all panels...');
|
||||
const panelOrder = ['left', 'right', 'bottom', 'top'];
|
||||
for (const panelName of panelOrder) {
|
||||
await activateAndCheckPanel(panels[panelName], `Activate ${panelName} panel`);
|
||||
for (const widget of widgets) {
|
||||
await dragWithRetry(widget, panels[panelName]);
|
||||
}
|
||||
}
|
||||
|
||||
// Verify that all panels contain widgets
|
||||
console.log('Verifying all panels contain widgets...');
|
||||
await page.waitForFunction(() => {
|
||||
return (
|
||||
document.querySelector('.left-panel')?.children.length > 0 &&
|
||||
document.querySelector('.right-panel')?.children.length > 0 &&
|
||||
document.querySelector('.bottom-panel')?.children.length > 0 &&
|
||||
document.querySelector('.top-panel')?.children.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
// Take a screenshot after drag-and-drop operations
|
||||
console.log('Taking screenshot after drag-and-drop...');
|
||||
await page.screenshot({ path: path.join(screenshotsDir, `${vis.name}-after-drag.png`) });
|
||||
|
||||
// Save the template
|
||||
console.log('Saving template...');
|
||||
await page.getByRole('button', { name: /save template/i }).click();
|
||||
await expect(page.getByRole('button', { name: /save template/i })).toBeVisible();
|
||||
|
||||
// Navigate to Templates tab
|
||||
console.log('Navigating to Templates tab...');
|
||||
await page.getByText('Templates', { exact: true }).click();
|
||||
await page.getByText('Zone 4').click();
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Apply the saved template (Template 1)
|
||||
console.log('Applying saved template...');
|
||||
await page.locator('.template-item', { hasText: 'Template 1' }).click();
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Optionally, assert widgets are restored in all panels
|
||||
console.log('Verifying widgets are restored in all panels...');
|
||||
await page.waitForFunction(() => {
|
||||
return (
|
||||
document.querySelector('.left-panel')?.children.length > 0 &&
|
||||
document.querySelector('.right-panel')?.children.length > 0 &&
|
||||
document.querySelector('.bottom-panel')?.children.length > 0 &&
|
||||
document.querySelector('.top-panel')?.children.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
// Remove all items from panels
|
||||
await removeAllItemsFromPanels();
|
||||
|
||||
// Add a grace period for animations or transitions
|
||||
console.log('Waiting for panels to clear...');
|
||||
await page.waitForTimeout(3000); // Wait for 3 seconds to allow any animations or transitions to complete
|
||||
|
||||
// Take a final screenshot after removal
|
||||
console.log('Taking screenshot after removal...');
|
||||
await page.screenshot({ path: path.join(screenshotsDir, `${vis.name}-after-remove.png`) });
|
||||
|
||||
// Navigating back to Visualization > Zone
|
||||
console.log(`Navigating to Visualization > ${vis.name}...`);
|
||||
await page.getByText('Visualization').click();
|
||||
await page.getByText(vis.name).click();
|
||||
|
||||
// Remove all items from panels again
|
||||
await removeAllItemsFromPanels();
|
||||
|
||||
// Locate and click the delete button for "Template 1"
|
||||
console.log('Locating and clicking the delete button for "Template 1"...');
|
||||
const deleteButton = page.locator(
|
||||
'.template-details:has(.template-name > .input-value:text("Template 1")) #template-delete-button'
|
||||
);
|
||||
await deleteButton.waitFor({ state: 'visible', timeout: 10000 }); // Ensure the button is visible
|
||||
await deleteButton.click();
|
||||
|
||||
console.log(`Test for ${vis.name} completed successfully.`);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -2,117 +2,109 @@ const { test, expect } = require('@playwright/test');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
// Function to take screenshots at different viewport sizes for a given URL
|
||||
// Helper: Ensure folder exists
|
||||
function ensureFolderExists(folderPath) {
|
||||
if (!fs.existsSync(folderPath)) {
|
||||
fs.mkdirSync(folderPath, { recursive: true });
|
||||
}
|
||||
}
|
||||
|
||||
// Function to take screenshots at different viewport sizes
|
||||
async function takeScreenshotsAtViewports(page, folderName, screenshotPrefix) {
|
||||
const viewports = [
|
||||
{ width: 1230, height: 629, name: 'moniter-spec' },
|
||||
{ width: 1280, height: 800, name: 'lap-spec' },
|
||||
{ width: 1920, height: 1080, name: 'TV-spec' },
|
||||
{ width: 1920, height: 1080, name: 'TV-spec' },
|
||||
];
|
||||
|
||||
// Create the folder if it doesn't exist (Node.js context)
|
||||
const folderPath = path.join(__dirname, '..', 'test-results', folderName);
|
||||
if (!fs.existsSync(folderPath)) {
|
||||
fs.mkdirSync(folderPath, { recursive: true });
|
||||
}
|
||||
ensureFolderExists(folderPath);
|
||||
|
||||
for (const { width, height, name } of viewports) {
|
||||
await page.setViewportSize({ width, height });
|
||||
await page.waitForTimeout(500); // Allow time for the viewport to adjust
|
||||
await page.waitForTimeout(500); // Allow viewports to settle slightly
|
||||
const screenshotPath = path.join(folderPath, `${screenshotPrefix}-${name}.png`);
|
||||
await page.screenshot({
|
||||
path: screenshotPath,
|
||||
fullPage: true,
|
||||
});
|
||||
await page.screenshot({ path: screenshotPath, fullPage: true });
|
||||
console.log(`Screenshot taken for ${name} resolution in folder ${folderName}`);
|
||||
}
|
||||
}
|
||||
|
||||
test('Login Page Screenshots', async ({ page }) => {
|
||||
test.setTimeout(60000); // Increase timeout to 60 seconds
|
||||
// Utility: Login to the app
|
||||
async function login(page) {
|
||||
const url = 'http://185.100.212.76:8200';
|
||||
const folderName = 'login-screenshots';
|
||||
await page.goto(url, { waitUntil: 'networkidle' });
|
||||
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
|
||||
await page.getByPlaceholder('Password').fill('123456');
|
||||
|
||||
await page.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
await page.waitForLoadState('networkidle'); // Wait after login
|
||||
}
|
||||
|
||||
test('Login Page Screenshots', async ({ page }) => {
|
||||
test.setTimeout(60000);
|
||||
|
||||
try {
|
||||
console.log('Navigating to the login page...');
|
||||
await page.goto(url, { waitUntil: 'networkidle' });
|
||||
await page.goto('http://185.100.212.76:8200', { waitUntil: 'networkidle' });
|
||||
await page.waitForSelector('[placeholder="Email"]', { timeout: 10000 });
|
||||
await takeScreenshotsAtViewports(page, `${folderName}/login-page-loaded`, 'login-page-loaded');
|
||||
await takeScreenshotsAtViewports(page, 'login-screenshots/login-page-loaded', 'login-page-loaded');
|
||||
|
||||
console.log('Filling Email and Password fields...');
|
||||
await page.getByPlaceholder('Email').click();
|
||||
await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
|
||||
await page.getByPlaceholder('Password').click();
|
||||
await page.getByPlaceholder('Password').fill('123456');
|
||||
await takeScreenshotsAtViewports(page, `${folderName}/fields-filled`, 'fields-filled');
|
||||
await takeScreenshotsAtViewports(page, 'login-screenshots/fields-filled', 'fields-filled');
|
||||
|
||||
console.log('Clicking the Continue button...');
|
||||
await page.waitForSelector('button:has-text("Continue")', { timeout: 10000 });
|
||||
await page.getByRole('button', { name: 'Continue', exact: true }).click();
|
||||
await page.waitForLoadState('networkidle'); // Wait for navigation or animations to complete
|
||||
await takeScreenshotsAtViewports(page, `${folderName}/after-login`, 'after-login');
|
||||
await page.waitForLoadState('networkidle');
|
||||
await takeScreenshotsAtViewports(page, 'login-screenshots/after-login', 'after-login');
|
||||
} catch (error) {
|
||||
console.error('An error occurred during the test:', error.message);
|
||||
throw error; // Re-throw the error to fail the test
|
||||
console.error('An error occurred during login test:', error.message);
|
||||
throw error;
|
||||
}
|
||||
});
|
||||
|
||||
test('simulation Page Screenshots', async ({ page }) => {{
|
||||
test('Simulation Page Screenshots', async ({ page }) => {
|
||||
test.setTimeout(120000); // Increase timeout for reliability
|
||||
|
||||
const folderName = 'simulation-screenshots';
|
||||
await login(page);
|
||||
|
||||
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('Simulation').click();
|
||||
await page.waitForTimeout(4000);
|
||||
await takeScreenshotsAtViewports(page, `${folderName}/simulation-page-loaded`, 'simulation-page-loaded');
|
||||
|
||||
}
|
||||
// Navigate to Simulation section
|
||||
await page.getByText('Simulation', { exact: true }).click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
await takeScreenshotsAtViewports(page, 'simulation-screenshots/simulation-page-loaded', 'simulation-page-loaded');
|
||||
});
|
||||
|
||||
test('Visualization Page Screenshots', async ({ page }) => {
|
||||
const folderName = 'Visualization-screenshots';
|
||||
test.setTimeout(120000);
|
||||
|
||||
// Navigate to the login page 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 login(page);
|
||||
|
||||
// Navigate to the Visualization page
|
||||
await page.waitForTimeout(10000); // Wait for the page to load
|
||||
await page.getByText('Visualization').click();
|
||||
await page.waitForTimeout(4000); // Wait for the page to load
|
||||
await takeScreenshotsAtViewports(page, `${folderName}/Visualization-page1-loaded`, 'Visualization1-page-loaded');
|
||||
// Navigate to Visualization section
|
||||
await page.getByText('Visualization', { exact: true }).click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
await page.locator('.toggle-header-item:has-text("3D")').click(); // Use a more specific selector
|
||||
await takeScreenshotsAtViewports(page, `${folderName}/Visualization-page1-loaded`, 'Visualization1-page-loaded-3D');
|
||||
await takeScreenshotsAtViewports(page, 'Visualization-screenshots/Visualization-page1-loaded', 'Visualization1-page-loaded');
|
||||
|
||||
await page.locator('.toggle-header-item:has-text("Floating")').click(); // Use a more specific selector
|
||||
await takeScreenshotsAtViewports(page, `${folderName}/Visualization-page1-loaded`, 'Visualization1-page-loaded-Floating');
|
||||
// Navigate to Templates and Design pages
|
||||
await page.locator('.toggle-header-item:has-text("Templates")').click(); // Use a more specific selector
|
||||
await takeScreenshotsAtViewports(page, `${folderName}/Visualization-page2-loaded`, 'Visualization2-page-loaded');
|
||||
await page.locator('.toggle-header-item:has-text("3D")').click();
|
||||
await takeScreenshotsAtViewports(page, 'Visualization-screenshots/Visualization-page1-loaded', 'Visualization1-page-loaded-3D');
|
||||
|
||||
await page.locator('.toggle-header-item:has-text("Floating")').click();
|
||||
await takeScreenshotsAtViewports(page, 'Visualization-screenshots/Visualization-page1-loaded', 'Visualization1-page-loaded-Floating');
|
||||
|
||||
await page.locator('.toggle-header-item:has-text("Templates")').click();
|
||||
await takeScreenshotsAtViewports(page, 'Visualization-screenshots/Visualization-page2-loaded', 'Visualization2-page-loaded');
|
||||
|
||||
|
||||
});
|
||||
|
||||
test('Market-Place Page Screenshots', async ({ page }) => {{
|
||||
test('Market Place Page Screenshots', async ({ page }) => {
|
||||
test.setTimeout(120000);
|
||||
|
||||
const folderName = 'simulation-screenshots';
|
||||
await login(page);
|
||||
|
||||
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('Market Place').click();
|
||||
await page.waitForTimeout(4000);
|
||||
await takeScreenshotsAtViewports(page, `${folderName}/Market-Place-page-loaded`, 'Market-Place-page-loaded');
|
||||
|
||||
}
|
||||
});
|
||||
// Navigate to Market Place section
|
||||
await page.getByText('Market Place', { exact: true }).click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
await takeScreenshotsAtViewports(page, 'market-place-screenshots/Market-Place-page-loaded', 'Market-Place-page-loaded');
|
||||
});
|
||||
Reference in New Issue
Block a user