Laravel Dusk组件内无法访问Stripe iframe元素问题求助

问题根因 #

Laravel Dusk 的 within() 方法会自动为组件作用域内的所有 CSS 选择器，拼接你在组件 selector() 方法中返回的 .__PrivateStripeElement 前缀。当你进入 Stripe 独立 iframe 后查找输入框时，Dusk 依然给输入框选择器拼接了此前缀，但 iframe 内部是完全独立的 DOM 结构，不存在对应父元素，因此触发元素找不到的报错。

修复方案 #

1. 修改 StripeForm 组件代码 #

选择器前加 @ 前缀即可告知 Dusk 跳过自动拼接组件前缀的逻辑，同时组件方法无需额外传入 Browser 实例，可直接调用 Dusk 原生方法：

// selector 方法保持不变
public function selector()
{
    return '.__PrivateStripeElement';
}

public function fillCardDetails($number = '4242424242424242')
{
    $this->waitFor('@iframe')
         ->withinFrame('@iframe', function($browser) use ($number) {
             $browser->waitFor('@input[placeholder="Card number"]', 10) // 替换固定等待，提升执行效率
                 ->keys('@input[placeholder="Card number"]', $number)
                 ->keys('@input[placeholder="MM / YY"]', '0125')
                 ->keys('@input[placeholder="CVC"]', '123')
                 ->keys('@input[placeholder="ZIP"]', '12345');
         });
}

2. 修改测试调用代码 #

within 回调接收的参数是组件实例，直接调用组件方法即可：

public function user_can_subscribe()
{
    $this->browse(function (Browser $browser) {
        $browser->visit(new SubscribePage)
            ->within(new StripeForm, function ($stripeForm) {
                $stripeForm->fillCardDetails();
            })
            ->press('@subscribe-button');
    });
}

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