add Asile

run-tests-create.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+# Run the first test
+npx playwright test tests/Builder2D/Wall.spec.js --headed --grep "Create walls" 
+
+# Run the second test
+npx playwright test tests/Builder2D/Zone.spec.js --headed --grep "Create zones"
+
+# Run the 3rd test
+npx playwright test tests/Builder2D/Asile.spec.js --headed --grep "Create aisles"
+
+
+echo "Three tests have completed sequentially."
+

run-tests-delete.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Run the first test
+npx playwright test tests/Builder2D/Asile.spec.js --headed --grep "Delete aisles"
+
+# Run the second test
+npx playwright test tests/Builder2D/Zone.spec.js --headed --grep "Delete zones"
+
+# Run the 3rd test
+npx playwright test tests/Builder2D/Wall.spec.js --headed --grep "Delete walls"
+
+echo "Three tests have Delete sequentially."

tests/Builder2D/Asile.spec.js

@@ -0,0 +1,259 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+
+// Setup: Create screenshots directory if it doesn't exist
+const screenshotDir = 'screenshots';
+fs.mkdirSync(screenshotDir, { recursive: true });
+
+// Aisle coordinates (shared between tests)
+const aisleCoordinates = [
+  { x: 191, y: 237 },
+  { x: 271, y: 238 },
+  { x: 301, y: 170, button: 'right' },
+  { x: 191, y: 266 },
+  { x: 270, y: 268 },
+  { x: 377, y: 171, button: 'right' },
+  { x: 188, y: 295 },
+  { x: 270, y: 297 },
+  { x: 335, y: 189, button: 'right' },
+  { x: 187, y: 321 },
+  { x: 267, y: 320 },
+  { x: 341, y: 183, button: 'right' },
+  { x: 190, y: 238 },
+  { x: 189, y: 321 },
+  { x: 240, y: 358, button: 'right' },
+  { x: 351, y: 247 },
+  { x: 425, y: 246 },
+  { x: 426, y: 327 },
+  { x: 346, y: 325 },
+  { x: 350, y: 248 },
+  { x: 372, y: 167, button: 'right' },
+  { x: 491, y: 240 },
+  { x: 577, y: 242 },
+  { x: 577, y: 329 },
+  { x: 490, y: 328 },
+  { x: 489, y: 240 },
+  { x: 478, y: 294, button: 'right' },
+  { x: 489, y: 294 },
+  { x: 577, y: 297 },
+  { x: 386, y: 360, button: 'right' },
+  { x: 193, y: 400 },
+  { x: 194, y: 496 },
+  { x: 250, y: 496 },
+  { x: 251, y: 400 },
+  { x: 191, y: 401 },
+  { x: 301, y: 362, button: 'right' },
+  { x: 346, y: 402 },
+  { x: 386, y: 401 },
+  { x: 387, y: 435 },
+  { x: 344, y: 434 },
+  { x: 343, y: 397 },
+  { x: 309, y: 361, button: 'right' },
+  { x: 340, y: 444 },
+  { x: 387, y: 444 },
+  { x: 387, y: 472 },
+  { x: 339, y: 474 },
+  { x: 341, y: 444 },
+  { x: 338, y: 501, button: 'right' },
+  { x: 337, y: 486 },
+  { x: 386, y: 489 },
+  { x: 386, y: 512 },
+  { x: 339, y: 511 },
+  { x: 336, y: 486 },
+  { x: 419, y: 466, button: 'right' },
+  { x: 484, y: 395 },
+  { x: 577, y: 395 },
+  { x: 580, y: 509 },
+  { x: 484, y: 507 },
+  { x: 484, y: 396 },
+  { x: 471, y: 424, button: 'right' },
+  { x: 484, y: 453 },
+  { x: 576, y: 456 },
+  { x: 669, y: 596, button: 'right' },
+  { x: 715, y: 220 },
+  { x: 789, y: 222 },
+  { x: 793, y: 344 },
+  { x: 711, y: 342 },
+  { x: 714, y: 219 },
+  { x: 759, y: 294, button: 'right' },
+  { x: 713, y: 283 },
+  { x: 790, y: 280 },
+  { x: 844, y: 172, button: 'right' },
+  { x: 931, y: 210 },
+  { x: 934, y: 316 },
+  { x: 996, y: 316 },
+  { x: 998, y: 212 },
+  { x: 930, y: 211 },
+  { x: 1031, y: 212, button: 'right' },
+  { x: 1012, y: 212 },
+  { x: 1014, y: 316 },
+  { x: 1074, y: 314 },
+  { x: 1072, y: 210 },
+  { x: 1010, y: 210 },
+  { x: 1087, y: 210, button: 'right' },
+  { x: 1091, y: 211 },
+  { x: 1094, y: 315 },
+  { x: 1172, y: 317 },
+  { x: 1220, y: 285, button: 'right' },
+  { x: 1090, y: 212 },
+  { x: 1172, y: 214 },
+  { x: 1173, y: 315 },
+  { x: 1064, y: 359, button: 'right' },
+  { x: 928, y: 368 },
+  { x: 927, y: 457 },
+  { x: 1022, y: 452 },
+  { x: 1022, y: 371 },
+  { x: 928, y: 374 },
+  { x: 964, y: 417, button: 'right' },
+  { x: 1094, y: 370 },
+  { x: 1095, y: 456 },
+  { x: 1186, y: 457 },
+  { x: 1186, y: 374 },
+  { x: 1095, y: 377 },
+  { x: 1061, y: 500, button: 'right' },
+  { x: 923, y: 535 },
+  { x: 1022, y: 535 },
+  { x: 1020, y: 627 },
+  { x: 922, y: 628 },
+  { x: 921, y: 534 },
+  { x: 1059, y: 625, button: 'right' },
+  { x: 1091, y: 537 },
+  { x: 1185, y: 534 },
+  { x: 1183, y: 627 },
+  { x: 1089, y: 631 },
+  { x: 1092, y: 536 },
+  { x: 1079, y: 693, button: 'right' },
+];
+
+/**
+ * Reusable function for creating or deleting aisles.
+ * @param {Object} page - Playwright page object
+ * @param {Array} coordinates - Array of {x, y, button?} objects representing aisle points
+ * @param {String} action - 'create' or 'delete'
+ */
+async function drawOrDeleteAisles(page, coordinates, action) {
+  console.log(`${action === 'create' ? 'Creating' : 'Deleting'} aisles...`);
+
+  for (const { x, y, button = 'left' } of coordinates) {
+    console.log(`${action === 'create' ? 'Creating' : 'Deleting'} at (${x}, ${y})`);
+    await simulatePointerClick(page, x, y, button);
+
+    // Add a small delay between clicks to ensure proper interaction
+    await page.waitForTimeout(300); // Adjust timeout if necessary
+  }
+
+  if (action === 'create') {
+    // Finalize aisle 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);
+
+  if (button === 'dblclick') {
+    await page.mouse.dblclick(x, y);
+  } else {
+    // Simulate mouse down and up to mimic a real click
+    await page.mouse.down({ button });
+    await page.mouse.up({ button });
+  }
+}
+
+/**
+ * Common setup steps for both create and delete tests.
+ * @param {Object} page - Playwright page object
+ * @param {String} toolSelector - Selector for the tool to select (e.g., 'Aisle' or 'Delete')
+ */
+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('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 appropriate tool (e.g., Aisle or Delete)
+  console.log(`Selecting ${toolSelector === 'Aisle' ? 'Aisle' : 'Delete'} tool...`);
+  if (toolSelector === 'Delete') {
+    // Open the "3 dots" menu and select the Delete option
+    await page.locator('.drop-down-option-button > svg').click();
+    await page.locator('div').filter({ hasText: /^Delete$/ }).first().click();
+  } else {
+    // Select the Aisle tool
+    await page.getByTitle(toolSelector).getByRole('img').click();
+  }
+
+  await page.waitForTimeout(2000); // Wait for the tool to be active
+}
+
+// Test 1: Create aisles after moving canvas
+test('Create aisles after moving canvas', async ({ page }) => {
+  // Increase the timeout for this test
+  test.setTimeout(100000); // Set timeout to 100 seconds
+
+  // Perform common setup
+  await setupCanvasAndTools(page, 'Aisle');
+
+  // Create aisles using reusable function
+  await drawOrDeleteAisles(page, aisleCoordinates, 'create');
+
+  // Take a final screenshot after creating aisles
+  const afterCreationPath = `${screenshotDir}/aisles-created-after-moving-canvas.png`;
+  await page.screenshot({ path: afterCreationPath });
+  console.log(`Aisles created. Screenshot saved at: ${afterCreationPath}`);
+});
+
+// Test 2: Delete aisles after moving canvas
+test('Delete aisles after moving canvas', async ({ page }) => {
+  // Increase the timeout for this test
+  test.setTimeout(100000); // Set timeout to 100 seconds
+
+  // Perform common setup
+  await setupCanvasAndTools(page, 'Delete');
+
+  // Delete aisles using reusable function
+  await drawOrDeleteAisles(page, aisleCoordinates, 'delete');
+
+  // Take a final screenshot after deleting aisles
+  const afterDeletionPath = `${screenshotDir}/aisles-deleted-after-moving-canvas.png`;
+  await page.screenshot({ path: afterDeletionPath });
+  console.log(`Aisles deleted. Screenshot saved at: ${afterDeletionPath}`);
+});

tests/Builder2D/Assets.spec.js

@@ -0,0 +1,129 @@
+import { test, expect } from '@playwright/test';
+
+// Forklift coordinates
+const forkliftCoordinates = [
+  { x: 206, y: 250 },
+  { x: 206, y: 281 },
+  { x: 200, y: 307 },
+  { x: 257, y: 251 },
+  { x: 260, y: 277 },
+  { x: 255, y: 304 },
+];
+
+// AGV coordinates
+const agvCoordinates = [
+  { x: 309, y: 325 },
+  { x: 454, y: 287 },
+  { x: 608, y: 282 },
+  { x: 305, y: 417 },
+  { x: 455, y: 424 },
+  { x: 640, y: 173 },
+  { x: 875, y: 227 },
+  { x: 1059, y: 349 },
+  { x: 977, y: 490 },
+  { x: 1155, y: 492 },
+];
+
+/**
+ * Common setup function for logging in and switching to full-screen mode.
+ */
+async function loginAndSetup(page) {
+  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();
+  console.log('Switching to full-screen mode...');
+  await page.keyboard.press('F11'); // Simulate pressing F11 to enter full-screen mode
+}
+
+/**
+ * Common function to move the canvas.
+ */
+async function moveCanvas(page) {
+  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.');
+  }
+  const startX = canvasBox.x + canvasBox.width / 2;
+  const startY = canvasBox.y + canvasBox.height / 2;
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+  await page.mouse.move(startX, startY + 100, { steps: 20 });
+  await page.mouse.wheel(0, 500); // Scroll down 500px
+  await page.mouse.up();
+}
+
+/**
+ * Function to simulate dragging an asset from the panel to the canvas.
+ * @param {Object} page - Playwright page object
+ * @param {String} assetSelector - Selector for the asset to drag (e.g., '#forklift', '#agv')
+ * @param {Array} coordinates - Array of {x, y} objects representing drop positions
+ */
+async function dragAssetToCanvas(page, assetSelector, coordinates) {
+  console.log(`Dragging asset ${assetSelector} to canvas...`);
+
+  // Step 1: Select the "Vehicles" category
+  await page.locator('#Vehicles').click();
+
+  // Step 2: Locate the asset and get its bounding box
+  const asset = page.locator(assetSelector);
+  const assetBox = await asset.boundingBox();
+  if (!assetBox) {
+    throw new Error(`Asset ${assetSelector} not found or not visible.`);
+  }
+
+  const assetCenterX = assetBox.x + assetBox.width / 2;
+  const assetCenterY = assetBox.y + assetBox.height / 2;
+
+  // Step 3: Drag and drop each asset to the specified coordinates
+  for (const { x, y } of coordinates) {
+    console.log(`Dragging asset to (${x}, ${y})`);
+    await page.mouse.move(assetCenterX, assetCenterY); // Move to the center of the asset
+    await page.mouse.down(); // Press the left mouse button
+    await page.mouse.move(x, y, { steps: 50 }); // Smooth movement to the target
+    await page.mouse.up(); // Release the left mouse button
+    await page.waitForTimeout(500); // Add a small delay between drops
+  }
+}
+
+/**
+ * Main test case for adding Forklift and AGV assets.
+ */
+test('Add Forklift and AGV assets to the canvas', async ({ page }) => {
+  test.setTimeout(120000); // Set timeout to 2 minutes
+
+  // Step 1: Login and setup
+  await loginAndSetup(page);
+
+  // Step 2: Switch to 2D mode
+  console.log('Switching to 2D mode...');
+  await page.locator('.toggle-option:has-text("2d")').click();
+
+  // Step 3: Move the canvas to the desired position
+  await moveCanvas(page);
+
+  // Step 4: Click the toggle sidebar button
+  console.log('Toggling sidebar...');
+  await page.locator(".toggle-sidebar-ui-button.active").click();
+  await page.waitForTimeout(2000); // Wait for the sidebar to toggle
+
+  // Step 5: Open the "Assets" tab
+  console.log('Opening the Assets tab...');
+  await page.getByText('Assets').click();
+
+  // Step 6: Add Forklift assets
+  console.log('Adding Forklift assets...');
+  await dragAssetToCanvas(page, '#forklift', forkliftCoordinates);
+
+  await page.getByText('← Back').click();
+  // Step 7: Add AGV assets
+  console.log('Adding AGV assets...');
+  await dragAssetToCanvas(page, '#agv', agvCoordinates);
+
+  // Step 8: Take a final screenshot
+  console.log('Taking a final screenshot...');
+  await page.screenshot({ path: 'assets-added.png' });
+  console.log('Final screenshot saved as assets-added.png');
+});

tests/Builder2D/FullBuild.spec.js

@@ -0,0 +1,292 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+
+// Setup: Create screenshots directory if it doesn't exist
+const screenshotDir = 'screenshots';
+fs.mkdirSync(screenshotDir, { recursive: true });
+
+// Wall coordinates (shared between tests)
+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 }, // Closing the loop
+];
+
+/**
+ * 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 (let i = 0; i < coordinates.length; i++) {
+    const { x, y } = coordinates[i];
+    console.log(`${action === 'create' ? 'Creating' : 'Deleting'} at (${x}, ${y})`);
+    await simulatePointerClick(page, x, y);
+    await page.waitForTimeout(300); // Adjust timeout if necessary
+
+    // Add midpoints for deletion
+    if (action === 'delete' && i < coordinates.length - 1) {
+      const nextPoint = coordinates[i + 1];
+      const midX = (x + nextPoint.x) / 2;
+      const midY = (y + nextPoint.y) / 2;
+      console.log(`Deleting midpoint at (${midX}, ${midY})`);
+      await simulatePointerClick(page, midX, midY);
+      await page.waitForTimeout(300);
+    }
+  }
+  if (action === 'create') {
+    // Finalize wall creation with right-click
+    await simulatePointerClick(page, 100, 160, 'right'); // Right-click to finalize
+  }
+}
+
+/**
+ * Zone paths (shared between tests)
+ */
+const zonePaths = [
+  { start: { x: 172, y: 220 }, end: { x: 292, y: 339 } },
+  { start: { x: 328, y: 220 }, end: { x: 441, y: 340 } },
+  { start: { x: 470, y: 220 }, end: { x: 593, y: 342 } },
+  { start: { x: 174, y: 378 }, end: { x: 289, y: 517 } },
+  { start: { x: 327, y: 378 }, end: { x: 442, y: 519 } },
+  { start: { x: 468, y: 378 }, end: { x: 593, y: 521 } },
+  { start: { x: 699, y: 197 }, end: { x: 801, y: 359 } },
+  { start: { x: 913, y: 516 }, end: { x: 1040, y: 644 } },
+  { start: { x: 1079, y: 518 }, end: { x: 1205, y: 647 } },
+  { start: { x: 912, y: 355 }, end: { x: 1036, y: 473 } },
+  { start: { x: 1082, y: 357 }, end: { x: 1203, y: 476 } },
+  { start: { x: 916, y: 190 }, end: { x: 1193, y: 333 } },
+];
+
+/**
+ * Aisle coordinates (shared between tests)
+ */
+const aisleCoordinates = [
+    { x: 191, y: 237 },
+    { x: 271, y: 238 },
+    { x: 301, y: 170, button: 'right' },
+    { x: 191, y: 266 },
+    { x: 270, y: 268 },
+    { x: 377, y: 171, button: 'right' },
+    { x: 188, y: 295 },
+    { x: 270, y: 297 },
+    { x: 335, y: 189, button: 'right' },
+    { x: 187, y: 321 },
+    { x: 267, y: 320 },
+    { x: 341, y: 183, button: 'right' },
+    { x: 190, y: 238 },
+    { x: 189, y: 321 },
+    { x: 240, y: 358, button: 'right' },
+    { x: 351, y: 247 },
+    { x: 425, y: 246 },
+    { x: 426, y: 327 },
+    { x: 346, y: 325 },
+    { x: 350, y: 248 },
+    { x: 372, y: 167, button: 'right' },
+    { x: 491, y: 240 },
+    { x: 577, y: 242 },
+    { x: 577, y: 329 },
+    { x: 490, y: 328 },
+    { x: 489, y: 240 },
+    { x: 478, y: 294, button: 'right' },
+    { x: 489, y: 294 },
+    { x: 577, y: 297 },
+    { x: 386, y: 360, button: 'right' },
+    { x: 193, y: 400 },
+    { x: 194, y: 496 },
+    { x: 250, y: 496 },
+    { x: 251, y: 400 },
+    { x: 191, y: 401 },
+    { x: 301, y: 362, button: 'right' },
+    { x: 346, y: 402 },
+    { x: 386, y: 401 },
+    { x: 387, y: 435 },
+    { x: 344, y: 434 },
+    { x: 343, y: 397 },
+    { x: 309, y: 361, button: 'right' },
+    { x: 340, y: 444 },
+    { x: 387, y: 444 },
+    { x: 387, y: 472 },
+    { x: 339, y: 474 },
+    { x: 341, y: 444 },
+    { x: 338, y: 501, button: 'right' },
+    { x: 337, y: 486 },
+    { x: 386, y: 489 },
+    { x: 386, y: 512 },
+    { x: 339, y: 511 },
+    { x: 336, y: 486 },
+    { x: 419, y: 466, button: 'right' },
+    { x: 484, y: 395 },
+    { x: 577, y: 395 },
+    { x: 580, y: 509 },
+    { x: 484, y: 507 },
+    { x: 484, y: 396 },
+    { x: 471, y: 424, button: 'right' },
+    { x: 484, y: 453 },
+    { x: 576, y: 456 },
+    { x: 669, y: 596, button: 'right' },
+    { x: 715, y: 220 },
+    { x: 789, y: 222 },
+    { x: 793, y: 344 },
+    { x: 711, y: 342 },
+    { x: 714, y: 219 },
+    { x: 759, y: 294, button: 'right' },
+    { x: 713, y: 283 },
+    { x: 790, y: 280 },
+    { x: 844, y: 172, button: 'right' },
+    { x: 931, y: 210 },
+    { x: 934, y: 316 },
+    { x: 996, y: 316 },
+    { x: 998, y: 212 },
+    { x: 930, y: 211 },
+    { x: 1031, y: 212, button: 'right' },
+    { x: 1012, y: 212 },
+    { x: 1014, y: 316 },
+    { x: 1074, y: 314 },
+    { x: 1072, y: 210 },
+    { x: 1010, y: 210 },
+    { x: 1087, y: 210, button: 'right' },
+    { x: 1091, y: 211 },
+    { x: 1094, y: 315 },
+    { x: 1172, y: 317 },
+    { x: 1220, y: 285, button: 'right' },
+    { x: 1090, y: 212 },
+    { x: 1172, y: 214 },
+    { x: 1173, y: 315 },
+    { x: 1064, y: 359, button: 'right' },
+    { x: 928, y: 368 },
+    { x: 927, y: 457 },
+    { x: 1022, y: 452 },
+    { x: 1022, y: 371 },
+    { x: 928, y: 374 },
+    { x: 964, y: 417, button: 'right' },
+    { x: 1094, y: 370 },
+    { x: 1095, y: 456 },
+    { x: 1186, y: 457 },
+    { x: 1186, y: 374 },
+    { x: 1095, y: 377 },
+    { x: 1061, y: 500, button: 'right' },
+    { x: 923, y: 535 },
+    { x: 1022, y: 535 },
+    { x: 1020, y: 627 },
+    { x: 922, y: 628 },
+    { x: 921, y: 534 },
+    { x: 1059, y: 625, button: 'right' },
+    { x: 1091, y: 537 },
+    { x: 1185, y: 534 },
+    { x: 1183, y: 627 },
+    { x: 1089, y: 631 },
+    { x: 1092, y: 536 },
+    { x: 1079, y: 693, button: 'right' },
+];
+
+/**
+ * Simulates a pointer click at specific coordinates.
+ */
+async function simulatePointerClick(page, x, y, button = 'left') {
+  await page.mouse.move(x, y);
+  await page.mouse.down({ button });
+  await page.mouse.up({ button });
+}
+
+/**
+ * Common setup function for logging in and switching to full-screen mode.
+ */
+async function loginAndSetup(page) {
+  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();
+  console.log('Switching to full-screen mode...');
+  await page.keyboard.press('F11'); // Simulate pressing F11 to enter full-screen mode
+}
+
+/**
+ * Common function to move the canvas.
+ */
+async function moveCanvas(page) {
+  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.');
+  }
+  const startX = canvasBox.x + canvasBox.width / 2;
+  const startY = canvasBox.y + canvasBox.height / 2;
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+  await page.mouse.move(startX, startY + 100, { steps: 20 });
+  await page.mouse.wheel(0, 500); // Scroll down 500px
+  await page.mouse.up();
+}
+
+/**
+ * Main test case for creating and deleting walls, zones, and aisles.
+ */
+test('Create and delete walls, zones, and aisles', async ({ page }) => {
+  test.setTimeout(300000); // Set timeout to 5 minutes
+
+  // Step 1: Login and setup
+  await loginAndSetup(page);
+
+  // Step 2: Switch to 2D mode
+  await page.locator('.toggle-option:has-text("2d")').click();
+
+  // Step 3: Move the canvas
+  await moveCanvas(page);
+
+  // Step 4: Create walls
+  console.log('Selecting Wall tool...');
+  await page.getByTitle('Wall').getByRole('img').click();
+  await drawOrDeleteWalls(page, wallCoordinates, 'create');
+
+  // Step 5: Create zones
+  console.log('Selecting Zone tool...');
+  await page.getByTitle('Zone').getByRole('img').click();
+  for (const { start, end } of zonePaths) {
+    await simulatePointerClick(page, start.x, start.y);
+    await simulatePointerClick(page, end.x, end.y);
+    await page.waitForTimeout(500);
+  }
+
+  // Step 6: Create aisles
+  console.log('Selecting Aisle tool...');
+  await page.getByTitle('Aisle').getByRole('img').click();
+  for (const { x, y, button = 'left' } of aisleCoordinates) {
+    await simulatePointerClick(page, x, y, button);
+    await page.waitForTimeout(300);
+  }
+  await page.waitForTimeout(5000); // Stay for 5 seconds after creation
+
+  // Step 7: Delete aisles
+  console.log('Opening three-dot menu...');
+  await page.locator('.drop-down-option-button > svg').click();
+  await page.locator('div').filter({ hasText: /^Delete$/ }).first().click();
+  await drawOrDeleteWalls(page, aisleCoordinates.map(({ x, y }) => ({ x, y })), 'delete');
+
+  // Step 8: Delete zones
+  await drawOrDeleteWalls(page, zonePaths.flatMap(({ start, end }) => [start, end]), 'delete');
+
+  // Step 9: Delete walls
+  await drawOrDeleteWalls(page, wallCoordinates, 'delete');
+  await page.waitForTimeout(5000); // Stay for 5 seconds after deletion
+
+  // Take a final screenshot
+  const finalScreenshotPath = `${screenshotDir}/final-screenshot.png`;
+  await page.screenshot({ path: finalScreenshotPath });
+  console.log(`Final screenshot saved at: ${finalScreenshotPath}`);
+});

tests/Builder2D/Wall.spec.js

@@ -1,14 +1,76 @@
 import { test, expect } from '@playwright/test';
 import fs from 'fs';
 
+// Setup: Create screenshots directory if it doesn't exist
+const screenshotDir = 'screenshots';
+fs.mkdirSync(screenshotDir, { recursive: true });
+
+// Wall coordinates (shared between tests)
+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 },
+];
+
+/**
+ * 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 });
+}
+
+// Test 1: Create walls after moving canvas
 test('Create walls after moving canvas', async ({ page }) => {
+  // Increase the timeout for this test (default is fine)
+  test.setTimeout(60000); // Set timeout to 60 seconds
+
   // 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('Email').fill('ramkumar@testdomin.local');
   await page.getByPlaceholder('Password').fill('123456');
   await page.getByRole('button', { name: 'Continue', exact: true }).click();
 
@@ -47,46 +109,32 @@ test('Create walls after moving canvas', async ({ page }) => {
   await page.mouse.up();
 
   // 5. Select the wall tool
-  console.log('Selecting wall tool...');
+  console.log('Selecting Wall tool...');
   await page.getByTitle('Wall').getByRole('img').click();
 
   await page.waitForTimeout(2000); // Wait for the wall tool to be active
 
   // 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}`);
+  const afterCreationPath = `${screenshotDir}/walls-created-after-moving-canvas.png`;
+  await page.screenshot({ path: afterCreationPath });
+  console.log(`Walls created. Screenshot saved at: ${afterCreationPath}`);
 });
 
+// Test 2: Delete walls after moving canvas
 test('Delete walls after moving canvas', async ({ page }) => {
+  // Increase the timeout specifically for this test
+  test.setTimeout(120000); // Set timeout to 120 seconds (2 minutes)
+
   // 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('Email').fill('ramkumar@testdomin.local');
   await page.getByPlaceholder('Password').fill('123456');
   await page.getByRole('button', { name: 'Continue', exact: true }).click();
 
@@ -126,30 +174,38 @@ test('Delete walls after moving canvas', async ({ page }) => {
 
   // 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();
-
+  await page.locator('.drop-down-option-button > svg').click(); // Replace with the actual selector for the menu
   console.log('Selecting Delete option...');
-  await page.locator('div').filter({ hasText: /^Delete$/ }).first().click();
+  await page.locator('div').filter({ hasText: /^Delete$/ }).first().click(); // Replace with the actual selector for the delete option
 
-  // Wait for the delete tool to be active
-  await page.waitForTimeout(2000); // Adjust timeout if necessary
+  await page.waitForTimeout(2000); // Wait for the delete tool to be active
 
   // 6. Define specific points for deletion, including midpoints
   const deleteCoordinates = [
     { x: 147, y: 212 },
     { x: 138, y: 542 },
+    { x: 146, y: 378 },
     { x: 619, y: 548 },
+    { x: 341, y: 541 },
     { x: 614, y: 286 },
+    { x: 146, y: 449 },
     { x: 693, y: 284 },
+    { x: 619, y: 450 },
+    { x: 138, y: 542 },
     { x: 696, y: 374 },
+    { x: 758, y: 371.5 },
     { x: 820, y: 369 },
     { x: 823, y: 285 },
     { x: 889, y: 285 },
     { x: 899, y: 662 },
     { x: 1249, y: 661 },
+    { x: 726, y: 374 },
+    { x: 750, y: 121 },
     { x: 1238, y: 122 },
     { x: 142, y: 116 },
+    { x: 142, y: 116 },
     { x: 53, y: 124 },
+    { x: 142, y: 116 },
     { x: 147, y: 212 },
   ];
 
@@ -175,42 +231,7 @@ test('Delete walls after moving canvas', async ({ page }) => {
   await drawOrDeleteWalls(page, enhancedDeleteCoordinates, 'delete');
 
   // 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}`);
+  const afterDeletionPath = `${screenshotDir}/walls-deleted-after-moving-canvas.png`;
+  await page.screenshot({ path: afterDeletionPath });
+  console.log(`Walls deleted. Screenshot saved at: ${afterDeletionPath}`);
 });
-
-/**
- * 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 });
-}

tests/Builder2D/Zone.spec.js

@@ -18,18 +18,20 @@ test('Create zones after moving canvas', async ({ page }) => {
   // 3. Move the canvas to the top position
   await moveCanvas(page);
 
+  await page.waitForTimeout(2000); // Wait for the canvas to be moved
+
   // 4. Select the zone tool
   console.log('Selecting zone tool...');
   await page.getByTitle('Zone').getByRole('img').click();
 
   // Define zone paths (start and end points)
   const zonePaths = [
-    { start: { x: 172, y: 215 }, end: { x: 292, y: 339 } },
-    { start: { x: 328, y: 217 }, end: { x: 441, y: 340 } },
+    { start: { x: 172, y: 220 }, end: { x: 292, y: 339 } },
+    { start: { x: 328, y: 220 }, end: { x: 441, y: 340 } },
     { start: { x: 470, y: 220 }, end: { x: 593, y: 342 } },
-    { start: { x: 174, y: 379 }, end: { x: 289, y: 517 } },
+    { start: { x: 174, y: 378 }, end: { x: 289, y: 517 } },
     { start: { x: 327, y: 378 }, end: { x: 442, y: 519 } },
-    { start: { x: 468, y: 376 }, end: { x: 593, y: 521 } },
+    { start: { x: 468, y: 378 }, end: { x: 593, y: 521 } },
     { start: { x: 699, y: 197 }, end: { x: 801, y: 359 } },
     { start: { x: 913, y: 516 }, end: { x: 1040, y: 644 } },
     { start: { x: 1079, y: 518 }, end: { x: 1205, y: 647 } },
@@ -38,7 +40,7 @@ test('Create zones after moving canvas', async ({ page }) => {
     { start: { x: 916, y: 190 }, end: { x: 1193, y: 333 } },
   ];
 
-  // Create zones using reusable function
+  // Create zones using reusable function with increased delays
   await createZones(page, zonePaths);
 
   // Take a final screenshot after creating zones
@@ -67,16 +69,16 @@ test('Delete zones after moving canvas', async ({ page }) => {
   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
+  await page.waitForTimeout(500); // Adjust timeout if necessary
 
   // Define zone paths (same as creation)
   const zonePaths = [
-    { start: { x: 172, y: 215 }, end: { x: 292, y: 339 } },
-    { start: { x: 328, y: 217 }, end: { x: 441, y: 340 } },
+    { start: { x: 172, y: 220 }, end: { x: 292, y: 339 } },
+    { start: { x: 328, y: 220 }, end: { x: 441, y: 340 } },
     { start: { x: 470, y: 220 }, end: { x: 593, y: 342 } },
-    { start: { x: 174, y: 379 }, end: { x: 289, y: 517 } },
+    { start: { x: 174, y: 378 }, end: { x: 289, y: 517 } },
     { start: { x: 327, y: 378 }, end: { x: 442, y: 519 } },
-    { start: { x: 468, y: 376 }, end: { x: 593, y: 521 } },
+    { start: { x: 468, y: 378 }, end: { x: 593, y: 521 } },
     { start: { x: 699, y: 197 }, end: { x: 801, y: 359 } },
     { start: { x: 913, y: 516 }, end: { x: 1040, y: 644 } },
     { start: { x: 1079, y: 518 }, end: { x: 1205, y: 647 } },
@@ -85,7 +87,7 @@ test('Delete zones after moving canvas', async ({ page }) => {
     { start: { x: 916, y: 190 }, end: { x: 1193, y: 333 } },
   ];
 
-  // Delete zones using reusable function
+  // Delete zones using reusable function with increased delays
   await deleteZones(page, zonePaths);
 
   // Take a final screenshot after deleting zones
@@ -103,9 +105,14 @@ async function createZones(page, zonePaths) {
   console.log('Creating zones...');
   for (const { start, end } of zonePaths) {
     console.log(`Creating zone from (${start.x}, ${start.y}) to (${end.x}, ${end.y})`);
-    await simulatePointerClick(page, start.x, start.y); // First click (start point)
-    await simulatePointerClick(page, end.x, end.y);     // Second click (end point)
-    await page.waitForTimeout(200); // Add delay between actions
+    
+    // First click (start point)
+    await simulatePointerClick(page, start.x, start.y);
+    await page.waitForTimeout(500); // Delay after the first click
+
+    // Second click (end point)
+    await simulatePointerClick(page, end.x, end.y);
+    await page.waitForTimeout(500); // Delay after the second click
   }
 }
 
@@ -118,9 +125,14 @@ async function deleteZones(page, zonePaths) {
   console.log('Deleting zones...');
   for (const { start, end } of zonePaths) {
     console.log(`Deleting zone from (${start.x}, ${start.y}) to (${end.x}, ${end.y})`);
-    await simulatePointerClick(page, start.x, start.y); // Click at start point
-    await simulatePointerClick(page, end.x, end.y);     // Click at end point
-    await page.waitForTimeout(200); // Add delay between actions
+    
+    // First click (start point)
+    await simulatePointerClick(page, start.x, start.y);
+    await page.waitForTimeout(500); // Delay after the first click
+
+    // Second click (end point)
+    await simulatePointerClick(page, end.x, end.y);
+    await page.waitForTimeout(500); // Delay after the second click
   }
 }
 
@@ -144,7 +156,7 @@ async function loginAndSetup(page) {
   await page.goto('http://185.100.212.76:8200');
 
   // Log in
-  await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
+  await page.getByPlaceholder('Email').fill('ramkumar@testdomin.local');
   await page.getByPlaceholder('Password').fill('123456');
   await page.getByRole('button', { name: 'Continue', exact: true }).click();
 

tests/NewCreation.spec.js

@@ -7,7 +7,7 @@ test('Login page', async ({ page }) => {
    await page.getByText('Register here!').click();
    await page.waitForTimeout(3000);
    await page.getByPlaceholder('Username').fill('RamkumarP');
-   await page.getByPlaceholder('Email').fill('ramkumar1234567@testing.local');
+   await page.getByPlaceholder('Email').fill('ramkumar12@tester.local');
    await page.getByPlaceholder('Password').fill('12345678');
    await page.locator('input[type="checkbox"]').first().check(); // Checks the first checkbox
    await page.waitForTimeout(3000);
@@ -16,8 +16,8 @@ test('Login page', async ({ page }) => {
    await page.getByRole('button', { name: 'Continue', exact: true }).click();
    await page.waitForTimeout(10000);
 
-   await page.goto('http://185.100.212.76:8200/project');
-   await page.waitForTimeout(10000);
+  //  await page.goto('http://185.100.212.76:8200/project');
+  //  await page.waitForTimeout(10000);
 
    
 

tests/safety.spec.js

@@ -403,3 +403,185 @@ async function enhancedDeleteWalls(page, coordinates) {
     }
   }
 }
+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
+  }
+});
+
+
+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
+  }
+});
+
+
+//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
+  }
+});
+
+
+//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
+  }
+});