213 lines
7.8 KiB
JavaScript
213 lines
7.8 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 });
|
|
|
|
/**
|
|
* 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);
|
|
|
|
// 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...');
|
|
await page.getByTitle('Zone').getByRole('img').click();
|
|
|
|
// Define zone paths (start and end points)
|
|
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 } },
|
|
];
|
|
|
|
// Create zones using reusable function with increased delays
|
|
await createZones(page, zonePaths);
|
|
|
|
// Take a final screenshot after creating zones
|
|
const zonesAfterPath = `${screenshotDir}/zones-created-after-moving-canvas.png`;
|
|
await page.screenshot({ path: zonesAfterPath });
|
|
console.log(`Final screenshot saved at: ${zonesAfterPath}`);
|
|
});
|
|
|
|
/**
|
|
* 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();
|
|
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(2000); // Adjust timeout if necessary
|
|
|
|
// Define zone paths (same as creation)
|
|
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 } },
|
|
];
|
|
|
|
// Delete zones using reusable function with increased delays
|
|
await deleteZones(page, zonePaths);
|
|
|
|
// Take a final screenshot after deleting zones
|
|
const afterPath = `${screenshotDir}/zones-deleted-after-moving-canvas.png`;
|
|
await page.screenshot({ path: afterPath });
|
|
console.log(`Final screenshot saved at: ${afterPath}`);
|
|
});
|
|
|
|
/**
|
|
* Reusable function for creating zones.
|
|
* @param {Object} page - Playwright page object
|
|
* @param {Array} zonePaths - Array of {start, end} objects representing zone points
|
|
*/
|
|
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})`);
|
|
|
|
// First click (start point)
|
|
await simulatePointerClick(page, start.x, start.y);
|
|
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); // Increased delay after the second click
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Reusable function for deleting zones.
|
|
* @param {Object} page - Playwright page object
|
|
* @param {Array} zonePaths - Array of {start, end} objects representing zone points
|
|
*/
|
|
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})`);
|
|
|
|
// First click (start point)
|
|
await simulatePointerClick(page, start.x, start.y);
|
|
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); // Increased delay after the second click
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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 });
|
|
}
|
|
|
|
/**
|
|
* Common setup function for logging in and switching to full-screen mode.
|
|
*/
|
|
async function loginAndSetup(page) {
|
|
// Navigate to the application
|
|
await page.goto('http://185.100.212.76:8200');
|
|
|
|
// Log in
|
|
await page.getByPlaceholder('Email').fill('ramkumar@testdomin.local');
|
|
await page.getByPlaceholder('Password').fill('123456');
|
|
await page.getByRole('button', { name: 'Continue', exact: true }).click();
|
|
|
|
// 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
|
|
}
|
|
|
|
/**
|
|
* 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.');
|
|
}
|
|
|
|
// 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();
|
|
} |