npm - page-analyzer - Versions diffs - 1.1.1 → 1.2.0 - Mend

page-analyzer 1.1.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +33 -0
package/index.js +42 -38
package/package.json +2 -1
package/page-extractor.js +228 -49
package/result-viewer.html +214 -29
package/scripts/build-result-viewer.js +214 -29
package/test/smoke.test.js +242 -1

package/scripts/build-result-viewer.js CHANGED Viewed

@@ -11,6 +11,7 @@ const html = `<!doctype html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" href="data:,">
   <title>Page Analyzer Result Viewer</title>
   <style>
     :root {
@@ -116,12 +117,28 @@ const html = `<!doctype html>
       color: var(--missing);
     }
+    .url-loader,
     .file-loader {
       display: grid;
       gap: 8px;
       margin-top: 8px;
     }
+    .url-loader label,
+    .file-loader span {
+      color: var(--muted);
+      font-size: 11px;
+      font-weight: 800;
+      text-transform: uppercase;
+    }
+    .url-row {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 8px;
+    }
+    .url-loader input,
     .file-loader input {
       width: 100%;
       border: 1px solid var(--line);
@@ -131,6 +148,16 @@ const html = `<!doctype html>
       font-size: 12px;
     }
+    .url-loader button {
+      min-width: 68px;
+      border: 1px solid var(--ink);
+      background: var(--ink);
+      color: white;
+      padding: 0 12px;
+      cursor: pointer;
+      font-size: 12px;
+    }
     .metrics {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -530,7 +557,14 @@ const html = `<!doctype html>
         <h1>Block Review</h1>
         <div class="title" id="page-title"></div>
         <div class="load-state" id="load-state">Loading result.json...</div>
-        <label class="file-loader" id="file-loader" hidden>
+        <form class="url-loader" id="url-loader">
+          <label for="result-url">Result JSON URL</label>
+          <div class="url-row">
+            <input id="result-url" type="text" inputmode="url" autocomplete="url" placeholder="https://example.com/result.json">
+            <button type="submit">Load</button>
+          </div>
+        </form>
+        <label class="file-loader" id="file-loader">
           <span>Choose result.json manually</span>
           <input id="result-file" type="file" accept="application/json,.json">
         </label>
@@ -606,6 +640,9 @@ const html = `<!doctype html>
     let selectedIndex = 0;
     let activeFilter = 'all';
     let query = '';
+    let resultSourceUrl = '';
+    const DEFAULT_RESULT_URL = './result.json';
     const els = {
       pageTitle: document.getElementById('page-title'),
@@ -622,13 +659,36 @@ const html = `<!doctype html>
       fullPageLink: document.getElementById('full-page-link'),
       loadState: document.getElementById('load-state'),
       fileLoader: document.getElementById('file-loader'),
-      resultFile: document.getElementById('result-file')
+      resultFile: document.getElementById('result-file'),
+      urlLoader: document.getElementById('url-loader'),
+      resultUrl: document.getElementById('result-url')
     };
+    function asArray(value) {
+      if (Array.isArray(value)) return value;
+      if (value === undefined || value === null || value === '') return [];
+      return [value];
+    }
+    function isLikelyLocalAbsolutePath(value) {
+      return /^\\/(Users|Volumes|Applications|System|Library|private|tmp|var|home)\\//.test(value);
+    }
     function pathToUrl(value) {
-      const text = String(value || '');
+      const text = String(value || '').trim();
       if (!text) return '';
-      if (/^(https?:|file:|data:)/i.test(text)) return text;
+      if (/^(https?:|file:|data:|blob:)/i.test(text)) return text;
+      if (resultSourceUrl && /^(https?:|file:)/i.test(resultSourceUrl)) {
+        const shouldResolveFromSource = !text.startsWith('/') ||
+          (/^https?:/i.test(resultSourceUrl) && !isLikelyLocalAbsolutePath(text));
+        if (shouldResolveFromSource) {
+          try {
+            return new URL(text, resultSourceUrl).href;
+          } catch {
+            // Fall through to local snapshot handling.
+          }
+        }
+      }
       const snapshotIndex = text.lastIndexOf('/snapshots/');
       if (snapshotIndex >= 0) {
         return encodeURI('./snapshots/' + text.slice(snapshotIndex + '/snapshots/'.length));
@@ -638,7 +698,7 @@ const html = `<!doctype html>
     }
     function getShot(block, index) {
-      const direct = Array.isArray(block.blockScreenshotPaths) ? block.blockScreenshotPaths[0] : '';
+      const direct = asArray(block.blockScreenshotPaths)[0] || block.blockScreenshotPath || block.screenshotPath || '';
       if (direct) return { path: direct };
       return screenshotByBlockIdx.get(index) || null;
     }
@@ -659,8 +719,9 @@ const html = `<!doctype html>
         block.blockDescription,
         block.blockCssPath,
         block.blockIdxs,
-        ...(block.blockSemantics || []),
-        ...(block.blockPossibleEvents || [])
+        ...asArray(block.blockSemantics),
+        ...asArray(block.blockPossibleEvents),
+        ...asArray(block.blockSemanticGroups).map((item) => JSON.stringify(item))
       ].join(' ').toLowerCase();
       return haystack.includes(query.toLowerCase());
     }
@@ -678,11 +739,24 @@ const html = `<!doctype html>
         .filter(({ block, index }) => textMatches(block, index) && isVisibleByFilter(block, index));
     }
+    function screenshotCount() {
+      const paths = new Set();
+      for (const item of screenshotRows) {
+        if (item?.path) paths.add(item.path);
+      }
+      for (const block of blocks) {
+        for (const path of asArray(block.blockScreenshotPaths)) {
+          if (path) paths.add(path);
+        }
+      }
+      return paths.size;
+    }
     function renderMetrics() {
       const stats = data.analysis?.block_analysis?.stats || {};
       const metrics = [
         ['Blocks', blocks.length],
-        ['Screenshots', screenshotRows.length],
+        ['Screenshots', screenshotCount()],
         ['Elements', data.parseMetrics?.elementsCount || 0],
         ['Parse ms', data.parseMetrics?.parseMs || 0]
       ];
@@ -698,6 +772,10 @@ const html = `<!doctype html>
     function renderList() {
       const rows = visibleBlocks();
+      if (!rows.length) {
+        els.list.innerHTML = '<div class="load-state">No blocks match the current search or filter.</div>';
+        return;
+      }
       els.list.innerHTML = rows.map(({ block, index }) => {
         const hasShot = Boolean(getShot(block, index));
         const status = hasShot ? 'shot' : 'no shot';
@@ -715,7 +793,12 @@ const html = `<!doctype html>
     }
     function renderAllBlocks() {
-      els.allBlocks.innerHTML = visibleBlocks().map(({ block, index }) => {
+      const rows = visibleBlocks();
+      if (!rows.length) {
+        els.allBlocks.innerHTML = '<div class="missing-shot">No blocks to show.</div>';
+        return;
+      }
+      els.allBlocks.innerHTML = rows.map(({ block, index }) => {
         const shot = getShot(block, index);
         const image = shot
           ? '<img src="' + pathToUrl(shot.path) + '" alt="Screenshot for block ' + index + '">'
@@ -736,6 +819,18 @@ const html = `<!doctype html>
     }
     function renderSelected() {
+      if (!blocks.length) {
+        els.selectedTitle.textContent = 'No blocks found';
+        els.selectedDescription.textContent = 'Loaded JSON does not contain block analysis rows.';
+        els.copySelector.disabled = true;
+        els.fullPageLink.href = pathToUrl(data.screenshots?.fullPage || '');
+        els.fullPageLink.style.display = data.screenshots?.fullPage ? 'inline-flex' : 'none';
+        els.screenshot.innerHTML = '<div class="missing-shot">Load a Page Analyzer result with analysis.block_analysis.blocks.</div>';
+        els.info.innerHTML = '';
+        els.raw.textContent = JSON.stringify(data, null, 2);
+        return;
+      }
+      if (!blocks[selectedIndex]) selectedIndex = 0;
       const block = blocks[selectedIndex] || {};
       const shot = getShot(block, selectedIndex);
       els.selectedTitle.textContent = '#' + selectedIndex + ' ' + (block.blockName || 'Unnamed block');
@@ -753,9 +848,9 @@ const html = `<!doctype html>
           '<div class="missing-shot">No screenshot was generated for this block.<br>Most likely the selector was empty, hidden, or not screenshotable.</div>';
       }
-      const semantics = block.blockSemantics || [];
-      const events = block.blockPossibleEvents || [];
-      const groups = block.blockSemanticGroups || [];
+      const semantics = asArray(block.blockSemantics);
+      const events = asArray(block.blockPossibleEvents);
+      const groups = asArray(block.blockSemanticGroups);
       els.info.innerHTML = [
         info('Block name', block.blockName || 'n/a'),
         info('Block idxs', block.blockIdxs || String(selectedIndex)),
@@ -831,44 +926,132 @@ const html = `<!doctype html>
       els.loadState.classList.toggle('error', isError);
     }
-    function initialize(nextData, sourceLabel) {
+    function getBlocks(nextData) {
+      const candidates = [
+        nextData?.analysis?.block_analysis?.blocks,
+        nextData?.block_analysis?.blocks,
+        nextData?.analysis?.blocks,
+        nextData?.blocks
+      ];
+      return candidates.find(Array.isArray) || [];
+    }
+    function getScreenshotRows(nextData) {
+      const rows = nextData?.screenshots?.blocks || nextData?.blockScreenshots || [];
+      if (Array.isArray(rows)) {
+        return rows
+          .map((item, index) => typeof item === 'string' ? { blockIdx: index, path: item } : item)
+          .filter((item) => item && item.path);
+      }
+      if (rows && typeof rows === 'object') {
+        return Object.entries(rows).map(([blockIdx, path]) => ({ blockIdx, path }));
+      }
+      return [];
+    }
+    function buildScreenshotMap(rows) {
+      return new Map(rows.map((item, index) => [
+        Number(item.blockIdx ?? item.blockIndex ?? item.index ?? index),
+        item
+      ]));
+    }
+    function sourceLabelForUrl(value) {
+      try {
+        const url = new URL(value, window.location.href);
+        return url.pathname.split('/').filter(Boolean).pop() || url.host || value;
+      } catch {
+        return value;
+      }
+    }
+    function normalizeResultUrl(value) {
+      const text = String(value || '').trim();
+      if (!text) {
+        throw new Error('Result JSON URL is empty');
+      }
+      return new URL(text, window.location.href).href;
+    }
+    function getInitialResultUrl() {
+      const params = new URLSearchParams(window.location.search);
+      return params.get('result') || params.get('url') || '';
+    }
+    function rememberResultUrl(value) {
+      const url = new URL(window.location.href);
+      url.searchParams.set('result', value);
+      url.searchParams.delete('url');
+      window.history.replaceState(null, '', url);
+    }
+    function forgetResultUrl() {
+      const url = new URL(window.location.href);
+      url.searchParams.delete('result');
+      url.searchParams.delete('url');
+      window.history.replaceState(null, '', url);
+    }
+    function renderLoadError(error, title = 'result.json not loaded') {
+      if (data) return;
+      els.selectedTitle.textContent = title;
+      els.selectedDescription.textContent = error.message || 'Unknown load error';
+      els.screenshot.innerHTML = '<div class="missing-shot">Load result.json to inspect blocks.</div>';
+      els.info.innerHTML = '';
+      els.raw.textContent = '';
+      els.allBlocks.innerHTML = '';
+      els.list.innerHTML = '';
+      els.metrics.innerHTML = '';
+    }
+    function initialize(nextData, sourceLabel, sourceUrl = '') {
       data = nextData || {};
-      blocks = data.analysis?.block_analysis?.blocks || [];
-      screenshotRows = data.screenshots?.blocks || [];
-      screenshotByBlockIdx = new Map(screenshotRows.map((item) => [Number(item.blockIdx), item]));
+      resultSourceUrl = sourceUrl ? normalizeResultUrl(sourceUrl) : '';
+      blocks = getBlocks(data);
+      screenshotRows = getScreenshotRows(data);
+      screenshotByBlockIdx = buildScreenshotMap(screenshotRows);
       selectedIndex = 0;
       query = '';
       els.search.value = '';
       els.pageTitle.textContent = data.title || 'Untitled page';
-      setLoadState(sourceLabel + ' loaded. ' + blocks.length + ' blocks, ' + screenshotRows.length + ' screenshots.');
-      els.fileLoader.hidden = true;
+      setLoadState(sourceLabel + ' loaded. ' + blocks.length + ' blocks, ' + screenshotCount() + ' screenshots.');
       renderMetrics();
       renderList();
       renderAllBlocks();
       renderSelected();
     }
-    async function loadResultJson() {
+    async function loadResultFromUrl(rawUrl, updateAddress = false) {
+      const resolvedUrl = normalizeResultUrl(rawUrl);
+      els.resultUrl.value = rawUrl;
+      setLoadState('Loading ' + rawUrl + '...');
       try {
-        const response = await fetch('./result.json', { cache: 'no-store' });
+        const response = await fetch(resolvedUrl, { cache: 'no-store' });
         if (!response.ok) {
-          throw new Error('HTTP ' + response.status + ' while loading result.json');
+          throw new Error('HTTP ' + response.status + ' while loading result JSON');
         }
-        initialize(await response.json(), 'result.json');
+        initialize(await response.json(), sourceLabelForUrl(rawUrl), resolvedUrl);
+        if (updateAddress) rememberResultUrl(rawUrl);
       } catch (error) {
         setLoadState(
-          'Could not load ./result.json automatically. If this page is opened with file://, your browser may block local JSON reads. Use the picker below or serve this folder locally.',
+          'Could not load ' + rawUrl + '. ' + (error.message || 'Unknown load error') + '. Remote URLs must allow browser CORS access.',
           true
         );
-        els.fileLoader.hidden = false;
-        els.selectedTitle.textContent = 'result.json not loaded';
-        els.selectedDescription.textContent = error.message || 'Unknown load error';
-        els.screenshot.innerHTML = '<div class="missing-shot">Load result.json to inspect blocks.</div>';
-        els.info.innerHTML = '';
-        els.raw.textContent = '';
+        renderLoadError(error);
       }
     }
+    async function loadResultJson() {
+      const initialUrl = getInitialResultUrl() || DEFAULT_RESULT_URL;
+      els.resultUrl.value = initialUrl;
+      await loadResultFromUrl(initialUrl);
+    }
+    els.urlLoader.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      await loadResultFromUrl(els.resultUrl.value, true);
+    });
     els.resultFile.addEventListener('change', async () => {
       const file = els.resultFile.files?.[0];
       if (!file) {
@@ -876,6 +1059,8 @@ const html = `<!doctype html>
       }
       try {
         initialize(JSON.parse(await file.text()), file.name);
+        els.resultUrl.value = '';
+        forgetResultUrl();
       } catch (error) {
         setLoadState('Could not parse selected JSON: ' + error.message, true);
       }

package/test/smoke.test.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import assert from 'node:assert/strict';
 import { EventAnalyzer } from '../llm/analyzers/event-analyzer/event-analyzer.js';
 import { buildBlockAnalysisArtifact } from '../llm/analyzers/event-analyzer/event-analyzer-blocks.js';
+import { OpenAiProvider } from '../llm/providers/openai-provider.js';
 import { PageExtractor } from '../page-extractor.js';
-import '../index.js';
+import { analyzeUrl } from '../index.js';
 class FakeProvider {
   constructor() {
@@ -44,6 +45,7 @@ class FakeLocator {
     if (this.throwOnScreenshot) {
       throw new Error('selector screenshot failed');
     }
+    return Buffer.from(`locator screenshot:${options?.path || 'buffer'}`);
   }
 }
@@ -67,6 +69,28 @@ class FakePage {
   async screenshot(options) {
     this.pageScreenshots.push(options);
+    return Buffer.from(`page screenshot:${options?.path || 'buffer'}`);
+  }
+}
+class FakeS3Client {
+  constructor({ failPredicate = null } = {}) {
+    this.failPredicate = failPredicate;
+    this.commands = [];
+    this.attemptsByKey = new Map();
+  }
+  async send(command) {
+    const input = command.input;
+    this.commands.push(input);
+    const attempts = (this.attemptsByKey.get(input.Key) || 0) + 1;
+    this.attemptsByKey.set(input.Key, attempts);
+    if (this.failPredicate?.(input, attempts)) {
+      throw new Error(`s3 upload failed for ${input.Key}`);
+    }
+    return {};
   }
 }
@@ -117,6 +141,104 @@ async function analyzeWith(options = {}) {
   assert.equal(result.events_by_node[0].event_type, 'signup');
 }
+{
+  const originalWithPreparedPage = PageExtractor.prototype.withPreparedPage;
+  const originalExtractPreparedPage = PageExtractor.prototype.extractPreparedPage;
+  const originalCaptureScreenshots = PageExtractor.prototype.captureScreenshots;
+  const originalCaptureUrlScreenshots = PageExtractor.prototype.captureUrlScreenshots;
+  const originalAnalyze = OpenAiProvider.prototype.analyze;
+  const calls = [];
+  const fakePage = { pageId: 'prepared-page' };
+  PageExtractor.prototype.withPreparedPage = async function withPreparedPage(inputUrl, callback) {
+    calls.push(['withPreparedPage', inputUrl]);
+    return await callback(fakePage, String(inputUrl || '').trim());
+  };
+  PageExtractor.prototype.extractPreparedPage = async function extractPreparedPage(page, targetUrl) {
+    calls.push(['extractPreparedPage', page, targetUrl]);
+    assert.equal(page, fakePage);
+    return {
+      html: [
+        '<!doctype html><html><head><title>Demo</title></head><body>',
+        '<main><section><a href="/signup">Sign up</a></section></main>',
+        '</body></html>'
+      ].join(''),
+      blocks: [{
+        blockIdx: 0,
+        blockCssPath: 'body > main:nth-of-type(1) > section:nth-of-type(1)',
+        top: 0,
+        left: 0,
+        width: 1000,
+        height: 200,
+        textPreview: 'Sign up'
+      }],
+      elementGeometries: [{
+        tag: 'a',
+        text: 'Sign up',
+        href: 'https://example.com/signup',
+        top: 0,
+        left: 0,
+        width: 80,
+        height: 24,
+        selectorNthOfType: 'body > main:nth-of-type(1) > section:nth-of-type(1) > a:nth-of-type(1)'
+      }],
+      screenshots: { fullPage: '/tmp/full-page.png' },
+      pageSize: { width: 1000, height: 800 }
+    };
+  };
+  PageExtractor.prototype.captureScreenshots = async function captureScreenshots(page, targetUrl, screenshotBlocks, options) {
+    calls.push(['captureScreenshots', page, targetUrl, screenshotBlocks.length, options]);
+    assert.equal(page, fakePage);
+    return {
+      blocks: screenshotBlocks.map((_block, index) => ({
+        blockIdx: index,
+        path: `/tmp/logical-block-${index}.png`
+      }))
+    };
+  };
+  PageExtractor.prototype.captureUrlScreenshots = async function captureUrlScreenshots() {
+    calls.push(['captureUrlScreenshots']);
+    throw new Error('captureUrlScreenshots should not be called by analyzeUrl block screenshots');
+  };
+  OpenAiProvider.prototype.analyze = async function analyze(prompt) {
+    calls.push(['llm', prompt.includes('DOM CSV') ? 'event' : 'special']);
+    return [
+      'Demo page with a primary CTA',
+      'blockIdxs,blockName,blockDescription,blockPossibleEvents',
+      '0,CTASection,Primary CTA section,signup.cta_click'
+    ].join('\n');
+  };
+  try {
+    const result = await analyzeUrl(' https://example.com/demo ', {
+      llm: {
+        apiKey: 'test-key',
+        apiEndpoint: 'https://llm.example.invalid/v1/chat/completions',
+        model: 'test-model'
+      },
+      fullPageScreenshot: true,
+      blockScreenshots: true,
+      showBlockIdx: true
+    });
+    assert.equal(calls.filter((call) => call[0] === 'withPreparedPage').length, 1);
+    assert.equal(calls.some((call) => call[0] === 'captureUrlScreenshots'), false);
+    assert.equal(calls.filter((call) => call[0] === 'captureScreenshots').length, 1);
+    assert.equal(result.screenshots.fullPage, '/tmp/full-page.png');
+    assert.equal(result.screenshots.blocks[0].path, '/tmp/logical-block-0.png');
+    assert.equal(
+      result.analysis.block_analysis.blocks[0].blockScreenshotPaths[0],
+      '/tmp/logical-block-0.png'
+    );
+  } finally {
+    PageExtractor.prototype.withPreparedPage = originalWithPreparedPage;
+    PageExtractor.prototype.extractPreparedPage = originalExtractPreparedPage;
+    PageExtractor.prototype.captureScreenshots = originalCaptureScreenshots;
+    PageExtractor.prototype.captureUrlScreenshots = originalCaptureUrlScreenshots;
+    OpenAiProvider.prototype.analyze = originalAnalyze;
+  }
+}
 {
   const extractor = new PageExtractor();
   const locator = new FakeLocator({ count: 0 });
@@ -191,6 +313,125 @@ async function analyzeWith(options = {}) {
   assert.equal(page.pageScreenshots.length, 0);
 }
+{
+  assert.throws(
+    () => new PageExtractor({ s3: { region: 'ap-northeast-1' } }),
+    /extractorConfig\.s3\.bucket is required/
+  );
+  assert.throws(
+    () => new PageExtractor({ s3: { bucket: 'page-analyzer-test' } }),
+    /extractorConfig\.s3\.region is required/
+  );
+}
+{
+  const s3Client = new FakeS3Client();
+  const extractor = new PageExtractor({
+    s3: {
+      bucket: 'page-analyzer-test',
+      region: 'ap-northeast-1',
+      prefix: '/page-analyzer/snapshots/',
+      publicBaseUrl: 'https://cdn.example.com/page-analyzer/snapshots/',
+      client: s3Client
+    }
+  });
+  const locator = new FakeLocator();
+  const page = new FakePage(locator);
+  const screenshots = await extractor.captureScreenshots(page, 'https://example.com/demo', [
+    { blockName: 'Hero', blockCssPath: '#hero' }
+  ], {
+    fullPageScreenshot: true,
+    blockScreenshots: true
+  });
+  assert.equal(page.pageScreenshots.length, 1);
+  assert.deepEqual(page.pageScreenshots[0], { fullPage: true });
+  assert.equal(locator.screenshots.length, 1);
+  assert.deepEqual(locator.screenshots[0], {});
+  assert.equal(s3Client.commands.length, 2);
+  const [fullPageUpload, blockUpload] = s3Client.commands;
+  assert.equal(fullPageUpload.Bucket, 'page-analyzer-test');
+  assert.equal(fullPageUpload.ContentType, 'image/png');
+  assert.equal(Buffer.isBuffer(fullPageUpload.Body), true);
+  assert.match(fullPageUpload.Key, /^page-analyzer\/snapshots\/example-com-demo-.*-full-page\.png$/);
+  assert.match(blockUpload.Key, /^page-analyzer\/snapshots\/example-com-demo-.*-block-000\.png$/);
+  const fullPageFilename = fullPageUpload.Key.split('/').pop();
+  const blockFilename = blockUpload.Key.split('/').pop();
+  assert.equal(
+    screenshots.fullPage,
+    `https://cdn.example.com/page-analyzer/snapshots/${fullPageFilename}`
+  );
+  assert.equal(screenshots.blocks[0].path, `https://cdn.example.com/page-analyzer/snapshots/${blockFilename}`);
+}
+{
+  const s3Client = new FakeS3Client();
+  const extractor = new PageExtractor({
+    s3: {
+      bucket: 'page-analyzer-test',
+      region: 'ap-northeast-1',
+      prefix: 'nested/prefix',
+      client: s3Client
+    }
+  });
+  const locator = new FakeLocator();
+  const page = new FakePage(locator);
+  const screenshots = await extractor.captureScreenshots(page, 'https://example.com/demo', [
+    { blockName: 'Hero', blockCssPath: '#hero' }
+  ], {
+    fullPageScreenshot: false,
+    blockScreenshots: true
+  });
+  const uploadedKey = s3Client.commands[0].Key;
+  assert.match(uploadedKey, /^nested\/prefix\/example-com-demo-.*-block-000\.png$/);
+  assert.equal(
+    screenshots.blocks[0].path,
+    `https://page-analyzer-test.s3.ap-northeast-1.amazonaws.com/${uploadedKey}`
+  );
+}
+{
+  const originalWarn = console.warn;
+  const warnings = [];
+  console.warn = (message) => warnings.push(message);
+  try {
+    const s3Client = new FakeS3Client({
+      failPredicate: (input) => input.Key.endsWith('-block-000.png')
+    });
+    const extractor = new PageExtractor({
+      s3: {
+        bucket: 'page-analyzer-test',
+        region: 'ap-northeast-1',
+        prefix: 'page-analyzer/snapshots',
+        publicBaseUrl: 'https://cdn.example.com/page-analyzer/snapshots',
+        client: s3Client
+      }
+    });
+    const locator = new FakeLocator();
+    const page = new FakePage(locator);
+    const screenshots = await extractor.captureScreenshots(page, 'https://example.com/demo', [
+      { blockName: 'Hero', blockCssPath: '#hero' },
+      { blockName: 'Footer', blockCssPath: '#footer' }
+    ], {
+      fullPageScreenshot: false,
+      blockScreenshots: true
+    });
+    assert.equal(screenshots.blocks.length, 1);
+    assert.equal(screenshots.blocks[0].blockIdx, 1);
+    assert.equal(s3Client.commands.filter((input) => input.Key.endsWith('-block-000.png')).length, 3);
+    assert.equal(s3Client.commands.filter((input) => input.Key.endsWith('-block-001.png')).length, 1);
+    assert.equal(warnings.some((message) => message.includes('retrying')), true);
+    assert.equal(warnings.some((message) => message.includes('Failed to capture/upload block 0')), true);
+  } finally {
+    console.warn = originalWarn;
+  }
+}
 {
   const artifact = buildBlockAnalysisArtifact('Demo', [{
     blockIdx: 3,