Add E2E test for AI Workspace#2210
Conversation
Induwara04
requested review from
AnuGayan,
Arshardh,
CrowleyRajapakse,
HeshanSudarshana,
HiranyaKavishani,
Krishanx92,
PasanT9,
RakhithaRR,
Tharsanan1,
VirajSalaka,
ashera96,
chamilaadhi,
dushaniw,
hisanhunais,
malinthaprasan,
pubudu538,
renuka-fernando,
senthuran16,
tgtshanika,
tharikaGitHub and
tharindu1st
as code owners
📝 WalkthroughWalkthroughThis PR introduces a Cypress E2E test suite for the Suggested Reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
| e2e-deps: ## Install Cypress dependencies for local E2E runs | ||
| npm install | ||
|
|
||
| e2e-test: ## Run Cypress headlessly against a locally running docker compose stack |
There was a problem hiding this comment.
Shall we add a pr check GitHub workflow as well to run this?
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
portals/ai-workspace/src/pages/login/BasicAuthLoginPage.tsx (1)
187-223:⚠️ Potential issue | 🟠 Major | ⚡ Quick winResolve inconsistent test selector naming:
data-cyvsdata-cyidacross the UI component layer.The test selector additions follow two different naming conventions:
BasicAuthLoginPage.tsxusesdata-cy- All other component files (
AppSidebar.tsx,AddNewProject.tsx,LLMProxyNew.tsx,ServiceProviderOverview.tsx) usedata-cyidThis inconsistency will cause E2E test specs to fail if they rely on a unified selector strategy. If tests query
[data-cyid="login-username"]they will not find the login elements; if they query[data-cy="login-username"]they will not find elements in other components.Root cause: BasicAuthLoginPage was implemented with a different attribute naming convention than the rest of the codebase.
portals/ai-workspace/src/pages/login/BasicAuthLoginPage.tsx#L187-L223: Rename alldata-cyattributes todata-cyidto match the codebase pattern established in the other four component files.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@portals/ai-workspace/src/pages/login/BasicAuthLoginPage.tsx` around lines 187 - 223, The test selector naming in the BasicAuthLoginPage component uses the data-cy attribute naming convention while the rest of the codebase uses data-cyid, creating an inconsistency that will cause E2E test failures. Replace all occurrences of the data-cy attribute with data-cyid in the login form fields and button elements (specifically the inputProps and data-cy properties with values like login-username, login-password, and login-submit) to match the naming pattern established in the other component files throughout the codebase.
🧹 Nitpick comments (1)
portals/ai-workspace/cypress/support/commands.js (1)
35-45: Replace text-based selectors with dedicated test attributes in thelogincommand.The current selectors rely on UI copy (
placeholder, button text, sidebar labels), making tests brittle to text changes and localization updates. Use thedata-cyanddata-cyidattributes already defined in the UI components:
- Login form: Replace
input[placeholder="username"],input[type="password"], andcy.contains('button', 'Sign In')withcy.get('[data-cy="login-username"]'),cy.get('[data-cy="login-password"]'), andcy.get('[data-cy="login-submit"]')(available inBasicAuthLoginPage.tsx)- Sidebar items: Replace
cy.contains('Projects')withcy.get('[data-cyid="nav-projects"]')(available inAppSidebar.tsx)- Quick Start: Replace
cy.contains('Quick Start')with a dedicated test attribute selector (adddata-cyid="nav-quick-start"or equivalent to the Quick Start sidebar item inAppSidebar.tsxif not present)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@portals/ai-workspace/cypress/support/commands.js` around lines 35 - 45, The login command in the Cypress support file uses brittle text-based selectors that break with UI text changes or localization. Replace the text-based selectors with dedicated test attributes: change input[placeholder="username"] to cy.get('[data-cy="login-username"]'), input[type="password"] to cy.get('[data-cy="login-password"]'), and cy.contains('button', 'Sign In') to cy.get('[data-cy="login-submit"]') (all available in BasicAuthLoginPage.tsx). Additionally, replace cy.contains('Projects') with cy.get('[data-cyid="nav-projects"]') and cy.contains('Quick Start') with a dedicated test attribute selector using cy.get('[data-cyid="nav-quick-start"]') (both in AppSidebar.tsx), adding the data-cyid attribute to the Quick Start sidebar item if it does not already exist.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@portals/ai-workspace/cypress/e2e/001-providers/001-provider-and-proxy.cy.js`:
- Around line 86-89: The route assertion in the cy.location pathname check
hardcodes 'ap-org' instead of using the environment variable for the
organization handle, which causes the test to fail in environments with
different ORG_HANDLE values. Replace the hardcoded 'ap-org' string in the
pathname with a dynamic reference to Cypress.env('ORG_HANDLE') to match the
org-route contract established in the support commands, ensuring the test works
across all environments.
In `@portals/ai-workspace/package.json`:
- Around line 11-13: The test:e2e command uses host.docker.internal which is not
consistently available across Linux environments, causing headless E2E runs to
fail. In the test:e2e script within package.json, add an explicit --add-host
host-gateway mapping to the docker run command to ensure the Docker container
can properly resolve the host gateway regardless of the operating system. Apply
the same host-gateway mapping change to the test:e2e target in
portals/ai-workspace/Makefile and update any related README documentation to
reflect this improvement for cross-platform compatibility.
---
Outside diff comments:
In `@portals/ai-workspace/src/pages/login/BasicAuthLoginPage.tsx`:
- Around line 187-223: The test selector naming in the BasicAuthLoginPage
component uses the data-cy attribute naming convention while the rest of the
codebase uses data-cyid, creating an inconsistency that will cause E2E test
failures. Replace all occurrences of the data-cy attribute with data-cyid in the
login form fields and button elements (specifically the inputProps and data-cy
properties with values like login-username, login-password, and login-submit) to
match the naming pattern established in the other component files throughout the
codebase.
---
Nitpick comments:
In `@portals/ai-workspace/cypress/support/commands.js`:
- Around line 35-45: The login command in the Cypress support file uses brittle
text-based selectors that break with UI text changes or localization. Replace
the text-based selectors with dedicated test attributes: change
input[placeholder="username"] to cy.get('[data-cy="login-username"]'),
input[type="password"] to cy.get('[data-cy="login-password"]'), and
cy.contains('button', 'Sign In') to cy.get('[data-cy="login-submit"]') (all
available in BasicAuthLoginPage.tsx). Additionally, replace
cy.contains('Projects') with cy.get('[data-cyid="nav-projects"]') and
cy.contains('Quick Start') with a dedicated test attribute selector using
cy.get('[data-cyid="nav-quick-start"]') (both in AppSidebar.tsx), adding the
data-cyid attribute to the Quick Start sidebar item if it does not already
exist.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0fa21e24-a247-4b5b-a067-3b36e2e442fe
⛔ Files ignored due to path filters (1)
portals/ai-workspace/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (17)
portals/ai-workspace/.gitignoreportals/ai-workspace/Makefileportals/ai-workspace/README.mdportals/ai-workspace/cypress.config.jsportals/ai-workspace/cypress/e2e/000-smoke/001-basic-login.cy.jsportals/ai-workspace/cypress/e2e/001-providers/001-provider-and-proxy.cy.jsportals/ai-workspace/cypress/e2e/003-mcp-proxies/003-mcp-proxy-sample-url.cy.jsportals/ai-workspace/cypress/e2e/004-gateways/004-ai-gateway.cy.jsportals/ai-workspace/cypress/e2e/005-applications/005-genai-application.cy.jsportals/ai-workspace/cypress/support/commands.jsportals/ai-workspace/cypress/support/e2e.jsportals/ai-workspace/package.jsonportals/ai-workspace/src/pages/appShell/AppSidebar.tsxportals/ai-workspace/src/pages/appShell/appShellPages/projects/AddNewProject.tsxportals/ai-workspace/src/pages/appShell/appShellPages/proxies/LLMProxyNew.tsxportals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderOverview.tsxportals/ai-workspace/src/pages/login/BasicAuthLoginPage.tsx
| cy.location('pathname', { timeout: 30000 }).should( | ||
| 'eq', | ||
| `/organizations/ap-org/service-provider/${providerId}` | ||
| ); |
There was a problem hiding this comment.
Use environment org handle in the route assertion.
Line 88 hardcodes ap-org, which breaks this test in environments where ORG_HANDLE differs.
Proposed fix
cy.location('pathname', { timeout: 30000 }).should(
'eq',
- `/organizations/ap-org/service-provider/${providerId}`
+ `/organizations/${Cypress.env('ORG_HANDLE')}/service-provider/${providerId}`
);Based on learnings from provided snippets, portals/ai-workspace/cypress/support/commands.js uses Cypress.env('ORG_HANDLE') as the org-route contract.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| cy.location('pathname', { timeout: 30000 }).should( | |
| 'eq', | |
| `/organizations/ap-org/service-provider/${providerId}` | |
| ); | |
| cy.location('pathname', { timeout: 30000 }).should( | |
| 'eq', | |
| `/organizations/${Cypress.env('ORG_HANDLE')}/service-provider/${providerId}` | |
| ); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@portals/ai-workspace/cypress/e2e/001-providers/001-provider-and-proxy.cy.js`
around lines 86 - 89, The route assertion in the cy.location pathname check
hardcodes 'ap-org' instead of using the environment variable for the
organization handle, which causes the test to fail in environments with
different ORG_HANDLE values. Replace the hardcoded 'ap-org' string in the
pathname with a dynamic reference to Cypress.env('ORG_HANDLE') to match the
org-route contract established in the support commands, ensuring the test works
across all environments.
| "test:e2e": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-https://host.docker.internal:5380} docker run --rm -v \"$(pwd):/e2e\" -w /e2e -e CYPRESS_BASE_URL cypress/included:13.17.0 cypress run --headless --browser electron --config-file cypress.config.js", | ||
| "test:e2e:local": "cypress run --headless --config-file cypress.config.js", | ||
| "test:e2e:open": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-https://localhost:5380} cypress open --e2e --config-file cypress.config.js" |
There was a problem hiding this comment.
Add Linux-compatible host mapping for Dockerized E2E runs.
The test:e2e command depends on host.docker.internal, which is not consistently available across environments. This can make headless E2E runs fail even when the stack is healthy. Add an explicit host-gateway mapping and mirror the same change in portals/ai-workspace/Makefile and the related README note.
Suggested patch
- "test:e2e": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-https://host.docker.internal:5380} docker run --rm -v \"$(pwd):/e2e\" -w /e2e -e CYPRESS_BASE_URL cypress/included:13.17.0 cypress run --headless --browser electron --config-file cypress.config.js",
+ "test:e2e": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-https://host.docker.internal:5380} docker run --rm --add-host=host.docker.internal:host-gateway -v \"$(pwd):/e2e\" -w /e2e -e CYPRESS_BASE_URL cypress/included:13.17.0 cypress run --headless --browser electron --config-file cypress.config.js",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "test:e2e": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-https://host.docker.internal:5380} docker run --rm -v \"$(pwd):/e2e\" -w /e2e -e CYPRESS_BASE_URL cypress/included:13.17.0 cypress run --headless --browser electron --config-file cypress.config.js", | |
| "test:e2e:local": "cypress run --headless --config-file cypress.config.js", | |
| "test:e2e:open": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-https://localhost:5380} cypress open --e2e --config-file cypress.config.js" | |
| "test:e2e": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-https://host.docker.internal:5380} docker run --rm --add-host=host.docker.internal:host-gateway -v \"$(pwd):/e2e\" -w /e2e -e CYPRESS_BASE_URL cypress/included:13.17.0 cypress run --headless --browser electron --config-file cypress.config.js", | |
| "test:e2e:local": "cypress run --headless --config-file cypress.config.js", | |
| "test:e2e:open": "CYPRESS_BASE_URL=${CYPRESS_BASE_URL:-https://localhost:5380} cypress open --e2e --config-file cypress.config.js" |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@portals/ai-workspace/package.json` around lines 11 - 13, The test:e2e command
uses host.docker.internal which is not consistently available across Linux
environments, causing headless E2E runs to fail. In the test:e2e script within
package.json, add an explicit --add-host host-gateway mapping to the docker run
command to ensure the Docker container can properly resolve the host gateway
regardless of the operating system. Apply the same host-gateway mapping change
to the test:e2e target in portals/ai-workspace/Makefile and update any related
README documentation to reflect this improvement for cross-platform
compatibility.
2 participants
This pull request introduces comprehensive Cypress end-to-end (E2E) testing support to the
ai-workspaceportal. It adds new E2E test suites covering critical UI flows, updates documentation and developer tooling to support E2E testing, and configures Cypress output directories. The changes ensure that major user journeys—like login, provider/proxy management, AI gateways, and GenAI applications—are now automatically tested for regressions.E2E Testing Framework Integration and Coverage
cypress.config.js) with sensible defaults, environment variables, and browser launch options for local and containerized runs. Test artifacts (videos, screenshots) are output to thereports/directory.001-basic-login.cy.js)001-provider-and-proxy.cy.js)002-mcp-proxy-sample-url.cy.js)003-ai-gateway.cy.js)004-genai-application.cy.js)Developer Tooling and Documentation
Makefileto adde2e-deps,e2e-test, ande2e-opentargets for installing Cypress, running tests headlessly in Docker, and launching the Cypress UI, respectively. [1] [2]README.md, including quickstart instructions, test credentials, and command references.Project Structure and Output
.gitignoreto exclude the newreportsdirectory used for Cypress artifacts.