feat(e2e): create e2e testing signin page form element

Author: mpsalunggg

package.json

@@ -13,7 +13,10 @@
     "prepare": "husky",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
-    "test:e2e": "playwright test --config=tests/setup/playwright.config.ts"
+    "test:e2e": "playwright test --config=tests/setup/playwright.config.ts",
+    "test:e2e:ui": "playwright test --config=tests/setup/playwright.config.ts --ui",
+    "test:e2e:headed": "playwright test --config=tests/setup/playwright.config.ts --headed",
+    "test:e2e:debug": "playwright test --config=tests/setup/playwright.config.ts --debug"
   },
   "husky": {
     "hooks": {

src/locales/id.json

@@ -66,7 +66,7 @@
       "enter-email": "Masukan Email",
       "enter-password": "Masukan Password",
       "no-account": "Apakah Belum Punya Akun?",
-      "sign-in": "Sign In",
+      "sign-in": "Masuk",
       "sign-up": "Sign Up",
       "forgot-password": "Lupa Password?"
     },

tests/e2e/auth/sign-in.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Sign In Page", () => {
+  test.describe("English (Default)", () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto("/sign-in");
+    });
+
+    test("should display sign in form elements", async ({ page }) => {
+      await expect(page.getByRole("heading", { name: /welcome back 👋/i })).toBeVisible();
+      await expect(page.getByText(/sign in to connect, learn, and grow together./i)).toBeVisible();
+
+      await expect(page.locator('input[name="email"]')).toBeVisible();
+      await expect(page.locator('input[name="password"]')).toBeVisible();
+      await expect(page.getByRole("button", { name: /sign in/i })).toBeVisible();
+
+      const forgotPasswordLink = page.getByRole("link", { name: /forgot password\?/i });
+      await expect(forgotPasswordLink).toBeVisible();
+      await expect(forgotPasswordLink).toHaveAttribute("href", "/en/forgot-password/");
+
+      const signUpLink = page.getByRole("link", { name: /sign up/i });
+      await expect(signUpLink).toBeVisible();
+      await expect(signUpLink).toHaveAttribute("href", "/en/sign-up/");
+    });
+  });
+});

tests/e2e/example.spec.ts

@@ -4,7 +4,7 @@ test("has title", async ({ page }) => {
   await page.goto("https://playwright.dev/");
 
   // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/);
+  await expect(page).toHaveTitle(/Playwrighasdasdt/);
 });
 
 test("get started link", async ({ page }) => {

tests/setup/playwright.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
   /* 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:3000',
+    baseURL: "http://localhost:3000",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -71,9 +71,9 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://localhost:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: "pnpm run dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
 });