upskill-event-manager/wordpress-dev/tests/e2e/pages/debug-description-field.test.ts

83 lines
No EOL
3.5 KiB
TypeScript

import { test, expect } from '@playwright/test';
import { LoginPage } from './LoginPage';
import { DashboardPage } from './DashboardPage';
import { TEST_USERS } from '../data/test-users';
test.describe('Debug Description Field', () => {
test('Find description field selector', async ({ page }) => {
const loginPage = new LoginPage(page);
const dashboardPage = new DashboardPage(page);
const trainer = TEST_USERS.trainer;
// Login and navigate to create event
await loginPage.navigateToLogin();
await loginPage.login(trainer.username, trainer.password);
await dashboardPage.clickCreateEvent();
// Wait for form to load
await page.waitForTimeout(3000);
// Try different selectors for the description field
const descriptionSelectors = [
'#content',
'textarea#content',
'textarea[name="content"]',
'#content-html',
'#content-visual',
'.wp-editor-area',
'#content_ifr', // TinyMCE iframe
'iframe#content_ifr',
'.mce-content-body',
'div[contenteditable="true"]',
'.mce-edit-area',
'#mceu_27-body', // TinyMCE body
'textarea.wp-editor-area'
];
for (const selector of descriptionSelectors) {
try {
const element = page.locator(selector);
if (await element.isVisible()) {
const tagName = await element.evaluate(el => el.tagName);
const id = await element.evaluate(el => el.id);
const name = await element.evaluate(el => (el as any).name);
const contentEditable = await element.evaluate(el => el.contentEditable);
console.log(`Found element with selector "${selector}":`);
console.log(` Tag: ${tagName}, ID: ${id}, Name: ${name}, ContentEditable: ${contentEditable}`);
// If it's an iframe, check inside it
if (tagName === 'IFRAME') {
const frame = page.frameLocator(selector);
const bodyElement = frame.locator('body');
if (await bodyElement.isVisible()) {
console.log(' Found body inside iframe - this is the TinyMCE editor');
}
}
}
} catch (e) {
// Ignore errors
}
}
// Check if we need to switch to text mode
const textTabButton = page.locator('button#content-html, a#content-html');
if (await textTabButton.isVisible()) {
console.log('\nFound "Text" tab button - clicking to switch to text mode');
await textTabButton.click();
await page.waitForTimeout(1000);
// Now check for textarea
const textarea = page.locator('textarea#content, textarea.wp-editor-area');
if (await textarea.isVisible()) {
console.log('Found textarea after switching to text mode');
await textarea.fill('Test description in text mode');
console.log('Successfully filled description in text mode');
}
}
// Take screenshot
await page.screenshot({ path: 'description-field-debug.png', fullPage: true });
console.log('\nScreenshot saved as description-field-debug.png');
});
});