Image Studio UI Tests

Image Studio UI Tests

Run comprehensive UI tests for the Image Studio feature. All tests are required to pass.

Testing Strategy

Only generate one image per test run (Section 6). All other sections verify DOM state without triggering AI generation. This keeps the test run under 5 minutes instead of 20+.

• Smoke test (Section 6): One real generation to verify the end-to-end AI pipeline works
• All other sections: Verify UI elements, controls, navigation, dialogs, and entry points via DOM assertions only — no generation needed

Prerequisites

• Important: If test site is not provided, ask the user for test site URL (e.g., https://yoursite.wordpress.com)
• If not logged in, stop and ask user to log in before proceeding
• At least 1 image uploaded to Media Library
• (Optional) A draft post with an Image block for Sections 9-10

Section Dependencies

Sections are designed to run sequentially, but some depend on others:

Section 1 (Entry Points)
  ├── 1.3 "Edit with AI" row action ──► Sections 2, 3, 4 (Edit Mode)
  └── 1.1 "Generate Image" button ──► Sections 5, 6, 7 (Generate Mode)

Section 8 (Hash Deep-Link) ──► Fallback entry to Edit Mode (Sections 2-4)

Section 9 (Block Editor Generate) ──► independent
Section 10 (Block Editor Edit) ──► requires existing image in a post

Section 11 (Navigation Arrows) ──► requires Edit Mode (2+ images in library)
Section 12 (Delete Permanently) ──► requires Edit Mode with Image Info sidebar

Setup

1. Navigate to test site and log in if needed
2. Go to wp-admin/upload.php (Media Library)
3. Note the ID of an existing image (hover over "Edit" and check URL for post=123)

CSS Selectors & Aria Labels Reference

Full selector tables for all elements (Modal, Sidebar, Generate Mode, Canvas, Block Editor): see references/selectors.md.

Key selectors used across most sections:

• Modal overlay: .components-modal__screen-overlay.image-studio-overlay
• Modal content: .image-studio-modal__content
• Close button: aria-label="Close image editor"
• Save button: .image-studio-header button.is-primary
• Image display: .image-studio-image
• Generate Image button: .big-sky-image-studio-link

Automation Notes (Playwright)

When running these tests with Playwright MCP (not playwright-test):

• Verification via DOM, not screenshots: Do NOT take screenshots to verify results. Instead, use playwright_evaluate to query the DOM for expected elements (e.g., check that .image-studio-overlay exists and has offsetHeight > 0). This is faster and more reliable. Use playwright_get_visible_text or playwright_get_visible_html for content checks.
• Block editor iframe: The editor content area is inside iframe[name="editor-canvas"]. Use playwright_iframe_click / playwright_iframe_fill for interactions inside the editor canvas.
• Image Studio modal: The modal uses .image-studio-overlay / .image-studio-modal__content and intercepts pointer events on background elements. Target elements inside the modal specifically.
• Suggestion chips: Clicking a suggestion chip populates the textarea with an expanded prompt but does not auto-send. You must press Enter or click the send button after.
• Generation timing: Instead of fixed sleep calls, poll for .image-studio-image to appear or for the loading indicator to disappear. Max wait: 50 seconds.
• Generation retry rule: If no image appears by timeout (even without an explicit error), retry once with the same prompt. If retry also fails, mark as backend issue and continue.
• Style/Aspect Ratio buttons: These use dynamic module class names (AgentUIInputToolbar-module_button). Prefer matching by text content or aria-label.
• Block Editor setup order (important):
  1. Click Add block inside iframe[name="editor-canvas"] (inline inserter), choose Image.
  2. Verify the Image placeholder appears in the iframe.
  3. For Section 9, assert/click Generate Image from that placeholder.
  4. For Section 10, click Select Image in that same placeholder, then choose an item in media modal and click Select before checking toolbar.
  5. Only assert Edit with AI after the image is actually inserted and the block is selected.
• Toolbar visibility in block editor: After inserting/selecting an image, click the image once and wait for block toolbar to render before asserting Edit with AI.
• Asserting element state: Use playwright_evaluate to check:
  • Visibility: element.offsetHeight > 0
  • Disabled: element.disabled === true or element.getAttribute('aria-disabled') === 'true'
  • Text content: element.textContent.includes('expected text')
  • Existence: document.querySelector('.selector') !== null

Section 1: Media Library Entry Points

Setup: Must be on Media Library page (wp-admin/upload.php)

FAIL if: Any expected element is missing

Note: If 1.3 fails, use Section 8 (hash deep-link) as fallback to reach Edit Mode.

Section 2: Edit Mode

Setup: Must have image ID from Media Library. Enter via "Edit with AI" row action (Section 1.3) or hash deep-link (Section 8).

FAIL if: Modal doesn't open, header elements missing, or canvas blank

Section 3: Sidebar & Metadata

Setup: Must have Edit Mode open with Image Info sidebar (.image-studio-sidebar) visible

FAIL if: Regenerate buttons missing, AI fails to generate, or edits don't persist

Section 4: Unsaved Changes Dialog

Setup: Must have Edit Mode open

FAIL if: No confirmation dialog appears, or changes persist after discard

Section 5: Generate Mode

Setup: Must be on Media Library page

FAIL if: Style/aspect panels don't open, options missing, or selections don't update

Section 6: Prompt & AI Response (SMOKE TEST — only section that generates)

Setup: Must be in Generate Mode. This is the only section that triggers AI generation. All other sections verify DOM only.

FAIL if: Generation fails (check for streaming error notices), no image appears, feedback buttons missing

Note: If generation fails with "Streaming error" or times out with no image, retry once. If it fails again, note as a backend issue, mark Sections 6 and 7 for manual testing, and continue to Section 8. Section 7 (Save Flow) depends on a generated image and cannot be tested without one.

Section 7: Save Flow

Setup: Must have generated image in canvas

FAIL if: Modal closes automatically, or image not saved to Media Library

Note: The success notice may not always be visible — verify save by checking that the Media Library item count increased and the new image appears at the top of the list. Note: Steps 7.6-7.9 specifically validate metadata behavior on a newly generated image.

Section 8: Hash Deep-Link

Setup: Need image ID from Media Library (e.g., 123)

FAIL if: Modal doesn't open automatically, or wrong image loads

Note: This is the fallback entry point for Edit Mode if "Edit with AI" row action (Section 1.3) is missing. The JS that watches the hash may require the page to fully load first — wait 5+ seconds after navigation before declaring failure.

Section 9: Block Editor — Generate Entry Point (DOM only)

Setup: Must have a post with content. Block editor content is inside iframe[name="editor-canvas"]. No generation needed — just verify the UI integration.

FAIL if: Generate Image button missing in block, or Image Studio doesn't open. Note: missing or non-contextual suggestions (9.6) is a soft fail — log it but don't block the test run.

Note: This section verifies the block editor integration only. Actual generation is tested in Section 6 from the Media Library.

Section 10: Block Editor — Edit Entry Point (DOM only)

Setup: Must have post with existing Image block. No generation needed — just verify the entry point and modal state.

FAIL if: Edit button missing, wrong mode opens, "Save & Apply" missing, or image not loaded in canvas

Section 11: Navigation Arrows (Image Browsing)

Setup: Must be in Edit Mode with Image Info sidebar open. Navigation pill (.image-studio-header__navigation-pill) shows in the header center.

FAIL if: Navigation arrows missing, images don't change, or unsaved changes don't block navigation

Section 12: Delete Permanently

Setup: Must be in Edit Mode with Image Info sidebar (.image-studio-sidebar) open. Use a test/disposable image (not one you need to keep).

FAIL if: Delete button missing, no confirmation dialog, cancel doesn't work, image not actually deleted, or delete is allowed with unsaved changes

Warning: This test permanently deletes an image. Use a test image you can afford to lose.

Troubleshooting & Output

• Known flaky areas and common issues: see references/troubleshooting.md
• Test results reporting template: see references/output-template.md