Updated Script 17/5/25

This commit is contained in:
2025-05-17 11:00:18 +00:00
parent 609fc55ebe
commit 7d327711a6
137 changed files with 22806 additions and 754 deletions

View File

@@ -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.`);
});
});
}