Ultimate Elementor MCP

/** * Elementor Integration Tests * * Tests end-to-end Elementor operations with real API calls * Note: Requires valid WordPress credentials and Elementor plugin installed */ import { ElementorService } from '../../src/services/elementor/elementor-service.js'; import { WordPressService } from '../../src/services/wordpress/wordpress-service.js'; import { getWordPressConfig } from '../../src/config/wordpress-config.js'; import { WordPressClient } from '../../src/services/wordpress-client.js'; // Skip these tests if WordPress credentials are not available const describeIfWordPressConfigured = process.env.WORDPRESS_BASE_URL ? describe : describe.skip; describeIfWordPressConfigured('Elementor Integration Tests', () => { let elementorService: ElementorService; let wpService: WordPressService; let testPageId: number; beforeAll(() => { const config = getWordPressConfig(); if (!config) { throw new Error('WordPress configuration not available'); } const client = new WordPressClient(config); elementorService = new ElementorService(client.getAxiosInstance()); wpService = new WordPressService(config); }); beforeEach(async () => { // Create a test page for Elementor operations const pageData = { title: 'Elementor Integration Test Page - ' + Date.now(), content: '', status: 'draft' }; const page = await wpService.pages.createPage(pageData); testPageId = page.id; }, 15000); afterEach(async () => { // Clean up test page if (testPageId) { try { await wpService.pages.deletePage(testPageId, true); } catch (error) { console.warn('Failed to clean up test page:', error); } } }, 15000); describe('Elementor Data Operations', () => { it('should get Elementor data for a page', async () => { const result = await elementorService.data.getElementorData(testPageId); expect(result).toBeDefined(); expect(Array.isArray(result)).toBe(true); }, 15000); it('should update Elementor data for a page', async () => { const elementorData = [ { id: 'test-section', elType: 'section', settings: { background_color: '#ffffff' }, elements: [ { id: 'test-column', elType: 'column', settings: { _column_size: 100 }, elements: [ { id: 'test-heading', elType: 'widget', widgetType: 'heading', settings: { title: 'Integration Test Heading', align: 'center' } } ] } ] } ]; const result = await elementorService.data.updateElementorData(testPageId, elementorData); expect(result).toBeDefined(); expect(result.id).toBe(testPageId); }, 15000); it('should retrieve updated Elementor data', async () => { const elementorData = [ { id: 'test-section-2', elType: 'section', settings: {}, elements: [ { id: 'test-column-2', elType: 'column', settings: { _column_size: 100 }, elements: [ { id: 'test-text', elType: 'widget', widgetType: 'text-editor', settings: { editor: 'Test content from integration tests' } } ] } ] } ]; await elementorService.data.updateElementorData(testPageId, elementorData); const result = await elementorService.data.getElementorData(testPageId); expect(result).toBeDefined(); expect(Array.isArray(result)).toBe(true); expect(result.length).toBeGreaterThan(0); expect(result[0].id).toBe('test-section-2'); }, 15000); it('should get Elementor data in chunks', async () => { const elementorData = [ { id: 'section-1', elType: 'section', settings: {}, elements: [] }, { id: 'section-2', elType: 'section', settings: {}, elements: [] }, { id: 'section-3', elType: 'section', settings: {}, elements: [] } ]; await elementorService.data.updateElementorData(testPageId, elementorData); const result = await elementorService.data.getElementorDataChunked(testPageId, 2); expect(result).toBeDefined(); expect(result.chunks).toBeDefined(); expect(result.totalElements).toBe(3); expect(result.totalChunks).toBe(2); expect(result.chunks.length).toBe(2); }, 15000); it('should backup Elementor data', async () => { const elementorData = [ { id: 'backup-section', elType: 'section', settings: {}, elements: [] } ]; await elementorService.data.updateElementorData(testPageId, elementorData); const result = await elementorService.data.backupElementorData(testPageId); expect(result).toBeDefined(); expect(result.postId).toBe(testPageId); expect(result.elementorData).toBeDefined(); expect(result.backupTimestamp).toBeDefined(); expect(result.version).toBeDefined(); }, 15000); }); describe('Element Builder Operations', () => { it('should create a section with elements', async () => { const section = elementorService.builder.createSection({ background_color: '#f0f0f0' }); expect(section).toBeDefined(); expect(section.elType).toBe('section'); expect(section.settings.background_color).toBe('#f0f0f0'); expect(section.elements).toBeDefined(); expect(Array.isArray(section.elements)).toBe(true); }); it('should create a column', async () => { const column = elementorService.builder.createColumn({ _column_size: 50 }); expect(column).toBeDefined(); expect(column.elType).toBe('column'); expect(column.settings._column_size).toBe(50); expect(column.elements).toBeDefined(); }); it('should create a container', async () => { const container = elementorService.builder.createContainer({ flex_direction: 'row' }); expect(container).toBeDefined(); expect(container.elType).toBe('container'); expect(container.settings.flex_direction).toBe('row'); }); it('should create widget elements', async () => { const heading = elementorService.builder.createHeading({ title: 'Test Heading', header_size: 'h1' }); const text = elementorService.builder.createText({ editor: 'Test text content' }); const button = elementorService.builder.createButton({ text: 'Click Me', link: { url: '#', is_external: false } }); expect(heading.widgetType).toBe('heading'); expect(text.widgetType).toBe('text-editor'); expect(button.widgetType).toBe('button'); }); }); describe('Element Manipulation Operations', () => { it('should find element by ID', async () => { const elementorData = [ { id: 'find-section', elType: 'section', settings: {}, elements: [ { id: 'find-column', elType: 'column', settings: {}, elements: [ { id: 'find-heading', elType: 'widget', widgetType: 'heading', settings: { title: 'Find Me' } } ] } ] } ]; const element = elementorService.manipulation.findElementById(elementorData, 'find-heading'); expect(element).toBeDefined(); expect(element?.id).toBe('find-heading'); expect((element as any)?.settings?.title).toBe('Find Me'); }); it('should update element settings', async () => { const elementorData = [ { id: 'update-section', elType: 'section', settings: { background_color: '#ffffff' }, elements: [] } ]; const result = elementorService.manipulation.updateElementSettings( elementorData, 'update-section', { background_color: '#000000' } ); expect(result).toBeDefined(); expect(result.length).toBe(1); expect(result[0].settings.background_color).toBe('#000000'); }); it('should delete element', async () => { const elementorData = [ { id: 'delete-section-1', elType: 'section', settings: {}, elements: [] }, { id: 'delete-section-2', elType: 'section', settings: {}, elements: [] } ]; const result = elementorService.manipulation.deleteElement(elementorData, 'delete-section-1'); expect(result).toBeDefined(); expect(result.length).toBe(1); expect(result[0].id).toBe('delete-section-2'); }); it('should clone element', async () => { const section = { id: 'clone-section', elType: 'section' as const, settings: { background_color: '#ffffff' }, elements: [] }; const cloned = elementorService.manipulation.cloneElement(section); expect(cloned).toBeDefined(); expect(cloned.id).not.toBe('clone-section'); expect(cloned.elType).toBe('section'); expect(cloned.settings.background_color).toBe('#ffffff'); }); it('should extract page structure', async () => { const elementorData = [ { id: 'struct-section', elType: 'section', settings: {}, elements: [ { id: 'struct-column', elType: 'column', settings: {}, elements: [ { id: 'struct-widget', elType: 'widget', widgetType: 'heading', settings: {} } ] } ] } ]; const structure = elementorService.manipulation.extractPageStructure(elementorData); expect(structure).toBeDefined(); expect(structure.totalSections).toBe(1); expect(structure.totalColumns).toBe(1); expect(structure.totalWidgets).toBe(1); expect(structure.sections).toBeDefined(); expect(structure.sections.length).toBe(1); }); }); describe('Complete Workflow Test', () => { it('should create, update, and verify a complete Elementor page', async () => { // Step 1: Create initial Elementor structure const section1 = elementorService.builder.createSection({ background_color: '#f0f0f0' }); const column1 = elementorService.builder.createColumn({ _column_size: 100 }); const heading = elementorService.builder.createHeading({ title: 'Complete Workflow Test', header_size: 'h1', align: 'center' }); const text = elementorService.builder.createText({ editor: 'This page was created by the complete workflow integration test.' }); column1.elements.push(heading, text); section1.elements.push(column1); // Step 2: Save to WordPress await elementorService.data.updateElementorData(testPageId, [section1]); // Step 3: Retrieve and verify const savedData = await elementorService.data.getElementorData(testPageId); expect(savedData).toBeDefined(); expect(savedData.length).toBe(1); expect(savedData[0].elType).toBe('section'); expect(savedData[0].elements.length).toBe(1); expect(savedData[0].elements[0].elements.length).toBe(2); // Step 4: Update existing structure const updatedData = elementorService.manipulation.updateElementSettings( savedData, savedData[0].id, { background_color: '#ffffff' } ); await elementorService.data.updateElementorData(testPageId, updatedData); // Step 5: Verify update const finalData = await elementorService.data.getElementorData(testPageId); expect(finalData).toBeDefined(); expect(finalData[0].settings.background_color).toBe('#ffffff'); // Step 6: Extract structure const structure = elementorService.manipulation.extractPageStructure(finalData); expect(structure.totalSections).toBe(1); expect(structure.totalColumns).toBe(1); expect(structure.totalWidgets).toBe(2); }, 30000); }); });