feat: skip UI rendering in run mode for performance#156
Open
filiphric wants to merge 1 commit into
Open
Conversation
Adds a disableUi option that skips the expensive Vue UI mount and Prism syntax highlighting. Defaults to auto: render in open mode, skip in run mode (cypress run/CI) where the UI can't be interacted with and was crashing the browser renderer on large responses. Closes #135
PR Summary by QodoAdd disableUi option to skip Vue/Prism UI rendering in cypress run mode Description
Diagram
High-Level Assessment
Files changed (8)
|
cypress-plugin-api
 |
||||||||||||||||||||||||||||
| Project |
cypress-plugin-api
|
| Branch Review |
feat/disable-ui-run-mode
|
| Run status |
|
| Run duration | 01m 13s |
| Commit |
|
| Committer | Filip Hric |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
 |
0
|
 |
0
|
 |
0
|
 |
0
|
 |
94
|
| View all changes introduced in this branch ↗︎ | |
Code Review by Qodo
Context used 1. disableUi: false enables run-mode UI
|
![qodo-for-filiphric[bot]](https://avatars.githubusercontent.com/u/23213553?s=60&v=4){kind=small}
Comment on lines
+17
to
+21
| const disableUi = getPluginConfig('disableUi') | ||
| if (disableUi === true) return false | ||
| if (disableUi === false) return true | ||
| // Default: Cypress.config('isInteractive') is true in open mode and false in run mode. | ||
| return Cypress.config('isInteractive') !== false |
There was a problem hiding this comment.
1. disableui: false enables run-mode ui 📎 Requirement gap ➹ Performance
shouldRenderUi() allows forcing full UI rendering in Cypress run mode when disableUi is explicitly set to false, which defeats the run-mode/CI safety requirement and can reintroduce renderer crashes/perf issues. The repo also configures disableUi: false in cypress.config.ts, causing UI rendering under cypress run.
Agent Prompt
## Issue description
Compliance requires that the plugin must not render the full UI/DOM output in Cypress run mode / CI. The new `disableUi` logic currently allows `disableUi: false` to force rendering even in run mode, and the repo’s `cypress.config.ts` sets `disableUi: false`, which will render UI during `cypress run`.
## Issue Context
The intended performance safeguard for CI/run mode should be unconditional per the compliance rule; users can still use UI in open mode, and can still disable UI in any mode.
## Fix Focus Areas
- src/utils/shouldRenderUi.ts[17-21]
- cypress.config.ts[9-11]
- README.md[80-85]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
+197
to
+212
| const generateCurl = () => { | ||
| let curl = `curl -X ${options.method || 'GET'} "${options.url}"`; | ||
| if (options.headers) { | ||
| Object.entries(options.headers).forEach(([key, value]) => { | ||
| curl += ` -H "${key}: ${value}"`; | ||
| }); | ||
| } | ||
| if (options.body) { | ||
| if (typeof options.body === 'object') { | ||
| curl += ` -d '${JSON.stringify(options.body)}'`; | ||
| } else { | ||
| curl += ` -d '${options.body}'`; | ||
| } | ||
| } | ||
| return curl; | ||
| }; |
There was a problem hiding this comment.
5. Unsafe duplicate curl builder 🧑 Team insight ⛨ Security
**Inspired by avrik-berman's coding and review patterns** — handleResponse() reintroduces a local generateCurl() that doesn’t escape quotes/newlines and bypasses the existing shared helper, risking malformed commands and credential leakage (especially when hideCredentials is enabled). This also duplicates logic already centralized in src/utils/generateCurl.ts.
Agent Prompt
### Issue description
`src/modules/handleResponse.ts` defines a local `generateCurl()` that (a) duplicates existing functionality and (b) builds a cURL string without escaping/quoting safeguards. It also uses `options.*` rather than the (potentially anonymized) `props[index]`, which can leak sensitive values when `hideCredentials` is enabled.
### Issue Context
A shared `generateCurl(item: RequestProps)` already exists and includes escaping for quotes/newlines and composes auth/query/headers/body consistently.
### Fix Focus Areas
- src/modules/handleResponse.ts[195-246]
- src/utils/generateCurl.ts[1-75]
- src/modules/api.ts[15-24]
### Expected change
- Remove the local `generateCurl` closure from `handleResponse()`.
- Import `generateCurl` from `@utils/generateCurl` and use `generateCurl(props[index])` in both render and non-render consoleProps paths.
- Ensure the generated cURL reflects anonymized props when `hideCredentials` is on (already achieved by using `props[index]`).
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Qodo Fixer🍒 Ready to be cherry-picked — ✅ Merged (0) · ☑ Fixed (2) 🔗 Fix PR: #157 This fix PR was closed automatically. Its branch is preserved so you can cherry pick the changes into the original PR. Prompt for coding agent Process — 2 fixed
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #135
Problem
The plugin renders a full Vue UI — including Prism syntax-highlighting of the entire request/response body — into the DOM on every
cy.api()call. Duringcypress run/ CI this UI can't be interacted with (not even in Test Replay), so it's pure overhead that was crashing the browser renderer on large responses (especially with Test Replay capturing the whole DOM).Change
Adds a
disableUiplugin option that skips the two expensive operations — Prism highlighting (transform()) and mounting + snapshotting the Vue DOM — while still performing the real request and exposing the response (yielded value + command-log console props with cURL).Behavior:
cypress run/CI)true: always skip the UI (also speeds up open mode)false: always render, even in run mode (opt back into full Test Replay capture)Detection uses
Cypress.config('isInteractive').By default the UI is now skipped in run mode, so Test Replay will no longer capture the rendered response body in CI. Users who want the old behavior can set
disableUi: false. Documented in the README.Files
src/utils/shouldRenderUi.ts— new helper deciding render vs skipsrc/types.ts—disableUiadded toPluginEnvOptionssrc/modules/initialize.ts— skip creating/mounting the Vue app when disabledsrc/modules/api.ts— skip request-sidetransformData()when disabledsrc/modules/handleResponse.ts— gate response-sidetransform()calls + DOM snapshot/scroll; lightweight log-only path otherwisecypress.config.ts—expose.disableUi: falseso the plugin's own UI tests (run viacypress run) keep renderingcypress/e2e/disableUi.cy.ts— new spec covering skip/render/toggleREADME.md— documents the optionVerification
tsc --noEmitcleanvite buildsucceedsdisableUitests + retries/snapshotOnly/requestMode which exercise mount/unmount)