Merge pull request #2031 from amit-webkul/playwright

Adding Playwright testcases setup.

Author: devansh-webkul

.github/workflows/admin_playwright_tests.yml

@@ -0,0 +1,101 @@
+name: Admin | Playwright Tests
+
+on: [push, pull_request]
+
+permissions:
+  contents: read
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  admin_playwright_test:
+    runs-on: ${{ matrix.operating-systems }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        operating-systems: [ubuntu-latest]
+        php-versions: ['8.3']
+        node-version: ['22.13.1']
+        shard-index: [1,2,3,4,5,6]
+        shard-total: [6]
+
+    name: Admin | Playwright Tests | Shard ${{ matrix.shard-index }} Of ${{ matrix.shard-total }}
+
+    services:
+      mysql:
+        image: mysql:8.0
+        env:
+          MYSQL_ROOT_PASSWORD: root
+          MYSQL_DATABASE: krayin
+        ports:
+          - 3306
+        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=5
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: ${{ matrix.php-versions }}
+          extensions: curl, fileinfo, gd, intl, mbstring, openssl, pdo, pdo_mysql, tokenizer, zip
+          ini-values: error_reporting=E_ALL
+          tools: composer:v2
+
+      - name: Set Up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Node.js Dependencies
+        run: npm install
+        working-directory: packages/Webkul/Admin
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+        working-directory: packages/Webkul/Admin
+
+      - name: Setting Environment
+        run: |
+          cp .env.example .env
+          sed -i "s|^\(DB_HOST=\s*\).*$|\1127.0.0.1|" .env
+          sed -i "s|^\(DB_PORT=\s*\).*$|\1${{ job.services.mysql.ports['3306'] }}|" .env
+          sed -i "s|^\(DB_DATABASE=\s*\).*$|\1krayin|" .env
+          sed -i "s|^\(DB_USERNAME=\s*\).*$|\1root|" .env
+          sed -i "s|^\(DB_PASSWORD=\s*\).*$|\1root|" .env
+          sed -i "s|^\(APP_DEBUG=\s*\).*$|\1false|" .env
+          sed -i "s|^\(APP_URL=\s*\).*$|\1http://127.0.0.1:8000|" .env
+          cat .env
+
+      - name: Install Composer Dependencies
+        run: composer install
+
+      - name: Running Krayin Installer
+        run: php artisan krayin-crm:install --skip-env-check --skip-admin-creation
+
+      # - name: Seed Product Table
+      #   run: php artisan db:seed --class="Webkul\\Installer\\Database\\Seeders\\ProductTableSeeder"
+
+      - name: Start Laravel server
+        run: |
+          php artisan serve --host=0.0.0.0 --port=8000 > server.log 2>&1 &
+          echo "Waiting for server to start..."
+          timeout 30 bash -c 'until curl -s http://127.0.0.1:8000 > /dev/null; do sleep 1; done'
+
+      - name: Run All Playwright Tests
+        env:
+          BASE_URL: 'http://127.0.0.1:8000'
+        run: |
+          npx playwright test --reporter=list --config=tests/e2e-pw/playwright.config.ts --shard=${{ matrix.shard-index }}/${{ matrix.shard-total }}
+        working-directory: packages/Webkul/Admin
+
+      - name: Upload Test Results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: test-results
+          path: packages/Webkul/Admin/tests/e2e-pw/test-results
+          retention-days: 1

.github/workflows/linting_tests.yml .github/workflows/auto_commits.yml

@@ -5,10 +5,12 @@ on: [push, pull_request]
 jobs:
   tests:
     runs-on: ${{ matrix.operating-system }}
+
     strategy:
       matrix:
         operating-system: [ubuntu-latest]
         php-versions: ["8.3", "8.2"]
+
     name: PHP ${{ matrix.php-versions }} test on ${{ matrix.operating-system }}
 
     services:
@@ -30,8 +32,10 @@ jobs:
         with:
           php-version: ${{ matrix.php-versions }}
           extensions: curl, gd, intl, mbstring, openssl, pdo, pdo_mysql, tokenizer, zip
+          ini-values: error_reporting=E_ALL
+          tools: composer:v2
 
-      - name: Composer Install
+      - name: Running Composer Install
         run: composer install
 
       - name: Set Testing Environment
@@ -44,25 +48,8 @@ jobs:
           sed -i "s|^\(DB_USERNAME=\s*\).*$|\1root|" .env
           sed -i "s|^\(DB_PASSWORD=\s*\).*$|\1root|" .env
 
-      - name: Key Generate
-        run: php artisan key:generate
-
-      - name: Complete ENV File
-        run: |
-          printf "The complete `.env` ... \n\n"
-          cat .env
-
-      - name: Migrate Database
-        run: php artisan migrate
-
-      - name: Seed Database
-        run: php artisan db:seed
-
-      - name: Vendor Publish
-        run: php artisan vendor:publish --provider=Webkul\\Core\\Providers\\CoreServiceProvider --force
-
-      - name: Optimize Stuffs
-        run: php artisan optimize:clear
+      - name: Running Krayin Installer
+        run: php artisan krayin-crm::install --skip-env-check --skip-admin-creation
 
-      - name: Run Tests
-        run: vendor/bin/pest
+       - name: Running Pest Test
+        run: vendor/bin/pest --parallel --colors=always

.github/workflows/ci.yml

@@ -15,6 +15,7 @@ Homestead.yaml
 /node_modules
 npm-debug.log
 package-lock.json
+/playwright-report
 /public/css
 /public/js
 /public/hot
@@ -26,3 +27,9 @@ package-lock.json
 /vendor
 yarn.lock
 yarn-error.log
+
+# Playwright
+node_modules/
+/test-results/
+/blob-report/
+/playwright/.cache/

.gitignore

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});

e2e/example.spec.ts

@@ -1,13 +1,15 @@
 {
-    "private": true,
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build"
-    },
-    "devDependencies": {
-        "axios": "^1.6.4",
-        "laravel-vite-plugin": "^1.0.0",
-        "vite": "^5.0.0"
-    }
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@types/node": "^22.13.5",
+    "axios": "^1.6.4",
+    "laravel-vite-plugin": "^1.0.0",
+    "vite": "^5.0.0"
+  }
 }

package.json

@@ -1,3 +1,5 @@
 /node_modules
 /package-lock.json
-npm-debug.log
+npm-debug.log
+/playwright-report
+/test-results

packages/Webkul/Admin/.gitignore

@@ -6,22 +6,27 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@playwright/test": "^1.50.1",
+        "@types/node": "^22.7.8",
         "autoprefixer": "^10.4.16",
-        "axios": "^1.6.4",
+        "axios": "^1.7.4",
         "laravel-vite-plugin": "^1.0",
         "postcss": "^8.4.23",
         "tailwindcss": "^3.3.2",
         "vite": "^5.4.12",
-        "vue": "^3.4.19"
+        "vue": "^3.4.21"
     },
     "dependencies": {
         "@vee-validate/i18n": "^4.9.1",
         "@vee-validate/rules": "^4.9.1",
         "@vitejs/plugin-vue": "^4.2.3",
         "chartjs-chart-funnel": "^4.2.1",
         "dompurify": "^3.1.7",
+        "dotenv": "^16.4.7",
         "flatpickr": "^4.6.13",
         "mitt": "^3.0.1",
+        "playwright": "^1.48.1",
+        "readline-sync": "^1.4.10",
         "vee-validate": "^4.9.1",
         "vue-cal": "^4.9.0",
         "vue-flatpickr": "^2.3.0",

packages/Webkul/Admin/package.json

@@ -0,0 +1,2 @@
+/playwright-report
+/test-results

packages/Webkul/Admin/tests/e2e-pw/.gitignore

@@ -0,0 +1,52 @@
+import { defineConfig, devices } from "@playwright/test";
+import dotenv from "dotenv";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+dotenv.config({ path: path.resolve(__dirname, "../../../../../.env") });
+
+export default defineConfig({
+    testDir: "./tests",
+
+    timeout: 30 * 1000,
+
+    expect: { timeout: 20 * 1000 },
+
+    outputDir: "./test-results",
+
+    fullyParallel: false,
+
+    workers: 1,
+
+    forbidOnly: !!process.env.CI,
+
+    retries: 0,
+
+    reportSlowTests: null,
+
+    reporter: [
+        [
+            "html",
+            {
+                outputFolder: "./playwright-report",
+            },
+        ],
+    ],
+
+    use: {
+        baseURL: `${process.env.APP_URL}/`.replace(/\/+$/, "/"),
+        screenshot: { mode: "only-on-failure", fullPage: true },
+        video: "retain-on-failure",
+        trace: "retain-on-failure",
+    },
+
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+    ],
+});

packages/Webkul/Admin/tests/e2e-pw/data/images/1.webp

@@ -0,0 +1,25 @@
+import { test as base, expect, type Page } from "@playwright/test";
+
+type AdminFixtures = {
+    adminPage: Page;
+};
+
+export const test = base.extend<AdminFixtures>({
+    adminPage: async ({ page }, use) => {
+        const adminCredentials = {
+            email: "[email protected]",
+            password: "admin123",
+        };
+
+        await page.goto("admin/login");
+        await page.fill('input[name="email"]', adminCredentials.email);
+        await page.fill('input[name="password"]', adminCredentials.password);
+        await page.press('input[name="password"]', "Enter");
+
+        await page.waitForURL("**/admin/dashboard");
+
+        await use(page);
+    },
+});
+
+export { expect };

packages/Webkul/Admin/tests/e2e-pw/data/images/10.webp

@@ -0,0 +1,38 @@
+import { test, expect } from "../setup";
+
+const adminCredentials = {
+    email: "[email protected]",
+    password: "admin123",
+};
+
+test("should be able to login", async ({ page }) => {
+    /**
+     * Login as admin.
+     */
+    await page.goto("admin/login");
+    await page.getByPlaceholder("Email Address").click();
+    await page.getByPlaceholder("Email Address").fill(adminCredentials.email);
+    await page.getByPlaceholder("Password").click();
+    await page.getByPlaceholder("Password").fill(adminCredentials.password);
+    await page.getByRole("button", { name: "Sign In" }).click();
+
+    await expect(page.getByPlaceholder("Mega Search").first()).toBeVisible();
+});
+
+test("should be able to logout", async ({ page }) => {
+    /**
+     * Login as admin.
+     */
+    await page.goto("admin/login");
+    await page.getByPlaceholder("Email Address").click();
+    await page.getByPlaceholder("Email Address").fill(adminCredentials.email);
+    await page.getByPlaceholder("Password").click();
+    await page.getByPlaceholder("Password").fill(adminCredentials.password);
+    await page.getByLabel("Sign In").click();
+    await page.click("button:text('E')");
+    await page.getByRole("link", { name: "Sign Out" }).click();
+
+    await page.waitForTimeout(5000);
+
+    await expect(page.getByPlaceholder("Password").first()).toBeVisible();
+});