juanatsap
105 lines
3.8 KiB
JavaScript
105 lines
3.8 KiB
JavaScript
#!/usr/bin/env node
|
|
|
|
/**
|
|
* Final Zoom Control Test - X Button and Drag
|
|
*/
|
|
|
|
import { chromium } from 'playwright';
|
|
|
|
async function testZoomControl() {
|
|
console.log('🧪 Final Zoom Control Test - X Button & Drag\n');
|
|
|
|
const browser = await chromium.launch({ headless: false });
|
|
const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
|
|
const page = await context.newPage();
|
|
|
|
try {
|
|
// Navigate
|
|
console.log('📄 Loading http://localhost:1999/?lang=en');
|
|
await page.goto('http://localhost:1999/?lang=en', { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(2000);
|
|
|
|
const zoomControl = page.locator('#zoom-control');
|
|
await zoomControl.waitFor({ state: 'visible', timeout: 5000 });
|
|
console.log('✅ Zoom control loaded\n');
|
|
|
|
// TEST 1: X Button
|
|
console.log('🧪 TEST 1: X Button Click');
|
|
const closeButton = page.locator('#zoom-close');
|
|
await closeButton.click({ force: true });
|
|
await page.waitForTimeout(500);
|
|
|
|
const isHidden = await zoomControl.evaluate(el =>
|
|
window.getComputedStyle(el).display === 'none'
|
|
);
|
|
|
|
if (isHidden) {
|
|
console.log('✅ SUCCESS: X button works! Zoom control is hidden\n');
|
|
} else {
|
|
console.log('❌ FAIL: X button did not hide zoom control\n');
|
|
throw new Error('X button test failed');
|
|
}
|
|
|
|
// Show it again for drag test
|
|
await page.evaluate(() => {
|
|
document.getElementById('zoom-control').style.display = '';
|
|
});
|
|
await page.waitForTimeout(500);
|
|
|
|
// TEST 2: Drag Functionality
|
|
console.log('🧪 TEST 2: Drag Functionality');
|
|
|
|
const initialBox = await zoomControl.boundingBox();
|
|
console.log(` Initial position: x=${Math.round(initialBox.x)}, y=${Math.round(initialBox.y)}`);
|
|
|
|
// Click on grey background area (not on buttons)
|
|
const dragX = initialBox.x + 60; // Left side, away from buttons
|
|
const dragY = initialBox.y + initialBox.height / 2;
|
|
|
|
await page.mouse.move(dragX, dragY);
|
|
await page.mouse.down();
|
|
|
|
// Drag to new location
|
|
const targetX = dragX + 300;
|
|
const targetY = dragY - 150;
|
|
console.log(` Dragging to: x=${Math.round(targetX)}, y=${Math.round(targetY)}`);
|
|
|
|
await page.mouse.move(targetX, targetY, { steps: 20 });
|
|
await page.mouse.up();
|
|
await page.waitForTimeout(500);
|
|
|
|
const finalBox = await zoomControl.boundingBox();
|
|
console.log(` Final position: x=${Math.round(finalBox.x)}, y=${Math.round(finalBox.y)}`);
|
|
|
|
const deltaX = Math.abs(finalBox.x - initialBox.x);
|
|
const deltaY = Math.abs(finalBox.y - initialBox.y);
|
|
|
|
if (deltaX > 100 || deltaY > 50) {
|
|
console.log(`✅ SUCCESS: Drag works! Moved ${Math.round(deltaX)}px horizontally, ${Math.round(deltaY)}px vertically\n`);
|
|
} else {
|
|
console.log(`❌ FAIL: Drag did not work properly. Only moved ${Math.round(deltaX)}px, ${Math.round(deltaY)}px\n`);
|
|
throw new Error('Drag test failed');
|
|
}
|
|
|
|
// Summary
|
|
console.log('='.repeat(60));
|
|
console.log('✅ ALL TESTS PASSED!');
|
|
console.log('='.repeat(60));
|
|
console.log('✅ X button hides zoom control');
|
|
console.log('✅ Drag functionality works correctly');
|
|
console.log('='.repeat(60));
|
|
|
|
console.log('\n🎉 Zoom control is fully functional!');
|
|
console.log('\n⏸️ Browser will stay open for 5 seconds...');
|
|
await page.waitForTimeout(5000);
|
|
|
|
} catch (error) {
|
|
console.error('\n❌ Test failed:', error.message);
|
|
} finally {
|
|
await browser.close();
|
|
console.log('\n✅ Test completed\n');
|
|
}
|
|
}
|
|
|
|
testZoomControl();
|