From 4db4b9d694b243317fc68ed6e90595bd1ec71e01 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 6 Jun 2026 13:37:18 -0500
Subject: [PATCH] Scaper fixes - UI website update

---
 PROJECT.md             |  6 +++---
 backend/src/scraper.ts | 18 ++++++++++++------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/PROJECT.md b/PROJECT.md
index 9b5533b..d79db8e 100644
--- a/PROJECT.md
+++ b/PROJECT.md
@@ -42,9 +42,9 @@ The SQLite database is stored on a mounted volume at `/app/data/tracker.db` so i
 ## Key Features
 
 ### Stock Detection
-Puppeteer navigates to each product URL and waits for React hydration (2.5s delay), then scans all `<span>` elements for exact text matches:
-- `"Add to Cart"` → `in_stock`
-- `"Sold Out"` → `sold_out`
+Puppeteer navigates to each product URL and waits for React hydration (2.5s delay), then:
+- `<button label="Add to Cart">` present → `in_stock`
+- Any `<button>` whose text is `"Notify me when available"`, `"Sold Out"`, or `"Out of Stock"` → `sold_out`
 - Neither found → `unknown`
 
 Product name is pulled from the `og:title` meta tag (with Ubiquiti store suffix stripped). Thumbnail is pulled from `og:image`.
diff --git a/backend/src/scraper.ts b/backend/src/scraper.ts
index ca5f321..5da9bf8 100644
--- a/backend/src/scraper.ts
+++ b/backend/src/scraper.ts
@@ -76,12 +76,18 @@ export async function checkStockStatus(url: string): Promise<ScrapeResult> {
     const result = await page.evaluate(() => {
       let status: 'in_stock' | 'sold_out' | 'unknown' = 'unknown';
 
-      // Check all spans for the known button text
-      const spans = document.querySelectorAll('span');
-      for (const span of spans) {
-        const text = span.textContent?.trim();
-        if (text === 'Add to Cart') { status = 'in_stock'; break; }
-        if (text === 'Sold Out') { status = 'sold_out'; break; }
+      // In stock: primary button carries label="Add to Cart" as an attribute.
+      // Why: styled-components class hashes rebuild every deploy, and "Add to Cart"
+      // text alone can appear in related-product cards on the page.
+      if (document.querySelector('button[label="Add to Cart"]')) {
+        status = 'in_stock';
+      } else {
+        const soldOutPhrases = ['Notify me when available', 'Sold Out', 'Out of Stock'];
+        const buttons = document.querySelectorAll('button');
+        for (const btn of buttons) {
+          const text = btn.textContent?.trim();
+          if (text && soldOutPhrases.includes(text)) { status = 'sold_out'; break; }
+        }
       }
 
       // Product name: og:title is most reliable for single-product pages