ScreenShot Bot for PR

packages/playwright/helper-login.js

@@ -0,0 +1,26 @@
+const { chromium } = require('playwright');
+const fs = require('fs');
+const path = require('path');
+
+// This function performs login and returns an authenticated page context
+const helperLogin = async (browser) => {
+  const context = await browser.newContext();
+  const page = await context.newPage();
+
+  console.log('Logging in...');
+  await page.goto('https://packrat.world/', { waitUntil: 'networkidle' });
+  await page.getByRole('link', { name: 'Get Started' }).click();
+  await page.locator('input[type="email"]').click();
+  await page.locator('input[type="email"]').fill('[email protected]');
+  await page.locator('input[type="password"]').click();
+  await page.locator('input[type="password"]').fill('12345678');
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  console.log('Login successful, waiting for dashboard to load...');
+  await page.waitForSelector('text="Feed"', {
+    waitUntil: 'networkidle',
+  });
+  return { context, page };
+};
+
+module.exports = { helperLogin };

packages/playwright/sc-dashboard.js

@@ -2,61 +2,66 @@ const { chromium } = require('playwright');
 const fs = require('fs');
 const path = require('path');
 const { url } = require('inspector');
-
+const { helperLogin } = require('./helper-login');
 
 (async () => {
-  const screenshotsDir = path.join(__dirname, 'screenshots');
+  const filename = path.basename(__filename, path.extname(__filename));
+  const screenshotsDir = path.join(__dirname, 'screenshots', filename);
   if (!fs.existsSync(screenshotsDir)) {
     fs.mkdirSync(screenshotsDir);
   }
-
-
+
   const browser = await chromium.launch({ headless: false });
   const page = await browser.newPage();
 
-
   // Capture console logs
-  page.on('console', msg => console.log('PAGE LOG:', msg.text()));
+  page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
   // Capture page errors
-  page.on('pageerror', error => console.error('PAGE ERROR:', error));
-
+  page.on('pageerror', (error) => console.error('PAGE ERROR:', error));
 
   const resolutions = [
     { width: 1920, height: 1080, name: 'desktop' },
     { width: 3440, height: 1440, name: 'big desktop screen' },
     { width: 1280, height: 800, name: 'tablet' },
-    { width: 1366, height: 1024, name: 'iPad Pro'},
-    { width: 375,  height: 667, name: 'small mobile' },
-    { width: 390,  height: 844, name: 'Android mobile'},
-    { width: 393,  height: 852, name: 'iPhone'},
-    { width: 430,  height: 932, name: 'iPhone Pro Max'},
-    { width: 1366, height: 768, name: 'laptop'},
-
-
+    { width: 1366, height: 1024, name: 'iPad Pro' },
+    { width: 375, height: 667, name: 'small mobile' },
+    { width: 390, height: 844, name: 'Android mobile' },
+    { width: 393, height: 852, name: 'iPhone' },
+    { width: 430, height: 932, name: 'iPhone Pro Max' },
+    { width: 1366, height: 768, name: 'laptop' },
   ];
 
-
   const pages = [
-    { url: 'https://packrat.world/',name: 'dashboard'},
-
+    {
+      url: 'https://packrat.world/',
+      name: 'landing-page',
+      identify: async (page) => helperLogin(page),
+    },
   ];
 
-
   for (const resolution of resolutions) {
-    await page.setViewportSize({ width: resolution.width, height: resolution.height });
+    await page.setViewportSize({
+      width: resolution.width,
+      height: resolution.height,
+    });
+
     for (const { url, name } of pages) {
       try {
         console.log(`Navigating to ${url} at ${resolution.name} resolution...`);
         await page.goto(url, { waitUntil: 'networkidle' });
-        console.log(`Taking full-page screenshot of ${url} at ${resolution.name} resolution...`);
-        await page.screenshot({ path: path.join(screenshotsDir, `${name}-${resolution.name}.png`), fullPage: false });
+        console.log(
+          `Taking full-page screenshot of ${url} at ${resolution.name} resolution...`,
+        );
+        await page.screenshot({
+          path: path.join(screenshotsDir, `${name}-${resolution.name}.png`),
+          fullPage: false,
+        });
       } catch (error) {
         console.error(`Failed to navigate to ${url}:`, error);
       }
     }
   }
 
-
   console.log('Closing browser...');
   await browser.close();
 })();

packages/playwright/sc-landing-page.js

@@ -0,0 +1,69 @@
+const { chromium } = require('playwright');
+const fs = require('fs');
+const path = require('path');
+const { helperLogin } = require('./helper-login');
+
+(async () => {
+  const filename = path.basename(__filename, path.extname(__filename));
+  const screenshotsDir = path.join(__dirname, 'screenshots', filename);
+  if (!fs.existsSync(screenshotsDir)) {
+    fs.mkdirSync(screenshotsDir);
+  }
+
+  const browser = await chromium.launch({ headless: false });
+
+  // Perform login and get authenticated context
+  const { context, page } = await helperLogin(browser);
+
+  // Capture console logs
+  page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
+  // Capture page errors
+  page.on('pageerror', (error) => console.error('PAGE ERROR:', error));
+
+  const resolutions = [
+    // { width: 1920, height: 1080, name: 'desktop' },
+    // { width: 3440, height: 1440, name: 'big desktop screen' },
+    // { width: 1280, height: 800, name: 'tablet' },
+    // { width: 1366, height: 1024, name: 'iPad Pro' },
+    { width: 375, height: 667, name: 'small mobile' },
+    { width: 390, height: 844, name: 'Android mobile' },
+    { width: 393, height: 852, name: 'iPhone' },
+    { width: 430, height: 932, name: 'iPhone Pro Max' },
+    { width: 1366, height: 768, name: 'laptop' },
+  ];
+
+  const pages = [
+    {
+      url: 'https://packrat.world/',
+      name: 'landing-page',
+    },
+  ];
+
+  for (const resolution of resolutions) {
+    for (const { url, name } of pages) {
+      try {
+        const pageInContext = await context.newPage();
+        await pageInContext.setViewportSize({
+          width: resolution.width,
+          height: resolution.height,
+        });
+        console.log(`Navigating to ${url} at ${resolution.name} resolution...`);
+        await pageInContext.goto(url, { waitUntil: 'networkidle' });
+        console.log(
+          `Taking full-page screenshot of ${url} at ${resolution.name} resolution...`,
+        );
+        await pageInContext.screenshot({
+          path: path.join(screenshotsDir, `${name}-${resolution.name}.png`),
+          fullPage: true,
+        });
+        await pageInContext.close();
+      } catch (error) {
+        console.error(`Failed to navigate to ${url}:`, error);
+      }
+    } 
+  }
+
+  console.log('Closing browser...');
+  await context.close();
+  await browser.close();
+})();

packages/playwright/sc-login-register.js

@@ -3,60 +3,59 @@ const fs = require('fs');
 const path = require('path');
 const { url } = require('inspector');
 
-
 (async () => {
   const screenshotsDir = path.join(__dirname, 'screenshots');
   if (!fs.existsSync(screenshotsDir)) {
     fs.mkdirSync(screenshotsDir);
   }
 
-
   const browser = await chromium.launch({ headless: false });
   const page = await browser.newPage();
 
-
   // Capture console logs
-  page.on('console', msg => console.log('PAGE LOG:', msg.text()));
+  page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
   // Capture page errors
-  page.on('pageerror', error => console.error('PAGE ERROR:', error));
-
+  page.on('pageerror', (error) => console.error('PAGE ERROR:', error));
 
   const resolutions = [
     { width: 1920, height: 1080, name: 'desktop' },
     { width: 3440, height: 1440, name: 'big desktop screen' },
     { width: 1280, height: 800, name: 'tablet' },
-    { width: 1366, height: 1024, name: 'iPad Pro'},
-    { width: 375,  height: 667, name: 'small mobile' },
-    { width: 390,  height: 844, name: 'Android mobile'},
-    { width: 393,  height: 852, name: 'iPhone'},
-    { width: 430,  height: 932, name: 'iPhone Pro Max'},
-    { width: 1366, height: 768, name: 'laptop'},
-
-
+    { width: 1366, height: 1024, name: 'iPad Pro' },
+    { width: 375, height: 667, name: 'small mobile' },
+    { width: 390, height: 844, name: 'Android mobile' },
+    { width: 393, height: 852, name: 'iPhone' },
+    { width: 430, height: 932, name: 'iPhone Pro Max' },
+    { width: 1366, height: 768, name: 'laptop' },
   ];
 
-
   const pages = [
-    { url: 'https://packrat.world/sign-in',name: 'log in'},
-    { url: 'https://packrat.world/register', name: 'register'},
+    { url: 'https://packrat.world/sign-in', name: 'log in' },
+    { url: 'https://packrat.world/register', name: 'register' },
   ];
 
-
   for (const resolution of resolutions) {
-    await page.setViewportSize({ width: resolution.width, height: resolution.height });
+    await page.setViewportSize({
+      width: resolution.width,
+      height: resolution.height,
+    });
     for (const { url, name } of pages) {
       try {
         console.log(`Navigating to ${url} at ${resolution.name} resolution...`);
         await page.goto(url, { waitUntil: 'networkidle' });
-        console.log(`Taking full-page screenshot of ${url} at ${resolution.name} resolution...`);
-        await page.screenshot({ path: path.join(screenshotsDir, `${name}-${resolution.name}.png`), fullPage: false });
+        console.log(
+          `Taking full-page screenshot of ${url} at ${resolution.name} resolution...`,
+        );
+        await page.screenshot({
+          path: path.join(screenshotsDir, `${name}-${resolution.name}.png`),
+          fullPage: false,
+        });
       } catch (error) {
         console.error(`Failed to navigate to ${url}:`, error);
       }
     }
   }
 
-
   console.log('Closing browser...');
   await browser.close();
 })();

packages/playwright/tests/pack-name-already-exist.spec.js

@@ -8,19 +8,16 @@ test('Pack name already exists', async ({ page }) => {
   await page.getByLabel('Password').click();
   await page.getByLabel('Password').fill('12345678');
   await page.getByRole('button', { name: 'Sign In' }).click();
-  await page.getByText('Create').click();
-  await page.getByText('Create a Pack').hover();
-  await page.goto('https://packrat.world/pack/create');
+  await page.getByText('Create a Pack').click();
   await page.getByPlaceholder('Name').click();
   await page.getByPlaceholder('Name').fill('hit');
   await page.getByRole('button', { name: 'Add Pack' }).click();
 
   // Verify the error message for invalid email format
-  const nameErrorMessage = page.locator(
-    'text=A pack with the same name already exists',
-  );
+  const nameErrorMessage = page.locator('text=A pack with the same name already exists');
   await expect(nameErrorMessage).toBeVisible({ timeout: 50000 }); // Adjust the timeout as needed
 
   const packnameErrorMessage = page.locator('text=Pack already exists');
   await expect(packnameErrorMessage).toBeVisible({ timeout: 50000 }); // Adjust the timeout as needed
-});
+
+});

server/src/index.ts

@@ -38,10 +38,10 @@ const app = new Hono<{ Bindings: Bindings }>();
 //  ref: https://hono.dev/middleware/builtin/compress
 
 // SETUP HTTPS Enforcement Middleware
-app.use('*', enforceHttps()); // Apply to all routes
+// app.use('*', enforceHttps()); // Apply to all routes
 
 // SETUP SECURITY HEADERS
-app.use('*', securityHeaders()); // Apply to all routes
+// app.use('*', securityHeaders()); // Apply to all routes
 
 // SETUP CORS
 app.use('*', async (c, next) => {