modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add EXAMPLE=folder-name support for tests & basic-host (#292)

Browse source 
* add EXAMPLE=folder-name support for tests & basic-host

* style: format e2e test files

* style: format threejs-server files
This commit is contained in:
Olivier Chafik 2026-01-19 20:16:37 +00:00 • committed by GitHub
commit 801e1b043a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 177 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

11
tests/e2e/generate-grid-screenshots.spec.ts
View file

@ -30,8 +30,11 @@ const SKIP_SERVERS = new Set([
"video-resource", // Uses custom screenshot from PR comment
]);
// Optional: filter to a single example via EXAMPLE env var (folder name)
const EXAMPLE_FILTER = process.env.EXAMPLE;
// Server configurations (excludes integration-server which is for E2E testing)
const SERVERS = [
const ALL_SERVERS = [
{
key: "basic-react",
name: "Basic MCP App Server (React)",
@ -55,7 +58,6 @@ const SERVERS = [
{ key: "map-server", name: "Map Server", dir: "map-server" },
{ key: "pdf-server", name: "PDF Server", dir: "pdf-server" },
{ key: "qr-server", name: "QR Code Server", dir: "qr-server" },
{ key: "say-server", name: "Say Demo", dir: "say-server" },
{
key: "scenario-modeler",
name: "SaaS Scenario Modeler",
@ -82,6 +84,11 @@ const SERVERS = [
{ key: "wiki-explorer", name: "Wiki Explorer", dir: "wiki-explorer-server" },
];
// Filter servers if EXAMPLE is specified
const SERVERS = EXAMPLE_FILTER
? ALL_SERVERS.filter((s) => s.dir === EXAMPLE_FILTER)
: ALL_SERVERS;
/**
* Wait for the MCP App to load inside nested iframes.
*/

15
tests/e2e/security.spec.ts
View file

@ -9,9 +9,24 @@
* Note: True cross-origin attack testing would require a multi-origin test
* setup. These tests verify the security infrastructure is in place and
* functioning correctly for valid communication paths.
*
* Note: These tests require the integration-server. When using EXAMPLE filter,
* set EXAMPLE=integration-server to run these tests.
*/
import { test, expect, type Page, type ConsoleMessage } from "@playwright/test";
// Optional: filter to a single example via EXAMPLE env var (folder name)
// Security tests require integration-server, skip if filtering to a different example
const EXAMPLE_FILTER = process.env.EXAMPLE;
const SKIP_SECURITY_TESTS =
EXAMPLE_FILTER && EXAMPLE_FILTER !== "integration-server";
// Skip all security tests if filtering to a non-integration example
test.skip(
() => !!SKIP_SECURITY_TESTS,
"Skipped: security tests require integration-server",
);
/**
* Capture console messages matching a pattern
*/

135
tests/e2e/servers.spec.ts
View file

@ -35,30 +35,92 @@ const SLOW_SERVERS: Record<string, number> = {
threejs: 2000, // Three.js WebGL initialization
};
// Server configurations (key is used for screenshot filenames, name is the MCP server name)
const SERVERS = [
{ key: "integration", name: "Integration Test Server" },
{ key: "basic-preact", name: "Basic MCP App Server (Preact)" },
{ key: "basic-react", name: "Basic MCP App Server (React)" },
{ key: "basic-solid", name: "Basic MCP App Server (Solid)" },
{ key: "basic-svelte", name: "Basic MCP App Server (Svelte)" },
{ key: "basic-vanillajs", name: "Basic MCP App Server (Vanilla JS)" },
{ key: "basic-vue", name: "Basic MCP App Server (Vue)" },
{ key: "budget-allocator", name: "Budget Allocator Server" },
{ key: "cohort-heatmap", name: "Cohort Heatmap Server" },
{ key: "customer-segmentation", name: "Customer Segmentation Server" },
{ key: "map-server", name: "Map Server" },
{ key: "pdf-server", name: "PDF Server" },
{ key: "qr-server", name: "QR Code Server" },
{ key: "scenario-modeler", name: "SaaS Scenario Modeler" },
{ key: "shadertoy", name: "ShaderToy Server" },
{ key: "sheet-music", name: "Sheet Music Server" },
{ key: "system-monitor", name: "System Monitor Server" },
{ key: "threejs", name: "Three.js Server" },
{ key: "transcript", name: "Transcript Server" },
{ key: "wiki-explorer", name: "Wiki Explorer" },
// Servers to skip in CI (require special resources like GPU, large ML models)
const SKIP_SERVERS = new Set<string>([
// None currently - say-server widget works without TTS model for screenshots
]);
// Optional: filter to a single example via EXAMPLE env var (folder name)
const EXAMPLE_FILTER = process.env.EXAMPLE;
// Server configurations (key is used for screenshot filenames, name is the MCP server name, dir is the folder name)
const ALL_SERVERS = [
{
key: "integration",
name: "Integration Test Server",
dir: "integration-server",
},
{
key: "basic-preact",
name: "Basic MCP App Server (Preact)",
dir: "basic-server-preact",
},
{
key: "basic-react",
name: "Basic MCP App Server (React)",
dir: "basic-server-react",
},
{
key: "basic-solid",
name: "Basic MCP App Server (Solid)",
dir: "basic-server-solid",
},
{
key: "basic-svelte",
name: "Basic MCP App Server (Svelte)",
dir: "basic-server-svelte",
},
{
key: "basic-vanillajs",
name: "Basic MCP App Server (Vanilla JS)",
dir: "basic-server-vanillajs",
},
{
key: "basic-vue",
name: "Basic MCP App Server (Vue)",
dir: "basic-server-vue",
},
{
key: "budget-allocator",
name: "Budget Allocator Server",
dir: "budget-allocator-server",
},
{
key: "cohort-heatmap",
name: "Cohort Heatmap Server",
dir: "cohort-heatmap-server",
},
{
key: "customer-segmentation",
name: "Customer Segmentation Server",
dir: "customer-segmentation-server",
},
{ key: "map-server", name: "Map Server", dir: "map-server" },
{ key: "pdf-server", name: "PDF Server", dir: "pdf-server" },
{ key: "qr-server", name: "QR Code Server", dir: "qr-server" },
{ key: "say-server", name: "Say Demo", dir: "say-server" },
{
key: "scenario-modeler",
name: "SaaS Scenario Modeler",
dir: "scenario-modeler-server",
},
{ key: "shadertoy", name: "ShaderToy Server", dir: "shadertoy-server" },
{ key: "sheet-music", name: "Sheet Music Server", dir: "sheet-music-server" },
{
key: "system-monitor",
name: "System Monitor Server",
dir: "system-monitor-server",
},
{ key: "threejs", name: "Three.js Server", dir: "threejs-server" },
{ key: "transcript", name: "Transcript Server", dir: "transcript-server" },
{ key: "wiki-explorer", name: "Wiki Explorer", dir: "wiki-explorer-server" },
];
// Filter servers if EXAMPLE is specified
const SERVERS = EXAMPLE_FILTER
? ALL_SERVERS.filter((s) => s.dir === EXAMPLE_FILTER)
: ALL_SERVERS;
/**
* Helper to get the app frame locator (nested: sandbox > app)
*/
@ -129,12 +191,23 @@ test.describe("Host UI", () => {
// Define tests for each server using forEach to avoid for-loop issues
SERVERS.forEach((server) => {
// Skip servers that require special resources (GPU, large ML models)
const shouldSkip = SKIP_SERVERS.has(server.key);
test.describe(server.name, () => {
test("loads app UI", async ({ page }) => {
if (shouldSkip) {
test.skip();
return;
}
await loadServer(page, server.name);
});
test("screenshot matches golden", async ({ page }) => {
if (shouldSkip) {
test.skip();
return;
}
await loadServer(page, server.name);
// Some servers (WebGL, tile-based) need extra stabilization time
@ -153,12 +226,20 @@ SERVERS.forEach((server) => {
});
// Interaction tests for integration server (tests all SDK communication APIs)
const integrationServer = SERVERS.find((s) => s.key === "integration")!;
// Only run if integration-server is included (either no filter or EXAMPLE=integration-server)
const integrationServer = SERVERS.find((s) => s.key === "integration");
const integrationServerName =
integrationServer?.name ?? "Integration Test Server";
test.describe(`Integration Test Server - Interactions`, () => {
test.skip(
() => !integrationServer,
"Skipped: integration-server not in EXAMPLE filter",
);
test.describe(`${integrationServer.name} - Interactions`, () => {
test("Send Message button triggers host callback", async ({ page }) => {
const logs = captureHostLogs(page);
await loadServer(page, integrationServer.name);
await loadServer(page, integrationServerName);
const appFrame = getAppFrame(page);
await appFrame.locator('button:has-text("Send Message")').click();
@ -171,7 +252,7 @@ test.describe(`${integrationServer.name} - Interactions`, () => {
test("Send Log button triggers host callback", async ({ page }) => {
const logs = captureHostLogs(page);
await loadServer(page, integrationServer.name);
await loadServer(page, integrationServerName);
const appFrame = getAppFrame(page);
await appFrame.locator('button:has-text("Send Log")').click();
@ -185,7 +266,7 @@ test.describe(`${integrationServer.name} - Interactions`, () => {
test("Open Link button triggers host callback", async ({ page }) => {
const logs = captureHostLogs(page);
await loadServer(page, integrationServer.name);
await loadServer(page, integrationServerName);
const appFrame = getAppFrame(page);
await appFrame.locator('button:has-text("Open Link")').click();