fix: Update regex for formatting assertion messages to avoid catastro…

…phic backtracking (#29353)

* fix: Revert addition of .* into regex and reformat code to escape early before regex runs

* Add changelog

* fix: Actually fix the problem with the plugin messages

* changelog update

cli/CHANGELOG.md

@@ -7,6 +7,10 @@ _Released 4/23/2024 (PENDING)_
 
 - Added support for `webpack-dev-server` `v5` to `@cypress/webpack-dev-server`. Addresses [#29305](https://github.com/cypress-io/cypress/issues/29305).
 
+**Bugfixes:**
+
+- We fixed a regression introduced in [`13.7.3`](https://docs.cypress.io/guides/references/changelog#13-7-3) where Cypress could hang handling long assertion messages. Fixes [#29350](https://github.com/cypress-io/cypress/issues/29350).
+
 **Misc:**
 
 - We now capture the [Semaphore](https://semaphoreci.com/) CI provider's environment variable [`SEMAPHORE_GIT_PR_NUMBER`](https://docs.semaphoreci.com/ci-cd-environment/environment-variables/#semaphore_git_pr_number) to display the linked PR number in the Cloud. Addressed in [#29314](https://github.com/cypress-io/cypress/pull/29314).

packages/reporter/src/commands/command.tsx

@@ -35,44 +35,44 @@ const asterisksRegex = /^\*\*(.+?)\*\*$/gs
 // 'expected **<span>** to exist in the DOM'
 // `expected **glob*glob** to contain *****`
 // `expected **<span>** to have CSS property **background-color** with the value **rgb(0, 0, 0)**, but the value was **rgba(0, 0, 0, 0)**`
-const assertionRegex = /.*expected | to[^\*]+| not[^\*]+| with[^\*]+|, but[^\*]+/g
+// `Custom message expected **<span>** to exist in the DOM`
+const assertionRegex = /^.*?expected | to[^\*]+| not[^\*]+| with[^\*]+|, but[^\*]+/g
 
 // used to format the display of command messages and error messages
 // we use markdown syntax within our error messages (code ticks, urls, etc)
 // and cy.log and Cypress.log supports markdown formatting
 export const formattedMessage = (message: string, name?: string) => {
   if (!message) return ''
 
+  // if the command has url args, don't format those chars like __ and ~~
+  if (name === 'visit' || name === 'request' || name === 'origin') {
+    return message
+  }
+
   // the command message is formatted as '(Optional Custom Msg:) expected <actual> to {assertion} <expected>'
   const assertionArray = message.match(assertionRegex)
 
-  const expectedActualArray = () => {
+  if (name === 'assert' && assertionArray) {
+    const expectedActualArray = () => {
     // get the expected and actual values of assertions
-    const splitTrim = message.split(assertionRegex).filter(Boolean).map((s) => s.trim())
+      const splitTrim = message.split(assertionRegex).filter(Boolean).map((s) => s.trim())
 
-    // replace outside double asterisks with strong tags
-    return splitTrim.map((s) => {
+      // replace outside double asterisks with strong tags
+      return splitTrim.map((s) => {
       // we want to escape HTML chars so that they display
       // correctly in the command log: <p> -> &lt;p&gt;
-      const HTMLEscapedString = mdOnlyHTML.renderInline(s)
-
-      return HTMLEscapedString.replace(asterisksRegex, `<strong>$1</strong>`)
-    })
-  }
+        const HTMLEscapedString = mdOnlyHTML.renderInline(s)
 
-  if (name === 'assert' && assertionArray) {
+        return HTMLEscapedString.replace(asterisksRegex, `<strong>$1</strong>`)
+      })
+    }
     // for assertions print the exact text so that characters like _ and *
     // are not escaped in the assertion display when comparing values
     const result = assertionArray.flatMap((s, index) => [s, expectedActualArray()[index]])
 
     return result.join('')
   }
 
-  // if the command has url args, don't format those chars like __ and ~~
-  if (name === 'visit' || name === 'request' || name === 'origin') {
-    return message
-  }
-
   // format markdown for everything else
   return md.renderInline(message)
 }