Add simplified DOM dump generation and improve linter comment handling

src/executor.js

@@ -856,6 +856,10 @@ class TestExecutor {
     const beautifiedHtml = this.beautifyHtml(html);
     await fs.writeFile(path.join(dumpDir, 'dom.html'), beautifiedHtml);
 
+    // Create simplified DOM dump for test development
+    const simplifiedDom = await this.createSimplifiedDom();
+    await fs.writeFile(path.join(dumpDir, 'simplified-dom.html'), simplifiedDom);
+
     // Create screenshot with viewport lock (if enabled)
     if (this.enableScreenshots) {
       if (!this.headless) {
@@ -891,6 +895,136 @@ class TestExecutor {
     }
   }
 
+  async createSimplifiedDom() {
+    // Extract simplified DOM structure with only essential elements and attributes
+    const simplifiedStructure = await this.page.evaluate(() => {
+      // Elements we want to keep
+      const keepElements = ['button', 'input', 'textarea', 'span', 'a'];
+      
+      // Attributes we want to keep
+      const keepAttributes = ['id', 'class', 'name', 'value', 'type'];
+      
+      function processElement(element) {
+        const tagName = element.tagName.toLowerCase();
+        
+        // Only process elements we want to keep
+        if (!keepElements.includes(tagName)) {
+          return null;
+        }
+        
+        // Create simplified element representation
+        const simplified = {
+          tag: tagName,
+          attributes: {},
+          text: '',
+          children: []
+        };
+        
+        // Extract relevant attributes
+        keepAttributes.forEach(attr => {
+          if (element.hasAttribute(attr)) {
+            const value = element.getAttribute(attr);
+            if (value && value.trim()) {
+              simplified.attributes[attr] = value.trim();
+            }
+          }
+        });
+        
+        // Get all text content from this element and its descendants
+        // This captures text even when it's nested in elements we don't keep
+        const allTextContent = element.textContent.trim();
+        
+        if (allTextContent) {
+          simplified.text = allTextContent;
+        }
+        
+        // Process children recursively
+        Array.from(element.children).forEach(child => {
+          const processedChild = processElement(child);
+          if (processedChild) {
+            simplified.children.push(processedChild);
+          }
+        });
+        
+        return simplified;
+      }
+      
+      function processContainer(container) {
+        const results = [];
+        Array.from(container.children).forEach(child => {
+          const processed = processElement(child);
+          if (processed) {
+            results.push(processed);
+          } else {
+            // If the element itself isn't kept, still check its children
+            results.push(...processContainer(child));
+          }
+        });
+        return results;
+      }
+      
+      // Start from body and extract all relevant elements
+      return processContainer(document.body);
+    });
+    
+    // Convert to readable HTML format
+    function renderElement(element, indent = 0) {
+      const spaces = '  '.repeat(indent);
+      let html = `${spaces}<${element.tag}`;
+      
+      // Add attributes
+      Object.entries(element.attributes).forEach(([key, value]) => {
+        html += ` ${key}="${value}"`;
+      });
+      
+      if (element.children.length === 0 && !element.text) {
+        html += ' />';
+        return html;
+      }
+      
+      html += '>';
+      
+      // Add text content
+      if (element.text) {
+        html += element.text;
+      }
+      
+      // Add children
+      if (element.children.length > 0) {
+        if (element.text) html += '\n';
+        element.children.forEach(child => {
+          if (element.text) html += '\n';
+          html += renderElement(child, indent + 1);
+        });
+        if (element.text) html += '\n' + spaces;
+      }
+      
+      html += `</${element.tag}>`;
+      return html;
+    }
+    
+    // Generate HTML header and structure
+    let html = '<!DOCTYPE html>\n<html>\n<head>\n  <title>Simplified DOM - Test Development Helper</title>\n  <style>\n';
+    html += '    body { font-family: Arial, sans-serif; margin: 20px; }\n';
+    html += '    .info { background: #f0f0f0; padding: 10px; border-radius: 5px; margin-bottom: 20px; }\n';
+    html += '    pre { background: #f8f8f8; padding: 15px; border-radius: 5px; overflow-x: auto; }\n';
+    html += '  </style>\n</head>\n<body>\n';
+    html += '  <pre>\n';
+    
+    // Add the simplified structure
+    if (simplifiedStructure.length === 0) {
+      html += '<!-- No interactive elements found -->\n';
+    } else {
+      simplifiedStructure.forEach(element => {
+        html += renderElement(element) + '\n';
+      });
+    }
+    
+    html += '  </pre>\n</body>\n</html>';
+    
+    return html;
+  }
+
   beautifyHtml(html) {
     let beautified = html;