Cannot browser test the checkout process

[Jamesking56]

Bug description

When using Pest browser testing on Statamic Cargo with the built-in checkout form, whenever the browser test inserts customer data or address data, the AJAX request to /!/cart doesn't see any POST data at all.

How to reproduce

1. Install Statamic + Cargo
2. Setup Pest Browser Testing
3. Write a browser test which goes through checkout, notice that the checkout cannot complete as it thinks there is no customer information or address information (the details do not save since the POST data is empty when reaching the controller)

Logs

Environment

Environment
Application Name: REDACTED
Laravel Version: 12.46.0
PHP Version: 8.4.16
Composer Version: 2.9.3
Environment: local
Debug Mode: ENABLED
URL: redacted.test
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Storage
public/storage: NOT LINKED

Statamic
Addons: 3
Sites: 1
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.0.0-alpha.21 PRO

Statamic Addons
duncanmcclean/statamic-cargo: 1.0.0-alpha.13
statamic/seo-pro: 7.0.0-beta.6
visuellverstehen/statamic-classify: dev-statamic-6-support

Cargo
Carts: file
Orders: file
Payment Gateways: Stripe

Additional details

No response

[duncanmcclean]

What does your test look like?

I haven't used Pest's browser testing feature before, but I wonder if the cart cookie might be getting lost somehow.

[Jamesking56]

I think its the checkout fetch request, I will make a PR as I have some changes that seem to fix the problem

[Jamesking56]

#108

[duncanmcclean]

What do your tests look like?

I'll see if I can find some time to spin up a fresh site and setup Pest.

[Jamesking56]

$browser = visit('/')
        ->on()->desktop()
		->navigate('/windows/windows-11-pro')
        ->type('quantity', '2')
        ->click('Add to Cart')
        ->assertSee('Added')
        ->click('My Basket')
        ->assertSee('Your licenses are almost ready to use.')
        ->click('Checkout')
        ->assertSee('Customer')
        ->type('first_name', 'John')
        ->type('last_name', 'Doe')
        ->type('email', 'customer1@example.com')
        ->keys('email', 'Tab') // Force the blur event
        ->wait(0.5) // Give JS a moment to sync the FormData
        ->click('Continue →')
        ->wait(5)
        ->assertSee('Billing Address')
        ->select('billing_country', 'GBR')
        ->type('billing_name', 'John Doe')
        ->type('billing_line_1', 'Mentor House')
        ->type('billing_line_2', 'Ainsworth Street')
        ->type('billing_city', 'Blackburn')
        ->type('billing_postcode', 'BB1 6AY')
        ->select('billing_state', 'LAN')
        ->keys('billing_postcode', 'Tab') // Force the blur event
        ->wait(0.5) // Give JS a moment to sync the FormData
        ->wait(5)
        ->click('Continue →')
        ->wait(5)
        ->withinFrame('#payment-element iframe', function (AwaitableWebpage $page) {
            $page
                ->typeSlowly('number', '4242424242424242')
                ->typeSlowly('expiry', '01/30')
                ->typeSlowly('cvc', '123');
        })
        ->wait(5)
        ->click('Pay Now')
        ->click('→ Go to the homepage');

[Jamesking56]

Another strange thing I've noticed in the browser testing is that the end screen does not have any order details on it, even though the Order did successfully go through (after my PR edits):

[duncanmcclean]

It sounds like it's all part of the same issue. I wonder if Cargo's cart cookie is being lost on subsequent requests.

[Jamesking56]

I thought I'd hook it up to GitHub Actions to see what behavior we have there and the customer doesn't even get attached to the order:

Something is definitely a miss with the checkout process but I'm a bit stumped as to what exactly

[duncanmcclean]

I'll try and take a look when I get a chance.

[duncanmcclean]

Just had some time to look into this. It seems like Pest's browser testing feature doesn't support FormData yet, which ultimately ends up breaking a bunch of things.

There's a PR open to fix it: pestphp/pest-plugin-browser#177

[Jamesking56]

Aha so does this also break the end of the checkout process not able to get the order_id from $_GET?

[duncanmcclean]

Possibly, I didn't get that far.

Either way - that's likely a Pest issue, rather than Cargo.

[Jamesking56]

Thanks for looking into this, for now I'll get test coverage by feature testing and creating the order manually, then asserting etc.