222 lines
8.4 KiB
JavaScript
222 lines
8.4 KiB
JavaScript
const { chromium } = require('playwright');
|
||
|
||
async function testFurniCRUD() {
|
||
console.log('🧪 Starting Playwright test for Furniture CRUD...\n');
|
||
|
||
const browser = await chromium.launch({ headless: true });
|
||
const context = await browser.newContext({
|
||
ignoreHTTPSErrors: true,
|
||
});
|
||
const page = await context.newPage();
|
||
|
||
try {
|
||
console.log('📍 Navigating to furniture editor...');
|
||
await page.goto('https://admin-panel.habland.orb.local/furni', {
|
||
waitUntil: 'networkidle',
|
||
timeout: 10000
|
||
});
|
||
console.log('✅ Page loaded\n');
|
||
|
||
// Wait for the page to render
|
||
await page.waitForSelector('h1', { timeout: 5000 });
|
||
|
||
// Take screenshot of initial state
|
||
await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/furni-initial.png', fullPage: true });
|
||
console.log('📸 Screenshot saved: furni-initial.png\n');
|
||
|
||
// ===== TEST 1: Check UI Elements =====
|
||
console.log('🔍 Test 1: Checking UI elements...');
|
||
|
||
const heading = await page.locator('h1:has-text("Furniture Editor")').count();
|
||
console.log(` Heading found: ${heading > 0 ? '✅' : '❌'}`);
|
||
|
||
const addButton = await page.locator('button:has-text("Add New")').count();
|
||
console.log(` Add New button found: ${addButton > 0 ? '✅' : '❌'}`);
|
||
|
||
const tabs = await page.locator('button:has-text("havana"), button:has-text("kepler"), button:has-text("roseau"), button:has-text("retro")').count();
|
||
console.log(` Emulator tabs found: ${tabs} (expected: 4) ${tabs === 4 ? '✅' : '❌'}`);
|
||
|
||
// Wait for data to load
|
||
console.log('\n⏳ Waiting for furniture data to load...');
|
||
await page.waitForTimeout(3000);
|
||
|
||
// Check if table has data
|
||
const tableRows = await page.locator('tbody tr').count();
|
||
console.log(` Table rows loaded: ${tableRows} ${tableRows > 0 ? '✅' : '❌'}\n`);
|
||
|
||
// ===== TEST 2: Test Add New Functionality =====
|
||
console.log('➕ Test 2: Testing Add New functionality...');
|
||
|
||
// Click Add New button
|
||
await page.locator('button:has-text("Add New")').click();
|
||
console.log(' Clicked Add New button');
|
||
|
||
await page.waitForTimeout(500);
|
||
|
||
// Check if edit row appeared
|
||
const editRow = await page.locator('tr.bg-purple-500\\/5').count();
|
||
console.log(` Edit row appeared: ${editRow > 0 ? '✅' : '❌'}`);
|
||
|
||
// Fill in the form
|
||
const timestamp = Date.now();
|
||
const testSpriteName = `test_sprite_${timestamp}`;
|
||
const testPublicName = `Test Furniture ${timestamp}`;
|
||
|
||
console.log(` Filling form with test data:`);
|
||
console.log(` sprite_name: ${testSpriteName}`);
|
||
console.log(` public_name: ${testPublicName}`);
|
||
|
||
await page.locator('input[placeholder="sprite_name"]').fill(testSpriteName);
|
||
await page.locator('input[placeholder="Public Name"]').fill(testPublicName);
|
||
await page.locator('select').selectOption('s'); // Floor type
|
||
await page.locator('input[type="number"]').first().fill('2'); // width
|
||
await page.locator('input[type="number"]').last().fill('3'); // length
|
||
|
||
console.log(' Form filled ✅');
|
||
|
||
// Take screenshot before save
|
||
await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/furni-add-form.png', fullPage: true });
|
||
console.log(' 📸 Screenshot saved: furni-add-form.png');
|
||
|
||
// Monitor API call
|
||
const apiCalls = [];
|
||
page.on('response', async response => {
|
||
if (response.url().includes('/api/furni')) {
|
||
const method = response.request().method();
|
||
const status = response.status();
|
||
apiCalls.push({ method, url: response.url(), status });
|
||
}
|
||
});
|
||
|
||
// Click Save button
|
||
console.log(' Clicking Save button...');
|
||
await page.locator('button:has-text("Save")').click();
|
||
|
||
// Wait for API response
|
||
await page.waitForTimeout(2000);
|
||
|
||
// Check API calls
|
||
console.log('\n 📡 API Calls:');
|
||
apiCalls.forEach(call => {
|
||
console.log(` ${call.method} ${call.url} - Status: ${call.status} ${call.status === 200 ? '✅' : '❌'}`);
|
||
});
|
||
|
||
// Verify item was added (look for our test item in the table)
|
||
const itemExists = await page.locator(`td:has-text("${testSpriteName}")`).count();
|
||
console.log(`\n Item created and visible in table: ${itemExists > 0 ? '✅' : '❌'}\n`);
|
||
|
||
// ===== TEST 3: Test Edit Functionality =====
|
||
console.log('✏️ Test 3: Testing Edit functionality...');
|
||
|
||
// Find and hover over our test item row
|
||
const testItemRow = page.locator(`tr:has(td:has-text("${testSpriteName}"))`);
|
||
await testItemRow.hover();
|
||
console.log(' Hovered over test item row');
|
||
|
||
await page.waitForTimeout(500);
|
||
|
||
// Take screenshot showing hover state
|
||
await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/furni-hover.png', fullPage: true });
|
||
console.log(' 📸 Screenshot saved: furni-hover.png');
|
||
|
||
// Click Edit button (should be visible on hover)
|
||
await testItemRow.locator('button[title="Edit"]').click();
|
||
console.log(' Clicked Edit button');
|
||
|
||
await page.waitForTimeout(500);
|
||
|
||
// Modify the public name
|
||
const updatedPublicName = `${testPublicName} [EDITED]`;
|
||
await page.locator('input[placeholder="Public Name"]').fill(updatedPublicName);
|
||
console.log(` Updated public_name to: ${updatedPublicName}`);
|
||
|
||
// Clear API calls array
|
||
apiCalls.length = 0;
|
||
|
||
// Click Save
|
||
await page.locator('button:has-text("Save")').click();
|
||
console.log(' Clicked Save button');
|
||
|
||
await page.waitForTimeout(2000);
|
||
|
||
// Check API calls
|
||
console.log('\n 📡 API Calls:');
|
||
apiCalls.forEach(call => {
|
||
console.log(` ${call.method} ${call.url} - Status: ${call.status} ${call.status === 200 ? '✅' : '❌'}`);
|
||
});
|
||
|
||
// Verify edit worked
|
||
const editedItemExists = await page.locator(`td:has-text("${updatedPublicName}")`).count();
|
||
console.log(`\n Item updated successfully: ${editedItemExists > 0 ? '✅' : '❌'}\n`);
|
||
|
||
// ===== TEST 4: Test Delete Functionality =====
|
||
console.log('🗑️ Test 4: Testing Delete functionality...');
|
||
|
||
// Hover over test item row again
|
||
await testItemRow.hover();
|
||
await page.waitForTimeout(500);
|
||
|
||
// Set up dialog handler for confirmation
|
||
page.once('dialog', async dialog => {
|
||
console.log(` Confirmation dialog appeared: "${dialog.message()}"`);
|
||
await dialog.accept();
|
||
console.log(' Accepted confirmation dialog');
|
||
});
|
||
|
||
// Clear API calls array
|
||
apiCalls.length = 0;
|
||
|
||
// Click Delete button
|
||
await testItemRow.locator('button[title="Delete"]').click();
|
||
console.log(' Clicked Delete button');
|
||
|
||
await page.waitForTimeout(2000);
|
||
|
||
// Check API calls
|
||
console.log('\n 📡 API Calls:');
|
||
apiCalls.forEach(call => {
|
||
console.log(` ${call.method} ${call.url} - Status: ${call.status} ${call.status === 200 ? '✅' : '❌'}`);
|
||
});
|
||
|
||
// Verify item was deleted
|
||
const deletedItemExists = await page.locator(`td:has-text("${testSpriteName}")`).count();
|
||
console.log(`\n Item deleted successfully: ${deletedItemExists === 0 ? '✅' : '❌'}\n`);
|
||
|
||
// ===== TEST 5: Test Emulator Tabs =====
|
||
console.log('🔀 Test 5: Testing emulator tabs...');
|
||
|
||
const emulators = ['havana', 'kepler', 'roseau', 'retro'];
|
||
for (const emulator of emulators) {
|
||
await page.locator(`button:has-text("${emulator}")`).click();
|
||
console.log(` Clicked ${emulator} tab`);
|
||
|
||
await page.waitForTimeout(2000);
|
||
|
||
const rows = await page.locator('tbody tr').count();
|
||
console.log(` ${emulator} tab loaded: ${rows} items ${rows > 0 ? '✅' : '❌'}`);
|
||
}
|
||
|
||
// Take final screenshot
|
||
await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/furni-final.png', fullPage: true });
|
||
console.log('\n📸 Screenshot saved: furni-final.png');
|
||
|
||
console.log('\n✅ All CRUD tests completed!\n');
|
||
console.log('Summary:');
|
||
console.log(' ✅ UI elements present');
|
||
console.log(' ✅ Add New functionality works');
|
||
console.log(' ✅ Edit functionality works');
|
||
console.log(' ✅ Delete functionality works');
|
||
console.log(' ✅ All emulator tabs work');
|
||
|
||
} catch (error) {
|
||
console.error('\n❌ Test failed:', error.message);
|
||
await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/furni-error.png', fullPage: true });
|
||
console.log('📸 Error screenshot saved: furni-error.png');
|
||
} finally {
|
||
await browser.close();
|
||
console.log('\n🎬 Browser closed');
|
||
}
|
||
}
|
||
|
||
testFurniCRUD().catch(console.error);
|