better view for pause mode (#4718)

Co-authored-by: DavertMik <[email protected]>

Author: DavertMik

lib/helper/Playwright.js

@@ -1255,28 +1255,14 @@ class Playwright extends Helper {
 
     if (store.debugMode) {
       const previewElements = els.slice(0, 3)
-      let htmls = await Promise.all(
-        previewElements.map(async el => {
-          const html = await el.evaluate(node => node.outerHTML)
-          return (
-            html
-              .replace(/\n/g, '')
-              .replace(/\s+/g, ' ')
-              .substring(0, 100 / previewElements.length)
-              .trim() + '...'
-          )
-        }),
-      )
-      if (els.length > 3) {
-        htmls.push('...')
-      }
-
+      let htmls = await Promise.all(previewElements.map(el => elToString(el, previewElements.length)))
+      if (els.length > 3) htmls.push('...')
       if (els.length > 1) {
         this.debugSection(`Elements (${els.length})`, htmls.join('|').trim())
       } else if (els.length === 1) {
         this.debugSection('Element', htmls.join('|').trim())
       } else {
-        this.debug('No elements found')
+        this.debug(`No elements found by ${JSON.stringify(locator).slice(0, 50)}....`)
       }
     }
 
@@ -1734,6 +1720,7 @@ class Playwright extends Helper {
     const el = els[0]
 
     await el.clear()
+    if (store.debugMode) this.debugSection('Focused', await elToString(el, 1))
 
     await highlightActiveElement.call(this, el)
 
@@ -3447,6 +3434,7 @@ async function proceedClick(locator, context = null, options = {}) {
   }
 
   await highlightActiveElement.call(this, els[0])
+  if (store.debugMode) this.debugSection('Clicked', await elToString(els[0], 1))
 
   /*
     using the force true options itself but instead dispatching a click
@@ -3880,11 +3868,22 @@ async function saveTraceForContext(context, name) {
 }
 
 async function highlightActiveElement(element) {
-  if (this.options.highlightElement && global.debugMode) {
+  if ((this.options.highlightElement || store.onPause) && store.debugMode) {
     await element.evaluate(el => {
       const prevStyle = el.style.boxShadow
-      el.style.boxShadow = '0px 0px 4px 3px rgba(255, 0, 0, 0.7)'
+      el.style.boxShadow = '0px 0px 4px 3px rgba(147, 51, 234, 0.8)' // Bright purple that works on both dark/light modes
       setTimeout(() => (el.style.boxShadow = prevStyle), 2000)
     })
   }
 }
+
+async function elToString(el, numberOfElements) {
+  const html = await el.evaluate(node => node.outerHTML)
+  return (
+    html
+      .replace(/\n/g, '')
+      .replace(/\s+/g, ' ')
+      .substring(0, 100 / numberOfElements)
+      .trim() + '...'
+  )
+}

lib/pause.js

@@ -66,9 +66,11 @@ function pauseSession(passedObject = {}) {
     historySize: 50, // Adjust the history size as needed
   })
 
+  store.onPause = true
   rl.on('line', parseInput)
   rl.on('close', () => {
     if (!next) console.log('Exiting interactive shell....')
+    store.onPause = false
   })
   return new Promise(resolve => {
     finish = resolve

lib/store.js

@@ -9,7 +9,8 @@ const store = {
   timeouts: true,
   /** @type {boolean} */
   dryRun: false,
-
+  /** @type {boolean} */
+  onPause: false,
   /** @type {CodeceptJS.Test | null} */
   currentTest: null,
 }

test/data/sandbox/features/step_definitions/my_steps.de.js

@@ -4,7 +4,7 @@ Given('ich habe ein Produkt mit einem Preis von {int}$ in meinem Warenkorb', pri
   I.addItem(parseInt(price, 10))
 })
 
-Given('der Rabatt für Bestellungen über $\{int} beträgt {int} %', (maxPrice, discount) => {
+Given('der Rabatt für Bestellungen über ${int} beträgt {int} %', (maxPrice, discount) => {
   I.haveDiscountForPrice(maxPrice, discount)
 })
 

test/data/sandbox/i18n/features/step_definitions/my_steps.de.js

@@ -4,7 +4,7 @@ Given('ich habe ein Produkt mit einem Preis von {int}$ in meinem Warenkorb', pri
   I.addItem(parseInt(price, 10))
 })
 
-Given('der Rabatt für Bestellungen über $\{int} beträgt {int} %', (maxPrice, discount) => {
+Given('der Rabatt für Bestellungen über ${int} beträgt {int} %', (maxPrice, discount) => {
   I.haveDiscountForPrice(maxPrice, discount)
 })