orbit-uat-elementor - SKILL.md Agent Skill

name: orbit-uat-elementor description: UAT (User Acceptance Testing) template + Playwright spec scaffolds specifically for Elementor addon plugins — drag widget into editor, configure via inspector, save, verify frontend output, test responsive breakpoints, test live preview, test in Elementor Pro Theme Builder context. Use when the user says "UAT for Elementor", "test my Elementor widget", "Elementor end-to-end".

🪐 orbit-uat-elementor — Elementor addon UAT template

End-to-end UAT specs purpose-built for Elementor addons. Drag → configure → save → frontend → repeat.

Quick start

PLUGIN_SLUG=my-elementor-addon \
  npx playwright test --project=uat-elementor

Or scaffold from scratch:

bash ~/Claude/orbit/scripts/scaffold-uat-elementor.sh ~/plugins/my-elementor-addon

What the UAT covers

1. Editor flow

test('Drag My Hero into a page', async ({ page }) => {
  // Login + create new page
  await page.goto('/wp-admin/post-new.php?post_type=page');
  await page.fill('#title', 'UAT Page');

  // Open Elementor editor
  await page.click('#elementor-switch-mode-button');
  await page.waitForFunction(() => window.elementor?.documents?.getCurrent());

  // Search panel for the widget
  await page.fill('#elementor-panel-search-input', 'My Hero');
  const widget = page.locator('[data-element_type="widget"][data-widget-type="my-hero"]').first();
  await expect(widget).toBeVisible();

  // Drag to canvas
  await widget.dragTo(page.locator('#elementor-preview-iframe').contentFrame().locator('.elementor-section-wrap'));

  // Verify in canvas
  const canvas = page.locator('#elementor-preview-iframe').contentFrame();
  await expect(canvas.locator('.my-hero')).toBeVisible();
});

2. Inspector control validation

Every control declared in register_controls() works
selectors cause live update in canvas
Conditional controls show/hide correctly

3. Responsive breakpoints

// Switch to mobile view
await page.click('button[data-tooltip="Mobile"]');
// Verify mobile-specific control changes apply

4. Save + view frontend

await page.click('#elementor-panel-saver-button-publish');
await page.waitForSelector('.elementor-saver-success');

await page.goto('/uat-page/');
await expect(page.locator('.my-hero')).toBeVisible();
await expect(page.locator('.my-hero h2')).toContainText('Hello');

5. Theme Builder context (if Pro)

Test the widget inside a Theme Builder template (header / footer / single template).

6. Console error guard

const errors = [];
page.on('console', msg => msg.type() === 'error' && errors.push(msg.text()));
expect(errors.filter(e => e.includes('my-elementor-addon'))).toHaveLength(0);

7. Common edge cases

Widget on a page with NO Elementor — fallback render?
Widget with EMPTY attributes — graceful render or "configure me"?
Widget on a draft preview vs published page
Widget inside a Container (3.6+) vs Section/Column

Output

# Elementor UAT — my-elementor-addon

## Suite: 24 tests, 22 passed, 2 failed

❌ "Drag Hero — verify in canvas" — widget not found in panel after fresh activation
   → InspectorControls registered but get_categories() returns invalid category

❌ "Mobile breakpoint — padding" — mobile padding not respected
   → selectors use {{WRAPPER}} but missing for mobile-specific control

✓ Save + frontend — passes
✓ Console errors — 0 plugin-specific errors

Pair with

/orbit-elementor-dev — code-side audit
/orbit-elementor-controls — control implementation
/orbit-uat-compare — vs competitor Elementor addons

Sources & Evergreen References

Canonical docs

Elementor Editor Internals — Editor V3 source
Playwright + WordPress — base patterns
Test Selectors Guide — data-element_type, data-widget-type

Rule lineage

Editor selectors stable since Elementor 3.0 (older addons may target deprecated selectors)
Container layout selectors — Elementor 3.6+

Last reviewed

2026-04-29 — re-review on Elementor Editor V4 release (will change DOM)