Command Timeout Progress Bar (#7646)

* Timeout animation * Add timeout to log object * Set timeout to log when explicitly overwritten * No need to display if no timeout * Throw timeouts everywhere! I'll clean it up later * Correctly set timeout indicator regardless of when test is opened * Slightly modify that * Update timeout for commands * Update progress bar for consistent progress * Fix issue with flashing full progress bar after complete * Add test for progress * Move progress bar to function * Update unit test * Move more command progress to css * No progress bar for xhr * Fix unit test * Adding tests for progress indicator * Fix some types * Add e2e tests for progress bar * Remove timeout progress from assertion logs Co-authored-by: Jessica Sachs <jess@jessicasachs.io>
cypress-io · Jun 16, 2020 · dc07561 · dc07561 · cypress-bot · Jun 16, 2020
1 parent f305f8b
commit dc07561
Show file tree

Hide file tree

Showing 33 changed files with 286 additions and 112 deletions.
diff --git a/packages/driver/src/cy/assertions.js b/packages/driver/src/cy/assertions.js
@@ -477,6 +477,7 @@ const create = function (state, queue, retryFn) {
       message,
       passed,
       selector: value ? value.selector : undefined,
+      timeout: 0,
       type (current, subject) {
         // if our current command has arguments assume
         // we are an assertion that's involving the current

diff --git a/packages/driver/src/cy/commands/actions/check.js b/packages/driver/src/cy/commands/actions/check.js
@@ -86,6 +86,7 @@ const checkOrUncheck = (Cypress, cy, type, subject, values = [], userOptions = {
       options._log = Cypress.log({
         message: deltaOptions,
         $el,
+        timeout: options.timeout,
         consoleProps () {
           return _.extend(consoleProps, {
             Options: deltaOptions,

diff --git a/packages/driver/src/cy/commands/actions/click.js b/packages/driver/src/cy/commands/actions/click.js
@@ -76,6 +76,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
         options._log = Cypress.log({
           message: deltaOptions,
           $el,
+          timeout: options.timeout,
         })
 
         options._log.snapshot('before', { next: 'after' })

diff --git a/packages/driver/src/cy/commands/actions/focus.js b/packages/driver/src/cy/commands/actions/focus.js
@@ -29,6 +29,7 @@ module.exports = (Commands, Cypress, cy) => {
       if (options.log) {
         options._log = Cypress.log({
           $el: options.$el,
+          timeout: options.timeout,
           consoleProps () {
             return { 'Applied To': $dom.getElements(options.$el) }
           },
@@ -115,6 +116,7 @@ module.exports = (Commands, Cypress, cy) => {
         options._log = Cypress.log({
           $el: options.$el,
           message: deltaOptions,
+          timeout: options.timeout,
           consoleProps () {
             return { 'Applied To': $dom.getElements(options.$el) }
           },

diff --git a/packages/driver/src/cy/commands/actions/scroll.js b/packages/driver/src/cy/commands/actions/scroll.js
@@ -90,6 +90,7 @@ module.exports = (Commands, Cypress, cy, state) => {
         const log = {
           $el: options.$el,
           message: deltaOptions,
+          timeout: options.timeout,
           consoleProps () {
             const obj = {
               // merge into consoleProps without mutating it
@@ -302,6 +303,7 @@ module.exports = (Commands, Cypress, cy, state) => {
 
         const log = {
           message: messageArgs.join(', '),
+          timeout: options.timeout,
           consoleProps () {
             // merge into consoleProps without mutating it
             const obj = {}

diff --git a/packages/driver/src/cy/commands/actions/select.js b/packages/driver/src/cy/commands/actions/select.js
@@ -28,6 +28,7 @@ module.exports = (Commands, Cypress, cy) => {
         options._log = Cypress.log({
           message: deltaOptions,
           $el: options.$el,
+          timeout: options.timeout,
           consoleProps () {
             // merge into consoleProps without mutating it
             return _.extend({}, consoleProps, {

diff --git a/packages/driver/src/cy/commands/actions/submit.js b/packages/driver/src/cy/commands/actions/submit.js
@@ -25,6 +25,7 @@ module.exports = (Commands, Cypress, cy) => {
       if (options.log) {
         options._log = Cypress.log({
           $el: options.$el,
+          timeout: options.timeout,
           consoleProps () {
             return {
               'Applied To': $dom.getElements(options.$el),

diff --git a/packages/driver/src/cy/commands/actions/trigger.js b/packages/driver/src/cy/commands/actions/trigger.js
@@ -47,6 +47,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
       if (options.log) {
         options._log = Cypress.log({
           $el: subject,
+          timeout: options.timeout,
           consoleProps () {
             return {
               'Yielded': subject,

diff --git a/packages/driver/src/cy/commands/actions/type.js b/packages/driver/src/cy/commands/actions/type.js
@@ -85,6 +85,7 @@ module.exports = function (Commands, Cypress, cy, state, config) {
       options._log = Cypress.log({
         message: [chars, deltaOptions],
         $el: options.$el,
+        timeout: options.timeout,
         consoleProps () {
           return {
             'Typed': chars,
@@ -476,6 +477,7 @@ module.exports = function (Commands, Cypress, cy, state, config) {
         options._log = Cypress.log({
           message: deltaOptions,
           $el,
+          timeout: options.timeout,
           consoleProps () {
             return {
               'Applied To': $dom.getElements($el),

diff --git a/packages/driver/src/cy/commands/angular.js b/packages/driver/src/cy/commands/angular.js
@@ -104,7 +104,9 @@ module.exports = (Commands, Cypress, cy, state) => {
       options = _.defaults({}, userOptions, { log: true })
 
       if (options.log) {
-        options._log = Cypress.log()
+        options._log = Cypress.log({
+          timeout: options.timeout,
+        })
       }
 
       switch (type) {

diff --git a/packages/driver/src/cy/commands/connectors.js b/packages/driver/src/cy/commands/connectors.js
@@ -226,6 +226,7 @@ module.exports = function (Commands, Cypress, cy, state) {
       options._log = Cypress.log({
         message,
         $el: $dom.isElement(subject) ? subject : null,
+        timeout: options.timeout,
         consoleProps () {
           return { Subject: subject }
         },

diff --git a/packages/driver/src/cy/commands/cookies.js b/packages/driver/src/cy/commands/cookies.js
@@ -156,6 +156,7 @@ module.exports = function (Commands, Cypress, cy, state, config) {
       if (options.log) {
         options._log = Cypress.log({
           message: name,
+          timeout: options.timeout,
           consoleProps () {
             let c
             const obj = {}
@@ -202,6 +203,7 @@ module.exports = function (Commands, Cypress, cy, state, config) {
       if (options.log) {
         options._log = Cypress.log({
           message: '',
+          timeout: options.timeout,
           consoleProps () {
             let c
             const obj = {}
@@ -250,6 +252,7 @@ module.exports = function (Commands, Cypress, cy, state, config) {
       if (options.log) {
         options._log = Cypress.log({
           message: [name, value],
+          timeout: options.timeout,
           consoleProps () {
             let c
             const obj = {}
@@ -315,6 +318,7 @@ module.exports = function (Commands, Cypress, cy, state, config) {
       if (options.log) {
         options._log = Cypress.log({
           message: name,
+          timeout: options.timeout,
           consoleProps () {
             let c
             const obj = {}
@@ -362,6 +366,7 @@ module.exports = function (Commands, Cypress, cy, state, config) {
       if (options.log) {
         options._log = Cypress.log({
           message: '',
+          timeout: options.timeout,
           consoleProps () {
             let c
             const obj = {}

diff --git a/packages/driver/src/cy/commands/debugging.js b/packages/driver/src/cy/commands/debugging.js
@@ -58,6 +58,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
         options._log = Cypress.log({
           snapshot: true,
           autoEnd: false,
+          timeout: 0,
         })
       }
 
@@ -112,6 +113,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
         options._log = Cypress.log({
           snapshot: true,
           end: true,
+          timeout: 0,
         })
       }
 

diff --git a/packages/driver/src/cy/commands/exec.js b/packages/driver/src/cy/commands/exec.js
@@ -22,6 +22,7 @@ module.exports = (Commands, Cypress, cy) => {
 
         options._log = Cypress.log({
           message: _.truncate(cmd, { length: 25 }),
+          timeout: options.timeout,
           consoleProps () {
             return consoleOutput
           },

diff --git a/packages/driver/src/cy/commands/files.js b/packages/driver/src/cy/commands/files.js
@@ -23,6 +23,7 @@ module.exports = (Commands, Cypress, cy) => {
       if (options.log) {
         options._log = Cypress.log({
           message: file,
+          timeout: options.timeout,
           consoleProps () {
             return consoleProps
           },
@@ -97,6 +98,7 @@ module.exports = (Commands, Cypress, cy) => {
       if (options.log) {
         options._log = Cypress.log({
           message: fileName,
+          timeout: 0,
           consoleProps () {
             return consoleProps
           },

diff --git a/packages/driver/src/cy/commands/location.js b/packages/driver/src/cy/commands/location.js
@@ -13,6 +13,7 @@ module.exports = (Commands, Cypress, cy) => {
       if (options.log !== false) {
         options._log = Cypress.log({
           message: '',
+          timeout: options.timeout,
         })
       }
 
@@ -39,6 +40,7 @@ module.exports = (Commands, Cypress, cy) => {
       if (options.log !== false) {
         options._log = Cypress.log({
           message: '',
+          timeout: options.timeout,
         })
       }
 
@@ -83,6 +85,7 @@ module.exports = (Commands, Cypress, cy) => {
       if (options.log !== false) {
         options._log = Cypress.log({
           message: key != null ? key : '',
+          timeout: options.timeout,
         })
       }
 

diff --git a/packages/driver/src/cy/commands/misc.js b/packages/driver/src/cy/commands/misc.js
@@ -46,6 +46,7 @@ module.exports = (Commands, Cypress, cy) => {
       if (options.log !== false) {
         options._log = Cypress.log({
           message: arg,
+          timeout: options.timeout,
         })
 
         if ($dom.isElement(arg)) {

diff --git a/packages/driver/src/cy/commands/navigation.js b/packages/driver/src/cy/commands/navigation.js
@@ -263,6 +263,7 @@ const stabilityChanged = (Cypress, state, config, stable) => {
     name: 'page load',
     message: '--waiting for new page to load--',
     event: true,
+    timeout: options.timeout,
     consoleProps () {
       return {
         Note: 'This event initially fires when your application fires its \'beforeunload\' event and completes when your application fires its \'load\' event after the next page loads.',
@@ -484,7 +485,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
           }
 
           if (options.log) {
-            options._log = Cypress.log({})
+            options._log = Cypress.log({ timeout: options.timeout })
 
             options._log.snapshot('before', { next: 'after' })
           }
@@ -526,7 +527,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
       })
 
       if (options.log) {
-        options._log = Cypress.log({})
+        options._log = Cypress.log({ timeout: options.timeout })
       }
 
       const win = state('window')
@@ -697,6 +698,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
 
         options._log = Cypress.log({
           message,
+          timeout: options.timeout,
           consoleProps () {
             return consoleProps
           },

diff --git a/packages/driver/src/cy/commands/querying.js b/packages/driver/src/cy/commands/querying.js
@@ -15,8 +15,7 @@ module.exports = (Commands, Cypress, cy, state) => {
       })
 
       if (options.log) {
-        options._log = Cypress.log({
-        })
+        options._log = Cypress.log({ timeout: options.timeout })
       }
 
       const log = ($el) => {
@@ -102,6 +101,7 @@ module.exports = (Commands, Cypress, cy, state) => {
             message: selector,
             referencesAlias: (aliasObj != null && aliasObj.alias) ? { name: aliasObj.alias } : undefined,
             aliasType,
+            timeout: options.timeout,
             consoleProps: () => {
               return consoleProps
             },
@@ -369,6 +369,7 @@ module.exports = (Commands, Cypress, cy, state) => {
       if (options.log !== false) {
         options._log = Cypress.log({
           message: '',
+          timeout: options.timeout,
         })
       }
 
@@ -475,6 +476,7 @@ module.exports = (Commands, Cypress, cy, state) => {
         options._log = Cypress.log({
           message: _.compact([filter, text]),
           type: subject ? 'child' : 'parent',
+          timeout: options.timeout,
           consoleProps: () => {
             return consoleProps
           },
@@ -554,6 +556,7 @@ module.exports = (Commands, Cypress, cy, state) => {
         options._log = Cypress.log({
           $el: subject,
           message: '',
+          timeout: options.timeout,
         })
       }
 
@@ -635,6 +638,7 @@ module.exports = (Commands, Cypress, cy, state) => {
 
       if (options.log !== false) {
         options._log = Cypress.log({
+          timeout: options.timeout,
           consoleProps () {
             return consoleProps
           },

diff --git a/packages/driver/src/cy/commands/request.js b/packages/driver/src/cy/commands/request.js
@@ -235,6 +235,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
       if (options.log) {
         options._log = Cypress.log({
           message: '',
+          timeout: options.timeout,
           consoleProps () {
             const resp = options.response || {}
             let rr = resp.allRequestResponses || []

diff --git a/packages/driver/src/cy/commands/screenshot.js b/packages/driver/src/cy/commands/screenshot.js
@@ -444,6 +444,7 @@ module.exports = function (Commands, Cypress, cy, state, config) {
       if (options.log) {
         options._log = Cypress.log({
           message: name,
+          timeout: options.timeout,
           consoleProps () {
             return consoleProps
           },

diff --git a/packages/driver/src/cy/commands/task.js b/packages/driver/src/cy/commands/task.js
@@ -31,6 +31,7 @@ module.exports = (Commands, Cypress, cy) => {
 
         options._log = Cypress.log({
           message,
+          timeout: options.timeout,
           consoleProps () {
             return consoleOutput
           },

diff --git a/packages/driver/src/cy/commands/traversals.js b/packages/driver/src/cy/commands/traversals.js
@@ -95,6 +95,7 @@ module.exports = (Commands, Cypress, cy) => {
       if (options.log !== false) {
         options._log = Cypress.log({
           message: getSelector(),
+          timeout: options.timeout,
           consoleProps () {
             return consoleProps
           },

diff --git a/packages/driver/src/cy/commands/waiting.js b/packages/driver/src/cy/commands/waiting.js
@@ -35,6 +35,7 @@ module.exports = (Commands, Cypress, cy, state) => {
 
     if (options.log !== false) {
       options._log = Cypress.log({
+        timeout: cy.timeout(),
         consoleProps () {
           return {
             'Waited For': `${ms}ms before continuing`,
@@ -54,6 +55,7 @@ module.exports = (Commands, Cypress, cy, state) => {
 
     if (options.log !== false) {
       log = options._log = Cypress.log({
+        timeout: options.timeout,
         type: 'parent',
         aliasType: 'route',
         options: userOptions,

diff --git a/packages/driver/src/cy/commands/window.js b/packages/driver/src/cy/commands/window.js
@@ -76,8 +76,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
       options = _.defaults({}, userOptions, { log: true })
 
       if (options.log) {
-        options._log = Cypress.log({
-        })
+        options._log = Cypress.log({ timeout: options.timeout })
       }
 
       const resolveTitle = () => {
@@ -99,7 +98,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
       options = _.defaults({}, userOptions, { log: true })
 
       if (options.log) {
-        options._log = Cypress.log({})
+        options._log = Cypress.log({ timeout: options.timeout })
       }
 
       const getWindow = () => {
@@ -141,7 +140,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
       options = _.defaults({}, userOptions, { log: true })
 
       if (options.log) {
-        options._log = Cypress.log({})
+        options._log = Cypress.log({ timeout: options.timeout })
       }
 
       const getDocument = () => {
@@ -197,6 +196,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
         const isPreset = typeof presetOrWidth === 'string'
 
         options._log = Cypress.log({
+          timeout: options.timeout,
           consoleProps () {
             const obj = {}