fix: Fix perf issue with command log

cli/schema/cypress.schema.json

@@ -30,6 +30,11 @@
           "default": 50,
           "description": "The number of tests for which snapshots and command data are kept in memory. Reduce this number if you are experiencing high memory consumption in your browser during a test run."
         },
+        "numCommandsToShow": {
+          "type": "number",
+          "default": null,
+          "description": "The number of commands to show in the command log. Reduce this number if you are experiencing slowness with long running tests"
+        },
         "port": {
           "type": "number",
           "default": null,

cli/types/cypress.d.ts

@@ -2632,6 +2632,11 @@ declare namespace Cypress {
      * @default 50
      */
     numTestsKeptInMemory: number
+    /**
+     * The number of commands to show in the command log. Reduce this number if you are experiencing slowness with long running tests
+     * @default null
+     */
+    numCommandsToShow: number
     /**
      * Port used to host Cypress. Normally this is a randomly generated port
      * @default null
@@ -2956,7 +2961,7 @@ declare namespace Cypress {
     xhrUrl: string
   }
 
-  interface TestConfigOverrides extends Partial<Pick<ConfigOptions, 'animationDistanceThreshold' | 'baseUrl' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>> {
+  interface TestConfigOverrides extends Partial<Pick<ConfigOptions, 'animationDistanceThreshold' | 'baseUrl' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'numCommandsToShow' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>> {
     browser?: IsBrowserMatcher | IsBrowserMatcher[]
     keystrokeDelay?: number
   }

packages/config/__snapshots__/index_spec.js

@@ -37,6 +37,7 @@ exports['src/index .getDefaultValues returns list of public config keys 1'] = {
   "keystrokeDelay": 0,
   "modifyObstructiveCode": true,
   "numTestsKeptInMemory": 50,
+  "numCommandsToShow": null,
   "pageLoadTimeout": 60000,
   "pluginsFile": "cypress/plugins",
   "port": null,
@@ -115,6 +116,7 @@ exports['src/index .getPublicConfigKeys returns list of public config keys 1'] =
   "modifyObstructiveCode",
   "nodeVersion",
   "numTestsKeptInMemory",
+  "numCommandsToShow",
   "pageLoadTimeout",
   "pluginsFile",
   "port",

packages/config/lib/options.ts

@@ -222,6 +222,11 @@ const resolvedOptions: Array<ResolvedConfigOption> = [
     defaultValue: 50,
     validation: validate.isNumber,
     canUpdateDuringTestTime: true,
+  }, {
+    name: 'numCommandsToShow',
+    defaultValue: null,
+    validation: validate.isNumber,
+    canUpdateDuringTestTime: true,
   }, {
     name: 'pageLoadTimeout',
     defaultValue: 60000,

packages/reporter/src/hooks/hooks.tsx

@@ -55,21 +55,27 @@ export interface HookProps {
   showNumber: boolean
 }
 
-const Hook = observer(({ model, showNumber }: HookProps) => (
-  <li className={cs('hook-item', { 'hook-failed': model.failed, 'hook-studio': model.isStudio })}>
+const Hook = observer(({ model, showNumber }: HookProps) => {
+  // If a user specified `numCommandsToShow` in the cypress config
+  // then only show the last `numCommandsToShow` in the command log
+  // This would primarily be done as a performance optimization
+  const numCommandsToShow = Cypress.config('numCommandsToShow')
+  const commandsToShow = numCommandsToShow ? model.commands.slice(numCommandsToShow * -1) : model.commands
+
+  return (<li className={cs('hook-item', { 'hook-failed': model.failed, 'hook-studio': model.isStudio })}>
     <Collapsible
       header={<HookHeader model={model} number={showNumber ? model.hookNumber : undefined} />}
       headerClass='hook-header'
       headerExtras={model.invocationDetails && <HookOpenInIDE invocationDetails={model.invocationDetails} />}
       isOpen={true}
     >
       <ul className='commands-container'>
-        {_.map(model.commands, (command) => <Command key={command.id} model={command} aliasesWithDuplicates={model.aliasesWithDuplicates} />)}
+        {_.map(commandsToShow, (command) => <Command key={command.id} model={command} aliasesWithDuplicates={model.aliasesWithDuplicates} />)}
         {model.showStudioPrompt && <StudioNoCommands />}
       </ul>
     </Collapsible>
-  </li>
-))
+  </li>)
+})
 
 export interface HooksModel {
   hooks: HookModel[]

packages/runner/src/app/app.jsx

@@ -319,6 +319,7 @@ App.propTypes = {
     })).isRequired,
     integrationFolder: PropTypes.string.isRequired,
     numTestsKeptInMemory: PropTypes.number.isRequired,
+    numCommandsToShow: PropTypes.number,
     projectName: PropTypes.string.isRequired,
     viewportHeight: PropTypes.number.isRequired,
     viewportWidth: PropTypes.number.isRequired,

packages/runner/src/app/app.spec.jsx

@@ -18,6 +18,7 @@ const createProps = ({ state } = {}) => ({
     browsers: [],
     integrationFolder: '',
     numTestsKeptInMemory: 1,
+    numCommandsToShow: null,
     projectName: '',
     viewportHeight: 800,
     viewportWidth: 500,

packages/server/test/unit/config_spec.js

@@ -1498,6 +1498,7 @@ describe('lib/config', () => {
             keystrokeDelay: { value: 0, from: 'default' },
             modifyObstructiveCode: { value: true, from: 'default' },
             numTestsKeptInMemory: { value: 50, from: 'default' },
+            numCommandsToShow: { value: null, from: 'default' },
             pageLoadTimeout: { value: 60000, from: 'default' },
             pluginsFile: { value: 'cypress/plugins', from: 'default' },
             port: { value: 1234, from: 'cli' },
@@ -1610,6 +1611,7 @@ describe('lib/config', () => {
             keystrokeDelay: { value: 0, from: 'default' },
             modifyObstructiveCode: { value: true, from: 'default' },
             numTestsKeptInMemory: { value: 50, from: 'default' },
+            numCommandsToShow: { value: null, from: 'default' },
             pageLoadTimeout: { value: 60000, from: 'default' },
             pluginsFile: { value: 'cypress/plugins', from: 'default' },
             port: { value: 2020, from: 'config' },