vercel · erictech6789 · Mar 8, 2026 · Mar 8, 2026
diff --git a/.env.example b/.env.example
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,10 +3,10 @@ import { Navbar } from "components/layout/navbar";
 import { WelcomeToast } from "components/welcome-toast";
 import { GeistSans } from "geist/font/sans";
 import { getCart } from "lib/shopify";
-import { ReactNode } from "react";
+import { baseUrl } from "lib/utils";
+import { ReactNode, Suspense } from "react"; // Added Suspense
 import { Toaster } from "sonner";
 import "./globals.css";
-import { baseUrl } from "lib/utils";
 
 const { SITE_NAME } = process.env;
 
@@ -27,21 +27,27 @@ export default async function RootLayout({
 }: {
   children: ReactNode;
 }) {
-  // Don't await the fetch, pass the Promise to the context provider
   const cart = getCart();
 
   return (
     <html lang="en" className={GeistSans.variable}>
       <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
         <CartProvider cartPromise={cart}>
           <Navbar />
-          <main>
-            {children}
-            <Toaster closeButton />
+          {/* PR Change: Wrapped children in a container for consistent padding and Suspense for better loading states */}
+          <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <Suspense fallback={<div className="h-screen w-full animate-pulse bg-neutral-100" />}>
+              {children}
+            </Suspense>
+            <Toaster closeButton position="bottom-right" />
             <WelcomeToast />
           </main>
+          {/* PR Change: Added a placeholder for a Footer component */}
+          <footer className="border-t border-neutral-200 py-6 text-center text-sm text-neutral-500 dark:border-neutral-800">
+            © {new Date().getFullYear()} {SITE_NAME}. All rights reserved.
+          </footer>
         </CartProvider>
       </body>
     </html>
   );
-}
+}
diff --git a/testsprite_tests/TC001_Home_page_shows_Featured_Products_and_Latest_Arrivals_sections.py b/testsprite_tests/TC001_Home_page_shows_Featured_Products_and_Latest_Arrivals_sections.py
@@ -0,0 +1,53 @@
+import asyncio
+from playwright import async_api
+from playwright.async_api import expect
+
+async def run_test():
+    pw = None
+    browser = None
+    context = None
+
+    try:
+        # Start a Playwright session in asynchronous mode
+        pw = await async_api.async_playwright().start()
+
+        # Launch a Chromium browser in headless mode with custom arguments
+        browser = await pw.chromium.launch(
+            headless=True,
+            args=[
+                "--window-size=1280,720",         # Set the browser window size
+                "--disable-dev-shm-usage",        # Avoid using /dev/shm which can cause issues in containers
+                "--ipc=host",                     # Use host-level IPC for better stability
+                "--single-process"                # Run the browser in a single process mode
+            ],
+        )
+
+        # Create a new browser context (like an incognito window)
+        context = await browser.new_context()
+        context.set_default_timeout(5000)
+
+        # Open a new page in the browser context
+        page = await context.new_page()
+
+        # Interact with the page elements to simulate user flow
+        # -> Navigate to http://localhost:3000
+        await page.goto("http://localhost:3000", wait_until="commit", timeout=10000)
+
+        # --> Assertions to verify final state
+        frame = context.pages[-1]
+        assert '/' in frame.url
+        await expect(frame.locator('text=Featured').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('text=Latest').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('xpath=//div[contains(@class, "product-grid") or contains(@id, "product-grid") or contains(@class, "product grid") or @aria-label="product grid"]').first).to_be_visible(timeout=3000)
+        await asyncio.sleep(5)
+
+    finally:
+        if context:
+            await context.close()
+        if browser:
+            await browser.close()
+        if pw:
+            await pw.stop()
+
+asyncio.run(run_test())
+
diff --git a/...sprite_tests/TC001_Home_page_shows_Featured_Products_carousel_and_Latest_Arrivals_grid.py b/...sprite_tests/TC001_Home_page_shows_Featured_Products_carousel_and_Latest_Arrivals_grid.py
@@ -0,0 +1,53 @@
+import asyncio
+from playwright import async_api
+from playwright.async_api import expect
+
+async def run_test():
+    pw = None
+    browser = None
+    context = None
+
+    try:
+        # Start a Playwright session in asynchronous mode
+        pw = await async_api.async_playwright().start()
+
+        # Launch a Chromium browser in headless mode with custom arguments
+        browser = await pw.chromium.launch(
+            headless=True,
+            args=[
+                "--window-size=1280,720",         # Set the browser window size
+                "--disable-dev-shm-usage",        # Avoid using /dev/shm which can cause issues in containers
+                "--ipc=host",                     # Use host-level IPC for better stability
+                "--single-process"                # Run the browser in a single process mode
+            ],
+        )
+
+        # Create a new browser context (like an incognito window)
+        context = await browser.new_context()
+        context.set_default_timeout(5000)
+
+        # Open a new page in the browser context
+        page = await context.new_page()
+
+        # Interact with the page elements to simulate user flow
+        # -> Navigate to http://localhost:3000
+        await page.goto("http://localhost:3000", wait_until="commit", timeout=10000)
+
+        # --> Assertions to verify final state
+        frame = context.pages[-1]
+        await expect(frame.locator('text=Featured Products').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('xpath=//div[contains(@class,"carousel") and (.//h2[contains(., "Featured Products")] or @aria-label="Featured Products Carousel")]').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('text=Latest Arrivals').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('xpath=//section[contains(@class,"product-grid") and (.//h2[contains(., "Latest Arrivals")] or @aria-label="Latest Arrivals Grid")]').first).to_be_visible(timeout=3000)
+        await asyncio.sleep(5)
+
+    finally:
+        if context:
+            await context.close()
+        if browser:
+            await browser.close()
+        if pw:
+            await pw.stop()
+
+asyncio.run(run_test())
+
diff --git a/testsprite_tests/TC001_Homepage_renders_featured_products_grid_and_carousel_content.py b/testsprite_tests/TC001_Homepage_renders_featured_products_grid_and_carousel_content.py
@@ -0,0 +1,53 @@
+import asyncio
+from playwright import async_api
+from playwright.async_api import expect
+
+async def run_test():
+    pw = None
+    browser = None
+    context = None
+
+    try:
+        # Start a Playwright session in asynchronous mode
+        pw = await async_api.async_playwright().start()
+
+        # Launch a Chromium browser in headless mode with custom arguments
+        browser = await pw.chromium.launch(
+            headless=True,
+            args=[
+                "--window-size=1280,720",         # Set the browser window size
+                "--disable-dev-shm-usage",        # Avoid using /dev/shm which can cause issues in containers
+                "--ipc=host",                     # Use host-level IPC for better stability
+                "--single-process"                # Run the browser in a single process mode
+            ],
+        )
+
+        # Create a new browser context (like an incognito window)
+        context = await browser.new_context()
+        context.set_default_timeout(5000)
+
+        # Open a new page in the browser context
+        page = await context.new_page()
+
+        # Interact with the page elements to simulate user flow
+        # -> Navigate to http://localhost:3000
+        await page.goto("http://localhost:3000", wait_until="commit", timeout=10000)
+
+        # --> Assertions to verify final state
+        frame = context.pages[-1]
+        await expect(frame.locator('text=Featured products').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('text=Featured products grid').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('text=Product carousel').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('text=Product tile').first).to_be_visible(timeout=3000)
+        await asyncio.sleep(5)
+
+    finally:
+        if context:
+            await context.close()
+        if browser:
+            await browser.close()
+        if pw:
+            await pw.stop()
+
+asyncio.run(run_test())
+
diff --git a/testsprite_tests/TC002_Open_a_product_detail_page_from_a_product_card_on_the_home_page.py b/testsprite_tests/TC002_Open_a_product_detail_page_from_a_product_card_on_the_home_page.py
@@ -0,0 +1,54 @@
+import asyncio
+from playwright import async_api
+from playwright.async_api import expect
+
+async def run_test():
+    pw = None
+    browser = None
+    context = None
+
+    try:
+        # Start a Playwright session in asynchronous mode
+        pw = await async_api.async_playwright().start()
+
+        # Launch a Chromium browser in headless mode with custom arguments
+        browser = await pw.chromium.launch(
+            headless=True,
+            args=[
+                "--window-size=1280,720",         # Set the browser window size
+                "--disable-dev-shm-usage",        # Avoid using /dev/shm which can cause issues in containers
+                "--ipc=host",                     # Use host-level IPC for better stability
+                "--single-process"                # Run the browser in a single process mode
+            ],
+        )
+
+        # Create a new browser context (like an incognito window)
+        context = await browser.new_context()
+        context.set_default_timeout(5000)
+
+        # Open a new page in the browser context
+        page = await context.new_page()
+
+        # Interact with the page elements to simulate user flow
+        # -> Navigate to http://localhost:3000
+        await page.goto("http://localhost:3000", wait_until="commit", timeout=10000)
+
+        # --> Assertions to verify final state
+        frame = context.pages[-1]
+        await expect(frame.locator('text=View Details').first).to_be_visible(timeout=3000)
+        assert '/product/' in frame.url
+        await expect(frame.locator('text=Product Title').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('text=$19.99').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('xpath=//img[contains(@alt, "Product")]').first).to_be_visible(timeout=3000)
+        await asyncio.sleep(5)
+
+    finally:
+        if context:
+            await context.close()
+        if browser:
+            await browser.close()
+        if pw:
+            await pw.stop()
+
+asyncio.run(run_test())
+
diff --git a/testsprite_tests/TC003_Open_a_product_detail_page_from_a_Featured_Products_card.py b/testsprite_tests/TC003_Open_a_product_detail_page_from_a_Featured_Products_card.py
@@ -0,0 +1,61 @@
+import asyncio
+from playwright import async_api
+from playwright.async_api import expect
+
+async def run_test():
+    pw = None
+    browser = None
+    context = None
+
+    try:
+        # Start a Playwright session in asynchronous mode
+        pw = await async_api.async_playwright().start()
+
+        # Launch a Chromium browser in headless mode with custom arguments
+        browser = await pw.chromium.launch(
+            headless=True,
+            args=[
+                "--window-size=1280,720",         # Set the browser window size
+                "--disable-dev-shm-usage",        # Avoid using /dev/shm which can cause issues in containers
+                "--ipc=host",                     # Use host-level IPC for better stability
+                "--single-process"                # Run the browser in a single process mode
+            ],
+        )
+
+        # Create a new browser context (like an incognito window)
+        context = await browser.new_context()
+        context.set_default_timeout(5000)
+
+        # Open a new page in the browser context
+        page = await context.new_page()
+
+        # Interact with the page elements to simulate user flow
+        # -> Navigate to http://localhost:3000
+        await page.goto("http://localhost:3000", wait_until="commit", timeout=10000)
+
+        # -> Navigate to the product detail page for 'The Collection Snowboard: Liquid' by opening its product URL (/product/the-collection-snowboard-liquid). Then verify the URL and page elements (title, price, image gallery).
+        await page.goto("http://localhost:3000/product/the-collection-snowboard-liquid", wait_until="commit", timeout=10000)
+
+        # --> Assertions to verify final state
+        frame = context.pages[-1]
+        # Verify we are on a product detail page (URL contains /product/)
+        assert "/product/" in frame.url
+
+        # Verify visible elements that are present in the provided element list
+        assert await frame.locator('xpath=/html/body/main/div/div[1]/div[2]/div/div/p/span').is_visible(), 'Currency element (USD) is not visible'
+        assert await frame.locator('xpath=/html/body/main/div/div[1]/div[2]/form/button').is_visible(), 'Add To Cart button is not visible'
+
+        # Required elements for this test (product title, full product price, image gallery) are not available in the provided element list
+        raise AssertionError("Required element(s) missing: 'product title' and/or 'product price' and/or 'product image gallery' not found in available elements. Reporting the issue and marking the task as done.")
+        await asyncio.sleep(5)
+
+    finally:
+        if context:
+            await context.close()
+        if browser:
+            await browser.close()
+        if pw:
+            await pw.stop()
+
+asyncio.run(run_test())
+
diff --git a/testsprite_tests/TC003_Scroll_the_product_carousel_to_reveal_additional_items.py b/testsprite_tests/TC003_Scroll_the_product_carousel_to_reveal_additional_items.py
@@ -0,0 +1,53 @@
+import asyncio
+from playwright import async_api
+from playwright.async_api import expect
+
+async def run_test():
+    pw = None
+    browser = None
+    context = None
+
+    try:
+        # Start a Playwright session in asynchronous mode
+        pw = await async_api.async_playwright().start()
+
+        # Launch a Chromium browser in headless mode with custom arguments
+        browser = await pw.chromium.launch(
+            headless=True,
+            args=[
+                "--window-size=1280,720",         # Set the browser window size
+                "--disable-dev-shm-usage",        # Avoid using /dev/shm which can cause issues in containers
+                "--ipc=host",                     # Use host-level IPC for better stability
+                "--single-process"                # Run the browser in a single process mode
+            ],
+        )
+
+        # Create a new browser context (like an incognito window)
+        context = await browser.new_context()
+        context.set_default_timeout(5000)
+
+        # Open a new page in the browser context
+        page = await context.new_page()
+
+        # Interact with the page elements to simulate user flow
+        # -> Navigate to http://localhost:3000
+        await page.goto("http://localhost:3000", wait_until="commit", timeout=10000)
+
+        # --> Assertions to verify final state
+        frame = context.pages[-1]
+        await expect(frame.locator('text=Product carousel').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('text=Carousel item').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('text=Carousel item').first).to_be_visible(timeout=3000)
+        await expect(frame.locator('text=Carousel item').first).to_be_visible(timeout=3000)
+        await asyncio.sleep(5)
+
+    finally:
+        if context:
+            await context.close()
+        if browser:
+            await browser.close()
+        if pw:
+            await pw.stop()
+
+asyncio.run(run_test())
+