html filtering

Author: SethPaul

docs/docs/playwright-web/Examples.md

@@ -116,6 +116,26 @@ When I extract the HTML content of the page
 Then I should receive the complete HTML structure of the page
 ```
 
+You can also filter HTML content for easier analysis:
+
+```bdd
+Given I navigate to website "https://example.com/products"
+When I extract the HTML content of the page filtered to remove scripts and styles
+Then I should receive clean HTML without JavaScript or CSS code
+
+Given I navigate to website "https://example.com/products"
+When I extract the HTML content of the page filtered to remove meta tags
+Then I should receive HTML without metadata like charset, viewport, and SEO tags
+
+Given I navigate to website "https://example.com/products"
+When I extract the HTML content using the cleanHtml option
+Then I should receive a clean version of the HTML without scripts, styles, comments, and meta tags
+
+Given I navigate to website "https://example.com/products"
+When I extract only the HTML for the main product container using selector "#product-listings"
+Then I should receive just the HTML for the products section for easier analysis
+```
+
 Example use case for content analysis:
 
 ```bdd

docs/docs/playwright-web/Supported-Tools.mdx

@@ -283,9 +283,25 @@ Get the visible text content of the current page.
 ### playwright_get_visible_html
 Get the HTML content of the current page.
 
+- **Inputs:**
+  - **`selector`** *(string, optional)*:  
+    CSS selector to limit the HTML to a specific container. If provided, only returns the HTML for that element.
+  - **`removeScripts`** *(boolean, optional, default: false)*:  
+    Remove all script tags from the HTML to reduce noise.
+  - **`removeComments`** *(boolean, optional, default: false)*:  
+    Remove all HTML comments to clean up the output.
+  - **`removeStyles`** *(boolean, optional, default: false)*:  
+    Remove all style tags from the HTML.
+  - **`removeMeta`** *(boolean, optional, default: false)*:  
+    Remove all meta tags from the HTML head section.
+  - **`minify`** *(boolean, optional, default: false)*:  
+    Minify the HTML output by removing extra whitespace.
+  - **`cleanHtml`** *(boolean, optional, default: false)*:  
+    Convenience option that combines removeScripts, removeComments, removeStyles, and removeMeta for a cleaner HTML output.
+
 - **Response:**
   - **`content`** *(string)*:  
-    The complete HTML content of the current page.
+    The HTML content of the current page, optionally filtered based on the provided parameters.
 
 ---
 

src/tools.ts

@@ -328,7 +328,15 @@ export function createToolDefinitions() {
       description: "Get the HTML content of the current page",
       inputSchema: {
         type: "object",
-        properties: {},
+        properties: {
+          selector: { type: "string", description: "CSS selector to limit the HTML to a specific container" },
+          removeScripts: { type: "boolean", description: "Remove all script tags from the HTML (default: false)" },
+          removeComments: { type: "boolean", description: "Remove all HTML comments (default: false)" },
+          removeStyles: { type: "boolean", description: "Remove all style tags from the HTML (default: false)" },
+          removeMeta: { type: "boolean", description: "Remove all meta tags from the HTML (default: false)" },
+          cleanHtml: { type: "boolean", description: "Perform comprehensive HTML cleaning (default: false)" },
+          minify: { type: "boolean", description: "Minify the HTML output (default: false)" }
+        },
         required: [],
       },
     },
@@ -458,4 +466,4 @@ export const tools = [
   ...BROWSER_TOOLS,
   ...API_TOOLS,
   ...CODEGEN_TOOLS
-];
+];

src/tools/browser/visiblePage.ts

@@ -83,7 +83,93 @@ export class VisibleHtmlTool extends BrowserToolBase {
     }
     return this.safeExecute(context, async (page) => {
       try {
-        const htmlContent = await page!.content();
+        const { selector, removeScripts, removeComments, removeStyles, removeMeta, minify, cleanHtml } = args;
+
+        // Get the HTML content
+        let htmlContent: string;
+
+        if (selector) {
+          // If a selector is provided, get only the HTML for that element
+          const element = await page.$(selector);
+          if (!element) {
+            return createErrorResponse(`Element with selector "${selector}" not found`);
+          }
+          htmlContent = await page.evaluate((el) => el.outerHTML, element);
+        } else {
+          // Otherwise get the full page HTML
+          htmlContent = await page.content();
+        }
+
+        // Determine if we need to apply filters
+        const shouldRemoveScripts = removeScripts || cleanHtml;
+        const shouldRemoveComments = removeComments || cleanHtml;
+        const shouldRemoveStyles = removeStyles || cleanHtml;
+        const shouldRemoveMeta = removeMeta || cleanHtml;
+
+        // Apply filters in the browser context
+        if (shouldRemoveScripts || shouldRemoveComments || shouldRemoveStyles || shouldRemoveMeta || minify) {
+          htmlContent = await page.evaluate(
+            ({ html, removeScripts, removeComments, removeStyles, removeMeta, minify }) => {
+              // Create a DOM parser to work with the HTML
+              const parser = new DOMParser();
+              const doc = parser.parseFromString(html, 'text/html');
+
+              // Remove script tags if requested
+              if (removeScripts) {
+                const scripts = doc.querySelectorAll('script');
+                scripts.forEach(script => script.remove());
+              }
+
+              // Remove style tags if requested
+              if (removeStyles) {
+                const styles = doc.querySelectorAll('style');
+                styles.forEach(style => style.remove());
+              }
+
+              // Remove meta tags if requested
+              if (removeMeta) {
+                const metaTags = doc.querySelectorAll('meta');
+                metaTags.forEach(meta => meta.remove());
+              }
+
+              // Remove HTML comments if requested
+              if (removeComments) {
+                const removeComments = (node) => {
+                  const childNodes = node.childNodes;
+                  for (let i = childNodes.length - 1; i >= 0; i--) {
+                    const child = childNodes[i];
+                    if (child.nodeType === 8) { // 8 is for comment nodes
+                      node.removeChild(child);
+                    } else if (child.nodeType === 1) { // 1 is for element nodes
+                      removeComments(child);
+                    }
+                  }
+                };
+                removeComments(doc.documentElement);
+              }
+
+              // Get the processed HTML
+              let result = doc.documentElement.outerHTML;
+
+              // Minify if requested
+              if (minify) {
+                // Simple minification: remove extra whitespace
+                result = result.replace(/>\s+</g, '><').trim();
+              }
+
+              return result;
+            },
+            {
+              html: htmlContent,
+              removeScripts: shouldRemoveScripts,
+              removeComments: shouldRemoveComments,
+              removeStyles: shouldRemoveStyles,
+              removeMeta: shouldRemoveMeta,
+              minify
+            }
+          );
+        }
+
         return createSuccessResponse(`HTML content:\n${htmlContent}`);
       } catch (error) {
         return createErrorResponse(`Failed to get visible HTML content: ${(error as Error).message}`);