Jp/playwright setup

.gitignore

@@ -23,3 +23,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/general.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('has welcome message', async ({ page }) => {
+  await page.goto('/')
+
+  await expect(page.getByRole('heading', { name: 'welcome' })).toBeVisible()
+})

e2e/utiity-bar.spec.ts

@@ -0,0 +1,84 @@
+import { test, expect } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+})
+
+test.describe('Toggle To Dark Theme', () => {
+  // Always have the dark class
+  test.afterEach(async ({ page }) => {
+    await expect(page.getByTestId('app')).toHaveClass(/dark/)
+  })
+
+  test('Click', async ({ page }) => {
+    await page.getByRole('button', { name: 'Toggle Theme [Shift + T]' }).click()
+  })
+
+  test('Keyboard', async ({ page }) => {
+    await page.keyboard.press('Shift+T')
+  })
+})
+
+test.describe('Toggle back to Light Theme from dark', () => {
+  // Always have the light theme
+  test.afterEach(async ({ page }) => {
+    await expect(page.getByTestId('app')).toHaveClass(/light/)
+  })
+
+  test('Click', async ({ page }) => {
+    await page.getByRole('button', { name: 'Toggle Theme [Shift + T]' }).click()
+    await page.getByRole('button', { name: 'Toggle Theme [Shift + T]' }).click()
+  })
+
+  test('Keyboard', async ({ page }) => {
+    await page.keyboard.press('Shift+T')
+    await page.keyboard.press('Shift+T')
+  })
+})
+
+test.describe('Viewport Size Dropdown', () => {
+  test.afterEach(async ({ page }) => {
+    await expect(
+      page.getByRole('menuitemradio', { name: 'Mobile' }),
+    ).toBeVisible()
+    await expect(
+      page.getByRole('menuitemradio', { name: 'Tablet' }),
+    ).toBeVisible()
+    await expect(
+      page.getByRole('menuitemradio', { name: 'Desktop' }),
+    ).toBeVisible()
+    await expect(
+      page.getByRole('menuitem', { name: 'Responsive' }),
+    ).toBeVisible()
+  })
+
+  test('Click', async ({ page }) => {
+    await page
+      .getByRole('button', { name: 'Viewport Size [Shift + V]' })
+      .click()
+  })
+
+  test('Keyboard', async ({ page }) => {
+    await page.keyboard.press('Shift+V')
+  })
+})
+
+test.describe('Viewport Size Affects Iframe', () => {
+  // TODO -> Compare iFrame sizes with Enums?
+})
+
+test.describe('Settings', () => {
+  test.afterEach(async ({ page }) => {
+    await expect(page.getByTestId('SettingsPanel')).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible()
+  })
+
+  test('Click', async ({ page }) => {
+    await page.getByRole('button', { name: 'Settings [Shift + S]' }).click()
+  })
+
+  test('Keyboard', async ({ page }) => {
+    await page.keyboard.press('Shift+S')
+  })
+})
+

package.json

@@ -19,7 +19,8 @@
     "access": "public"
   },
   "scripts": {
-    "test": "tsc && vitest run",
+    "test": "tsc && vitest run && npm run e2e",
+    "e2e": "playwright test",
     "dev": "vite --port 4000",
     "build": "tsc && vite build",
     "preview": "vite preview",
@@ -40,7 +41,9 @@
   },
   "devDependencies": {
     "@minko-fe/postcss-pxtorem": "^1.3.0",
+    "@playwright/test": "^1.41.2",
     "@preact/preset-vite": "^2.5.0",
+    "@types/node": "^20.11.16",
     "autoprefixer": "^10.4.14",
     "gh-pages": "^6.0.0",
     "np": "^8.0.4",

playwright.config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+const HOST = 'http://localhost'
+const PORT = 4000
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* 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: `${HOST}:${PORT}`,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run dev',
+    url: `${HOST}:${PORT}`,
+    reuseExistingServer: !process.env.CI,
+  },
+})

src/app.tsx

@@ -119,13 +119,13 @@ export function App(props: AppProps) {
   KeyboardShortcuts()
 
   return (
-    <div className={cx(
-      'font-sans',
-      {
-        'light': themeStore.mode === 'light',
-        'dark': themeStore.mode === 'dark',
-      }
-    )}>
+    <div
+      data-testid="app"
+      className={cx('font-sans', {
+        light: themeStore.mode === 'light',
+        dark: themeStore.mode === 'dark',
+      })}
+    >
       <div
         className={cx(
           'grid h-screen grid-cols-[250px,1fr] bg-gray-100 transition-all duration-500',

src/features/settings/SettingsPanel.tsx

@@ -6,7 +6,7 @@ export default function () {
   const settings = useSettingsStore()
   const [localNavUrl, setLocalNavUrl] = useState(settings.configUrl)
   return (
-    <div className="flex flex-col gap-6">
+    <div data-testid="SettingsPanel" className="flex flex-col gap-6">
       <h2 className="text-md font-bold uppercase">Settings</h2>
       <div className="flex flex-col gap-2">
         <label className="text-xs font-medium uppercase" for="parts-json-url">

vite.config.ts

@@ -9,6 +9,7 @@ export const sharedConfig: UserConfig = defineConfig({
   ],
   test: {
     globals: true,
+    include: ['./src/**/*.{spec,test}.{ts,tsx}'],
   },
 })