test-localStorage-injection-simple.js•5.59 kB
/**
* @document Simple Browser Test for localStorage Injection
* @version 1.0.0
* @status active
* @author Claude Code
* @created 2025-06-30
* @description Simplified test to validate localStorage injection in Composer
*/
import { chromium } from 'playwright';
import { fotossintesesComposerJSON } from '../../compositions/fotossintese-composer-json-v1.1.0.js';
async function testLocalStorageInjection() {
console.log('🎭 Starting simplified localStorage injection test...\n');
const browser = await chromium.launch({
headless: false, // Show browser for debugging
slowMo: 500 // Slow down for visibility
});
try {
const context = await browser.newContext({
viewport: { width: 1920, height: 1080 }
});
const page = await context.newPage();
// Step 1: Navigate to Composer
console.log('📍 Step 1: Navigating to Composer...');
const composerUrl = 'https://composer.euconquisto.com/composer';
await page.goto(composerUrl, { waitUntil: 'networkidle' });
// Take screenshot of initial state
await page.screenshot({
path: 'logs/screenshots/injection/01-initial-composer.png',
fullPage: true
});
// Step 2: Execute injection directly
console.log('💉 Step 2: Injecting fotossíntese composition...');
// Pass the composition data directly to browser context
const injectionResult = await page.evaluate((compositionData) => {
try {
// Clear existing data
localStorage.removeItem('rdp-composer-data');
// Inject new composition
localStorage.setItem('rdp-composer-data', JSON.stringify(compositionData));
// Verify
const stored = localStorage.getItem('rdp-composer-data');
const parsed = JSON.parse(stored);
console.log('✅ Composition injected:', {
id: parsed.composition.id,
title: parsed.composition.title,
elements: parsed.composition.elements.length
});
return {
success: true,
compositionId: parsed.composition.id,
title: parsed.composition.title,
elementCount: parsed.composition.elements.length
};
} catch (error) {
console.error('❌ Injection failed:', error);
return {
success: false,
error: error.message
};
}
}, fotossintesesComposerJSON);
console.log('📦 Injection result:', injectionResult);
// Take screenshot after injection
await page.screenshot({
path: 'logs/screenshots/injection/02-after-injection.png',
fullPage: true
});
// Step 3: Reload page to trigger localStorage load
console.log('🔄 Step 3: Reloading page to trigger composition load...');
await page.reload({ waitUntil: 'networkidle' });
await page.waitForTimeout(3000);
// Take screenshot after reload
await page.screenshot({
path: 'logs/screenshots/injection/03-after-reload.png',
fullPage: true
});
// Step 4: Check for composition visibility
console.log('✨ Step 4: Checking for composition visibility...');
const validationResult = await page.evaluate(() => {
const bodyText = document.body.innerText || '';
const hasPhotosynthesis = bodyText.toLowerCase().includes('fotossíntese');
const hasPlants = bodyText.toLowerCase().includes('plantas');
const hasWidgetElements = document.querySelectorAll('[class*="widget"], [class*="element"], [class*="composition"]').length > 0;
// Also check localStorage persistence
const storageData = localStorage.getItem('rdp-composer-data');
const hasPersistentData = !!storageData;
return {
hasPhotosynthesis,
hasPlants,
hasWidgetElements,
hasPersistentData,
visibleTextSnippet: bodyText.substring(0, 200)
};
});
console.log('🎯 Validation results:', validationResult);
// Take final screenshot
await page.screenshot({
path: 'logs/screenshots/injection/04-final-state.png',
fullPage: true
});
// Generate summary
console.log('\n📊 Test Summary:');
console.log('================');
console.log(`✅ localStorage injection: ${injectionResult.success ? 'SUCCESS' : 'FAILED'}`);
console.log(`📍 Composition ID: ${injectionResult.compositionId || 'N/A'}`);
console.log(`📝 Title: ${injectionResult.title || 'N/A'}`);
console.log(`🧩 Elements: ${injectionResult.elementCount || 0}`);
console.log(`👁️ Content visible: ${validationResult.hasPhotosynthesis ? 'YES' : 'NO'}`);
console.log(`💾 Data persisted: ${validationResult.hasPersistentData ? 'YES' : 'NO'}`);
return {
injection: injectionResult,
validation: validationResult,
success: injectionResult.success && validationResult.hasPersistentData
};
} catch (error) {
console.error('❌ Test failed:', error);
throw error;
} finally {
// Keep browser open for 10 seconds to observe
console.log('\n⏸️ Keeping browser open for observation...');
await new Promise(resolve => setTimeout(resolve, 10000));
await browser.close();
}
}
// Run the test
testLocalStorageInjection()
.then(report => {
console.log('\n✅ Test completed!');
console.log('📸 Screenshots saved in logs/screenshots/injection/');
process.exit(0);
})
.catch(error => {
console.error('\n❌ Test failed:', error);
process.exit(1);
});