Add ObjectViewer.

packages/driver/cypress/integration/commands/log_spec.js

@@ -112,7 +112,7 @@ describe('log options on success', () => {
     cy.focused(options)
   })
 
-  testLog('get', { withinSubject: document.forms[0] }, (options) => {
+  testLog('get', { withinSubject: null }, (options) => {
     cy.get('#a', options)
   })
 

packages/reporter/src/commands/commands.scss

@@ -307,6 +307,11 @@
     white-space: initial;
     font-size: 0.85em;
     opacity: 0.9;
+
+    .object-viewer {
+      line-height: 1.2;
+      margin: 4px 8px;
+    }
   }
 
   .command-wrapper .fa-circle {

packages/reporter/src/commands/message.tsx

@@ -5,6 +5,7 @@ import Markdown from 'markdown-it'
 
 import appState from '../lib/app-state'
 import CommandModel from './command-model'
+import { ObjectViewer } from './object-viewer'
 
 const md = new Markdown()
 const formattedMessage = (message: string) => message ? md.renderInline(message) : ''
@@ -21,7 +22,10 @@ export const Message = observer(({ model }: MessageProps) => (
       dangerouslySetInnerHTML={{ __html: formattedMessage(model.displayMessage || '') }}
     />
     { model.options && Object.keys(model.options).length > 0
-      ? <span className="command-message-options">{JSON.stringify(model.options)}</span>
+      ?
+      <span className="command-message-options">
+        <ObjectViewer obj={model.options} />
+      </span>
       : null
     }
   </span>

packages/reporter/src/commands/object-viewer.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import _ from 'lodash'
+
+interface ObjectViewerProps {
+  obj: Record<any, any>
+}
+
+export const ObjectViewer = ({ obj }: ObjectViewerProps) => {
+  return (
+    <div className="object-viewer">
+      {Object.keys(obj).map((key) => {
+        return <div>{`- ${key}: ${encode(obj[key])}`}</div>
+      })}
+    </div>
+  )
+}
+
+const encode = (val: any) => {
+  if (_.isObject(val)) {
+    return JSON.stringify(val).replace(/,"/g, ', "')
+  }
+
+  if (_.isFunction(val)) {
+    return '[Function]'
+  }
+
+  return val
+}