Tests WebMCP tools with AI agents via Chrome DevTools, covering agent workflows, tool discovery, schema/unit validation, and end-to-end commerce flows.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin webmcp-browser-agentsThis skill is limited to using the following tools:
**Fetch live docs**:
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.
Fetch live docs:
webmcp testing tools agents Chrome DevTools for testing tooling and guidancesite:developer.chrome.com webmcp testing early preview for Chrome EPP testing instructionswebmcp tool discovery verification testing for testing patternssite:github.com mcp-b testing for polyfill-specific testing utilitiesWebMCP tools need testing across multiple dimensions:
Test the execute callback independently:
// Extract execute logic into a testable function
async function searchProductsLogic(input) {
const res = await fetch(`/api/products?q=${input.query}`);
return await res.json();
}
// Unit test
describe("searchProducts tool", () => {
it("returns products matching query", async () => {
mockFetch("/api/products?q=headphones", { products: [...] });
const result = await searchProductsLogic({ query: "headphones" });
expect(result.products).toHaveLength(3);
});
it("handles empty results", async () => {
mockFetch("/api/products?q=nonexistent", { products: [] });
const result = await searchProductsLogic({ query: "nonexistent" });
expect(result.products).toHaveLength(0);
});
});
Verify that schemas accept valid input and reject invalid input:
import Ajv from "ajv";
const ajv = new Ajv();
const validate = ajv.compile(searchProductsSchema);
test("accepts valid input", () => {
expect(validate({ query: "headphones", maxPrice: 100 })).toBe(true);
});
test("rejects missing required field", () => {
expect(validate({ maxPrice: 100 })).toBe(false);
});
test("rejects invalid type", () => {
expect(validate({ query: 123 })).toBe(false);
});
Test with real AI agents (Gemini, Claude, etc.):
Chrome may provide DevTools panels for WebMCP:
Check Chrome DevTools documentation for the latest WebMCP debugging features.
Test requestUserInteraction flows:
test("checkout requires user confirmation", async () => {
const mockClient = {
requestUserInteraction: jest.fn((callback) => {
// Simulate user approving
return new Promise((resolve) => callback(resolve));
})
};
const result = await checkoutTool.execute({}, mockClient);
expect(mockClient.requestUserInteraction).toHaveBeenCalled();
expect(result.status).toBe("confirmed");
});
test("checkout canceled when user declines", async () => {
const mockClient = {
requestUserInteraction: jest.fn(() => Promise.resolve(false))
};
const result = await checkoutTool.execute({}, mockClient);
expect(result.status).toBe("canceled");
});
Test the full shopping journey:
1. Navigate to catalog page → verify search tools registered
2. Agent calls searchProducts("headphones") → verify results returned
3. Agent calls addToCart(productId, 1) → verify cart updated
4. Navigate to cart page → verify cart tools registered
5. Agent calls checkout() → verify user interaction prompted
6. Simulate user approval → verify order placed
7. Verify order confirmation returned to agent
Verify that annotations affect browser behavior:
readOnlyHint: true tools → agent can invoke without user promptdestructiveHint: true tools → browser prompts user before invocationModelContextClient for unit testing user interaction flowsFetch the latest Chrome DevTools documentation and testing utilities for WebMCP before setting up test infrastructure.