feat: Show options with Collapsible

cli/types/cypress.d.ts

@@ -5246,6 +5246,8 @@ declare namespace Cypress {
     name: string
     /** Override *name* for display purposes only */
     displayName: string
+    /** Show user-provided options */
+    options: ObjectLike
     message: any
     /** Return an object that will be printed in the dev tools console */
     consoleProps(): ObjectLike

packages/driver/cypress/integration/commands/actions/check_spec.js

@@ -729,11 +729,11 @@ describe('src/cy/commands/actions/check', () => {
         })
       })
 
-      it('logs deltaOptions', () => {
+      it('shows options', () => {
         cy.get('[name=colors][value=blue]').check({ force: true, timeout: 1000 }).then(function () {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('{force: true, timeout: 1000}')
+          expect(lastLog.get('message')).to.eq('')
           expect(lastLog.invoke('consoleProps').Options).to.deep.eq({ force: true, timeout: 1000 })
         })
       })
@@ -1222,11 +1222,11 @@ describe('src/cy/commands/actions/check', () => {
         })
       })
 
-      it('logs deltaOptions', () => {
+      it('shows options', () => {
         cy.get('[name=colors][value=blue]').check().uncheck({ force: true, timeout: 1000 }).then(function () {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('{force: true, timeout: 1000}')
+          expect(lastLog.get('message')).to.eq('')
           expect(lastLog.invoke('consoleProps').Options).to.deep.eq({ force: true, timeout: 1000 })
         })
       })

packages/driver/cypress/integration/commands/actions/clear_spec.js

@@ -490,11 +490,12 @@ describe('src/cy/commands/actions/type - #clear', () => {
       })
     })
 
-    it('logs deltaOptions', () => {
+    it('logs options', () => {
       cy.get('input:first').clear({ force: true, timeout: 1000 }).then(function () {
         const { lastLog } = this
 
-        expect(lastLog.get('message')).to.eq('{force: true, timeout: 1000}')
+        expect(lastLog.get('message')).to.eq('')
+        expect(lastLog.get('options')).to.deep.eq({ force: true, timeout: 1000 })
 
         expect(lastLog.invoke('consoleProps').Options).to.deep.eq({ force: true, timeout: 1000 })
       })

packages/driver/cypress/integration/commands/actions/click_spec.js

@@ -1855,7 +1855,11 @@ describe('src/cy/commands/actions/click', () => {
 
         cy.on('log:changed', (log, attr) => {
           if (log.name === 'click' && attr._emittedAttrs.coords) {
-            const args = attr._emittedAttrs.message.split(', ').map((i) => parseInt(i))
+            const args = attr._emittedAttrs.message.split(', ').map((text) => {
+              const parts = text.split(':')
+
+              return parseInt(parts[1])
+            })
             const coords = attr._emittedAttrs.coords
             const position = Cypress.dom.getElementPositioning($btn).fromAutWindow
 
@@ -2478,7 +2482,7 @@ describe('src/cy/commands/actions/click', () => {
         cy.get('span').invoke('slice', 0, 2).click({ multiple: true, timeout: 1000 }).then(function () {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('{multiple: true, timeout: 1000}')
+          expect(lastLog.get('message')).to.eq('')
 
           expect(lastLog.invoke('consoleProps').Options).to.deep.eq({ multiple: true, timeout: 1000 })
         })
@@ -2953,7 +2957,7 @@ describe('src/cy/commands/actions/click', () => {
         .then(function () {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('{force: true, timeout: 1000}')
+          expect(lastLog.get('message')).to.eq('')
 
           expect(lastLog.invoke('consoleProps').Options).to.deep.eq({ force: true, timeout: 1000 })
         })

packages/driver/cypress/integration/commands/actions/focus_spec.js

@@ -728,11 +728,12 @@ describe('src/cy/commands/actions/focus', () => {
         })
       })
 
-      it('logs delta options for {force: true}', () => {
+      it('relays options object to Cypress.log()', () => {
         cy.get('input:first').blur({ force: true }).then(function () {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('{force: true}')
+          expect(lastLog.get('message')).to.eq('')
+          expect(lastLog.get('options')).to.deep.eq({ force: true })
         })
       })
 
@@ -832,15 +833,16 @@ describe('src/cy/commands/actions/focus', () => {
         cy.get('#button').blur()
       })
 
-      it('logs delta options on error', function (done) {
+      it('relays options object to Cypress.log() on error', function (done) {
         cy.$$('button:first').click(function () {
           $(this).remove()
         })
 
         cy.on('fail', () => {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('{force: true}')
+          expect(lastLog.get('message')).to.eq('')
+          expect(lastLog.get('options')).to.deep.eq({ force: true })
 
           done()
         })

packages/driver/cypress/integration/commands/actions/scroll_spec.js

@@ -585,15 +585,17 @@ describe('src/cy/commands/actions/scroll', () => {
         cy.get('#scroll-to-both').scrollTo(25, { duration: 1 }).then(function () {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('25, 0, {duration: 1}')
+          expect(lastLog.get('message')).to.eq('25, 0')
+          expect(lastLog.get('options')).to.deep.eq({ duration: 1 })
         })
       })
 
       it('logs easing options', () => {
         cy.get('#scroll-to-both').scrollTo(25, { easing: 'linear' }).then(function () {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('25, 0, {easing: linear}')
+          expect(lastLog.get('message')).to.eq('25, 0')
+          expect(lastLog.get('options')).to.deep.eq({ easing: 'linear' })
         })
       })
 
@@ -974,23 +976,26 @@ describe('src/cy/commands/actions/scroll', () => {
         cy.get('#scroll-into-view-both h5').scrollIntoView({ duration: '1' }).then(function () {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('{duration: 1}')
+          expect(lastLog.get('message')).to.eq('')
+          expect(lastLog.get('options')).to.deep.eq({ duration: '1' })
         })
       })
 
       it('logs easing options', () => {
         cy.get('#scroll-into-view-both h5').scrollIntoView({ easing: 'linear' }).then(function () {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('{easing: linear}')
+          expect(lastLog.get('message')).to.eq('')
+          expect(lastLog.get('options')).to.deep.eq({ easing: 'linear' })
         })
       })
 
       it('logs offset options', () => {
         cy.get('#scroll-into-view-both h5').scrollIntoView({ offset: { left: 500, top: 200 } }).then(function () {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('{offset: {left: 500, top: 200}}')
+          expect(lastLog.get('message')).to.eq('')
+          expect(lastLog.get('options')).to.deep.eq({ offset: { left: 500, top: 200 } })
         })
       })
 

packages/driver/cypress/integration/commands/actions/select_spec.js

@@ -578,7 +578,8 @@ describe('src/cy/commands/actions/select', () => {
         cy.get('#select-maps').select('de_dust2', { force: true, timeout: 1000 }).then(function () {
           const { lastLog } = this
 
-          expect(lastLog.get('message')).to.eq('{force: true, timeout: 1000}')
+          expect(lastLog.get('message')).to.eq('de_dust2')
+          expect(lastLog.get('options')).to.deep.eq({ force: true, timeout: 1000 })
           expect(lastLog.invoke('consoleProps').Options).to.deep.eq({ force: true, timeout: 1000 })
         })
       })

packages/driver/cypress/integration/commands/actions/type_spec.js

@@ -3242,7 +3242,8 @@ describe('src/cy/commands/actions/type - #type', () => {
       cy.get(':text:first').type('foo', { delay: 20 }).then(function () {
         const { lastLog } = this
 
-        expect(lastLog.get('message')).to.eq('foo, {delay: 20}')
+        expect(lastLog.get('message')).to.eq('foo')
+        expect(lastLog.get('options')).to.deep.eq({ delay: 20 })
       })
     })
 
@@ -3350,7 +3351,8 @@ describe('src/cy/commands/actions/type - #type', () => {
       cy.get(':text:first').type('foo', { force: true, timeout: 1000 }).then(function () {
         const { lastLog } = this
 
-        expect(lastLog.get('message')).to.eq('foo, {force: true, timeout: 1000}')
+        expect(lastLog.get('message')).to.eq('foo')
+        expect(lastLog.get('options')).to.deep.eq({ force: true, timeout: 1000 })
 
         expect(lastLog.invoke('consoleProps').Options).to.deep.eq({ force: true, timeout: 1000 })
       })

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

@@ -155,7 +155,8 @@ describe('src/cy/commands/fixtures', () => {
           expect(lastLog.get('error')).to.eq(err)
           expect(lastLog.get('state')).to.eq('failed')
           expect(lastLog.get('name')).to.eq('fixture')
-          expect(lastLog.get('message')).to.eq('foo, {timeout: 50}')
+          expect(lastLog.get('message')).to.eq('foo')
+          expect(lastLog.get('options')).to.deep.eq({ timeout: 50 })
           expect(err.message).to.eq('`cy.fixture()` timed out waiting `50ms` to receive a fixture. No fixture was ever sent by the server.')
           expect(err.docsUrl).to.eq('https://on.cypress.io/fixture')