test(playground): add comprehensive E2E tests for all routes (#12353)

This adds E2E test coverage for all playground routes that were
previously untested:

- `/` - Root redirect to agents
- `/scorers` and `/scorers/:scorerId` - Scorers list and detail pages
- `/processors` and `/processors/:processorId` - Processors list and
detail pages
- `/mcps/:serverId` - MCP server detail page
- `/observability` - Observability page
- `/request-context` - Request context page
- `/settings` - Settings page
- `/templates` and `/templates/:templateSlug` - Templates list and
detail pages

Also added `responseQualityScorer`, `responseTimeScorer`,
`loggingProcessor`, and `contentFilterProcessor` to the kitchen-sink
test setup to enable testing these routes.

All 52 tests pass.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added processors for logging and content filtering in the Mastra
platform.
* Introduced scorers for evaluating response quality and measuring
response latency performance.

* **Tests**
* Added comprehensive end-to-end test coverage for processors, scorers,
observability, request context, templates, settings, and MCP server
pages.
  * Added UI accessibility snapshots for processors and scorers pages.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: mfrachet

packages/playground/e2e/kitchen-sink/src/mastra/index.ts

@@ -6,6 +6,8 @@ import { weatherAgent } from './agents';
 import { complexWorkflow, lessComplexWorkflow } from './workflows/complex-workflow';
 import { simpleMcpServer } from './mcps';
 import { registerApiRoute } from '@mastra/core/server';
+import { responseQualityScorer, responseTimeScorer } from './scorers';
+import { loggingProcessor, contentFilterProcessor } from './processors';
 
 export const mastra = new Mastra({
   workflows: { complexWorkflow, lessComplexWorkflow },
@@ -18,6 +20,14 @@ export const mastra = new Mastra({
   mcpServers: {
     simpleMcpServer,
   },
+  scorers: {
+    responseQualityScorer,
+    responseTimeScorer,
+  },
+  processors: {
+    loggingProcessor,
+    contentFilterProcessor,
+  },
   server: {
     apiRoutes: [
       registerApiRoute('/e2e/reset-storage', {

packages/playground/e2e/kitchen-sink/src/mastra/processors/index.ts

@@ -0,0 +1,16 @@
+import type { Processor } from '@mastra/core/processors';
+
+export const loggingProcessor: Processor<'logging-processor'> = {
+  id: 'logging-processor',
+  name: 'Logging Processor',
+  description: 'Logs all input messages for debugging',
+  processInput: async args => args.messages,
+};
+
+export const contentFilterProcessor: Processor<'content-filter'> = {
+  id: 'content-filter',
+  name: 'Content Filter Processor',
+  description: 'Filters content based on rules',
+  processInput: async args => args.messages,
+  processOutputResult: async args => args.messages,
+};

packages/playground/e2e/kitchen-sink/src/mastra/scorers/index.ts

@@ -0,0 +1,13 @@
+import { createScorer } from '@mastra/core/evals';
+
+export const responseQualityScorer = createScorer({
+  id: 'response-quality',
+  name: 'Response Quality Scorer',
+  description: 'Evaluates the quality of agent responses',
+}).generateScore(async () => 0.85);
+
+export const responseTimeScorer = createScorer({
+  id: 'response-time',
+  name: 'Response Time Scorer',
+  description: 'Measures response latency performance',
+}).generateScore(async () => 0.92);

packages/playground/e2e/tests/mcps/$serverId/page.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+import { resetStorage } from '../../__utils__/reset-storage';
+
+test.afterEach(async () => {
+  await resetStorage();
+});
+
+test('has breadcrumb navigation', async ({ page }) => {
+  await page.goto('/mcps/simple-mcp-server');
+
+  await expect(page).toHaveTitle(/Mastra Studio/);
+
+  const breadcrumb = page.locator('nav a:has-text("MCP Servers")').first();
+  await expect(breadcrumb).toHaveAttribute('href', '/mcps');
+});
+
+test('has documentation link', async ({ page }) => {
+  await page.goto('/mcps/simple-mcp-server');
+
+  await expect(page.locator('text=MCP documentation')).toHaveAttribute(
+    'href',
+    'https://mastra.ai/en/docs/tools-mcp/mcp-overview',
+  );
+});
+
+test('has server combobox for navigation', async ({ page }) => {
+  await page.goto('/mcps/simple-mcp-server');
+
+  // The MCP server combobox should be visible
+  const combobox = page.locator('[role="combobox"]');
+  await expect(combobox).toBeVisible();
+});

packages/playground/e2e/tests/observability/page.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+import { resetStorage } from '../__utils__/reset-storage';
+
+test.afterEach(async () => {
+  await resetStorage();
+});
+
+test('has overall information', async ({ page }) => {
+  await page.goto('/observability');
+
+  await expect(page).toHaveTitle(/Mastra Studio/);
+  await expect(page.locator('h1').first()).toHaveText('Observability');
+  await expect(page.getByRole('link', { name: 'Observability documentation' })).toHaveAttribute(
+    'href',
+    'https://mastra.ai/en/docs/observability/tracing/overview',
+  );
+});
+
+test('has page header with description', async ({ page }) => {
+  await page.goto('/observability');
+
+  // The page header with description should be visible
+  await expect(page.locator('text=Explore observability traces for your entities')).toBeVisible();
+});
+
+test('has entity filter dropdown', async ({ page }) => {
+  await page.goto('/observability');
+
+  // The entity filter should be present with default "All" selection
+  const entityFilter = page.locator('button:has-text("All")');
+  await expect(entityFilter).toBeVisible();
+});
+
+test('renders empty state or traces list', async ({ page }) => {
+  await page.goto('/observability');
+
+  // Either shows empty state or traces list (depending on data)
+  // We check that the page has loaded and the traces tools are visible
+  await expect(page.locator('text=Reset')).toBeVisible();
+});

packages/playground/e2e/tests/processors/$processorId/page.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+import { resetStorage } from '../../__utils__/reset-storage';
+
+test.afterEach(async () => {
+  await resetStorage();
+});
+
+test('has breadcrumb navigation', async ({ page }) => {
+  await page.goto('/processors/logging-processor');
+
+  await expect(page).toHaveTitle(/Mastra Studio/);
+
+  const breadcrumb = page.locator('nav a:has-text("Processors")').first();
+  await expect(breadcrumb).toHaveAttribute('href', '/processors');
+});
+
+test('displays processor ID in header', async ({ page }) => {
+  await page.goto('/processors/logging-processor');
+
+  // The processor ID should be displayed in the header group
+  await expect(page.locator('header').getByText('logging-processor')).toBeVisible();
+});
+
+test('has documentation link', async ({ page }) => {
+  await page.goto('/processors/logging-processor');
+
+  await expect(page.locator('text=Processors documentation')).toHaveAttribute(
+    'href',
+    'https://mastra.ai/docs/agents/processors',
+  );
+});

packages/playground/e2e/tests/processors/page.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+import { resetStorage } from '../__utils__/reset-storage';
+
+test.afterEach(async () => {
+  await resetStorage();
+});
+
+test('has overall information', async ({ page }) => {
+  await page.goto('/processors');
+
+  await expect(page).toHaveTitle(/Mastra Studio/);
+  await expect(page.locator('h1')).toHaveText('Processors');
+  await expect(page.getByRole('link', { name: 'Processors documentation' })).toHaveAttribute(
+    'href',
+    'https://mastra.ai/docs/agents/processors',
+  );
+});
+
+test('clicking on the processor row redirects to detail page', async ({ page }) => {
+  await page.goto('/processors');
+
+  const el = page.locator('tr:has-text("Logging Processor")');
+  await el.click();
+
+  await expect(page).toHaveURL(/\/processors\/logging-processor$/);
+});

packages/playground/e2e/tests/processors/page.spec.ts-snapshots/has-overall-information-1.aria.yml

@@ -0,0 +1,25 @@
+- table:
+    - rowgroup:
+        - row "Name Phases Used by":
+            - columnheader "Name"
+            - columnheader "Phases"
+            - columnheader "Used by"
+    - rowgroup:
+        - row "Logging Processor Logs all input messages for debugging Input 0 agents":
+            - cell "Logging Processor Logs all input messages for debugging":
+                - link "Logging Processor":
+                    - /url: /processors/logging-processor
+                - text: ''
+            - cell "Input"
+            - cell "0 agents":
+                - img
+                - text: ''
+        - row "Content Filter Processor Filters content based on rules Input Output Result 0 agents":
+            - cell "Content Filter Processor Filters content based on rules":
+                - link "Content Filter Processor":
+                    - /url: /processors/content-filter
+                - text: ''
+            - cell "Input Output Result"
+            - cell "0 agents":
+                - img
+                - text: ''

packages/playground/e2e/tests/request-context/page.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+import { resetStorage } from '../__utils__/reset-storage';
+
+test.afterEach(async () => {
+  await resetStorage();
+});
+
+test('has page title', async ({ page }) => {
+  await page.goto('/request-context');
+
+  await expect(page).toHaveTitle(/Mastra Studio/);
+  await expect(page.locator('h1')).toHaveText('Request Context');
+});
+
+test('renders RequestContext component', async ({ page }) => {
+  await page.goto('/request-context');
+
+  // The RequestContext component should be rendered within the page
+  // Check for the main content area
+  const mainContent = page.locator('main');
+  await expect(mainContent).toBeVisible();
+});

packages/playground/e2e/tests/root.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+import { resetStorage } from './__utils__/reset-storage';
+
+test.afterEach(async () => {
+  await resetStorage();
+});
+
+test('root path redirects to agents', async ({ page }) => {
+  await page.goto('/');
+  await expect(page).toHaveURL(/\/agents$/);
+});