ci(playwright.yml): add Playwright tests workflow

fix(Landing.jsx): add id attribute to landing page title
test(landing.spec.js): update landing page title and h1 text content assertions

.github/workflow/playwright.yml

@@ -0,0 +1,28 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  tests_e2e:
+    name: Run end-to-end tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: e2e/playwright-report/
+        retention-days: 30

client/src/components/ui/Landing.jsx

@@ -32,7 +32,7 @@ export default function Landing() {
   return (
     <div className="flex h-full flex-col items-center overflow-y-auto pt-0 text-sm dark:bg-gray-800">
       <div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
-        <h1 className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold sm:mb-16 md:mt-[10vh]">
+        <h1 id="landing-title" className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold sm:mb-16 md:mt-[10vh]">
           ChatGPT Clone
         </h1>
         <div className="items-start gap-3.5 text-center md:flex">

e2e/specs/landing.spec.js

@@ -2,6 +2,6 @@ import {expect, test} from '@playwright/test';
 
 test('landing page', async ({page}) => {
   await page.goto('/');
-  expect (await page.title()).toBe('ChatGPT Clone');
+  expect (await page.title()).toBe('New Chat');
-  expect (await page.textContent('h1')).toBe('ChatGPT Clone');
+  expect (await page.textContent('#landing-title')).toBe('ChatGPT Clone');
 });