✅ Updated Playwright tests, config, and snapshots

selectively checked out wei#405 's updated working 100% passing Playwright tests and config to current branch. Resovled to not including stargazers issue mentioned in wei#404 comments. Updated all snapshots to reflect this new config. Also only using Chrome and Mobile Chrome to ensure small testing footprint while covering responsiveness of the app.

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Local vscode
+.vscode
+
 # Playwright
 /.playwright/.cache
 /.playwright/test-report

.playwright/mainUIConsistency.spec.ts

@@ -0,0 +1,67 @@
+import { type Page, expect, test } from '@playwright/test'
+
+// Give navigation expects a generous timeout of 60 seconds.
+const customPageLoadTimeout = { timeout: 60000 }
+
+// Give component transition/animation expects a generous timeout of 1 second(s).
+const customTransitionTimeout = { timeout: 1000 }
+
+// Testing constants.
+const repoPreviewURL: string =
+  '/wei/socialify?language=1&owner=1&name=1&stargazers=1&theme=Light'
+
+test.describe('Socialify UI:', () => {
+  test('is consistent for landing page', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto('/', customPageLoadTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customPageLoadTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+
+  test('is consistent for error (404) page', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto('/404', customPageLoadTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customPageLoadTimeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+  })
+
+  test('is consistent for preview config page', async ({
+    page,
+  }: { page: Page }): Promise<void> => {
+    await page.goto(repoPreviewURL, customPageLoadTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customPageLoadTimeout)
+
+    // To maintain consistency, de-select the 'Stars' checkbox,
+    // and selects the 'Description' checkbox.
+    await page.click('input[name="stargazers"]')
+    await page.click('input[name="description"]')
+
+    // Wait for the component transition/animation to finish completely.
+    await page.waitForTimeout(customTransitionTimeout.timeout)
+
+    const image = await page.screenshot()
+    expect(image).toMatchSnapshot()
+
+    // Also check the toaster UI consistency.
+    await page.click('button:has-text("URL")')
+    await page.waitForSelector('[role="alert"]', customPageLoadTimeout)
+
+    // Wait for the component transition/animation to finish completely.
+    await page.waitForTimeout(customTransitionTimeout.timeout)
+
+    const toastImage = await page.screenshot()
+    expect(toastImage).toMatchSnapshot()
+  })
+})

.playwright/simpleUserStory.spec.ts

@@ -1,14 +1,14 @@
 import { type Page, expect, test } from '@playwright/test'
 
-// Give each expect a generous timeout of 30 seconds.
-const customTimeout = { timeout: 30000 }
+// Give each expect a generous timeout of 60 seconds.
+const customTimeout = { timeout: 60000 }
 
 // Testing constants.
 const repo: string = 'wei/socialify'
 const expectedConfigURL: string =
   '/wei/socialify?language=1&owner=1&name=1&stargazers=1&theme=Light'
 const expectedImageURLRegExp: RegExp =
-  /\/wei\/socialify\/image\?language=1&owner=1&name=1&stargazers=1&theme=Light$/
+  /\/wei\/socialify\/image\?description=1&language=1&name=1&owner=1&theme=Light$/
 
 async function getClipboardText(page: Page): Promise<string> {
   return await page.evaluate(async () => {
@@ -18,6 +18,9 @@ async function getClipboardText(page: Page): Promise<string> {
 
 test.beforeEach(async ({ page }: { page: Page }): Promise<void> => {
   await page.goto('/', customTimeout)
+
+  // Wait for the page to load/hydrate completely.
+  await page.waitForLoadState('networkidle', customTimeout)
 })
 
 test.describe('A simple user story:', () => {
@@ -29,8 +32,18 @@ test.describe('A simple user story:', () => {
     await page.click('button[type="submit"]')
 
     // Wait for navigation to the preview config page.
-    await expect(page).toHaveURL(expectedConfigURL, customTimeout)
+    await page.waitForSelector('button:has-text("URL")', customTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customTimeout)
+    await expect(page).toHaveURL(expectedConfigURL)
+
+    // To maintain consistency, de-select the 'Stars' checkbox,
+    // and selects the 'Description' checkbox.
+    await page.click('input[name="stargazers"]')
+    await page.click('input[name="description"]')
 
+    // Obtain the consistent preview image URL.
     await page.click('button:has-text("URL")')
 
     // Compare the clipboard content to the expected image URL.
@@ -40,6 +53,10 @@ test.describe('A simple user story:', () => {
 
     // Visit the image URL and snapshot the image.
     await page.goto(url, customTimeout)
+
+    // Wait for the page to load/hydrate completely.
+    await page.waitForLoadState('networkidle', customTimeout)
+
     const image = await page.screenshot()
     expect(image).toMatchSnapshot()
   })

next.config.js

@@ -28,6 +28,10 @@ const nextConfig = {
       },
     ]
   },
+  // Disable NextJS dev server icon for Playwright screenshot consistency.
+  devIndicators: {
+    appIsrStatus: false,
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -13,6 +13,7 @@
     "test:unit:watch": "jest --watch",
     "test:unit:update-snapshot": "jest -u",
     "test:e2e": "playwright test",
+    "test:e2e:update-snapshot": "playwright test --update-snapshots",
     "test": "yarn test:unit && yarn test:e2e",
     "start": "next start",
     "lint": "biome ci --max-diagnostics=999 .",
@@ -47,11 +48,6 @@
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.15",
-    "typescript": "~5.7.2",
-    "daisyui": "^2.52.0",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.49",
     "@biomejs/biome": "^1.9.4",
     "@changesets/cli": "^2.27.10",
     "@playwright/test": "^1.49.0",

playwright.config.ts

@@ -55,10 +55,10 @@ export default defineConfig({
 
     // Firefox supports clipboard permission by default.
     // (In fact, clipboard permission is not defined for Firefox. DO NOT ADD IT.)
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
 
     // Playwright's clipboard permission is bugged on Safari.
     // {
@@ -82,27 +82,27 @@ export default defineConfig({
     // },
 
     /* Test against branded browsers. */
-    {
-      name: 'Microsoft Edge',
-      use: {
-        ...devices['Desktop Edge'],
-        channel: 'msedge',
-        permissions: ['clipboard-read'],
-      },
-    },
-    {
-      name: 'Google Chrome',
-      use: {
-        ...devices['Desktop Chrome'],
-        channel: 'chrome',
-        permissions: ['clipboard-read'],
-      },
-    },
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     ...devices['Desktop Edge'],
+    //     channel: 'msedge',
+    //     permissions: ['clipboard-read'],
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     ...devices['Desktop Chrome'],
+    //     channel: 'chrome',
+    //     permissions: ['clipboard-read'],
+    //   },
+    // },
   ],
 
-  // Run your local dev server before starting the tests.
+  // Init a new production build and start a local server before running the e2e tests.
   webServer: {
-    command: 'yarn dev',
+    command: 'yarn build && yarn start',
     url: 'http://127.0.0.1:3000',
     reuseExistingServer: !process.env.CI,
   },

src/components/configuration/checkBoxWrapper.tsx

@@ -22,6 +22,7 @@ const CheckBoxWrapper = ({
         <input
           className="checkbox checkbox-sm"
           type="checkbox"
+          name={keyName}
           checked={!!checked}
           disabled={disabled}
           onChange={(e) => {