fix(driver): escape selector template literals

Author: lucasgontijopacto

packages/driver/src/cypress/timeout_diagnostics.ts

@@ -1,12 +1,10 @@
 /**
  * Timeout Diagnostics - Smart suggestions for timeout errors
- * 
+ *
  * This module provides contextual diagnostics and actionable suggestions
  * when commands timeout, helping developers quickly identify and fix issues.
  */
 
-import _ from 'lodash'
-
 interface TimeoutContext {
   command: string
   selector?: string
@@ -32,7 +30,7 @@ export class TimeoutDiagnostics {
     dynamicContent: /loading|spinner|skeleton|placeholder/i,
     asyncLoad: /fetch|api|graphql|ajax/i,
     animation: /fade|slide|animate|transition/i,
-    
+
     // Network patterns
     slowNetwork: 3000, // threshold in ms
     manyRequests: 5,
@@ -41,7 +39,7 @@ export class TimeoutDiagnostics {
   /**
    * Generate diagnostic suggestions based on timeout context
    */
-  static analyze(context: TimeoutContext): DiagnosticSuggestion[] {
+  static analyze (context: TimeoutContext): DiagnosticSuggestion[] {
     const suggestions: DiagnosticSuggestion[] = []
 
     // Check for common selector issues
@@ -72,13 +70,13 @@ export class TimeoutDiagnostics {
     return suggestions
   }
 
-  private static analyzeSelectorIssues(context: TimeoutContext): DiagnosticSuggestion[] {
+  private static analyzeSelectorIssues (context: TimeoutContext): DiagnosticSuggestion[] {
     const suggestions: DiagnosticSuggestion[] = []
     const { selector = '', command } = context
 
     // Check for dynamic content indicators
     if (this.COMMON_PATTERNS.dynamicContent.test(selector)) {
-      const escapedSelector = selector.replace(/'/g, "\\'");
+      const escapedSelector = this.escapeSelector(selector)
 
       suggestions.push({
         reason: 'The selector appears to target dynamic/loading content that may not be ready yet',
@@ -94,8 +92,8 @@ export class TimeoutDiagnostics {
 
     // Check for potentially incorrect selectors
     if (selector.includes(' ') && !selector.includes('[') && command === 'get') {
-      const escapedFirst = selector.split(' ')[0].replace(/'/g, "\\'");
-      const escapedRest = selector.split(' ').slice(1).join(' ').replace(/'/g, "\\'");
+      const escapedFirst = this.escapeSelector(selector.split(' ')[0])
+      const escapedRest = this.escapeSelector(selector.split(' ').slice(1).join(' '))
 
       suggestions.push({
         reason: 'Complex selector detected - might be fragile or incorrect',
@@ -113,7 +111,7 @@ export class TimeoutDiagnostics {
       const prefixMatch = selector.match(/^(#[^\d]+)\d{3,}/)
 
       if (prefixMatch) {
-        const escapedPrefix = prefixMatch[1].replace(/'/g, "\\'")
+        const escapedPrefix = this.escapeSelector(prefixMatch[1])
 
         suggestions.push({
           reason: 'Selector uses an ID with numbers - might be dynamically generated',
@@ -129,7 +127,7 @@ export class TimeoutDiagnostics {
     return suggestions
   }
 
-  private static analyzeNetworkIssues(context: TimeoutContext): DiagnosticSuggestion[] {
+  private static analyzeNetworkIssues (context: TimeoutContext): DiagnosticSuggestion[] {
     const suggestions: DiagnosticSuggestion[] = []
     const { networkRequests = 0, timeout } = context
 
@@ -164,7 +162,7 @@ export class TimeoutDiagnostics {
     return suggestions
   }
 
-  private static analyzeAnimationIssues(context: TimeoutContext): DiagnosticSuggestion[] {
+  private static analyzeAnimationIssues (context: TimeoutContext): DiagnosticSuggestion[] {
     return [{
       reason: 'Animations are still running when the command timed out',
       suggestions: [
@@ -177,7 +175,7 @@ export class TimeoutDiagnostics {
     }]
   }
 
-  private static analyzeDOMMutationIssues(context: TimeoutContext): DiagnosticSuggestion {
+  private static analyzeDOMMutationIssues (context: TimeoutContext): DiagnosticSuggestion {
     return {
       reason: `The DOM is changing rapidly (${context.domMutations} mutations detected)`,
       suggestions: [
@@ -190,9 +188,9 @@ export class TimeoutDiagnostics {
     }
   }
 
-  private static getGeneralSuggestions(context: TimeoutContext): DiagnosticSuggestion {
+  private static getGeneralSuggestions (context: TimeoutContext): DiagnosticSuggestion {
     const { command, timeout, selector } = context
-    const escapedSelector = selector?.replace(/'/g, "\\'")
+    const escapedSelector = selector ? this.escapeSelector(selector) : undefined
 
     const generalSuggestions = [
       `Increase timeout if needed: cy.${command}(${escapedSelector ? `'${escapedSelector}', ` : ''}{ timeout: ${timeout * 2} })`,
@@ -202,9 +200,7 @@ export class TimeoutDiagnostics {
     ]
 
     // Add command-specific suggestions
-    if (['get', 'contains'].includes(command) && selector) {
-      const escapedSelector = selector.replace(/'/g, "\\'");
-
+    if (['get', 'contains'].includes(command) && escapedSelector) {
       generalSuggestions.unshift(
         `Verify selector in DevTools: document.querySelector('${escapedSelector}')`,
         'Ensure the element is not hidden by CSS (display: none, visibility: hidden)',
@@ -225,17 +221,25 @@ export class TimeoutDiagnostics {
     }
   }
 
+  private static escapeSelector (selector: string): string {
+    return selector
+    .replace(/\\/g, '\\\\')
+    .replace(/`/g, '\`')
+    .replace(/\$\{/g, '\${')
+    .replace(/'/g, '\\\'')
+  }
+
   /**
    * Format diagnostic suggestions into a readable message
    */
-  static formatSuggestions(suggestions: DiagnosticSuggestion[]): string {
+  static formatSuggestions (suggestions: DiagnosticSuggestion[]): string {
     if (suggestions.length === 0) return ''
 
     let output = '\n\n🔍 Diagnostic Suggestions:\n'
 
     suggestions.forEach((suggestion, index) => {
       output += `\n${index + 1}. ${suggestion.reason}\n`
-      
+
       suggestion.suggestions.forEach((tip, tipIndex) => {
         output += `   ${String.fromCharCode(97 + tipIndex)}) ${tip}\n`
       })
@@ -251,10 +255,10 @@ export class TimeoutDiagnostics {
   /**
    * Enhanced error message with diagnostics
    */
-  static enhanceTimeoutError(originalMessage: string, context: TimeoutContext): string {
+  static enhanceTimeoutError (originalMessage: string, context: TimeoutContext): string {
     const suggestions = this.analyze(context)
     const diagnostics = this.formatSuggestions(suggestions)
-    
+
     return originalMessage + diagnostics
   }
 }