diff --git a/apps/site/docs/en/describe-elements-by-your-own.mdx b/apps/site/docs/en/describe-elements-by-your-own.mdx
new file mode 100644
index 000000000..2f2a7d0b1
--- /dev/null
+++ b/apps/site/docs/en/describe-elements-by-your-own.mdx
@@ -0,0 +1,37 @@
+# Describe Elements by Your Own
+
+In some cases, you may want to describe elements by yourself. For example, you may want to describe the content inside an `<canvas />` element which cannot be extracted by Midscene. Or you just want to "be friendly" to the LLM.
+
+To do this, you can put an identifier in the `midscene-description-ref` attribute, and put the description JSON in a `<script>` tag with the same identifier. Midscene will take use these descriptions to feed the LLM.
+
+For example:
+
+```html
+<canvas style="width: 80px; height: 80px; background: #AC0;" midscene-description-ref="ac7"></canvas>
+<script type="text/json" midscene-description-id="ac7">
+  [{
+    "rect": {
+        "x": 20,
+        "y": 20,
+        "width": 20,
+        "height": 20
+    },
+    "text": "Rule of the game",
+    "description": "This is a description of the rule of the game"
+  }, {
+    "rect": {
+        "x": 60,
+        "y": 60,
+        "width": 20,
+        "height": 20
+    },
+    "description": "This is a lucky draw button"
+  }]
+</script>
+```
+
+The core fields are `rect`, `text`, and `description`.
+
+- `rect`: The rectangle of this content. Required. All the coordinates are relative to the upper left corner of the element.
+- `text`: The text of this content. Optional. Should be same as the text on screen.
+- `description`: A short description of this content. Optional.
diff --git a/apps/site/docs/zh/describe-elements-by-your-own.mdx b/apps/site/docs/zh/describe-elements-by-your-own.mdx
new file mode 100644
index 000000000..e2b781dc3
--- /dev/null
+++ b/apps/site/docs/zh/describe-elements-by-your-own.mdx
@@ -0,0 +1,37 @@
+# 自定义页面元素的描述信息
+
+在某些情况下，你可能需要自定义页面元素的描述。例如，你可能需要描述页面中无法被 Midscene 提取的 `<canvas />` 元素的内容。或者你只是单纯想对 LLM 示好。
+
+为此，你可以在元素上添加 `midscene-description-ref` 属性，然后在 `<script>` 标签中添加一个相同标识的 JSON 内容。Midscene 会使用这些描述来喂给 LLM。
+
+例如：
+
+```html
+<canvas style="width: 80px; height: 80px; background: #AC0;" midscene-description-ref="ac7"></canvas>
+<script type="text/json" midscene-description-id="ac7">
+  [{
+    "rect": {
+      "x": 20,
+      "y": 20,
+      "width": 20,
+      "height": 20
+    },
+    "text": "Rule of the game",
+    "description": "This is a description of the rule of the game"
+  }, {
+    "rect": {
+      "x": 60,
+      "y": 60,
+      "width": 20,
+      "height": 20
+    },
+    "description": "This is a lucky draw button"
+  }]
+</script>
+```
+
+这里的关键字段是 `rect`、`text` 和 `description`。
+
+- `rect`: 该内容的坐标区域。必选。所有坐标都是相对于此元素的左上角。
+- `text`: 该内容的文本内容。可选。应与屏幕上的文本一致。
+- `description`: 该内容的简短描述。可选。
diff --git a/apps/site/rspress.config.ts b/apps/site/rspress.config.ts
index f223bd17a..dd4900b0c 100644
--- a/apps/site/rspress.config.ts
+++ b/apps/site/rspress.config.ts
@@ -90,6 +90,10 @@ export default defineConfig({
               text: 'Customize Model and Provider',
               link: '/model-provider',
             },
+            {
+              text: 'Describe Elements by Your Own',
+              link: '/describe-elements-by-your-own',
+            },
           ],
         },
         {
@@ -147,6 +151,10 @@ export default defineConfig({
               text: '自定义模型和服务商',
               link: '/zh/model-provider',
             },
+            {
+              text: '自定义页面元素的描述信息',
+              link: '/zh/describe-elements-by-your-own',
+            },
           ],
         },
         {
diff --git a/packages/web-integration/src/extractor/dom-util.ts b/packages/web-integration/src/extractor/dom-util.ts
index 42b08e54b..29791e121 100644
--- a/packages/web-integration/src/extractor/dom-util.ts
+++ b/packages/web-integration/src/extractor/dom-util.ts
@@ -1,3 +1,14 @@
+export const USER_DESCRIBED_ELEMENT_ATTRIBUTE_REF = 'midscene-description-ref';
+export const USER_DESCRIBED_ELEMENT_ATTRIBUTE_ID = 'midscene-description-id';
+
+export function isUserDescribedElement(node: Node): boolean {
+  if (node instanceof Element) {
+    return node.hasAttribute(USER_DESCRIBED_ELEMENT_ATTRIBUTE_REF);
+  }
+
+  return false;
+}
+
 export function isFormElement(node: Node) {
   return (
     node instanceof HTMLElement &&
@@ -54,6 +65,10 @@ export function isContainerElement(node: Node): node is HTMLElement {
     return false;
   }
 
+  if (includeUserDescribedElement(node)) {
+    return false;
+  }
+
   const computedStyle = window.getComputedStyle(node);
   const backgroundColor = computedStyle.getPropertyValue('background-color');
   if (backgroundColor) {
@@ -63,6 +78,17 @@ export function isContainerElement(node: Node): node is HTMLElement {
   return false;
 }
 
+function includeUserDescribedElement(node: Node) {
+  if (node instanceof Element) {
+    const selector = `[${USER_DESCRIBED_ELEMENT_ATTRIBUTE_REF}]`;
+    const elements = node.querySelectorAll(selector);
+    if (elements.length > 0) {
+      return true;
+    }
+  }
+  return false;
+}
+
 function includeBaseElement(node: Node) {
   if (!(node instanceof HTMLElement)) return false;
 
@@ -72,6 +98,7 @@ function includeBaseElement(node: Node) {
   }
 
   const includeList = [
+    'canvas',
     'svg',
     'button',
     'input',
diff --git a/packages/web-integration/src/extractor/web-extractor.ts b/packages/web-integration/src/extractor/web-extractor.ts
index 70f7fffa2..ec2279bc9 100644
--- a/packages/web-integration/src/extractor/web-extractor.ts
+++ b/packages/web-integration/src/extractor/web-extractor.ts
@@ -5,11 +5,14 @@ import {
 } from '@midscene/shared/constants';
 import type { ElementInfo } from '.';
 import {
+  USER_DESCRIBED_ELEMENT_ATTRIBUTE_ID,
+  USER_DESCRIBED_ELEMENT_ATTRIBUTE_REF,
   isButtonElement,
   isContainerElement,
   isFormElement,
   isImgElement,
   isTextElement,
+  isUserDescribedElement,
 } from './dom-util';
 import {
   getDocument,
@@ -40,7 +43,7 @@ function tagNameOfNode(node: Node): string {
   }
 
   const parentElement = node.parentElement;
-  if (parentElement && parentElement instanceof HTMLElement) {
+  if (!tagName && parentElement && parentElement instanceof HTMLElement) {
     tagName = parentElement.tagName.toLowerCase();
   }
 
@@ -51,7 +54,7 @@ function collectElementInfo(
   node: Node,
   nodePath: string,
   baseZoom = 1,
-): WebElementInfo | null {
+): WebElementInfo | WebElementInfo[] | null {
   const rect = visibleRect(node, baseZoom);
   if (
     !rect ||
@@ -60,6 +63,88 @@ function collectElementInfo(
   ) {
     return null;
   }
+
+  if (isUserDescribedElement(node)) {
+    console.log('isUserDescribedElement', node);
+    const element = node as Element;
+    const descriptionId = element.getAttribute(
+      USER_DESCRIBED_ELEMENT_ATTRIBUTE_REF,
+    );
+    const targetSelector = `[${USER_DESCRIBED_ELEMENT_ATTRIBUTE_ID}="${descriptionId}"]`;
+    const targetElement = document.querySelectorAll(targetSelector);
+    if (targetElement.length === 0) {
+      console.warn(
+        'cannot find element for Midscene description',
+        targetSelector,
+      );
+      return null;
+    }
+
+    if (targetElement.length > 1) {
+      console.warn(
+        'multiple elements found for Midscene description',
+        targetSelector,
+      );
+    }
+
+    const descriptionElement = targetElement[0] as HTMLElement;
+    const description = descriptionElement.innerText;
+    try {
+      const descriptionJson = JSON.parse(description);
+      if (!Array.isArray(descriptionJson)) {
+        console.warn('description is not a valid JSON', description);
+        return null;
+      }
+
+      const infoList = descriptionJson.map((item, index) => {
+        const overallRect = {
+          left: item.rect.x + rect.left,
+          top: item.rect.y + rect.top,
+          width: item.rect.width,
+          height: item.rect.height,
+        };
+        const center: [number, number] = [
+          Math.round(overallRect.left + overallRect.width / 2),
+          Math.round(overallRect.top + overallRect.height / 2),
+        ];
+        const nodeType = item.text ? NodeType.TEXT : NodeType.CONTAINER;
+        const nodeHashId = midsceneGenerateHash(
+          null,
+          `${index}-${item.text || ''}`,
+          overallRect,
+        );
+        return {
+          id: nodeHashId,
+          indexId: indexId++,
+          zoom: 1,
+          locator: '',
+          nodeType,
+          nodePath,
+          nodeHashId,
+          attributes: {
+            ...(item.description ? { description: item.description } : {}),
+            nodeType,
+          },
+          content: item.text || '',
+          rect: overallRect,
+          center,
+          screenWidth: window.innerWidth,
+          screenHeight: window.innerHeight,
+        };
+      });
+
+      return infoList;
+    } catch (e) {
+      console.error(e);
+      console.warn(
+        'description is not a valid JSON',
+        targetSelector,
+        description,
+      );
+      return null;
+    }
+  }
+
   if (isFormElement(node)) {
     const attributes = getNodeAttributes(node);
     let valueContent =
@@ -266,6 +351,12 @@ export function extractTextWithPosition(
     }
 
     const elementInfo = collectElementInfo(node, nodePath, baseZoom);
+
+    if (Array.isArray(elementInfo)) {
+      elementInfoArray.push(...elementInfo);
+      return null;
+    }
+
     // stop collecting if the node is a Button or Image
     if (
       elementInfo?.nodeType === NodeType.BUTTON ||
diff --git a/packages/web-integration/tests/ai/web/puppeteer/utils.ts b/packages/web-integration/tests/ai/web/puppeteer/utils.ts
index 1a29e85db..32f723203 100644
--- a/packages/web-integration/tests/ai/web/puppeteer/utils.ts
+++ b/packages/web-integration/tests/ai/web/puppeteer/utils.ts
@@ -44,6 +44,11 @@ export async function launchPage(
       const pages = await browser.pages();
       await Promise.all(pages.map((page) => page.close()));
       await browser.close();
+      await sleep(1000);
     },
   };
 }
+
+async function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/packages/web-integration/tests/unit-test/__snapshots__/web-extractor.test.ts.snap b/packages/web-integration/tests/unit-test/__snapshots__/web-extractor.test.ts.snap
index d373445fc..7c58bcc7c 100644
--- a/packages/web-integration/tests/unit-test/__snapshots__/web-extractor.test.ts.snap
+++ b/packages/web-integration/tests/unit-test/__snapshots__/web-extractor.test.ts.snap
@@ -268,7 +268,7 @@ exports[`extractor > basic 1`] = `
   },
   {
     "attributes": {
-      "htmlTagName": "<div>",
+      "htmlTagName": "<button>",
       "nodeType": "BUTTON Node",
     },
     "content": "Click Me",
@@ -318,6 +318,20 @@ exports[`extractor > basic 1`] = `
     },
     "content": "Tiếng Việt",
   },
+  {
+    "attributes": {
+      "description": "This is a description of the rule of the game",
+      "nodeType": "TEXT Node",
+    },
+    "content": "Rule of the game",
+  },
+  {
+    "attributes": {
+      "description": "This is a lucky draw button",
+      "nodeType": "CONTAINER Node",
+    },
+    "content": "",
+  },
   {
     "attributes": {
       "htmlTagName": "<label>",
@@ -350,7 +364,7 @@ exports[`extractor > basic 1`] = `
   },
   {
     "attributes": {
-      "htmlTagName": "<body>",
+      "htmlTagName": "<div>",
       "id": "J_resize",
       "nodeType": "CONTAINER Node",
       "style": "width:30px;height:30px;background: #AC0",
@@ -402,7 +416,7 @@ exports[`extractor > basic 1`] = `
   {
     "attributes": {
       "class": ".life-core-checkbox-icon",
-      "htmlTagName": "<label>",
+      "htmlTagName": "<span>",
       "nodeType": "CONTAINER Node",
     },
     "content": "",
@@ -410,7 +424,7 @@ exports[`extractor > basic 1`] = `
   {
     "attributes": {
       "aria-label": "The phrase 'The quick brown fox jumps over the lazy dog' is a well-known English-language pangram, meaning it contains every letter of the alphabet at least once. This sentence has become a standard tool for various applications, particularly in typing practice, font display, and keyboard testing. T...",
-      "htmlTagName": "<body>",
+      "htmlTagName": "<div>",
       "nodeType": "CONTAINER Node",
       "style": "width: 100px; height: 100px; background-color: #ccc;",
     },
@@ -421,13 +435,13 @@ exports[`extractor > basic 1`] = `
       "htmlTagName": "<body>",
       "nodeType": "TEXT Node",
     },
-    "content": "phrase "The quick brown fox jumps over the lazy dog" is a well-known English-language pangram, meaning it contains every letter of the alphabet at least once. This sentence has become a standard tool for various applications, particularly     in typing practice, font display, and keyboard testing. The phrase has permeated popular culture and is referenced in various media, including literature and film. Its simplicity and utility have made it a staple in educational contexts and beyond.     For instance, it was famously used as the first message sent over the Moscow–Washington hotline in 19634.",
+    "content": "phrase "The quick brown fox jumps over the lazy dog" is a well-known English-language pangram, meaning     it contains every letter of the alphabet at least once. This sentence has become a standard tool for various     applications, particularly     in typing practice, font display, and keyboard testing. The phrase has permeated popular culture and is referenced     in various media, including literature and film. Its simplicity and utility have made it a staple in educational     contexts and beyond.     For instance, it was famously used as the first message sent over the Moscow–Washington hotline in 19634.",
   },
   {
     "attributes": {
       "aria-label": "Search",
       "class": ".btn",
-      "htmlTagName": "<body>",
+      "htmlTagName": "<button>",
       "nodeType": "BUTTON Node",
       "tabindex": "0",
       "type": "submit",
@@ -458,7 +472,7 @@ exports[`extractor > basic 1`] = `
   },
   {
     "attributes": {
-      "htmlTagName": "<div>",
+      "htmlTagName": "<img>",
       "nodeType": "IMG Node",
       "src": "image",
     },
@@ -466,7 +480,7 @@ exports[`extractor > basic 1`] = `
   },
   {
     "attributes": {
-      "htmlTagName": "<div>",
+      "htmlTagName": "<button>",
       "nodeType": "BUTTON Node",
       "very-long-attr": "width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;",
     },
@@ -483,7 +497,7 @@ exports[`extractor > basic 1`] = `
     "attributes": {
       "aria-controls": "semi-select-5yxiyng",
       "class": ".widget",
-      "htmlTagName": "<body>",
+      "htmlTagName": "<div>",
       "nodeType": "CONTAINER Node",
     },
     "content": "",
@@ -492,7 +506,7 @@ exports[`extractor > basic 1`] = `
     "attributes": {
       "aria-labelledby": "eval_object.object_type-label",
       "class": ".widget",
-      "htmlTagName": "<body>",
+      "htmlTagName": "<div>",
       "nodeType": "CONTAINER Node",
     },
     "content": "",
@@ -539,7 +553,7 @@ exports[`extractor > basic 1`] = `
   {
     "attributes": {
       "class": ".child-container-5",
-      "htmlTagName": "<body>",
+      "htmlTagName": "<span>",
       "nodeType": "IMG Node",
     },
     "content": "",
@@ -577,7 +591,7 @@ exports[`extractor > basic 1`] = `
     "attributes": {
       "frameborder": "0",
       "height": "200px",
-      "htmlTagName": "<body>",
+      "htmlTagName": "<iframe>",
       "nodeType": "CONTAINER Node",
       "src": "child.html",
       "width": "400px",
diff --git a/packages/web-integration/tests/unit-test/fixtures/web-extractor/index.html b/packages/web-integration/tests/unit-test/fixtures/web-extractor/index.html
index 4e6fafe45..24f61ed71 100644
--- a/packages/web-integration/tests/unit-test/fixtures/web-extractor/index.html
+++ b/packages/web-integration/tests/unit-test/fixtures/web-extractor/index.html
@@ -10,24 +10,24 @@
             font-family: Arial, sans-serif;
             margin: 20px;
         }
-        
+
         table {
             border-collapse: collapse;
             width: 50%;
             margin-top: 20px;
         }
-        
+
         th,
         td {
             border: 1px solid #000;
             padding: 8px;
             text-align: center;
         }
-        
+
         th {
             background-color: #f2f2f2;
         }
-        
+
         .child-container-5 {
             font-family: awesome-iconfont;
         }
@@ -90,13 +90,15 @@ <h2>User Name: Stella</h2>
         <h3>Form</h3>
         <label for="name">Name:</label>
         <input id="J_input" placeholder="Hello World This is Placeholder" />
-        <input id="J_input" placeholder="Hello World This is Placeholder" value="Now I am a value, instead of placeholder" />
+        <input id="J_input" placeholder="Hello World This is Placeholder"
+            value="Now I am a value, instead of placeholder" />
         <button>Click Me</button>
         <label>Shape</label>
         <input placeholder="You shouldn't see this placeholder." value="Rectangle" />
         <pre id="J_keyRecord"></pre>
         <textarea placeholder="this_is_a_textarea"></textarea>
-        <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/midscene.png" width="2" height="2" alt="small_img" />
+        <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/midscene.png" width="2" height="2"
+            alt="small_img" />
     </div>
 
     <!-- Global popup to test invisible -->
@@ -113,6 +115,31 @@ <h3>Form</h3>
         </div>
     </div>
 
+
+    <!-- user described element -->
+    <div style="width: 80px; height: 80px; background: #AC0;" midscene-description-ref="ac7"></div>
+    <script type="text/json" midscene-description-id="ac7">
+        [{
+            "rect": {
+                "x": 20,
+                "y": 20,
+                "width": 20,
+                "height": 20
+            },
+            "text": "Rule of the game",
+            "description": "This is a description of the rule of the game"
+        }, {
+            "rect": {
+                "x": 60,
+                "y": 60,
+                "width": 20,
+                "height": 20
+            },
+            "description": "This is a lucky draw button"
+        }]
+    </script>
+
+
     <!-- form -->
     <form action="/submit-form" method="post">
         <label for="options">Choose an option:</label>
@@ -146,13 +173,16 @@ <h3>Form</h3>
     <!-- a label with sibiling input -->
     <div id="gh-ac-box2">
         <label for="gh-ac" class="gh-ar-hdn">输入搜索关键词</label>
-        <input type="text" class="gh-tb ui-autocomplete-input" aria-autocomplete="list" aria-expanded="false" size="50" maxlength="300" aria-label="搜索任何物品" placeholder="搜索任何物品" id="gh-ac" name="_nkw" autocapitalize="off" autocorrect="off" spellcheck="false" autocomplete="off"
-            aria-haspopup="true" role="combobox" aria-owns="ui-id-1">
+        <input type="text" class="gh-tb ui-autocomplete-input" aria-autocomplete="list" aria-expanded="false" size="50"
+            maxlength="300" aria-label="搜索任何物品" placeholder="搜索任何物品" id="gh-ac" name="_nkw" autocapitalize="off"
+            autocorrect="off" spellcheck="false" autocomplete="off" aria-haspopup="true" role="combobox"
+            aria-owns="ui-id-1">
         <input style="display:none">
     </div>
 
     <!-- a label with nested input -->
-    <label class="life-core-input-inner__wrapper life-core-input-inner__wrapper-border life-core-input-inner__wrapper-size-md life-core-input-inner__wrapper-add-suffix">
+    <label
+        class="life-core-input-inner__wrapper life-core-input-inner__wrapper-border life-core-input-inner__wrapper-size-md life-core-input-inner__wrapper-add-suffix">
         <input placeholder="验证码" tabindex="0" type="text" class="life-core-input life-core-input-size-md" value="">
     </label>
 
@@ -161,7 +191,7 @@ <h3>Form</h3>
         .life-core-check-wrapper {
             display: none;
         }
-        
+
         .life-core-checkbox-icon {
             display: inline-block;
             width: 16px;
@@ -175,16 +205,20 @@ <h3>Form</h3>
             <input class="life-core-check-wrapper" type="checkbox">
             <span class="life-core-checkbox-icon">
             </span>
-    <span class="life-core-checkbox-label life-core-checkbox-label-no">
+            <span class="life-core-checkbox-label life-core-checkbox-label-no">
             </span>
-    </label>
+        </label>
     </span>
 
     <!-- some very long text -->
     <div aria-label="The phrase 'The quick brown fox jumps over the lazy dog' is a well-known English-language pangram, meaning it contains every letter of the alphabet at least once. This sentence has become a standard tool for various applications, particularly in typing practice, font display, and keyboard testing. The phrase has permeated popular culture and is referenced in various media, including literature and film. Its simplicity and utility have made it a staple in educational contexts and beyond. For instance, it was famously used as the first message sent over the Moscow–Washington hotline in 19634."
         style="width: 100px; height: 100px; background-color: #ccc;"></div>
-    <span></span> phrase "The quick brown fox jumps over the lazy dog" is a well-known English-language pangram, meaning it contains every letter of the alphabet at least once. This sentence has become a standard tool for various applications, particularly
-    in typing practice, font display, and keyboard testing. The phrase has permeated popular culture and is referenced in various media, including literature and film. Its simplicity and utility have made it a staple in educational contexts and beyond.
+    <span></span> phrase "The quick brown fox jumps over the lazy dog" is a well-known English-language pangram, meaning
+    it contains every letter of the alphabet at least once. This sentence has become a standard tool for various
+    applications, particularly
+    in typing practice, font display, and keyboard testing. The phrase has permeated popular culture and is referenced
+    in various media, including literature and film. Its simplicity and utility have made it a staple in educational
+    contexts and beyond.
     For instance, it was famously used as the first message sent over the Moscow–Washington hotline in 19634.
     </span>
 
@@ -211,9 +245,10 @@ <h3>Form</h3>
 
     <!-- item with long attribute -->
     <div>
-        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS42MjQ3IDYuNzc2NDhDMC45Njk5MzIgNy4zMDYyNSAwIDYuODM0NzcgMCA1Ljk4NjcyVjBMMTAgMS4wNjEwMWUtMDZMMS42MjQ3IDYuNzc2NDhaIiBmaWxsPSIjMjIyMjIyIiBmaWxsLW9wYWNpdHk9IjAuOTgiLz4KPC9zdmc+Cg=="
-        />
-        <button very-long-attr="width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;">long-style-content</button>
+        <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS42MjQ3IDYuNzc2NDhDMC45Njk5MzIgNy4zMDYyNSAwIDYuODM0NzcgMCA1Ljk4NjcyVjBMMTAgMS4wNjEwMWUtMDZMMS42MjQ3IDYuNzc2NDhaIiBmaWxsPSIjMjIyMjIyIiBmaWxsLW9wYWNpdHk9IjAuOTgiLz4KPC9zdmc+Cg==" />
+        <button
+            very-long-attr="width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;width: 100px; height: 100px; background-color: #ccc;">long-style-content</button>
 
     </div>
 
@@ -238,7 +273,8 @@ <h3>Form</h3>
     <div class="parent-container">
         <div class="child-container">Content 1</div>
         <div class="child-container-2">
-            <div class="child-container-without-content-2-1" style="width: 100px; height: 100px; background-color: #ccc;"></div>
+            <div class="child-container-without-content-2-1"
+                style="width: 100px; height: 100px; background-color: #ccc;"></div>
             <div>
                 <div>
                     <span>Content 2</span>
diff --git a/packages/web-integration/tests/unit-test/fixtures/web-extractor/input.png b/packages/web-integration/tests/unit-test/fixtures/web-extractor/input.png
index 9c89affc3..b041762ab 100644
Binary files a/packages/web-integration/tests/unit-test/fixtures/web-extractor/input.png and b/packages/web-integration/tests/unit-test/fixtures/web-extractor/input.png differ
diff --git a/packages/web-integration/tests/unit-test/fixtures/web-extractor/output.png b/packages/web-integration/tests/unit-test/fixtures/web-extractor/output.png
index 985aad6b2..b6cce4ac5 100644
Binary files a/packages/web-integration/tests/unit-test/fixtures/web-extractor/output.png and b/packages/web-integration/tests/unit-test/fixtures/web-extractor/output.png differ
diff --git a/packages/web-integration/tests/unit-test/fixtures/web-extractor/scroll/input.png b/packages/web-integration/tests/unit-test/fixtures/web-extractor/scroll/input.png
index 753b1d86c..7660709e6 100644
Binary files a/packages/web-integration/tests/unit-test/fixtures/web-extractor/scroll/input.png and b/packages/web-integration/tests/unit-test/fixtures/web-extractor/scroll/input.png differ
diff --git a/packages/web-integration/tests/unit-test/fixtures/web-extractor/scroll/output.png b/packages/web-integration/tests/unit-test/fixtures/web-extractor/scroll/output.png
index 42dea3688..d566a5262 100644
Binary files a/packages/web-integration/tests/unit-test/fixtures/web-extractor/scroll/output.png and b/packages/web-integration/tests/unit-test/fixtures/web-extractor/scroll/output.png differ