[Infra] UI - E2E Tests: Key Delete, Regenerate, and Update TPM/RPM Limits#20803
[Infra] UI - E2E Tests: Key Delete, Regenerate, and Update TPM/RPM Limits#20803yuneng-jiang merged 2 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Greptile OverviewGreptile SummaryThis PR adds Playwright E2E coverage for the LiteLLM dashboard API keys flow: selecting a key from the API Keys page, deleting it with name confirmation, regenerating it, and updating TPM/RPM limits via the Settings tab. It also introduces shared constants for the specific test key identifiers used by these specs. Main fix needed before merge: the delete-key test locates the confirmation input using Confidence Score: 4/5
|
| Filename | Overview |
|---|---|
| ui/litellm-dashboard/e2e_tests/constants.ts | Adds shared constants for E2E API key ID prefixes and key name used across new Playwright tests. |
| ui/litellm-dashboard/e2e_tests/tests/keys/deleteKey.spec.ts | Adds Playwright E2E test for deleting an API key; uses a textbox locator by accessible name that likely won’t match the confirmation input, causing deterministic failures. |
| ui/litellm-dashboard/e2e_tests/tests/keys/regenerateKey.spec.ts | Adds Playwright E2E test for regenerating an API key by selecting a key row/button via ID prefix and confirming regeneration. |
| ui/litellm-dashboard/e2e_tests/tests/keys/updateKeyLimits.spec.ts | Adds Playwright E2E test for editing key TPM/RPM limits via Settings tab and verifying updated values render. |
Sequence Diagram
sequenceDiagram
autonumber
actor T as Playwright Test
participant P as Browser Page
participant UI as LiteLLM Dashboard UI
T->>P: navigateToPage(ApiKeys)
P->>UI: Load API Keys page
UI-->>P: Keys list rendered (pagination shows Next)
T->>P: Click key row/button (hasText ID prefix)
P->>UI: Open key details drawer/modal
alt Delete key flow
T->>P: Click "Delete Key"
P->>UI: Open confirmation dialog
T->>P: Fill confirmation textbox with key name
T->>P: Click "Delete"
P->>UI: Submit delete request
UI-->>P: Toast "Key deleted successfully"
else Regenerate key flow
T->>P: Click "Regenerate Key"
P->>UI: Open regenerate confirmation
T->>P: Click "Regenerate"
P->>UI: Submit regenerate request
UI-->>P: Toast "Virtual Key regenerated"
else Update limits flow
T->>P: Click "Settings" tab
P->>UI: Render settings
T->>P: Click "Edit Settings"
P->>UI: Enable inputs
T->>P: Fill TPM/RPM spinbuttons
T->>P: Click "Save Changes"
P->>UI: Submit update request
UI-->>P: Render updated TPM/RPM values
end
| await page.getByRole("textbox", { name: E2E_DELETE_KEY_NAME }).click(); | ||
| await page.getByRole("textbox", { name: E2E_DELETE_KEY_NAME }).fill(E2E_DELETE_KEY_NAME); | ||
| const deleteButton = page.getByRole("button", { name: "Delete", exact: true }); |
There was a problem hiding this comment.
Incorrect accessible name
The locator getByRole("textbox", { name: E2E_DELETE_KEY_NAME }) uses the accessible name of the input, not the placeholder/value. If the confirmation field is labeled something like "Type key name to confirm", this will never match and the test will fail. Prefer targeting the textbox by its real label (or by a stable data-testid) and then fill(E2E_DELETE_KEY_NAME).
This same issue appears twice here (click + fill) and will break the delete flow if the textbox isn’t literally named e2eDeleteKey.
Relevant issues
Pre-Submission checklist
Please complete all items before asking a LiteLLM maintainer to review your PR
tests/litellm/directory, Adding at least 1 test is a hard requirement - see detailsmake test-unitCI (LiteLLM team)
Branch creation CI run
Link:
CI run for the last commit
Link:
Merge / cherry-pick CI run
Links:
Type
✅ Test
Changes
Adds Playwright E2E tests for the LiteLLM dashboard API keys flow: delete key (with confirmation by key name), regenerate key, and update key TPM/RPM limits. Introduces shared constants for the key IDs and names used by these tests.
Screenshots