Some Changes

run-tests-create.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # Run the first test
-npx playwright test tests/Builder2D/Wall.spec.js --headed --grep "Create walls" 
+# 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"

tests/Builder2D/Asile.spec.js

@@ -6,7 +6,7 @@ const screenshotDir = 'screenshots';
 fs.mkdirSync(screenshotDir, { recursive: true });
 
 // Aisle coordinates (shared between tests)
-const aisleCoordinates = [
+const aisleCoordinates =  [
   { x: 191, y: 237 },
   { x: 271, y: 238 },
   { x: 301, y: 170, button: 'right' },
@@ -133,23 +133,49 @@ const aisleCoordinates = [
  */
 async function drawOrDeleteAisles(page, coordinates, action) {
   console.log(`${action === 'create' ? 'Creating' : 'Deleting'} aisles...`);
+  const startTime = Date.now(); // Start measuring time
 
-  for (const { x, y, button = 'left' } of coordinates) {
+  // Group coordinates into smaller batches to reduce overhead
-    console.log(`${action === 'create' ? 'Creating' : 'Deleting'} at (${x}, ${y})`);
+  const batchSize = 10; // Adjust based on application performance
-    await simulatePointerClick(page, x, y, button);
+  for (let i = 0; i < coordinates.length; i += batchSize) {
+    const batch = coordinates.slice(i, i + batchSize);
 
-    // Add a small delay between clicks to ensure proper interaction
+    // Process each batch
-    await page.waitForTimeout(300); // Adjust timeout if necessary
+    for (const { x, y, button = 'left' } of batch) {
+      console.log(`${action === 'create' ? 'Creating' : 'Deleting'} at (${x}, ${y})`);
+      await simulatePointerClick(page, x, y, button);
+
+      // Wait for the element to disappear (if applicable)
+      if (action === 'delete') {
+        try {
+          await page.waitForSelector(`[data-aisle-coordinates="${x},${y}"]`, { state: 'hidden', timeout: 1000 });
+        } catch (error) {
+          console.warn(`Element at (${x}, ${y}) was not found or already deleted.`);
+        }
+      }
+    }
+
+    // Add a small delay after each batch to allow the application to catch up
+    await page.waitForTimeout(500); // Reduced delay compared to individual clicks
   }
 
+  // Finalize aisle creation with right-click (only for creation)
   if (action === 'create') {
-    // Finalize aisle creation with right-click
+    console.log('Finalizing aisle creation...');
     await simulatePointerClick(page, 100, 160, 'right'); // Right-click to finalize
   }
+
+  // Log total time taken
+  const endTime = Date.now();
+  console.log(`Finished ${action === 'create' ? 'creating' : 'deleting'} aisles in ${(endTime - startTime) / 1000} seconds.`);
 }
 
 /**
  * Simulates a pointer click at specific coordinates.
+ * @param {Object} page - Playwright page object
+ * @param {Number} x - X-coordinate
+ * @param {Number} y - Y-coordinate
+ * @param {String} button - Mouse button ('left', 'right', or 'dblclick')
  */
 async function simulatePointerClick(page, x, y, button = 'left') {
   // Move to the desired position
@@ -187,7 +213,6 @@ async function setupCanvasAndTools(page, toolSelector) {
   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.');
   }
@@ -199,15 +224,8 @@ async function setupCanvasAndTools(page, toolSelector) {
   // Simulate a drag action to move the canvas
   await page.mouse.move(startX, startY);
   await page.mouse.down();
-
+  await page.mouse.move(startX, startY + 100, { steps: 20 }); // Smooth movement
-  // 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)

tests/Builder2D/Assets.spec.js

@@ -56,35 +56,66 @@ async function moveCanvas(page) {
 }
 
 /**
- * Function to simulate dragging an asset from the panel to the canvas.
+ * Function to place an asset on the canvas using simulated drag-and-drop.
  * @param {Object} page - Playwright page object
- * @param {String} assetSelector - Selector for the asset to drag (e.g., '#forklift', '#agv')
+ * @param {String} assetSelector - Selector for the asset to select (e.g., '#forklift', '#agv')
  * @param {Array} coordinates - Array of {x, y} objects representing drop positions
  */
-async function dragAssetToCanvas(page, assetSelector, coordinates) {
+async function placeAssetOnCanvas(page, assetSelector, coordinates) {
-  console.log(`Dragging asset ${assetSelector} to canvas...`);
+  console.log(`Placing asset ${assetSelector} on canvas...`);
 
   // Step 1: Select the "Vehicles" category
+  console.log('Waiting for #Vehicles to be visible...');
+  await page.waitForSelector('#Vehicles', { state: 'visible' }); // Wait for the element to be visible
   await page.locator('#Vehicles').click();
 
-  // Step 2: Locate the asset and get its bounding box
+  // Step 2: Locate the asset
   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;
+  // Step 3: Place the asset at the specified coordinates
-  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})`);
+    console.log(`Placing asset at (${x}, ${y})`);
-    await page.mouse.move(assetCenterX, assetCenterY); // Move to the center of the asset
+    const target = page.locator('canvas'); // Target the canvas
+
+    // Get bounding boxes for the asset and canvas
+    const assetBox = await asset.boundingBox();
+    const canvasBox = await target.boundingBox();
+
+    if (!assetBox || !canvasBox) {
+      throw new Error('Asset or canvas bounding box not found.');
+    }
+
+    // Calculate relative positions
+    const assetCenterX = assetBox.x + assetBox.width / 2;
+    const assetCenterY = assetBox.y + assetBox.height / 2;
+
+    // Simulate drag-and-drop manually
+    await page.mouse.move(assetCenterX, assetCenterY); // Move to 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.move(canvasBox.x + x, canvasBox.y + y, { steps: 50 }); // Move to the target on the canvas
     await page.mouse.up(); // Release the left mouse button
-    await page.waitForTimeout(500); // Add a small delay between drops
+
+    // Trigger custom drag-and-drop events
+    await page.evaluate(
+      ({ assetSelector, targetSelector, x, y }) => {
+        const asset = document.querySelector(assetSelector);
+        const target = document.querySelector(targetSelector);
+
+        // Trigger drag-and-drop events
+        const dragStartEvent = new Event('dragstart', { bubbles: true });
+        asset.dispatchEvent(dragStartEvent);
+
+        const dragOverEvent = new Event('dragover', { bubbles: true });
+        target.dispatchEvent(dragOverEvent);
+
+        const dropEvent = new Event('drop', { bubbles: true });
+        target.dispatchEvent(dropEvent);
+      },
+      { assetSelector, targetSelector: 'canvas', x, y } // Wrap arguments in an object
+    );
+
+    // Add a small delay between placements
+    await page.waitForTimeout(500);
   }
 }
 
@@ -115,15 +146,23 @@ test('Add Forklift and AGV assets to the canvas', async ({ page }) => {
 
   // Step 6: Add Forklift assets
   console.log('Adding Forklift assets...');
-  await dragAssetToCanvas(page, '#forklift', forkliftCoordinates);
+  await placeAssetOnCanvas(page, '#forklift', forkliftCoordinates);
 
-  await page.getByText('← Back').click();
   // Step 7: Add AGV assets
   console.log('Adding AGV assets...');
-  await dragAssetToCanvas(page, '#agv', agvCoordinates);
+  await placeAssetOnCanvas(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');
+
+  // Step 9: Add assertions to verify assets are placed
+  console.log('Verifying assets are placed on the canvas...');
+  const forkliftCount = await page.locator('.forklift-asset').count(); // Replace with the actual selector for forklifts
+  const agvCount = await page.locator('.agv-asset').count(); // Replace with the actual selector for AGVs
+
+  expect(forkliftCount).toBeGreaterThan(0, 'No forklift assets were placed on the canvas.');
+  expect(agvCount).toBeGreaterThan(0, 'No AGV assets were placed on the canvas.');
+
+  console.log('Assertions passed: Assets are successfully placed on the canvas.');
 });

tests/Builder2D/Zone.spec.js

@@ -9,16 +9,25 @@ fs.mkdirSync(screenshotDir, { recursive: true });
  * Test Case: Create Zones After Moving Canvas
  */
 test('Create zones after moving canvas', async ({ page }) => {
+  test.setTimeout(120000); // Increase timeout to 2 minutes
+
   // 1. Navigate to the application, log in, and set up
   await loginAndSetup(page);
 
   // 2. Switch to 2D mode
+  console.log('Switching to 2D mode...');
   await page.locator('.toggle-option:has-text("2d")').click();
 
   // 3. Move the canvas to the top position
   await moveCanvas(page);
 
-  await page.waitForTimeout(2000); // Wait for the canvas to be moved
+  // Wait for the canvas to stabilize
+  console.log('Waiting for canvas to stabilize...');
+  await page.waitForTimeout(5000); // Increased delay to ensure stability
+
+  // Take a screenshot after moving the canvas
+  await page.screenshot({ path: `${screenshotDir}/canvas-moved.png` });
+  console.log('Canvas moved. Screenshot saved.');
 
   // 4. Select the zone tool
   console.log('Selecting zone tool...');
@@ -53,15 +62,22 @@ test('Create zones after moving canvas', async ({ page }) => {
  * Test Case: Delete Zones After Moving Canvas
  */
 test('Delete zones after moving canvas', async ({ page }) => {
+  test.setTimeout(120000); // Increase timeout to 2 minutes
+
   // 1. Navigate to the application, log in, and set up
   await loginAndSetup(page);
 
   // 2. Switch to 2D mode
+  console.log('Switching to 2D mode...');
   await page.locator('.toggle-option:has-text("2d")').click();
 
   // 3. Move the canvas to the top position
   await moveCanvas(page);
 
+  // Wait for the canvas to stabilize
+  console.log('Waiting for canvas to stabilize...');
+  await page.waitForTimeout(5000); // Increased delay to ensure stability
+
   // 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();
@@ -69,7 +85,7 @@ 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(500); // Adjust timeout if necessary
+  await page.waitForTimeout(2000); // Adjust timeout if necessary
 
   // Define zone paths (same as creation)
   const zonePaths = [
@@ -108,11 +124,11 @@ async function createZones(page, zonePaths) {
     
     // First click (start point)
     await simulatePointerClick(page, start.x, start.y);
-    await page.waitForTimeout(500); // Delay after the first click
+    await page.waitForTimeout(500); // Increased 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
+    await page.waitForTimeout(500); // Increased delay after the second click
   }
 }
 
@@ -128,11 +144,11 @@ async function deleteZones(page, zonePaths) {
     
     // First click (start point)
     await simulatePointerClick(page, start.x, start.y);
-    await page.waitForTimeout(500); // Delay after the first click
+    await page.waitForTimeout(500); // Increased 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
+    await page.waitForTimeout(500); // Increased delay after the second click
   }
 }