Testing with Stripe Elements in Laravel Dusk

20th February 2021

Today I've been playing around with using Laravel Dusk to test a payment form on a small website.

The payment form is a key part of the owner's business so it's crucial it works all the time, whenever the customer makes a purchase.

The site uses Stripe Elements to let the customer enter their payment information securely.

Elements creates its own iframe element which makes it a little tricky to target and test. However, there's a handy method in Dusk which allows you to type inside of an iframe.

php
$this->browse(function ($browser) {
$browser->type('@input', 'whatever')
->withinFrame('.__PrivateStripeElement iframe', function ($browser) {
$browser
->type('[placeholder="Card number"]', '4242424242424242')
->type('[placeholder="MM / YY"]', '0923')
->type('[placeholder="CVC"]', '123');
});
});

Anything you need to type inside of Stripe's iframe you can do inside the withinFrame method and target the relevant inputs via their placeholders.

Hopefully someone finds that helpful! 🙂