Some Changes

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) {
-  console.log(`Dragging asset ${assetSelector} to canvas...`);
+async function placeAssetOnCanvas(page, assetSelector, coordinates) {
+  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;
-  const assetCenterY = assetBox.y + assetBox.height / 2;
-
-  // Step 3: Drag and drop each asset to the specified coordinates
+  // Step 3: Place the asset at 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
+    console.log(`Placing asset at (${x}, ${y})`);
+    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.');
 });