fix(studio): more resilient saving to file (#17297)

package.json

@@ -43,7 +43,7 @@
     "npm-release": "node scripts/npm-release.js",
     "prestart": "yarn ensure-deps",
     "start": "cypress open --dev --global",
-    "stop-only": "npx stop-only --skip .cy,.publish,.projects,node_modules,dist,dist-test,fixtures,lib,bower_components,src,__snapshots__ --exclude e2e.ts,cypress-tests.ts,unwritten.spec.ts",
+    "stop-only": "npx stop-only --skip .cy,.publish,.projects,node_modules,dist,dist-test,fixtures,lib,bower_components,src,__snapshots__ --exclude e2e.ts,cypress-tests.ts",
     "stop-only-all": "yarn stop-only --folder packages",
     "pretest": "yarn ensure-deps",
     "test": "yarn lerna exec yarn test --scope cypress --scope \"'@packages/{electron,extension,https-proxy,launcher,net-stubbing,network,proxy,rewriter,runner,runner-shared,socket}'\"",

packages/runner-shared/src/event-manager.js

@@ -343,9 +343,7 @@ export const eventManager = {
             return
           }
 
-          this._restoreStudioFromState(state)
-
-          this._initializeStudio(config)
+          studioRecorder.initialize(config, state)
 
           const runnables = Cypress.runner.normalizeAll(state.tests)
 
@@ -405,9 +403,7 @@ export const eventManager = {
         reporterBus.emit('reporter:collect:run:state', (reporterState) => {
           resolve({
             ...reporterState,
-            studioTestId: studioRecorder.testId,
-            studioSuiteId: studioRecorder.suiteId,
-            studioUrl: studioRecorder.url,
+            studio: studioRecorder.state,
           })
         })
       })
@@ -482,14 +478,8 @@ export const eventManager = {
       localBus.emit('script:error', err)
     })
 
-    Cypress.on('test:before:run:async', (test) => {
-      if (studioRecorder.suiteId) {
-        studioRecorder.setTestId(test.id)
-      }
-
-      if (studioRecorder.hasRunnableId && test.invocationDetails) {
-        studioRecorder.setFileDetails(test.invocationDetails)
-      }
+    Cypress.on('test:before:run:async', (_attr, test) => {
+      studioRecorder.interceptTest(test)
     })
 
     Cypress.on('test:after:run', (test) => {
@@ -554,42 +544,6 @@ export const eventManager = {
     })
   },
 
-  _restoreStudioFromState (state) {
-    if (state.studioTestId) {
-      studioRecorder.setTestId(state.studioTestId)
-    }
-
-    if (state.studioSuiteId) {
-      studioRecorder.setSuiteId(state.studioSuiteId)
-    }
-
-    if (state.studioUrl) {
-      studioRecorder.setUrl(state.studioUrl)
-    }
-  },
-
-  _initializeStudio (config) {
-    if (studioRecorder.hasRunnableId) {
-      studioRecorder.startLoading()
-
-      if (studioRecorder.suiteId) {
-        Cypress.runner.setOnlySuiteId(studioRecorder.suiteId)
-
-        // root runnable always has id of r1
-        // and does not have invocationDetails so we must set manually from config
-        if (studioRecorder.suiteId === 'r1') {
-          studioRecorder.setFileDetails({
-            absoluteFile: config.spec.absolute,
-            line: null,
-            column: null,
-          })
-        }
-      } else if (studioRecorder.testId) {
-        Cypress.runner.setOnlyTestId(studioRecorder.testId)
-      }
-    }
-  },
-
   _interceptStudio (displayProps) {
     if (studioRecorder.isActive) {
       displayProps.hookId = studioRecorder.hookId

packages/runner-shared/src/studio/studio-recorder.js

@@ -7,6 +7,8 @@ const saveErrorMessage = (message) => {
   return `\
 ${message}\n\n\
 Cypress was unable to save these commands to your spec file. \
+You can use the copy button below to copy the commands to your clipboard. \
+\n
 Cypress Studio is still in beta and the team is working hard to \
 resolve issues like this. To help us fix this issue more quickly, \
 you can provide us with more information by clicking 'Learn more' below.`
@@ -45,6 +47,8 @@ export class StudioRecorder {
   @observable _hasStarted = false
 
   fileDetails = null
+  absoluteFile = null
+  runnableTitle = null
   _currentId = 1
   _previousMouseEvent = null
 
@@ -79,6 +83,14 @@ export class StudioRecorder {
     }
   }
 
+  @computed get state () {
+    return {
+      testId: this.testId,
+      suiteId: this.suiteId,
+      url: this.url,
+    }
+  }
+
   get Cypress () {
     return eventManager.getCypress()
   }
@@ -144,6 +156,14 @@ export class StudioRecorder {
     this.fileDetails = fileDetails
   }
 
+  setAbsoluteFile = (absoluteFile) => {
+    this.absoluteFile = absoluteFile
+  }
+
+  setRunnableTitle = (runnableTitle) => {
+    this.runnableTitle = runnableTitle
+  }
+
   _clearPreviousMouseEvent = () => {
     this._previousMouseEvent = null
   }
@@ -152,6 +172,55 @@ export class StudioRecorder {
     return this._previousMouseEvent && $(el).is(this._previousMouseEvent.element)
   }
 
+  @action initialize = (config, state) => {
+    const { studio } = state
+
+    if (studio) {
+      if (studio.testId) {
+        this.setTestId(studio.testId)
+      }
+
+      if (studio.suiteId) {
+        this.setSuiteId(studio.suiteId)
+      }
+
+      if (studio.url) {
+        this.setUrl(studio.url)
+      }
+    }
+
+    if (this.hasRunnableId) {
+      this.setAbsoluteFile(config.spec.absolute)
+      this.startLoading()
+
+      if (this.suiteId) {
+        this.Cypress.runner.setOnlySuiteId(this.suiteId)
+      } else if (this.testId) {
+        this.Cypress.runner.setOnlyTestId(this.testId)
+      }
+    }
+  }
+
+  @action interceptTest = (test) => {
+    if (this.suiteId) {
+      this.setTestId(test.id)
+    }
+
+    if (this.hasRunnableId) {
+      if (test.invocationDetails) {
+        this.setFileDetails(test.invocationDetails)
+      }
+
+      if (this.suiteId) {
+        if (test.parent && test.parent.id !== 'r1') {
+          this.setRunnableTitle(test.parent.title)
+        }
+      } else {
+        this.setRunnableTitle(test.title)
+      }
+    }
+  }
+
   @action start = (body) => {
     this.isActive = true
     this.isLoading = false
@@ -202,8 +271,11 @@ export class StudioRecorder {
 
     eventManager.emit('studio:save', {
       fileDetails: this.fileDetails,
+      absoluteFile: this.absoluteFile,
+      runnableTitle: this.runnableTitle,
       commands: this.logs,
       isSuite: !!this.suiteId,
+      isRoot: this.suiteId === 'r1',
       testName,
     })
   }