292 lines
9.5 KiB
JavaScript
292 lines
9.5 KiB
JavaScript
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}`);
|
|
}); |