@imwz/wp-pattern-sentinel 1.1.3 → 1.1.4

package/README.md

@@ -125,7 +125,7 @@ node bin/sentinel.js --verbose --url=... path/to/patterns/
 | `--concurrency` | `4` | Parallel workers |
 | `--json` | `false` | Output JSON (one result per line) |
 | `--keep-page` | `false` | Don't delete draft pages after validation |
-| `--verbose` | `false` | Show detailed step-by-step progress for each pattern |
+| `--verbose` | `false` | Show detailed step-by-step progress for each pattern, with the time each step took |
 | `--width` | `1280` | Viewport width |
 | `--height` | `800` | Viewport height |
 | `--cache` | `false` | Skip patterns that previously passed with the same file content (see [Pass cache](#pass-cache)) |
@@ -231,3 +231,5 @@ npx wp-pattern-sentinel --url=http://imagewize.test --user=admin --pass=secret p
 
 - `0` — all patterns passed
 - `1` — one or more patterns failed
+
+A `page_creation_error` means the block editor didn't load, so the pattern was never tested. This happens when several workers load the editor at once on a small PHP-FPM pool (e.g. Laravel Valet) and some editor scripts return 502. Sentinel detects this as soon as the page loads and retries up to three times, with a randomized delay, before giving up. The summary counts these failures as infrastructure errors, separate from validation failures. They still exit with `1`. If they keep happening, lower `--concurrency`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imwz/wp-pattern-sentinel",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Browser-based WordPress block pattern validator using Playwright",
   "type": "module",
   "engines": {

package/src/editor.js

@@ -61,46 +61,94 @@ export function extractBlockContent(fileContent) {
   return stripPhpForValidation(stripped);
 }
 
+const PAGE_CREATION_RETRY_DELAYS = [3_000, 8_000, 15_000]; // ms before retries 1, 2, 3 (plus jitter)
+
 /**
- * Navigate to a new draft page and return its post ID.
+ * Navigate to a new draft page and return its post ID, or null on failure.
  * WordPress redirects post-new.php → post.php?post=ID&action=edit,
  * so we can read the ID directly from the final URL.
+ *
+ * When several workers open post-new.php at once, each cold editor requests
+ * ~150 scripts. On a small local PHP-FPM pool (Laravel Valet routes even
+ * static files through PHP) the socket backlog overflows and some scripts
+ * come back 502, so the editor never boots (#21). That's an infrastructure
+ * error, not a pattern failure: detect it as soon as the document has loaded
+ * and retry after a jittered backoff, so workers don't collide again.
  */
 export async function createDraftPage(page, baseUrl, verbose = false) {
+  for (let attempt = 0; attempt <= PAGE_CREATION_RETRY_DELAYS.length; attempt++) {
+    if (attempt > 0) {
+      const base  = PAGE_CREATION_RETRY_DELAYS[attempt - 1];
+      const delay = base + Math.round(Math.random() * base);
+      log(`    Editor load failed — waiting ${(delay / 1000).toFixed(1)}s before retry ${attempt}/${PAGE_CREATION_RETRY_DELAYS.length}...`, 'yellow');
+      await new Promise(resolve => setTimeout(resolve, delay));
+    }
+
+    try {
+      return await attemptCreateDraftPage(page, baseUrl, verbose);
+    } catch (error) {
+      const shortMsg = error.message.split('\n')[0];
+      if (attempt < PAGE_CREATION_RETRY_DELAYS.length) {
+        log(`    Draft page attempt ${attempt + 1} failed: ${shortMsg}`, 'yellow');
+      } else {
+        log(`Failed to create draft page after ${attempt + 1} attempts: ${error.message}`, 'red');
+      }
+    }
+  }
+  return null;
+}
+
+async function attemptCreateDraftPage(page, baseUrl, verbose) {
+  const start = Date.now();
+  if (verbose) log('    → Creating draft page...', 'gray');
+
+  // Editor scripts are parser-blocking, so every one has responded by
+  // domcontentloaded. A server error on any of them means the editor can't
+  // boot — fail now instead of waiting out the selector timeout.
+  const brokenScripts = [];
+  const onResponse = response => {
+    if (response.status() >= 500 && response.request().resourceType() === 'script') {
+      brokenScripts.push(response.status());
+    }
+  };
+  page.on('response', onResponse);
   try {
-    if (verbose) log('    → Creating draft page...', 'gray');
     await page.goto(`${baseUrl}/wp-admin/post-new.php?post_type=page`, {
       waitUntil: 'domcontentloaded',
-      timeout: 30000,
-    });
-
-    await page.waitForSelector('.edit-post-layout, .editor-styles-wrapper', {
-      timeout: 30000,
     });
+  } finally {
+    page.off('response', onResponse);
+  }
+  if (brokenScripts.length > 0) {
+    throw new Error(
+      `${brokenScripts.length} editor script(s) failed to load (HTTP ${[...new Set(brokenScripts)].join(', ')}) — server overloaded`
+    );
+  }
+  if (verbose) log(`    → post-new.php loaded (${Date.now() - start}ms)`, 'gray');
 
-    const url = page.url();
-    const match = url.match(/[?&]post=(\d+)/);
-    if (match) {
-      if (verbose) log('    → Draft page created', 'gray');
-      return parseInt(match[1], 10);
-    }
+  await page.waitForSelector('.edit-post-layout, .editor-styles-wrapper');
 
-    // Fallback: read from wp.data (editor may not have redirected yet)
-    const pageId = await page.evaluate(() =>
-      window.wp?.data?.select('core/editor')?.getCurrentPostId?.() ?? null
-    );
-    if (verbose && pageId) log('    → Draft page created', 'gray');
-    return pageId;
-  } catch (error) {
-    log(`Failed to create draft page: ${error.message}`, 'red');
-    return null;
+  const url = page.url();
+  const match = url.match(/[?&]post=(\d+)/);
+  if (match) {
+    if (verbose) log(`    → Draft page created (${Date.now() - start}ms)`, 'gray');
+    return parseInt(match[1], 10);
   }
+
+  // Fallback: read from wp.data (editor may not have redirected yet)
+  const pageId = await page.evaluate(() =>
+    window.wp?.data?.select('core/editor')?.getCurrentPostId?.() ?? null
+  );
+  if (pageId === null) throw new Error('Editor loaded but no post ID was found');
+  if (verbose) log(`    → Draft page created (${Date.now() - start}ms)`, 'gray');
+  return pageId;
 }
 
 /**
  * Set the editor content via wp.data and wait for blocks to parse.
  */
 export async function insertPatternIntoEditor(page, blockContent, verbose = false) {
+  const start = Date.now();
   try {
     if (verbose) log('    → Inserting pattern into editor...', 'gray');
     await page.evaluate(content => {
@@ -110,10 +158,11 @@ export async function insertPatternIntoEditor(page, blockContent, verbose = fals
     // Wait until at least one block is present
     await page.waitForFunction(
       () => window.wp.data.select('core/block-editor').getBlocks().length > 0,
+      null,
       { timeout: 15000 }
     );
 
-    if (verbose) log('    → Pattern inserted', 'gray');
+    if (verbose) log(`    → Pattern inserted (${Date.now() - start}ms)`, 'gray');
     return true;
   } catch (error) {
     log(`Failed to insert pattern: ${error.message}`, 'red');
@@ -126,24 +175,24 @@ export async function insertPatternIntoEditor(page, blockContent, verbose = fals
  */
 export async function savePage(page, verbose = false) {
   const result = { success: false, errors: [], warnings: [] };
+  const start  = Date.now();
   try {
     if (verbose) log('    → Saving page...', 'gray');
+    // savePost() resolves once the save request and its hooks have finished,
+    // and evaluate() awaits it — so isSavingPost() is already false here.
+    // Don't wait for the save to *start*: that condition never becomes true
+    // again and the wait runs to its full timeout (the 60s stall in #21).
     await page.evaluate(() => window.wp.data.dispatch('core/editor').savePost());
 
-    // Wait for save to start, then finish
-    await page
-      .waitForFunction(
-        () => window.wp.data.select('core/editor').isSavingPost(),
-        { timeout: 5000 }
-      )
-      .catch(() => {}); // save might be near-instant
-
+    // waitForFunction's second parameter is the page-function arg, so options
+    // must go third — passed second, the timeout is silently ignored.
     await page.waitForFunction(
       () => !window.wp.data.select('core/editor').isSavingPost(),
+      null,
       { timeout: 30000 }
     );
 
-    if (verbose) log('    → Page saved', 'gray');
+    if (verbose) log(`    → Page saved (${Date.now() - start}ms)`, 'gray');
     result.success = true;
   } catch (error) {
     result.errors.push({ type: 'save_error', message: error.message });
@@ -156,6 +205,7 @@ export async function savePage(page, verbose = false) {
  * Non-fatal — a failure here does not affect validation results.
  */
 export async function deletePage(page, baseUrl, pageId, verbose = false) {
+  const start = Date.now();
   try {
     if (verbose) log('    → Deleting draft page...', 'gray');
     await page.evaluate(async id => {
@@ -165,7 +215,7 @@ export async function deletePage(page, baseUrl, pageId, verbose = false) {
         headers: { 'X-WP-Nonce': nonce },
       });
     }, pageId);
-    if (verbose) log('    → Draft page deleted', 'gray');
+    if (verbose) log(`    → Draft page deleted (${Date.now() - start}ms)`, 'gray');
   } catch {
     // Non-fatal
   }

package/src/format.js

@@ -7,6 +7,14 @@ const C = {
   gray:   '\x1b[90m',
 };
 
+/**
+ * Error types that mean the pattern could not be tested at all (the editor
+ * never loaded), as opposed to the pattern failing validation.
+ */
+const INFRA_ERRORS = new Set(['page_creation_error']);
+
+const isInfraFailure = r => !r.passed && r.errors.some(e => INFRA_ERRORS.has(e.type));
+
 export function log(message, color = 'reset') {
   console.log(`${C[color] ?? C.reset}${message}${C.reset}`);
 }
@@ -31,6 +39,7 @@ export function formatResult(result) {
 export function printSummary(results, skipped = 0) {
   const passed       = results.filter(r => r.passed).length;
   const failed       = results.filter(r => !r.passed).length;
+  const infra        = results.filter(isInfraFailure).length;
   const totalErrors  = results.reduce((n, r) => n + r.errors.length, 0);
   const totalWarns   = results.reduce((n, r) => n + r.warnings.length, 0);
   const totalMs      = results.reduce((n, r) => n + r.duration, 0);
@@ -43,6 +52,9 @@ export function printSummary(results, skipped = 0) {
   if (skipped > 0) log(`Skipped   : ${skipped} (cached)`, 'gray');
   log(`Passed    : ${passed}`,       passed      > 0 ? 'green'  : 'gray');
   log(`Failed    : ${failed}`,       failed      > 0 ? 'red'    : 'gray');
+  if (infra > 0) {
+    log(`  of which : ${infra} infrastructure (editor did not load — re-run, or lower --concurrency)`, 'yellow');
+  }
   log(`Errors    : ${totalErrors}`,  totalErrors > 0 ? 'red'    : 'gray');
   log(`Warnings  : ${totalWarns}`,   totalWarns  > 0 ? 'yellow' : 'gray');
   log(`Time      : ${totalMs}ms  (avg ${avgMs}ms/pattern)`);

package/src/main.js

@@ -201,7 +201,7 @@ async function validatePatternFile(patternPath, options, context) {
   try {
     const pageId = await createDraftPage(page, options.adminUrl, verbose);
     if (pageId === null) {
-      return fail(patternName, patternPath, startTime, 'page_creation_error', 'Failed to create test page');
+      return fail(patternName, patternPath, startTime, 'page_creation_error', 'Editor did not load after retries — not a pattern problem; re-run or lower --concurrency');
     }
 
     const refErrors = await checkPatternRefs(page, slugs, verbose);

package/src/validation.js

@@ -4,6 +4,7 @@ import { log } from './format.js';
  * Walk the block tree and collect any blocks where isValid === false.
  */
 export async function checkBlockValidation(page, verbose = false) {
+  const start = Date.now();
   if (verbose) log('    → Checking block validation...', 'gray');
   try {
     const errors = await page.evaluate(() => {
@@ -26,7 +27,7 @@ export async function checkBlockValidation(page, verbose = false) {
       ]);
       return walk(window.wp.data.select('core/block-editor').getBlocks());
     });
-    if (verbose) log('    → Block validation complete', 'gray');
+    if (verbose) log(`    → Block validation complete (${Date.now() - start}ms)`, 'gray');
     return errors;
   } catch (error) {
     log(`Block validation check error: ${error.message}`, 'yellow');
@@ -156,6 +157,7 @@ export async function checkPatternRefs(page, slugs, verbose = false) {
  */
 export async function compareContent(page, originalContent, verbose = false) {
   const result = { matches: true, errors: [], warnings: [], savedContent: null };
+  const start  = Date.now();
 
   try {
     if (verbose) log('    → Comparing content...', 'gray');
@@ -166,7 +168,7 @@ export async function compareContent(page, originalContent, verbose = false) {
 
     const normalize = str => str.replace(/\s+/g, ' ').trim();
     if (normalize(normalizeForComparison(savedContent)) === normalize(normalizeForComparison(originalContent))) {
-      if (verbose) log('    → Content matches', 'gray');
+      if (verbose) log(`    → Content matches (${Date.now() - start}ms)`, 'gray');
       return result;
     }
 
@@ -190,7 +192,7 @@ export async function compareContent(page, originalContent, verbose = false) {
         message: `Content injected by editor:\n    ${added.join('\n    ')}`,
       });
     }
-    if (verbose) log('    → Content comparison complete', 'gray');
+    if (verbose) log(`    → Content comparison complete (${Date.now() - start}ms)`, 'gray');
   } catch (error) {
     result.errors.push({ type: 'comparison_error', message: error.message });
   }