diff --git a/packages/reporter/cypress/e2e/unit/formatted_message.cy.ts b/packages/reporter/cypress/e2e/unit/formatted_message.cy.ts
new file mode 100644
index 000000000000..63fb13e1c1ab
--- /dev/null
+++ b/packages/reporter/cypress/e2e/unit/formatted_message.cy.ts
@@ -0,0 +1,30 @@
+import { formattedMessage } from '../../../src/commands/command'
+
+describe('formattedMessage', () => {
+ it('returns empty string when message is falsy', () => {
+ const result = formattedMessage('')
+
+ expect(result).to.equal('')
+ })
+
+ it('maintains special characters when using "to match"', () => {
+ const specialMessage = 'expected **__*abcdef*__** to match /__.*abcdef.*__/'
+ const result = formattedMessage(specialMessage)
+
+ expect(result).to.equal('expected abcdef to match /__.*abcdef.*__/')
+ })
+
+ it('maintains special characters when using "to contain"', () => {
+ const specialMessage = 'expected ***abcdef*** to equal ***abcdef***'
+ const result = formattedMessage(specialMessage)
+
+ expect(result).to.equal('expected abcdef to equal ***abcdef***')
+ })
+
+ it('does NOT maintain special characters when "to equal" or "to match" are not in assertion', () => {
+ const specialMessage = 'expected ***abcdef*** to contain ***abcdef***'
+ const result = formattedMessage(specialMessage)
+
+ expect(result).to.equal('expected abcdef to contain abcdef')
+ })
+})
diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 84a4f1c07c3d..4e2f19395ee7 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -25,7 +25,21 @@ const md = new Markdown()
const displayName = (model: CommandModel) => model.displayName || model.name
const nameClassName = (name: string) => name.replace(/(\s+)/g, '-')
-const formattedMessage = (message: string) => message ? md.renderInline(message) : ''
+
+export const formattedMessage = (message: string) => {
+ if (!message) return ''
+
+ const searchText = ['to match', 'to equal']
+ const regex = new RegExp(searchText.join('|'))
+ const split = message.split(regex)
+ const matchingText = searchText.find((text) => message.includes(text))
+ const textToConvert = [split[0].trim(), ...(matchingText ? [matchingText] : [])].join(' ')
+ const converted = md.renderInline(textToConvert)
+ const assertion = (split[1] && [`${split[1].trim()}`]) || []
+
+ return [converted, ...assertion].join(' ')
+}
+
const invisibleMessage = (model: CommandModel) => {
return model.numElements > 1 ?
'One or more matched elements are not visible.' :
diff --git a/packages/reporter/src/errors/test-error.tsx b/packages/reporter/src/errors/test-error.tsx
index a4b0d1a80908..58adae81a397 100644
--- a/packages/reporter/src/errors/test-error.tsx
+++ b/packages/reporter/src/errors/test-error.tsx
@@ -12,6 +12,7 @@ import FlashOnClick from '../lib/flash-on-click'
import { onEnterOrSpace } from '../lib/util'
import Attempt from '../attempts/attempt-model'
import Command from '../commands/command-model'
+import { formattedMessage } from '../commands/command'
import WarningIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/warning_x8.svg'
import TerminalIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/technology-terminal_x16.svg'
@@ -54,10 +55,6 @@ const TestError = observer((props: TestErrorProps) => {
onPrint()
}
- const formattedMessage = (message?: string) => {
- return message ? md.renderInline(message) : ''
- }
-
const { err } = props.model
const { codeFrame } = err