Panther 模拟真实用户行为完成端到端购物车测试【E2E测试】

Panther 默认不执行 JavaScript，导致 click() 无法触发依赖 JS 的购物车按钮；需启用 WebDriver 模式、等待元素可交互、轮询断言动态文本，并注意重定向状态码、CSRF token 及会话隔离。

Panther 能跑通端到端购物车流程，但默认不处理异步加载、表单防重提交、动态 DOM 更新这些真实场景细节——直接照搬示例代码大概率在 add to cart 按钮点击后失败。

为什么 Panther 的 click() 常常点不动购物车按钮

Panther 默认使用 Symfony 的 BrowserKit，它本质是 HTTP 客户端模拟，不执行 JavaScript。而现代电商页面的“加入购物车”按钮往往依赖 JS 绑定事件、懒加载商品数据、或通过 AJAX 提交——click() 只发了个 GET 请求，根本没触发实际逻辑。

• 确认页面是否含关键 JS：检查源码里是否有 addEventListener('click', ...) 或 data-turbo='true' 等前端框架标记
• 改用 Panther 的 WebDriver 模式（需 ChromeDriver）：panther: true 在配置中启用，才能真正驱动浏览器执行 JS
• 等待元素可交互：用 $page->waitForElementVisible('button#add-to-cart') 替代简单 $page->click('button#add-to-cart')

assertSelectorTextContains() 断言购物车数量失败的常见原因

购物车徽标（如 .cart-badge）的文本通常是 JS 动态更新的，Panther 同步调用 assertSelectorTextContains() 时，DOM 还没刷新，断言就提前执行了。

• 不要用 assertSelectorTextContains('.cart-badge', '1') 直接断言，改用轮询等待：$page->waitForFunction("document.querySelector('.cart-badge').textContent.includes('1')")
• 若页面用 Vue/React，可能需要等 data-testid="cart-count" 这类稳定属性，避免依赖易变的 class 名
• 注意 Panther 的 waitForElementVisible() 只判断显示状态，不保证内容已更新；waitForText() 才真正等待文本变化

测试支付跳转时 assertResponseStatusCodeSame(200) 总是过不了

用户点击“去结算”后，页面通常会重定向到 /checkout 或第三方支付网关（如 Stripe Checkout），HTTP 状态码变成 302 或直接跳走——Panther 默认跟随重定向，但 assertResponseStatusCodeSame(200) 会对比最终响应，不是跳转发起时的状态。

• 想验证跳转是否发生：用 $page->assertResponseStatusCodeSame(302)，并检查 Location header
• 想验证跳转后页面内容：先 $page->waitForNavigation()，再 $page->assertSee('Secure Checkout')
• 若跳转目标是外部域名（如 https://checkout.stripe.com），Panther 默认无法访问，需 mock 支付 SDK 或用 cy.intercept() 类思路（需自定义 HttpClient）

真实购物车流程里，最常被忽略的是 CSRF token 和 session 失效——Panther 默认复用 session，但多个测试用例串行执行时，token 可能过期或被覆盖，建议每个测试用例单独启动新会话，或显式 $client->restart()。