如何使用Chromedriver及Laravel Dusk测试支付请求弹窗功能？

嘿，我之前在做Laravel Dusk测试Stripe支付弹窗的时候也遇到过这个头疼的问题——毕竟原生浏览器弹窗根本没法用普通的CSS选择器定位。给你分享几个亲测有效的方案：

方案一：通过JavaScript直接触发支付请求（绕过按钮点击） #

Stripe的Payment Request Button基于Web Component实现，可能用到了Shadow DOM，所以直接用$browser->click()找不到元素。你可以通过执行JS代码穿透Shadow DOM点击按钮，或者直接调用支付请求实例的方法：

方法1：穿透Shadow DOM点击按钮 #

如果页面上的Stripe按钮是默认自定义元素渲染的，用这段代码触发点击：

$browser->executeScript('
  document.querySelector("stripe-payment-request-button")
    .shadowRoot.querySelector(".PaymentRequestButton")
    .click();
');

方法2：全局挂载支付请求实例，直接调用show() #

前端初始化Stripe按钮时，把支付请求实例挂载到全局window对象，测试时就能直接调用显示方法：

// 前端初始化代码
const stripe = Stripe('你的测试密钥');
const elements = stripe.elements();

const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: { label: '订单总额', amount: 1000 },
});

const prButton = elements.create('paymentRequestButton', {
  paymentRequest: paymentRequest,
});

// 挂载到全局，方便测试调用
window.stripePaymentRequest = paymentRequest;

然后在Dusk测试中直接触发弹窗：

$browser->executeScript('window.stripePaymentRequest.show();');

方案二：利用Chrome DevTools协议模拟支付流程 #

Chromedriver支持通过DevTools命令直接控制Payment Request API，你可以用这个模拟用户完成支付的整个流程，不需要手动操作弹窗：

1. 首先启用Payment Request的DevTools支持：

$browser->driver->executeCdpCommand('PaymentRequest.enable', []);

2. 模拟用户选择支付方式并填写测试卡片信息：

$browser->driver->executeCdpCommand('PaymentRequest.setPaymentMethod', [
  'methodName' => 'basic-card',
  'details' => [
    'cardNumber' => '4242424242424242',
    'expiryMonth' => '12',
    'expiryYear' => '2030',
    'cardholderName' => '测试用户',
    'cvc' => '123'
  ]
]);

3. 触发支付请求后，Chrome会自动使用你设置的模拟信息完成支付流程，无需手动操作弹窗。

方案三：跳过前端弹窗，直接测试后端逻辑 #

如果你的测试重点是后端的支付处理逻辑，而非前端弹窗交互，完全可以绕过前端，直接调用后端支付处理接口：

$browser->post('/api/payment/process', [
  'stripe_token' => 'tok_visa', // Stripe测试token
  'amount' => 1000,
  // 其他必要参数
])->assertStatus(200);

注意事项 #

• 确保Chromedriver版本和Chrome浏览器版本完全兼容，旧版本可能不支持Payment Request相关的DevTools命令；
• 测试时一定要用Stripe的测试密钥，避免产生真实交易；
• 如果方案一的Shadow DOM选择器无效，可以打开Chrome开发者工具，手动定位按钮真实路径（在Elements面板开启"Show user agent shadow DOM"选项）。

内容的提问来源于stack exchange，提问作者Ryan