openspec-playwright 0.1.74 → 0.1.75

package/.claude/skills/openspec-e2e/SKILL.md

@@ -554,7 +554,7 @@ expect(box.width).toBeGreaterThan(0);
 Read `tests/playwright/pages/BasePage.ts` for shared utilities:
 - `goto(path)` — navigation with configurable `waitUntil`
 - `byTestId(id)`, `byRole(role, opts)`, `byLabel(label)`, `byText(text)`, `byPlaceholder(text)` — selector helpers in priority order
-- `click(locator)`, `fill(locator, value)` — safe interactions with built-in `scrollIntoViewIfNeeded`
+- `click(locator)`, `fill(locator, value)`, `fillAndVerify(locator, value)` — safe interactions; use `fillAndVerify` when the next action depends on the value being committed
 - `waitForToast(text?)`, `waitForLoad(spinnerSelector?)` — wait utilities
 - `reload()` — page reload with hydration
 
@@ -574,8 +574,8 @@ export class LoginPage extends BasePage {
 
   async login(user: string, pass: string) {
     await this.goto('/login');
-    await this.usernameInput.fill(user);
-    await this.passwordInput.fill(pass);
+    await this.fillAndVerify(this.usernameInput, user);
+    await this.fillAndVerify(this.passwordInput, pass);
     await this.submitBtn.click();
   }
 }
@@ -630,12 +630,13 @@ await app.click(app.byRole('button', { name: '提交' }));
 **Code examples — UI first:**
 
 ```typescript
-// ✅ UI 测试
-await page.goto(`${BASE_URL}/orders`);
-await page.getByRole("button", { name: "新建订单" }).click();
-await page.getByLabel("订单名称").fill("Test Order");
-await page.getByRole("button", { name: "提交" }).click();
-await expect(page.getByText("订单创建成功")).toBeVisible();
+// ✅ UI 测试 — fill 后必须验证值，确保框架同步完成
+const app = new AppPage(page);
+await app.goto(`${BASE_URL}/orders`);
+await app.click(app.byRole('button', { name: '新建订单' }));
+await app.fillAndVerify(app.byLabel('订单名称'), 'Test Order');
+await app.click(app.byRole('button', { name: '提交' }));
+await expect(page.getByText('订单创建成功')).toBeVisible();
 
 // ✅ Error path
 await page.goto(`${BASE_URL}/orders`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openspec-playwright",
-  "version": "0.1.74",
+  "version": "0.1.75",
   "description": "OpenSpec + Playwright E2E verification setup tool for Claude Code",
   "type": "module",
   "bin": {

package/templates/auth.setup.ts

@@ -68,10 +68,11 @@ setup('authenticate via UI', async ({ page }) => {
 
   // Common selector patterns (uncomment the one that matches):
   await page.fill('[data-testid="username"]', username);
+  await expect(page.locator('[data-testid="username"]')).toHaveValue(username);
   // await page.fill('input[name="email"]', username);
-  // await page.fill('input[type="email"]', username);
 
   await page.fill('[data-testid="password"]', password);
+  await expect(page.locator('[data-testid="password"]')).toHaveValue(password);
   // await page.fill('input[name="password"]', password);
 
   await page.click('[data-testid="login-button"]');

package/templates/e2e-test.ts

@@ -18,8 +18,8 @@ const BASE_URL = process.env.BASE_URL || 'http://localhost:3000';
  *     get passwordInput() { return this.byLabel('密码'); }
  *     get submitBtn() { return this.byRole('button', { name: '登录' }); }
  *     async login(user: string, pass: string) {
- *       await this.usernameInput.fill(user);
- *       await this.passwordInput.fill(pass);
+ *       await this.fillAndVerify(this.usernameInput, user);
+ *       await this.fillAndVerify(this.passwordInput, pass);
  *       await this.submitBtn.click();
  *     }
  *   }

package/templates/pages/BasePage.ts

@@ -82,23 +82,40 @@ export class BasePage {
   }
 
   /**
-   * Fill with automatic scroll-into-view. Clears existing value first.
+   * Fill with automatic scroll-into-view + blur.
+   * blur() triggers framework (Vue/React) change events and reactive updates,
+   * ensuring form state syncs before the next action.
+   * For fields with debounced validation, use fillAndVerify() instead.
    */
   async fill(selector: Locator | string, value: string) {
     const el = typeof selector === 'string' ? this.page.locator(selector) : selector;
     await el.scrollIntoViewIfNeeded();
     await el.fill(value);
+    await el.blur();
   }
 
   /**
-   * Type with character-by-character input. Triggers keydown/keyup events.
-   * Use for editors and inputs that listen to keystroke events.
+   * Type with character-by-character input + blur. Same sync guarantee as fill().
    */
   async type(selector: Locator | string, text: string) {
     const el = typeof selector === 'string' ? this.page.locator(selector) : selector;
     await el.scrollIntoViewIfNeeded();
     await el.click();
     await this.page.keyboard.type(text);
+    await el.blur();
+  }
+
+  // ─── Verified interactions ─────────────────────────────────────────────────
+
+  /**
+   * Fill + verify: waits for the value to appear in the input.
+   * Use for fields with debounced validation, async handlers, or
+   * when the next action depends on the value being fully committed.
+   */
+  async fillAndVerify(selector: Locator | string, value: string) {
+    await this.fill(selector, value);
+    const el = typeof selector === 'string' ? this.page.locator(selector) : selector;
+    await expect(el).toHaveValue(value);
   }
 
   // ─── Wait utilities ─────────────────────────────────────────────────────────

package/templates/seed.spec.ts

@@ -127,9 +127,10 @@ test.describe('Environment validation', () => {
 
 // test.describe('Error handling', () => {
 //   test('shows error message on invalid input', async ({ page }) => {
-//     await page.goto(`${BASE_URL}/submit`);
-//     await page.getByTestId('input').fill('');
-//     await page.getByTestId('submit').click();
+//     const app = createPage(page);
+//     await app.goto(`${BASE_URL}/submit`);
+//     await app.fillAndVerify(app.byTestId('input'), '');
+//     await app.click(app.byTestId('submit'));
 //     await expect(page.getByTestId('error')).toContainText('不能为空');
 //   });
 // });