405 lines
14 KiB
JavaScript
405 lines
14 KiB
JavaScript
import { test, expect } from '@playwright/test';
|
|
import fs from 'fs';
|
|
|
|
test('Create walls using reusable function', async ({ page }) => {
|
|
// 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('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 and select wall tool
|
|
await page.locator('.toggle-option:has-text("2d")').click();
|
|
await page.getByTitle('Wall').getByRole('img').click();
|
|
|
|
// 4. Wait for the canvas to be ready
|
|
const canvas = page.locator('canvas');
|
|
await canvas.waitFor();
|
|
|
|
// 5. 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');
|
|
|
|
// 6. Take a final screenshot after drawing walls
|
|
const afterPath = `${screenshotDir}/walls-created-fullscreen.png`;
|
|
await page.screenshot({ path: afterPath });
|
|
console.log(`Final screenshot saved at: ${afterPath}`);
|
|
});
|
|
|
|
test('Delete walls and 3 dots menu using reusable function', async ({ page }) => {
|
|
// 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('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. 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();
|
|
|
|
// 5. Wait for the canvas to be ready
|
|
const canvas = page.locator('canvas');
|
|
await canvas.waitFor();
|
|
|
|
// 6. Delete walls using reusable function
|
|
const wallCoordinates = [
|
|
{ x: 147, y: 212 },
|
|
{ x: 138, y: 542 },
|
|
{ x: 619, y: 548 },
|
|
{ x: 614, y: 286 },
|
|
{ x: 146, y: 343 },
|
|
{ x: 328, y: 542 },
|
|
{ x: 618, y: 459 },
|
|
{ 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, 'delete');
|
|
|
|
// 7. Delete the "3 dots" menu if it's part of the canvas
|
|
console.log('Deleting the 3 dots menu...');
|
|
try {
|
|
// Attempt to locate and click the "3 dots" menu
|
|
const threeDotsMenu = page.locator('.drop-down-option-button > svg');
|
|
await threeDotsMenu.waitFor({ state: 'visible', timeout: 5000 }); // Ensure it's visible
|
|
await threeDotsMenu.click(); // Click to select it
|
|
await simulatePointerClick(page, 500, 500); // Simulate a delete action on the canvas
|
|
|
|
console.log('Successfully deleted the 3 dots menu.');
|
|
} catch (error) {
|
|
console.error('Failed to delete the 3 dots menu:', error.message);
|
|
}
|
|
|
|
// 8. Take a final screenshot after deleting walls and the 3 dots menu
|
|
const afterPath = `${screenshotDir}/walls-deleted-fullscreen.png`;
|
|
await page.screenshot({ path: afterPath });
|
|
console.log(`Final screenshot saved at: ${afterPath}`);
|
|
});
|
|
|
|
/**
|
|
* 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 });
|
|
}
|
|
|
|
/**
|
|
* 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);
|
|
}
|
|
|
|
if (action === 'create') {
|
|
// Finalize wall creation with right-click
|
|
await simulatePointerClick(page, 100, 160, 'right'); // Right-click to finalize
|
|
}
|
|
}
|
|
|
|
//Secound config
|
|
import { test, expect } from '@playwright/test';
|
|
import fs from 'fs';
|
|
|
|
test('Create walls after moving canvas', async ({ page }) => {
|
|
// 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('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 wall tool
|
|
console.log('Selecting wall tool...');
|
|
await page.getByTitle('Wall').getByRole('img').click();
|
|
|
|
// 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}`);
|
|
});
|
|
|
|
test('Delete walls after moving canvas', async ({ page }) => {
|
|
// 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('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. 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(1000); // Adjust timeout if necessary
|
|
|
|
// 6. Define specific points for deletion
|
|
const deleteCoordinates = [
|
|
{ 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 },
|
|
];
|
|
|
|
// Delete walls using enhanced deletion function
|
|
await enhancedDeleteWalls(page, deleteCoordinates);
|
|
|
|
// 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}`);
|
|
});
|
|
|
|
/**
|
|
* 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 });
|
|
}
|
|
|
|
/**
|
|
* Enhanced deletion function with retries, expanded click area, and success check.
|
|
* @param {Object} page - Playwright page object
|
|
* @param {Array} coordinates - Array of {x, y} objects representing wall points
|
|
*/
|
|
async function enhancedDeleteWalls(page, coordinates) {
|
|
console.log('Enhanced deletion process started...');
|
|
|
|
for (const { x, y } of coordinates) {
|
|
let isDeleted = false;
|
|
const maxRetries = 2; // Reduced maximum number of retries
|
|
let retryCount = 0;
|
|
|
|
// Attempt deletion with retries
|
|
while (!isDeleted && retryCount < maxRetries) {
|
|
console.log(`Attempting to delete at (${x}, ${y}), attempt ${retryCount + 1}`);
|
|
|
|
// Expand the click area slightly to account for imprecise targeting
|
|
const offsets = [
|
|
{ dx: 0, dy: 0 }, // Exact coordinate
|
|
{ dx: 5, dy: 0 }, // Slightly to the right
|
|
{ dx: -5, dy: 0 }, // Slightly to the left
|
|
{ dx: 0, dy: 5 }, // Slightly below
|
|
{ dx: 0, dy: -5 }, // Slightly above
|
|
];
|
|
|
|
for (const { dx, dy } of offsets) {
|
|
const adjustedX = x + dx;
|
|
const adjustedY = y + dy;
|
|
|
|
console.log(`Clicking at adjusted position (${adjustedX}, ${adjustedY})`);
|
|
await simulatePointerClick(page, adjustedX, adjustedY);
|
|
|
|
// Add a small delay between clicks to ensure proper interaction
|
|
await page.waitForTimeout(100); // Reduced delay
|
|
|
|
// Check if the wall is deleted (custom logic can be added here if possible)
|
|
// For now, assume success after trying all offsets
|
|
isDeleted = true; // Placeholder for actual deletion check
|
|
}
|
|
|
|
retryCount++;
|
|
}
|
|
|
|
if (!isDeleted) {
|
|
console.warn(`Failed to delete wall at (${x}, ${y}) after ${maxRetries} attempts.`);
|
|
}
|
|
}
|
|
} |