fix: Remove erroneous <br> tags from error messages (#28496)

Author: jennifer-shehane

cli/CHANGELOG.md

@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.6.2
+
+_Released 12/19/2023 (PENDING)_
+
+**Bugfixes:**
+
+- Fixed a regression in [`12.4.0`](https://docs.cypress.io/guides/references/changelog/12.4.0) where erroneous `<br>` tags were displaying in error messages in the Command Log making them less readable. Fixes [#28452](https://github.com/cypress-io/cypress/issues/28452).
+
 ## 13.6.1
 
 _Released 12/5/2023_

packages/reporter/cypress/e2e/test_errors.cy.ts

@@ -234,6 +234,15 @@ describe('test errors', () => {
       cy.wrap(runner.emit).should('be.calledWith', 'external:open', 'https://on.cypress.io/type')
     })
 
+    // https://github.com/cypress-io/cypress/issues/28452
+    it('does not show br tags in formatted error message', () => {
+      setError(commandErr)
+
+      cy.spy(runner, 'emit')
+
+      cy.get('.runnable-err-message').find('br').should('not.exist')
+    })
+
     // NOTE: still needs to be implemented
     it.skip('renders and escapes markdown with leading/trailing whitespace', () => {
       setError(commandErr)

packages/reporter/cypress/fixtures/command_error.json

@@ -1,6 +1,6 @@
 {
   "name": "CommandError",
-  "message": "`foo` \\`bar\\` **baz** *fizz* ** buzz **",
+  "message": "`foo` \\`bar\\` \n**baz** *fizz* ** buzz **",
   "stack": "Some Error\n        at foo.bar (my/app.js:2:7)\n          at baz.qux (cypress/integration/foo_spec.js:5:2)\n          at space (cypress/integration/a b.js:34:99)\n      From previous event:\n        at bar.baz (my/app.js:8:11)\n      ",
   "parsedStack": [
     {

packages/reporter/src/commands/command.tsx

@@ -24,12 +24,13 @@ import HiddenIcon from '@packages/frontend-shared/src/assets/icons/general-eye-c
 import PinIcon from '@packages/frontend-shared/src/assets/icons/object-pin_x16.svg'
 import RunningIcon from '@packages/frontend-shared/src/assets/icons/status-running_x16.svg'
 
-const md = new Markdown({ breaks: true })
-
 const displayName = (model: CommandModel) => model.displayName || model.name
 const nameClassName = (name: string) => name.replace(/(\s+)/g, '-')
 
-export const formattedMessage = (message: string) => {
+const mdBreaks = new Markdown({ breaks: true })
+const md = new Markdown()
+
+export const formattedMessage = (message: string, type: string) => {
   if (!message) return ''
 
   const searchText = ['to match', 'to equal']
@@ -38,7 +39,8 @@ export const formattedMessage = (message: string) => {
   const matchingText = searchText.find((text) => message.includes(text))
   const textToConvert = [split[0].trim(), ...(matchingText ? [matchingText] : [])].join(' ')
   const spaceEscapedText = textToConvert.replace(/^ +/gm, (initialSpaces) => ' '.repeat(initialSpaces.length)) // &#32 is the HTML entity for a space
-  const converted = md.renderInline(spaceEscapedText)
+  // we don't want <br> in our error messages, but allow it in Cypress.log
+  const converted = type === 'error' ? md.renderInline(spaceEscapedText) : mdBreaks.renderInline(spaceEscapedText)
   const assertion = (split[1] && [`<strong>${split[1].trim()}</strong>`]) || []
 
   return [converted, ...assertion].join(' ')

packages/reporter/src/errors/test-error.tsx

@@ -90,7 +90,7 @@ const TestError = (props: TestErrorProps) => {
         {groupPlaceholder}
         <div className='runnable-err-content'>
           <div className='runnable-err-message'>
-            <span dangerouslySetInnerHTML={{ __html: formattedMessage(err.message) }} />
+            <span dangerouslySetInnerHTML={{ __html: formattedMessage(err.message, 'error') }} />
             <DocsUrl url={err.docsUrl} />
           </div>
           {codeFrame && <ErrorCodeFrame codeFrame={codeFrame} />}