fix: address Cursor Bot security and correctness issues

Fix critical bugs identified by Cursor Bot code review:

1. **Missing body tag handling in Vite plugin**
   - Added check for missing </body> tag (lastIndexOf returns -1)
   - Prevents malformed HTML with script at wrong position
   - Gracefully appends script at end if body tag not found
   - Added debug logging for missing body tag case

2. **Contradictory loading content suggestion**
   - Fixed confusing suggestion for loading selectors
   - Now suggests waiting for loading to disappear THEN get content
   - Provides alternative to wait for API request
   - Clarifies when user actually needs the loading element itself

3. **Unescaped quotes in generated code suggestions**
   - All selectors now properly escaped before interpolation
   - Prevents syntax errors like: cy.get('[data-test='value']')
   - Correctly generates: cy.get('[data-test=\\'value\\']')
   - Applied to all suggestion types (dynamic, complex, ID, general)

Test coverage:
- Added tests for quote escaping in selectors
- Verified proper handling of special characters
- All 19 tests passing
- Lint checks passing

Before:
- cy.get('[data-test='value']')  // SYNTAX ERROR

After:
- cy.get('[data-test=\\'value\\']')  // VALID

Related: Security and code quality improvements

Author: lucgonp

npm/vite-dev-server/src/plugins/cypress.ts

@@ -126,11 +126,21 @@ export const Cypress = (
       const loader = await getLoaderPromise()
 
       // insert the script in the end of the body
-      const newHtml = `
+      let newHtml: string
+
+      if (endOfBody === -1) {
+        // No closing body tag found, append at the end
+        debug('No closing body tag found, appending script at end of HTML')
+        newHtml = `${indexHtmlContent}
+        <script>${loader}</script>`
+      } else {
+        // Insert before closing body tag
+        newHtml = `
         ${indexHtmlContent.substring(0, endOfBody)}
         <script>${loader}</script>
         ${indexHtmlContent.substring(endOfBody)}
       `
+      }
 
       return newHtml
     },

packages/driver/src/cypress/timeout_diagnostics.ts

@@ -78,38 +78,47 @@ export class TimeoutDiagnostics {
 
     // Check for dynamic content indicators
     if (this.COMMON_PATTERNS.dynamicContent.test(selector)) {
+      const escapedSelector = selector.replace(/'/g, "\\'");
+
       suggestions.push({
-        reason: 'The selector appears to target dynamic/loading content',
+        reason: 'The selector appears to target dynamic/loading content that may not be ready yet',
         suggestions: [
-          `Wait for the loading state to complete: cy.get('${selector}').should('not.exist')`,
+          `If waiting for content to load, wait for the loading indicator to disappear first: cy.get('${escapedSelector}').should('not.exist').then(() => cy.get('[data-cy="content"]'))`,
+          'Or wait for the API request: cy.intercept("GET", "/api/*").as("loadData"); cy.wait("@loadData")',
           'Consider using data-cy attributes instead of class names that indicate loading states',
-          'Use cy.intercept() to wait for the API request that populates this content',
+          `If you need the loading element itself, ensure it exists before trying to interact: cy.get('${escapedSelector}').should('exist')`,
         ],
         docsUrl: 'https://on.cypress.io/best-practices#Selecting-Elements',
       })
     }
 
     // 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, "\\'");
+
       suggestions.push({
         reason: 'Complex selector detected - might be fragile or incorrect',
         suggestions: [
           'Verify the selector in DevTools: copy and paste it into the console',
           'Consider using data-cy attributes for more reliable selection',
-          `Break down into multiple steps: cy.get('${selector.split(' ')[0]}').find('${selector.split(' ').slice(1).join(' ')}')`,
+          `Break down into multiple steps: cy.get('${escapedFirst}').find('${escapedRest}')`,
         ],
         docsUrl: 'https://on.cypress.io/best-practices#Selecting-Elements',
       })
     }
 
     // Check for ID selectors that might be dynamic
     if (selector.startsWith('#') && /\d{3,}/.test(selector)) {
+      const prefix = selector.split(/\d/)[0];
+      const escapedPrefix = prefix.replace(/'/g, "\\'");
+
       suggestions.push({
         reason: 'Selector uses an ID with numbers - might be dynamically generated',
         suggestions: [
           'Dynamic IDs change between sessions and will cause flaky tests',
           'Use a data-cy attribute or a more stable selector instead',
-          'If the ID is dynamic, use a partial match: cy.get(\'[id^="prefix-"]\').first()',
+          `If the ID is dynamic, use a partial match: cy.get('[id^="${escapedPrefix}"]').first()`,
         ],
       })
     }
@@ -190,8 +199,10 @@ export class TimeoutDiagnostics {
 
     // Add command-specific suggestions
     if (['get', 'contains'].includes(command) && selector) {
+      const escapedSelector = selector.replace(/'/g, "\\'");
+
       generalSuggestions.unshift(
-        `Verify selector in DevTools: document.querySelector('${selector}')`,
+        `Verify selector in DevTools: document.querySelector('${escapedSelector}')`,
         'Ensure the element is not hidden by CSS (display: none, visibility: hidden)',
       )
     }

packages/driver/test/unit/cypress/timeout_diagnostics.spec.ts

@@ -17,9 +17,20 @@ describe('TimeoutDiagnostics', () => {
 
       expect(suggestions).toHaveLength(1)
       expect(suggestions[0].reason).toContain('dynamic/loading content')
-      expect(suggestions[0].suggestions).toContain(
-        'Wait for the loading state to complete: cy.get(\'.loading-spinner\').should(\'not.exist\')',
-      )
+      expect(suggestions[0].suggestions.some((s) => s.includes('wait for the loading indicator to disappear'))).toBe(true)
+    })
+
+    it('escapes quotes in dynamic content selector suggestions', () => {
+      const context = {
+        command: 'get',
+        selector: "[data-test='loading']",
+        timeout: 4000,
+      }
+
+      const suggestions = TimeoutDiagnostics.analyze(context)
+
+      expect(suggestions).toHaveLength(1)
+      expect(suggestions[0].suggestions.some((s) => s.includes("\\'"))).toBe(true)
     })
 
     it('detects complex selectors', () => {
@@ -228,6 +239,22 @@ describe('TimeoutDiagnostics', () => {
       expect(suggestions).toHaveLength(1)
     })
 
+    it('escapes quotes in code suggestions to prevent syntax errors', () => {
+      const context = {
+        command: 'get',
+        selector: "[data-test='value']",
+        timeout: 4000,
+      }
+
+      const suggestions = TimeoutDiagnostics.analyze(context)
+      const formatted = TimeoutDiagnostics.formatSuggestions(suggestions)
+
+      // Verify quotes are escaped in suggestions
+      expect(formatted.includes("\\'")).toBe(true)
+      // Verify no unescaped single quotes that would break JS
+      expect(formatted.match(/cy\.get\('\[data-test='value'\]'\)/)).toBe(null)
+    })
+
     it('combines multiple diagnostic issues', () => {
       const context = {
         command: 'get',