refactor: address comments.

Author: knightedcodemonkey

package.json

@@ -37,7 +37,7 @@
     "check-types": "tsc -p tsconfig.json",
     "lint:playwright": "eslint playwright playwright.config.ts src/index.html",
     "test:e2e": "npm run build && PLAYWRIGHT_WEB_SERVER_MODE=preview PLAYWRIGHT_PORT=8081 playwright test",
-    "test:e2e:webkit": "npm run build && PLAYWRIGHT_WEB_SERVER_MODE=preview PLAYWRIGHT_PORT=8081 playwright test --project=webkit",
+    "test:e2e:webkit": "npm run build && PLAYWRIGHT_INCLUDE_WEBKIT=true PLAYWRIGHT_WEB_SERVER_MODE=preview PLAYWRIGHT_PORT=8081 playwright test --project=webkit",
     "test:e2e:dev": "playwright test",
     "test:e2e:headed": "npm run build && PLAYWRIGHT_WEB_SERVER_MODE=preview PLAYWRIGHT_PORT=8081 playwright test --headed",
     "test": "echo \"Error: no test specified\" && exit 1",

playwright.config.ts

@@ -2,6 +2,7 @@ import { defineConfig, devices } from '@playwright/test'
 
 const env = process.env
 const isCI = env?.CI === 'true'
+const includeWebKit = env?.PLAYWRIGHT_INCLUDE_WEBKIT === 'true'
 const HOST = env?.PLAYWRIGHT_HOST ?? '127.0.0.1'
 const PORT = Number(env?.PLAYWRIGHT_PORT ?? 4174)
 const baseURL = env?.PLAYWRIGHT_BASE_URL ?? `http://${HOST}:${PORT}`
@@ -20,7 +21,7 @@ const projects = [
   },
 ]
 
-if (isCI) {
+if (isCI || includeWebKit) {
   projects.push({
     name: 'webkit',
     use: { ...devices['Desktop Safari'] },

playwright/github-pr-drawer.spec.ts

@@ -27,6 +27,15 @@ const clickOpenPrDrawerSubmit = async (page: Page) => {
   await expect(drawer).toBeVisible()
   const submitButton = drawer.getByRole('button', { name: 'Open PR' })
   await expect(submitButton).toBeEnabled()
+  /*
+   * NOTE: WebKit's HTML <dialog> Top Layer behavior can cause Playwright
+   * actionability checks to fail or time out, even when the control is
+   * visibly ready and works in Safari.
+   *
+   * Keep this evaluate-based click because standard locator.click() and
+   * locator.click({ force: true }) have been flaky here and can fail to
+   * resolve the hit target for this drawer flow.
+   */
   await submitButton.evaluate(element => {
     if (element instanceof HTMLButtonElement) {
       element.click()
@@ -55,6 +64,7 @@ const submitOpenPrAndConfirm = async (
     await expect(dialog.getByText(line, { exact: true })).toBeVisible()
   }
 
+  /* Same WebKit <dialog> Top Layer issue applies to the confirm button. */
   await dialog.locator('button[value="confirm"]').evaluate(element => {
     if (element instanceof HTMLButtonElement) {
       element.click()