Update playwright config + Add placeholder test

.gitignore

@@ -44,3 +44,6 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+
+storageState.json

playwright.config.ts

@@ -4,14 +4,15 @@ 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') });
+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({
+  globalSetup: require.resolve('./test_util/global-setup'),
   testDir: './tests',
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -26,10 +27,12 @@ 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://127.0.0.1:3000',
+    baseURL: 'http://127.0.0.1:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    storageState: './storageState.json',
+    ignoreHTTPSErrors: true,
   },
 
   /* Configure projects for major browsers */
@@ -41,7 +44,9 @@ export default defineConfig({
 
     {
       name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      use: { ...devices['Desktop Firefox'],
+            storageState:"./storageState.json"
+     },
     },
 
     {
@@ -71,9 +76,9 @@ export default defineConfig({
   ],
 
   /* 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,
-  // },
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
 });

src/components/auth/loginForm.tsx

@@ -23,9 +23,17 @@ export function LoginForm() {
 
   return (
     <div className="flex flex-col space-y-2">
-      <Input type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
-      <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
-      <Button onClick={handleLogin}>Login</Button>
+      <Input id="email" type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
+      <Input
+        id="password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder="Password"
+      />
+      <Button id="login" onClick={handleLogin}>
+        Login
+      </Button>
     </div>
   );
 }

test_util/global-setup.ts

@@ -0,0 +1,25 @@
+import { firefox, FullConfig } from '@playwright/test';
+
+async function globalSetup(config: FullConfig) {
+  const email = process.env.NEXT_PUBLIC_DUMMY_EMAIL;
+  const password = process.env.NEXT_PUBLIC_DUMMY_PASSWORD;
+  const baseUrl = 'http://127.0.0.1:3000';
+
+  if (!email || !password) {
+    throw new Error('NEXT_PUBLIC_DUMMY_EMAIL and NEXT_PUBLIC_DUMMY_PASSWORD must be set');
+  }
+
+  const browser = await firefox.launch();
+  const page = await browser.newPage();
+  await page.goto(baseUrl + '/auth');
+  await page.fill('id=email', email);
+  await page.fill('id=password', password);
+  await Promise.all([
+    page.waitForURL(baseUrl),
+    page.click('id=login')
+  ]);
+  await page.context().storageState({ path: 'storageState.json' });
+  await browser.close();
+}
+
+export default globalSetup;

tests/test-1.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test.use({
+  storageState: './storageState.json'
+});
+
+test('test', async ({ page }) => {
+  await page.goto('http://127.0.0.1:3000/');
+  await page.getByLabel('Main').getByRole('img').click();
+  await page.getByPlaceholder('Enter business name...').click();
+  await page.getByPlaceholder('Enter business name...').fill('neon');
+  await page.getByPlaceholder('Enter business name...').press('Enter');
+});

tests/test-2.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test.use({
+  storageState: './storageState.json'
+});
+
+test('test', async ({ page }) => {
+  await page.goto('http://127.0.0.1:3000/');
+  await page.getByRole('button', { name: 'Start Investing' }).click();
+  await page.getByRole('heading', { name: 'Investment Opportunities' }).click();
+});