E2E Update

.github/workflows/playwright.yml

@@ -60,7 +60,7 @@ jobs:
       env:
         GRAPHQL_API_URL: https://api.kwekmarket.com/v1/kwekql
         PORT: 3100
-      run: yarn playwright test
+      run: yarn run test
 
     - uses: actions/upload-artifact@v4
       if: ${{ !cancelled() }}

package.json

@@ -7,7 +7,13 @@
     "build": "NODE_OPTIONS=--max-old-space-size=4096 next build",
     "start": "NODE_ENV=production next start",
     "lint": "next lint",
-    "check-lint": "eslint ."
+    "check-lint": "eslint .",
+    "test": "playwright test",              
+    "test:debug": "playwright test --debug", 
+    "test:headed": "playwright test --headed", 
+    "test:filter": "playwright test --grep @tag", 
+    "test:update": "playwright test --update-snapshots", 
+    "test:report": "playwright show-report" 
   },
   "dependencies": {
     "@ckeditor/ckeditor5-react": "^9.0.0",
@@ -57,6 +63,7 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^3.1.0",
     "sass": "^1.77.8",
+    "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.4",
     "tailwind-scrollbar": "^3.1.0",
     "use-debounce": "^10.0.1",

playwright.config.ts

@@ -1,38 +1,40 @@
 import { defineConfig, devices } from '@playwright/test';
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
 export default defineConfig({
+  timeout: 60000, // Set global timeout to 60 seconds
+
   testDir: './tests',
+
+
   /* Run tests in files in parallel */
   fullyParallel: true,
+
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
+
   /* Retry on CI only */
+
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
+
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [['html', { open: 'on-failure' }]],
+
+
+  reporter: [['html', { open: 'always' }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:3100',
+
+  baseURL: 'http://localhost:3100',
 
+  headless: true, // Run tests in headed mode
+    // Other options...
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+  trace: 'on-first-retry',
 
     /* Capture a screenshot for failed tests */
-    screenshot: 'only-on-failure',
+  screenshot: 'only-on-failure',
   },
 
   /* Configure projects for major browsers */
@@ -42,41 +44,26 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
 
     /* Test against mobile viewports. */
-    {
-      name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
-    },
-    {
-      name: 'Mobile Safari',
-      use: { ...devices['iPhone 12'] },
-    },
-
-    /* Test against branded browsers. */
     // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
     // },
     // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
     // },
+
   ],
 
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
 });

tests/auths/createAccount.spec.ts → tests/auth/createAccount.spec.ts

@@ -1,5 +1,4 @@
 import { test, expect } from '@playwright/test';
-import { AuthHelpers } from '../utils/helpers';
 
 function generateRandomEmail() {
   const timestamp = Date.now();

tests/dashboard/categories.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect, Page } from '@playwright/test';
+
+test.describe('Categories Tests', () => {
+  const baseURL = 'http://localhost:3100';
+  let page: Page;
+
+  test.beforeAll(async ({ browser }) => {
+    const context = await browser.newContext();
+    page = await context.newPage();
+    await page.goto(baseURL, { waitUntil: 'domcontentloaded' });
+  });
+
+ test.skip ('Validate categories section', async () => {
+    const categories = [
+      'Vehicles & Equipment',
+      'Beauty & Personal care',
+      'Home & Garden',
+      'Baby & Toddler Toys',
+      'Fashion',
+    ];
+
+    const categoryMenu = page.locator('div:has-text("All Categories")');
+    await expect(categoryMenu).toBeVisible();
+
+    for (const category of categories) {
+      const categoryLocator = page.locator(`text=${category}`);
+      await expect(categoryLocator).toBeVisible();
+      await categoryLocator.hover();
+    }
+  });
+
+  test('Verify promotional banner for Women section', async () => {
+    const promoText = 'BUY TWO, Get FOR WOMEN Get up to 30% Off';
+    const promoBanner = page.locator(`text=${promoText}`).first();
+    const shopNowButton = page.locator('text=SHOP NOW');
+
+    if (await promoBanner.count() > 0) {
+      await expect(promoBanner).toBeVisible();
+      await expect(shopNowButton).toBeVisible();
+      await shopNowButton.click();
+      await expect(page).toHaveURL(/.*shop/);}
+    // } else {
+    //   console.warn('Promotional banner not found. Skipping test.');
+    // }
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+});

tests/dashboard/nav.spec.ts

@@ -0,0 +1,86 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Header Tests", () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the homepage
+    await page.goto("http://localhost:3100");
+  });
+
+  test.skip("Logo should navigate to the homepage", async ({ page }) => {
+    // Click on the logo
+    await page.locator('img[alt="Kwek Market"]').click();
+
+    // Assert the page URL is the homepage
+    await expect(page).toHaveURL("http://localhost:3100");
+  });
+
+
+
+  test.skip("Search bar should allow input and search", async ({ page }) => {
+    const searchBar = page.locator('input[placeholder="I\'m searching for..."]');
+    const searchButton = page.locator('button:has-text("Search")');
+
+    // Type into the search bar
+    await searchBar.fill("Test Query");
+
+    // Click the search button
+    await searchButton.click({ timeout: 30000 });
+
+    // Wait for navigation to complete
+    await page.waitForNavigation({ timeout: 30000 });
+
+    // Assert the URL contains the search query
+    await expect(page).toHaveURL(/.*search.*/); // Update the regex based on your site's search functionality
+
+    // Assert that no results are found
+    const noResultsMessage = page.locator('text=No items found'); // Update the selector based on your site's implementation
+    await expect(noResultsMessage).toBeVisible({ timeout: 30000 });
+  });
+
+
+
+test("Wishlist icon should navigate to wishlist page", async ({ page }) => {
+  // Find the element with the text 'saved' and click on it
+  const savedLink = page.locator('text=saved');
+  await savedLink.waitFor({ state: 'visible', timeout: 30000 }); // Ensure the element is visible
+  await savedLink.click({ timeout: 30000 });
+
+  // Assert the page URL is the wishlist page
+  await expect(page).toHaveURL("http://localhost:3100/wishlist");
+
+  // Pause the test to keep the browser open
+//   await page.pause();
+});
+
+  test("Cart icon should navigate to cart page", async ({ page }) => {
+    // Click on the cart icon
+    const cartLink = page.locator('text=cart');
+    await cartLink.waitFor({ state: 'visible', timeout: 30000 }); // Ensure the element is visible
+    await cartLink.click({ timeout: 30000 });
+
+    // Assert the page URL is the cart page
+    await expect(page).toHaveURL("http://localhost:3100/cart");
+
+    // Pause the test to keep the browser open
+    await page.pause();
+  });
+
+  test("Shortcut items should have correct counters", async ({ page }) => {
+    // Check the wishlist counter
+    const wishlistCounter = page.locator('a[href="/wishlist"] .tw-absolute');
+    await expect(wishlistCounter).toHaveText("0");
+
+    // Check the cart counter
+    const cartCounter = page.locator('a[href="/cart"] .tw-absolute');
+    await expect(cartCounter).toHaveText("0");
+  });
+
+  test("Sign In link should navigate to login page", async ({ page }) => {
+    // Click on the Sign In link
+    const signInLink = page.locator('a[href="/login"]');
+    await signInLink.click();
+
+    // Assert the page URL is the login page
+    await expect(page).toHaveURL("http://localhost:3100/login");
+  });
+});

tests/dashboard/socials.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect, Page } from '@playwright/test';
+
+test.describe('Social Media Tests', () => {
+  const baseURL = 'http://localhost:3100';
+  let page: Page;
+
+  test.beforeAll(async ({ browser }) => {
+    const context = await browser.newContext();
+    page = await context.newPage();
+    await page.goto(baseURL, { waitUntil: 'domcontentloaded' });
+  });
+
+  test.skip('Hover on social media links', async () => {
+    const socialLinks = ['Facebook', 'Instagram', 'Twitter'];
+
+    const socialSection = page.locator('.Footer_social__mdVIK');
+    for (const social of socialLinks) {
+      const socialLink = socialSection.locator(`text=${social}`);
+      await expect(socialLink).toBeVisible();
+      await socialLink.hover();
+    }
+  });
+
+  test('Hover on missing social media links', async () => {
+    const socialSection = page.locator('.Footer_social__mdVIK');
+    const missingLink = socialSection.locator('text=Snapchat');
+
+    await expect(missingLink).toHaveCount(0);
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+});

tests/dashboard/subscription.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect, Page } from '@playwright/test';
+
+test.describe.skip('Subscription Tests', () => {
+  const baseURL = 'http://localhost:3100';
+  let page: Page;
+
+  test.beforeAll(async ({ browser }) => {
+    const context = await browser.newContext();
+    page = await context.newPage();
+    await page.goto(baseURL, { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Email subscription with valid email', async () => {
+    const emailInput = page.locator('input[placeholder="Enter your email address..."]');
+    const subscribeButton = page.locator('button:has-text("Subscribe")');
+
+    await emailInput.fill('[email protected]');
+    await subscribeButton.click();
+
+    const successMessage = page.locator('text=Subscription Successful');
+    await expect(successMessage).toBeVisible();
+  });
+
+  test('Email subscription with empty input', async () => {
+    const subscribeButton = page.locator('button:has-text("Subscribe")');
+    await subscribeButton.click();
+
+    const errorMessage = page.locator('text=Please enter a valid email address');
+    await expect(errorMessage).toBeVisible();
+  });
+
+  test('Email subscription with invalid format', async () => {
+    const emailInput = page.locator('input[placeholder="Enter your email address..."]');
+    const subscribeButton = page.locator('button:has-text("Subscribe")');
+
+    await emailInput.fill('invalid-email');
+    await subscribeButton.click();
+
+    const errorMessage = page.locator('text=Please enter a valid email address');
+    await expect(errorMessage).toBeVisible();
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+});