better view for pause mode

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)
 
@@ -3444,6 +3431,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
@@ -3877,11 +3865,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() + '...'
+  )
+}