E2E Testing

VerifiedSafe

Execute E2E smoke tests (basic) or full acceptance and regression suite (extended) for a WordPress plugin.

Sby Skills Guide Bot
TestingIntermediate
7/24/2026
Claude Code
#e2e-testing#playwright#wordpress#smoke-tests#regression-testing

Recommended for

Automated summary

This skill runs end-to-end tests against a local WordPress install in two tiers: a basic smoke test of one primary scenario, or an extended acceptance and regression suite.

Strengths

  • Cleanly splits a fast basic tier (one happy-path scenario) from an extended tier, matching a planning agent's execution window.
  • Gives concrete recipes: curl against admin-ajax.php and cache headers, or a Playwright MCP sequence (login, navigate, snapshot).
  • An anti-rationalization table blocks common shortcuts such as assuming the environment is down or trusting code review over execution.
  • Standardized JSON report with PASS/FAIL/SKIP, where a boot failure yields an explicit SKIP that does not block the pipeline.

Limitations

  • Tightly coupled to one context: the wp-media/imagify-plugin repository and http://localhost:8888, with values injected by the orchestrator.
  • Requires Playwright MCP plus a bin/dev-start.sh boot script to exist in the environment.
  • The extended tier is delegated to an e2e-qa-tester sub-agent whose full procedure is not detailed in this file.
When to use it

Use it when an agent must confirm real system behavior before writing a spec, or verify the primary scenario after a change.

When not to use it

Avoid it on projects other than this WordPress plugin, or in environments lacking Playwright MCP and the local boot script.

Security analysis

Safe
Quality score92/100

The skill instructs the use of bash scripts, curl, and Playwright for legitimate end-to-end testing against a local WordPress environment. It includes hardcoded admin credentials for a local dev setup and modifies repository files (committing test specs) only in a controlled CI context. No destructive, exfiltration, obfuscation, or safety-disabling actions are present. The use of network tools is for testing purposes and does not pose a meaningful execution risk.

No concerns found

How this analysis is made

Examples

Verify behavior before writing a spec
Before writing the spec for the Imagify settings change, boot the local environment and smoke-test the current settings page with Playwright MCP — confirm the existing toggle is present and there are no JS console errors. Report PASS/FAIL/SKIP.
Smoke-test an AJAX endpoint
Run a basic-tier E2E check: boot the environment with bin/dev-start.sh, then curl the admin-ajax.php endpoint for this action and tell me what it returns for the scenario in the issue.
Confirm a backend change has observable effect
This change is backend-only. Still run the basic E2E tier: verify the primary happy path against http://localhost:8888 and give me the JSON report with the confirming assertion.

name: e2e description: Run E2E smoke tests (basic) or full acceptance + regression suite (extended).

E2E SKILL

Config loading

The following values are injected via the orchestrator prompt — do not read any config file:

  • {TEMP_ROOT} = .ai
  • {REPO} = wp-media/imagify-plugin
  • {E2E_URL} = http://localhost:8888
  • {E2E_BOOT} = bash bin/dev-start.sh
  • {E2E_SETTINGS} = http://localhost:8888/wp-admin/options-general.php?page=imagify
  • {E2E_CI} = true

This skill provides end-to-end test execution at two tiers. The tooling is the same (Playwright MCP + curl); the difference is scope and depth.

The local WordPress environment is at {E2E_URL} (admin / password). Boot or restart it with {E2E_BOOT}.


Tier 1 — Basic

Purpose: behavioral verification and smoke tests. Fast enough to fit inside a planning agent's execution window.

Invokers:

  • grooming-agent — verify behavioral assumptions about the current system before writing the spec. Use to confirm: does the current feature behave as described in the issue? What does the current API or AJAX endpoint return for the scenario being changed?

Anti-rationalization table

| You'll be tempted to say | Why you can't | |---|---| | "The environment probably isn't up, I'll skip" | Run {E2E_BOOT}. It's idempotent. If it fails, log SKIP with the reason — do not silently omit the step. | | "The change is backend-only, no need to smoke it" | The primary happy path must be verified. A backend change with no observable behavior change still needs a confirming assertion. | | "I already read the code, I know it works" | "Seems right" never closes a task. Run the scenario. | | "One scenario is too slow for this stage" | Basic tier is exactly one primary scenario. The cost is acceptable. |

Basic tier process

  1. Boot the environment (idempotent — safe to run if already up):

    {E2E_BOOT}
    

    If the script exits non-zero, set status: "SKIP", note the reason, and do not block the pipeline.

  2. Run the primary happy path scenario from the spec or grooming plan.

    Backend / AJAX / REST:

    # Public REST or AJAX
    curl -s -X POST {E2E_URL}/wp-admin/admin-ajax.php \
      -H "Cookie: $(cat .wp-session-cookie 2>/dev/null)" \
      -d 'action=<action>&nonce=...'
    
    # Cache headers
    curl -sI {E2E_URL}/ | grep -E '(x-cache|cf-cache)'
    

    Browser (settings page, dashboard notices, interactive UI): Use the Playwright MCP directly for basic-tier smoke. Do not delegate to e2e-qa-tester at this tier (that is the extended tier path):

    mcp__playwright__navigate({ url: "{E2E_URL}/wp-login.php" })
    # login
    mcp__playwright__fill({ selector: "#user_login", value: "admin" })
    mcp__playwright__fill({ selector: "#user_pass", value: "password" })
    mcp__playwright__click({ selector: "#wp-submit" })
    # primary scenario
    mcp__playwright__navigate({ url: "{E2E_SETTINGS}" })
    mcp__playwright__snapshot({})
    # Inspect snapshot output to confirm expected element/text is present
    

    Take at most 1–2 screenshots if helpful, but do not publish them at this tier.

  3. Report:

    {
      "status": "PASS|FAIL|SKIP",
      "scenarios_tested": ["Settings page loads without errors after enabling X option"],
      "details": "Logged in as admin, navigated to {E2E_SETTINGS}, confirmed no JS console errors and X toggle present"
    }
    

    SKIP: {E2E_BOOT} failed or environment unreachable. Record reason. Do not block the pipeline.

Basic tier boundaries

  • Do: verify the one primary scenario from the spec or grooming plan
  • Do: probe current-system behavior (grooming-agent only) when an assumption needs verification
  • Do not: cover all acceptance criteria (that is extended tier)
  • Do not: write or commit Playwright specs (that is extended tier via e2e-qa-tester)
  • Do not: publish screenshots (that is extended tier)

Tier 2 — Extended

Purpose: full acceptance criteria coverage, regression testing, edge cases, visual comparison, and Playwright spec authoring with screenshot evidence.

Invoker: qa-engineer only.

Execution: the qa-engineer agent delegates browser flows to the e2e-qa-tester sub-agent, which handles Playwright MCP driving, temporary spec authoring under .e2e-temp/, screenshot publishing via the commit-SHA method, and clean-up.

The qa-engineer agent itself handles:

  • Strategy A (API / functional validation via curl)
  • Strategy C (test-suite-only fallback when the environment is unreachable)

For details, read:

  • .claude/agents/qa-engineer.md — strategy selection and report format
  • .claude/agents/e2e-qa-tester.md — browser flow execution, spec authoring, screenshot publishing

The extended tier writes Playwright specs to .e2e-temp/ (gitignored, never committed when {E2E_CI} is false). Because {E2E_CI} is true for this project, e2e-qa-tester will commit spec files to the permanent suite under Tests/e2e/specs/ rather than delete them.

Screenshots go to .e2e-screenshots/ (gitignored). Screenshots are published using the commit-SHA method: commit screenshots temporarily to the branch, push, capture the SHA, then remove them in a follow-up commit. Use the SHA-based raw.githubusercontent.com URL in QA reports (permanent even after file removal):

https://raw.githubusercontent.com/wp-media/imagify-plugin/<SHA>/.e2e-screenshots/<filename>

When to use which tier

| Invoker | Tier | Purpose | |---|---|---| | grooming-agent | Basic | Verify a behavioral assumption before writing the spec | | qa-engineer | Extended | Full acceptance criteria + regression + screenshots |


Project-specific notes

  • The boot script {E2E_BOOT} is idempotent. Always run it before testing — don't pre-check whether the environment is up.

  • Admin credentials: admin / password.

  • Settings page URL: {E2E_SETTINGS}.

  • Plugin activation check:

    npx @wordpress/env run cli wp plugin list --name=imagify
    
  • Playwright config: Tests/e2e/playwright.config.ts. Test specs: Tests/e2e/specs/. Page objects: Tests/e2e/pages/. Fixtures: Tests/e2e/fixtures/.

  • Page Object Model files:

    • Tests/e2e/pages/settings.ts → SettingsPage
    • Tests/e2e/pages/bulk-optimization.ts → BulkOptimizationPage
    • Tests/e2e/pages/media-library.ts → MediaLibraryPage
  • API-key-gated tests require IMAGIFY_TESTS_API_KEY to be set (sourced from .env.local):

    test.skip( ! process.env.IMAGIFY_TESTS_API_KEY, 'IMAGIFY_TESTS_API_KEY not set' );
    
  • Run the full E2E suite via: bash bin/test-e2e.sh (flags: --headed, --ui, or a spec pattern).

  • The basic tier never writes Playwright spec files and is invoked by grooming-agent only. Implementation agents (backend-agent, frontend-agent) do not invoke the e2e skill — full E2E validation belongs to the qa-engineer + e2e-qa-tester tier.

  • Known admin routes:

    | Area | URL | |---|---| | Settings | /wp-admin/options-general.php?page=imagify | | Bulk optimization | /wp-admin/upload.php?page=imagify-bulk-optimization | | Custom folders (Files) | /wp-admin/upload.php?page=imagify-files | | Media library (list) | /wp-admin/upload.php?mode=list |

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/e2e-testing-mryiqigv/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/e2e-testing-mryiqigv' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/e2e-testing-mryiqigv/download' --output '.skill-downloads/e2e-testing-mryiqigv/SKILL.md.part' && mv '.skill-downloads/e2e-testing-mryiqigv/SKILL.md.part' '.skill-downloads/e2e-testing-mryiqigv/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/e2e-testing-mryiqigv/SKILL.md' && test -s '.skill-downloads/e2e-testing-mryiqigv/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/e2e' && cp -R '.skill-downloads/e2e-testing-mryiqigv' '.claude/skills/e2e'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/e2e-testing-mryiqigv'

openskills read 'e2e-testing-mryiqigv'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/e2e-testing-mryiqigv/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills