From d1472dd875e7d08c89e08ae13e8a166c5770beb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A1n=20Vor=C4=8D=C3=A1k?= Date: Thu, 27 Nov 2025 18:28:28 +0100 Subject: [PATCH 1/5] Configure Playwright test agents + topics tests --- .../agents/playwright-test-generator.md | 59 +++ .../.claude/agents/playwright-test-healer.md | 45 ++ .../.claude/agents/playwright-test-planner.md | 93 ++++ frontend/.mcp.json | 11 + frontend/specs/README.md | 5 + frontend/specs/topics.md | 455 ++++++++++++++++++ .../common/message-search-filter-bar.tsx | 13 +- .../pages/topics/Tab.Messages/index.tsx | 16 +- .../components/pages/topics/topic-details.tsx | 2 + .../components/pages/topics/topic-list.tsx | 187 +++---- frontend/src/utils/create-auto-modal.tsx | 1 + frontend/tests/README.md | 106 +++- frontend/tests/connector.utils.ts | 2 +- frontend/tests/console-enterprise/acl.spec.ts | 4 +- .../tests/console-enterprise/users.spec.ts | 20 +- frontend/tests/console/{ => acls}/acl.spec.ts | 6 +- .../{ => connectors}/connector.spec.ts | 2 +- frontend/tests/console/core.spec.ts | 16 - .../console/{ => schemas}/schema.spec.ts | 0 frontend/tests/console/topic.spec.ts | 328 ------------- .../console/topics/topic-creation.spec.ts | 194 ++++++++ .../tests/console/topics/topic-list.spec.ts | 135 ++++++ .../topics/topic-messages-actions.spec.ts | 289 +++++++++++ .../topics/topic-messages-filtering.spec.ts | 252 ++++++++++ .../topics/topic-messages-production.spec.ts | 244 ++++++++++ .../console/topics/topic-navigation.spec.ts | 135 ++++++ .../{ => transforms}/transforms.spec.ts | 0 .../tests/console/{pages => utils}/ACLPage.ts | 0 .../console/{pages => utils}/RolePage.ts | 49 +- frontend/tests/console/utils/SecurityPage.ts | 88 ++++ frontend/tests/console/utils/TopicPage.ts | 287 +++++++++++ frontend/tests/global-setup.mjs | 4 +- frontend/tests/global-teardown.mjs | 4 +- frontend/tests/roles.utils.ts | 32 -- frontend/tests/seed.spec.ts | 23 + frontend/tests/topic.utils.ts | 35 -- frontend/tests/users.utils.ts | 22 - 37 files changed, 2615 insertions(+), 549 deletions(-) create mode 100644 frontend/.claude/agents/playwright-test-generator.md create mode 100644 frontend/.claude/agents/playwright-test-healer.md create mode 100644 frontend/.claude/agents/playwright-test-planner.md create mode 100644 frontend/.mcp.json create mode 100644 frontend/specs/README.md create mode 100644 frontend/specs/topics.md rename frontend/tests/console/{ => acls}/acl.spec.ts (99%) rename frontend/tests/console/{ => connectors}/connector.spec.ts (94%) delete mode 100644 frontend/tests/console/core.spec.ts rename frontend/tests/console/{ => schemas}/schema.spec.ts (100%) delete mode 100644 frontend/tests/console/topic.spec.ts create mode 100644 frontend/tests/console/topics/topic-creation.spec.ts create mode 100644 frontend/tests/console/topics/topic-list.spec.ts create mode 100644 frontend/tests/console/topics/topic-messages-actions.spec.ts create mode 100644 frontend/tests/console/topics/topic-messages-filtering.spec.ts create mode 100644 frontend/tests/console/topics/topic-messages-production.spec.ts create mode 100644 frontend/tests/console/topics/topic-navigation.spec.ts rename frontend/tests/console/{ => transforms}/transforms.spec.ts (100%) rename frontend/tests/console/{pages => utils}/ACLPage.ts (100%) rename frontend/tests/console/{pages => utils}/RolePage.ts (73%) create mode 100644 frontend/tests/console/utils/SecurityPage.ts create mode 100644 frontend/tests/console/utils/TopicPage.ts delete mode 100644 frontend/tests/roles.utils.ts create mode 100644 frontend/tests/seed.spec.ts delete mode 100644 frontend/tests/topic.utils.ts delete mode 100644 frontend/tests/users.utils.ts diff --git a/frontend/.claude/agents/playwright-test-generator.md b/frontend/.claude/agents/playwright-test-generator.md new file mode 100644 index 0000000000..b82e9bc3a1 --- /dev/null +++ b/frontend/.claude/agents/playwright-test-generator.md @@ -0,0 +1,59 @@ +--- +name: playwright-test-generator +description: Use this agent when you need to create automated browser tests using Playwright. Examples: Context: User wants to test a login flow on their web application. user: 'I need a test that logs into my app at localhost:3000 with username admin@test.com and password 123456, then verifies the dashboard page loads' assistant: 'I'll use the generator agent to create and validate this login test for you' The user needs a specific browser automation test created, which is exactly what the generator agent is designed for. Context: User has built a new checkout flow and wants to ensure it works correctly. user: 'Can you create a test that adds items to cart, proceeds to checkout, fills in payment details, and confirms the order?' assistant: 'I'll use the generator agent to build a comprehensive checkout flow test' This is a complex user journey that needs to be automated and tested, perfect for the generator agent. +tools: Glob, Grep, Read, mcp__playwright-test__browser_click, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_verify_element_visible, mcp__playwright-test__browser_verify_list_visible, mcp__playwright-test__browser_verify_text_visible, mcp__playwright-test__browser_verify_value, mcp__playwright-test__browser_wait_for, mcp__playwright-test__generator_read_log, mcp__playwright-test__generator_setup_page, mcp__playwright-test__generator_write_test +model: sonnet +color: blue +--- + +You are a Playwright Test Generator, an expert in browser automation and end-to-end testing. +Your specialty is creating robust, reliable Playwright tests that accurately simulate user interactions and validate +application behavior. + +# For each test you generate +- Obtain the test plan with all the steps and verification specification +- Run the `generator_setup_page` tool to set up page for the scenario +- For each step and verification in the scenario, do the following: + - Use Playwright tool to manually execute it in real-time. + - Use the step description as the intent for each Playwright tool call. +- Retrieve generator log via `generator_read_log` +- Immediately after reading the test log, invoke `generator_write_test` with the generated source code + - File should contain single test + - File name must be fs-friendly scenario name + - Test must be placed in a describe matching the top-level test plan item + - Test title must match the scenario name + - Includes a comment with the step text before each step execution. Do not duplicate comments if step requires + multiple actions. + - Always use best practices from the log when generating tests. + + + For following plan: + + ```markdown file=specs/plan.md + ### 1. Adding New Todos + **Seed:** `tests/seed.spec.ts` + + #### 1.1 Add Valid Todo + **Steps:** + 1. Click in the "What needs to be done?" input field + + #### 1.2 Add Multiple Todos + ... + ``` + + Following file is generated: + + ```ts file=add-valid-todo.spec.ts + // spec: specs/plan.md + // seed: tests/seed.spec.ts + + test.describe('Adding New Todos', () => { + test('Add Valid Todo', async { page } => { + // 1. Click in the "What needs to be done?" input field + await page.click(...); + + ... + }); + }); + ``` + \ No newline at end of file diff --git a/frontend/.claude/agents/playwright-test-healer.md b/frontend/.claude/agents/playwright-test-healer.md new file mode 100644 index 0000000000..61efa5a1f5 --- /dev/null +++ b/frontend/.claude/agents/playwright-test-healer.md @@ -0,0 +1,45 @@ +--- +name: playwright-test-healer +description: Use this agent when you need to debug and fix failing Playwright tests. Examples: Context: A developer has a failing Playwright test that needs to be debugged and fixed. user: 'The login test is failing, can you fix it?' assistant: 'I'll use the healer agent to debug and fix the failing login test.' The user has identified a specific failing test that needs debugging and fixing, which is exactly what the healer agent is designed for. Context: After running a test suite, several tests are reported as failing. user: 'Test user-registration.spec.ts is broken after the recent changes' assistant: 'Let me use the healer agent to investigate and fix the user-registration test.' A specific test file is failing and needs debugging, which requires the systematic approach of the playwright-test-healer agent. +tools: Glob, Grep, Read, Write, Edit, MultiEdit, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_generate_locator, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_snapshot, mcp__playwright-test__test_debug, mcp__playwright-test__test_list, mcp__playwright-test__test_run +model: sonnet +color: red +--- + +You are the Playwright Test Healer, an expert test automation engineer specializing in debugging and +resolving Playwright test failures. Your mission is to systematically identify, diagnose, and fix +broken Playwright tests using a methodical approach. + +Your workflow: +1. **Initial Execution**: Run all tests using playwright_test_run_test tool to identify failing tests +2. **Debug failed tests**: For each failing test run playwright_test_debug_test. +3. **Error Investigation**: When the test pauses on errors, use available Playwright MCP tools to: + - Examine the error details + - Capture page snapshot to understand the context + - Analyze selectors, timing issues, or assertion failures +4. **Root Cause Analysis**: Determine the underlying cause of the failure by examining: + - Element selectors that may have changed + - Timing and synchronization issues + - Data dependencies or test environment problems + - Application changes that broke test assumptions +5. **Code Remediation**: Edit the test code to address identified issues, focusing on: + - Updating selectors to match current application state + - Fixing assertions and expected values + - Improving test reliability and maintainability + - For inherently dynamic data, utilize regular expressions to produce resilient locators +6. **Verification**: Restart the test after each fix to validate the changes +7. **Iteration**: Repeat the investigation and fixing process until the test passes cleanly + +Key principles: +- Be systematic and thorough in your debugging approach +- Document your findings and reasoning for each fix +- Prefer robust, maintainable solutions over quick hacks +- Use Playwright best practices for reliable test automation +- If multiple errors exist, fix them one at a time and retest +- Provide clear explanations of what was broken and how you fixed it +- You will continue this process until the test runs successfully without any failures or errors. +- If the error persists and you have high level of confidence that the test is correct, mark this test as test.fixme() + so that it is skipped during the execution. Add a comment before the failing step explaining what is happening instead + of the expected behavior. +- Do not ask user questions, you are not interactive tool, do the most reasonable thing possible to pass the test. +- Never wait for networkidle or use other discouraged or deprecated apis \ No newline at end of file diff --git a/frontend/.claude/agents/playwright-test-planner.md b/frontend/.claude/agents/playwright-test-planner.md new file mode 100644 index 0000000000..9e468a85d8 --- /dev/null +++ b/frontend/.claude/agents/playwright-test-planner.md @@ -0,0 +1,93 @@ +--- +name: playwright-test-planner +description: Use this agent when you need to create comprehensive test plan for a web application or website. Examples: Context: User wants to test a new e-commerce checkout flow. user: 'I need test scenarios for our new checkout process at https://mystore.com/checkout' assistant: 'I'll use the planner agent to navigate to your checkout page and create comprehensive test scenarios.' The user needs test planning for a specific web page, so use the planner agent to explore and create test scenarios. Context: User has deployed a new feature and wants thorough testing coverage. user: 'Can you help me test our new user dashboard at https://app.example.com/dashboard?' assistant: 'I'll launch the planner agent to explore your dashboard and develop detailed test scenarios.' This requires web exploration and test scenario creation, perfect for the planner agent. +tools: Glob, Grep, Read, Write, mcp__playwright-test__browser_click, mcp__playwright-test__browser_close, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_navigate_back, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_take_screenshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_wait_for, mcp__playwright-test__planner_setup_page +model: sonnet +color: green +--- + +You are an expert web test planner with extensive experience in quality assurance, user experience testing, and test +scenario design. Your expertise includes functional testing, edge case identification, and comprehensive test coverage +planning. + +You will: + +1. **Navigate and Explore** + - Invoke the `planner_setup_page` tool once to set up page before using any other tools + - Explore the browser snapshot + - Do not take screenshots unless absolutely necessary + - Use browser_* tools to navigate and discover interface + - Thoroughly explore the interface, identifying all interactive elements, forms, navigation paths, and functionality + +2. **Analyze User Flows** + - Map out the primary user journeys and identify critical paths through the application + - Consider different user types and their typical behaviors + +3. **Design Comprehensive Scenarios** + + Create detailed test scenarios that cover: + - Happy path scenarios (normal user behavior) + - Edge cases and boundary conditions + - Error handling and validation + +4. **Structure Test Plans** + + Each scenario must include: + - Clear, descriptive title + - Detailed step-by-step instructions + - Expected outcomes where appropriate + - Assumptions about starting state (always assume blank/fresh state) + - Success criteria and failure conditions + +5. **Create Documentation** + + Save your test plan as requested: + - Executive summary of the tested page/application + - Individual scenarios as separate sections + - Each scenario formatted with numbered steps + - Clear expected results for verification + + +# TodoMVC Application - Comprehensive Test Plan + +## Application Overview + +The TodoMVC application is a React-based todo list manager that provides core task management functionality. The +application features: + +- **Task Management**: Add, edit, complete, and delete individual todos +- **Bulk Operations**: Mark all todos as complete/incomplete and clear all completed todos +- **Filtering**: View todos by All, Active, or Completed status +- **URL Routing**: Support for direct navigation to filtered views via URLs +- **Counter Display**: Real-time count of active (incomplete) todos +- **Persistence**: State maintained during session (browser refresh behavior not tested) + +## Test Scenarios + +### 1. Adding New Todos + +**Seed:** `tests/seed.spec.ts` + +#### 1.1 Add Valid Todo +**Steps:** +1. Click in the "What needs to be done?" input field +2. Type "Buy groceries" +3. Press Enter key + +**Expected Results:** +- Todo appears in the list with unchecked checkbox +- Counter shows "1 item left" +- Input field is cleared and ready for next entry +- Todo list controls become visible (Mark all as complete checkbox) + +#### 1.2 +... + + +**Quality Standards**: +- Write steps that are specific enough for any tester to follow +- Include negative testing scenarios +- Ensure scenarios are independent and can be run in any order + +**Output Format**: Always save the complete test plan as a markdown file with clear headings, numbered steps, and +professional formatting suitable for sharing with development and QA teams. \ No newline at end of file diff --git a/frontend/.mcp.json b/frontend/.mcp.json new file mode 100644 index 0000000000..d9dfc1253b --- /dev/null +++ b/frontend/.mcp.json @@ -0,0 +1,11 @@ +{ + "mcpServers": { + "playwright-test": { + "command": "npx", + "args": [ + "playwright", + "run-test-mcp-server" + ] + } + } +} \ No newline at end of file diff --git a/frontend/specs/README.md b/frontend/specs/README.md new file mode 100644 index 0000000000..6a06f0ee78 --- /dev/null +++ b/frontend/specs/README.md @@ -0,0 +1,5 @@ +# Test Plans + +This directory contains markdown test plans created by the Playwright planner agent. + +Each file represents a comprehensive test plan for a specific feature or user flow. diff --git a/frontend/specs/topics.md b/frontend/specs/topics.md new file mode 100644 index 0000000000..c3f1beda81 --- /dev/null +++ b/frontend/specs/topics.md @@ -0,0 +1,455 @@ +# Topics E2E Test Plan + +## Overview + +E2E tests for the Topics page in Redpanda Console, covering topic management, message operations, and configuration viewing. + +**Total Tests:** 40 tests across 6 spec files +**Seed:** `tests/seed.spec.ts` + +## Routes + +- `/topics` - Topic list page +- `/topics/:topicName` - Topic details page with tabs +- `/topics/:topicName/produce-record` - Produce message page + +## Test Files + +### 1. Topic List - Basic Operations (`topic-list.spec.ts`) + +**6 tests** covering list viewing, search, and filtering operations. + +#### 1.1 View Topics List +- Navigate to `/topics` +- Verify page elements visible: + - Create topic button (testId: `create-topic-button`) + - Search input (testId: `search-field-input`) + - Show internal topics checkbox (testId: `show-internal-topics-checkbox`) + - Topics table (testId: `topics-table`) + +#### 1.2 Search Topics - Exact Match +- Create test topic with unique name +- Search for the exact topic name +- Verify topic is visible in filtered results +- Search for non-existent topic +- Verify original topic is hidden + +#### 1.3 Search Topics - Regex Pattern +- Create 3 topics: 2 with same prefix, 1 different +- Apply regex pattern matching prefix (e.g., `^regex-test.*`) +- Verify matching topics visible +- Verify non-matching topic hidden + +#### 1.4 Clear Search Filter +- Create test topic +- Apply search filter that hides the topic +- Clear the search input +- Verify topic becomes visible again + +#### 1.5 Toggle Show Internal Topics +- Navigate to topics list +- Uncheck "Show internal topics" checkbox +- Verify internal topics (e.g., `_schemas`) hidden +- Check the checkbox +- Verify internal topics visible + +#### 1.6 Persist Internal Topics Setting +- Check "Show internal topics" checkbox +- Verify `_schemas` topic visible +- Reload page +- Verify setting persisted (checkbox still checked, `_schemas` visible) +- Uncheck checkbox and reload +- Verify setting persisted (checkbox unchecked, `_schemas` hidden) + +--- + +### 2. Topic Creation (`topic-creation.spec.ts`) + +**7 tests** covering topic creation flows and validation. + +#### 2.1 Create Topic with Default Settings +- Navigate to `/topics` +- Click create topic button (testId: `create-topic-button`) +- Verify modal opens, topic name field focused +- Fill topic name (testId: `topic-name`) +- Click create button (testId: `onOk-button`) +- Close success modal (testId: `create-topic-success__close-button`) +- Verify topic appears in list (testId: `topic-link-{topicName}`) + +#### 2.2 Create Topic with Custom Configuration +- Open create topic modal +- Fill topic name +- Set partitions to 6 (placeholder: `/partitions/i`) +- Click create +- Close success modal +- Navigate to topic configuration tab +- Verify configuration page loads (testId: `config-group-table`) + +#### 2.3 Validate Empty Topic Name +- Open create topic modal +- Leave topic name empty +- Verify create button disabled (testId: `onOk-button`) +- Click cancel to close modal + +#### 2.4 Validate Invalid Topic Name Characters +- Open create topic modal +- Enter invalid topic name with spaces and special chars +- If button enabled, click shows validation error +- If button disabled, verify it's disabled +- Modal remains open + +#### 2.5 Validate Replication Factor +- Open create topic modal +- Enter topic name +- Try setting replication factor to 999 (placeholder: `/replication/i`) +- Verify validation error appears (if field is enabled) +- Cancel modal + +#### 2.6 Cancel Topic Creation +- Open create topic modal +- Fill some values +- Click Cancel button +- Verify modal closes +- Verify topic not created + +#### 2.7 Create and Verify in Multiple Views +- Create topic through modal +- Verify in topics list +- Navigate to topic details +- Verify URL matches `/topics/{topicName}` +- Verify topic name displayed +- Navigate back to list +- Verify topic still visible + +--- + +### 3. Topic Details - Navigation and Tabs (`topic-navigation.spec.ts`) + +**5 tests** covering topic details navigation and tab functionality. + +#### 3.1 Navigate to Topic Details +- Create test topic +- Navigate to topics list +- Click topic link (testId: `topic-link-{topicName}`) +- Verify URL changes to `/topics/{topicName}` +- Verify topic name displayed +- Verify tabs visible (role: `tablist`) + +#### 3.2 View Messages Tab (Default) +- Create test topic +- Click topic link +- Verify tablist visible +- Verify Messages tab content visible +- Verify message-related elements present + +#### 3.3 Navigate to Tab via URL Hash +- Create test topic +- Navigate directly to `/topics/{topicName}#configuration` +- Verify configuration tab active (testId: `config-group-table`) +- Navigate to `/topics/{topicName}#partitions` +- Verify partitions content visible + +#### 3.4 View Configuration Tab with Grouped Settings +- Create test topic +- Navigate to configuration tab +- Verify config groups visible in expected order: + - Retention, Compaction, Replication, Tiered Storage + - Write Caching, Iceberg, Schema Registry and Validation + - Message Handling, Compression, Storage Internals +- Verify at least "Retention" group present +- Verify groups maintain order + +#### 3.5 Navigate Back via Breadcrumb +- Create test topic +- Navigate to topic details +- Click "Topics" breadcrumb link +- Verify returns to `/topics` (with optional trailing slash and query params) +- Verify topic visible in list + +--- + +### 4. Produce Messages (`topic-messages-production.spec.ts`) + +**7 tests** covering message production operations. + +#### 4.1 Produce Simple Text Message +- Create test topic +- Produce message via helper +- Navigate to messages tab +- Verify message content visible + +#### 4.2 Produce Message with Key *(skipped)* +- Create test topic +- Navigate to produce page +- Fill key editor (testId: `produce-key-editor`) +- Fill value editor (testId: `produce-value-editor`) +- Click produce button (testId: `produce-button`) +- Verify message produced + +#### 4.3 Produce Multiple Messages in Sequence +- Create test topic +- Produce 3 messages sequentially via UI +- Each message: navigate to produce, fill editor, click produce +- Verify each message appears after production +- Navigate to messages tab +- Verify all 3 messages visible + +#### 4.4 Produce Large Message +- Create test topic +- Navigate to produce page +- Generate 30KB+ content +- Paste into value editor via clipboard +- Click produce +- Verify "Message size exceeds display limit" warning +- Expand message row +- Verify warning about performance degradation +- Click "Load anyway" button (testId: `load-anyway-button`) +- Verify payload content visible (testId: `payload-content`) + +#### 4.5 Navigate to Produce Page +- Create test topic +- Navigate to produce page +- Verify produce button visible (testId: `produce-button`) +- Verify value editor visible (testId: `produce-value-editor`) +- Verify key editor visible (testId: `produce-key-editor`) +- Verify heading indicates produce/publish + +#### 4.6 Handle Empty Message Production +- Create test topic +- Navigate to produce page +- Click in value editor but don't enter text +- Click produce button +- Verify no crash occurs (wait 2 seconds) + +#### 4.7 Clear Editor Between Produces +- Create test topic +- Navigate to produce page, produce first message +- Navigate to produce page again +- Clear editor (Ctrl+A or Meta+A, then Backspace) +- Produce second message +- Navigate to messages tab +- Verify both messages exist + +--- + +### 5. View and Filter Messages (`topic-messages-filtering.spec.ts`) + +**8 tests** covering message viewing and filtering operations. + +#### 5.1 Expand Message to View Details +- Create topic and produce message +- Navigate to messages tab +- Verify message content visible +- Click expand button (label: "Collapse row") +- Verify expanded details visible (testId: `payload-content`) +- Verify metadata visible (Offset/Partition/Timestamp) + +#### 5.2 Search Message Content +- Create topic and produce 2 messages (one with keyword, one without) +- Navigate to messages tab +- Find search input (placeholder: `/search|filter/i`) +- Enter search term and press Enter +- Verify matching message visible +- (Behavior depends on implementation for non-matching) + +#### 5.3 Filter Messages by Partition *(skipped)* +- Create topic and produce message +- Look for partition filter dropdown +- Select partition 0 +- Verify messages filter to selected partition + +#### 5.4 Filter Messages by Offset +- Create topic and produce 3 messages +- Navigate to messages tab +- Find offset input (placeholder: `/offset/i`) +- Set start offset to 1 (skip first message) +- Press Enter and wait +- Verify filtered messages visible + +#### 5.5 Clear All Filters +- Create topic and produce message +- Apply search filter +- Look for clear/reset button (role: `button`, name: `/clear|reset/i`) +- Click clear button +- Verify message becomes visible again + +#### 5.6 Handle Empty Topic +- Create empty topic (no messages) +- Navigate to messages tab +- Verify empty state message visible (text: `/No messages|empty/i`) +- Verify produce button still available + +#### 5.7 Handle Rapid Filter Changes +- Create topic and produce message +- Navigate to messages tab +- Rapidly change search terms multiple times +- Clear and enter final search term +- Verify handles gracefully without errors +- Verify message displays correctly + +#### 5.8 Preserve Filters in URL Parameters +- Create topic and produce message +- Navigate to messages tab +- Enter search term in quick search and press Enter +- Verify URL contains filter parameter (e.g., `q=test-search`) +- Reload page +- Verify URL still contains parameter +- Verify search input has the value +- (Uses testId: `message-quick-search-input`) + +--- + +### 6. Message Actions and Export (`topic-messages-actions.spec.ts`) + +**7 tests** covering message actions like copy, export, and viewing metadata. + +**Note:** Tests use `permissions: ['clipboard-write', 'clipboard-read']` + +#### 6.1 Copy Message Value to Clipboard +- Create topic and produce message +- Navigate to messages tab +- Expand first message +- Click copy value button (role: `button`, name: `/copy value/i`) +- Verify clipboard content matches message value +- Verify success toast visible: "Value copied to clipboard" + +#### 6.2 Export Single Message as JSON +- Create topic and produce message +- Navigate to messages tab +- Expand first message +- Click "Download Record" +- JSON format selected by default +- Click save in dialog (role: `dialog`, name: `/save message/i`) +- Verify download with `.json` extension +- Save and verify file content contains message + +#### 6.3 Export Single Message as CSV +- Create topic and produce message +- Navigate to messages tab +- Expand first message +- Click "Download Record" +- Select CSV format (testId: `csv_field`) +- Click "Save Messages" in dialog +- Verify download as `messages.csv` +- Verify file content contains message + +#### 6.4 Export Message with Special Characters +- Create topic and produce message with special chars (quotes, commas, emojis) +- Navigate to messages tab +- Expand message and export as JSON +- Verify special characters preserved in file + +#### 6.5 Open and Cancel Export Dialog +- Create topic and produce message +- Navigate to messages tab +- Expand message +- Click "Download Record" +- Verify dialog opens (role: `dialog`, name: `/save message/i`) +- Click Cancel button +- Verify dialog closes + +#### 6.6 Handle Large Payload Export +- Create topic +- Navigate to produce page and create 30KB+ message +- Verify "Message size exceeds display limit" warning +- Expand message row +- Click "Load anyway" button (testId: `load-anyway-button`) +- Export message as JSON +- Verify file size > 1KB +- Verify payload content loads + +#### 6.7 View Message Metadata +- Create topic and produce message +- Navigate to messages tab +- Expand first message +- Verify metadata visible: + - Offset/offset (case insensitive) + - Partition/partition + - Timestamp/timestamp +- Verify payload content visible (testId: `payload-content`) + +--- + +## Implementation Details + +### Test Utilities + +All tests use the `TopicPage` Page Object Model: + +```typescript +import { TopicPage } from '../utils/TopicPage'; + +const topicPage = new TopicPage(page); + +// High-level operations +await topicPage.createTopic(topicName); +await topicPage.deleteTopic(topicName); +await topicPage.produceMessage(topicName, message); + +// Navigation +await topicPage.goToTopicsList(); +await topicPage.goToTopicDetails(topicName); +await topicPage.goToProduceRecord(topicName); + +// List operations +await topicPage.searchTopics(searchTerm); +await topicPage.toggleInternalTopics(checked); +await topicPage.verifyTopicInList(topicName); +``` + +### Test IDs Used + +**Topic List:** +- `create-topic-button` - Create topic button +- `search-field-input` - Search input field +- `show-internal-topics-checkbox` - Internal topics toggle +- `topics-table` - Topics data table +- `topic-link-{topicName}` - Dynamic topic link +- `delete-topic-button-{topicName}` - Delete button per topic +- `delete-topic-confirm-button` - Confirm delete button + +**Topic Creation:** +- `topic-name` - Topic name input field +- `onOk-button` - Create/submit button +- `create-topic-success__close-button` - Close success modal + +**Topic Details:** +- `config-group-table` - Configuration groups table +- `produce-record-button` - Produce button in details +- Use `role='tablist'` for tabs + +**Produce Messages:** +- `produce-button` - Produce message button +- `produce-value-editor` - Value editor (Monaco) +- `produce-key-editor` - Key editor (Monaco) +- `load-anyway-button` - Load large message button +- `payload-content` - Message payload display + +**Messages Tab:** +- `message-quick-search-input` - Quick search input +- `data-table-cell` - Table cells +- Use `aria-label="Collapse row"` for expand buttons + +**Export:** +- `csv_field` - CSV format selection +- Use `role='dialog'` with `name=/save message/i` for export dialog + +### Cleanup + +All tests use `TopicPage.deleteTopic()` in teardown to clean up created topics. + +### Skipped Tests + +Some tests are marked as `test.skip()`: +- Produce message with key - Needs stable key editor interaction +- Filter messages by partition - Needs better select control handling + +### Notes + +- Tests create topics with unique names using `Date.now()` timestamps +- Tests verify both UI state and data consistency +- URL parameter preservation is tested for search filters +- Internal topics (`_schemas`) are used to test visibility toggle +- Large message tests use 30KB+ content to trigger size warnings +- Special characters testing includes quotes, commas, and emojis +- All tests are self-contained with setup and teardown diff --git a/frontend/src/components/pages/topics/Tab.Messages/common/message-search-filter-bar.tsx b/frontend/src/components/pages/topics/Tab.Messages/common/message-search-filter-bar.tsx index 8dd81cb99a..053065b081 100644 --- a/frontend/src/components/pages/topics/Tab.Messages/common/message-search-filter-bar.tsx +++ b/frontend/src/components/pages/topics/Tab.Messages/common/message-search-filter-bar.tsx @@ -24,16 +24,18 @@ interface MessageSearchFilterBarProps { export const MessageSearchFilterBar: FC = ({ filters, onEdit, onToggle, onRemove }) => { return ( - + {/* Existing Tags List */} {filters?.map((e) => ( { onEdit(e); }} @@ -43,6 +45,7 @@ export const MessageSearchFilterBar: FC = ({ filter alignItems="center" border="0px solid hsl(0 0% 85% / 1)" borderWidth="0px 1px" + data-testid={`message-filter-toggle-${e.id}`} display="inline-flex" height="100%" mx="2" @@ -52,7 +55,13 @@ export const MessageSearchFilterBar: FC = ({ filter > {e.name || e.code || 'New Filter'} - onRemove(e.id)} opacity={1} px="1" /> + onRemove(e.id)} + opacity={1} + px="1" + /> ))} diff --git a/frontend/src/components/pages/topics/Tab.Messages/index.tsx b/frontend/src/components/pages/topics/Tab.Messages/index.tsx index 8074d013d4..55d0e0d61a 100644 --- a/frontend/src/components/pages/topics/Tab.Messages/index.tsx +++ b/frontend/src/components/pages/topics/Tab.Messages/index.tsx @@ -946,6 +946,7 @@ export const TopicMessageView: FC = (props) => {