Sådan bruges Laravel Dusk til at teste Stripe (Cashier)

Jeg kunne ikke finde nogen der beskriver, hvordan man gør dette. Hvis der er en bedre måde eller ressource, så fortæl mig det.

Sørg for at læse advarslerne nederst i indlægget.

Stripe.js eller Stripe v2

Dette er den ældre forældede metode, men bruges stadig af et antal websteder.

Først et hurtigt overblik over, hvad der sker for bedre at forstå udfordringen ved at teste den. Når der klikkes på betalingsknappen, overlejres en iframe øverst på skærmen. Inde i denne ramme er betalingsmetoden. Når en betaling er foretaget, går rammen væk.

Så vi er nødt til at klikke på betalingsknappen, gå til Stripe iframe, indtaste oplysningerne om betaling og misc, klikke på betalingsknappen, vente på processen og derefter forlade rammen.

I dette eksempel brugte jeg denne kode til at oprette knappen og modalen:

Hvilket skaber denne knap:

Og denne modal:

Bemærk, at postnummerindtastning er aktiveret, men den vises først før du begynder at indtaste dit kreditkortnummer. Hvilket er en anden udfordring.

Her er testen:

De vigtige dele:

Vent til iframe-overlayet åbnes:

-> waitFor ( 'iframe [name = stripe_checkout_app]')

Skift til at bruge denne iframe:

$ Browser-> førere> switchTo () -> ramme ( 'stripe_checkout_app');

Vent til iframe forsvinder:

-> waitUntilMissing ( 'iframe [name = stripe_checkout_app]')

Bemærk: Jeg har flest problemer med dette. Det mislykkes konstant, fordi det tager et stykke tid at POST og derefter gå væk. Bare vær opmærksom på, at du muligvis skal tilføje mere af en forsinkelse, hvis du har problemer

Gå tilbage til standardindstillingen:

$ Browser-> førere> switchTo () -> defaultContent ();

Bemærk: Denne del er ikke nødvendig, medmindre du har flere test, du vil køre efter, at Stripe har gjort det.

Du spørger måske dig selv efter felterne, hvorfor brugte jeg pladsholderen som vælger? Lad os se på mit eksempel med kreditkort

Bemærk det faktiske inputelement:

Id'et er et tilfældigt felt. Der er heller ikke noget navn. Jeg gætter på, at det er for at stoppe ting som dette. Så brug af pladsholder er det eneste, der synes brugbart. Men det gør denne test MEGET sprø.

Stripe v3 eller Stripe Elements

I dette eksempel brugte jeg koden Stripe har et eksempel 3 på deres hurtige startside.

Det giver en post, der ligner:

Først et hurtigt overblik over, hvad der sker for bedre at forstå udfordringen ved at teste den. Når siden indlæses, indlæses en iframe over et element eller elementer, du har, med indgangselementerne til kreditkortindholdet.

Så i eksemplet:

Bliver byttet ud med det kortinput, du ser på i skærmbillede.

Problemet er, at da det er i en anden ramme, gør det at komme til det lidt mere kompliceret. For at teste er vi nødt til at vente på, at disse elementer indlæses, udfyld alle andre oplysninger, gå til Stripe iframe, udfyld kreditkortelementerne, forlad og gå tilbage til hovedvinduet og klik på betalingsknappen og til sidst vent på processen.

Her er Dusk-testen, jeg brugte:

Her er de vigtige dele:

Vent til stripelementerne indlæses:

-> waitFor ( 'iframe [name = __ privateStripeFrame3]')

Skift til Stripe iframe:

$ Browser-> førere> switchTo () -> ramme ( '__ privateStripeFrame3');

Gå tilbage til standardindstillingen:

$ Browser-> førere> switchTo () -> defaultContent ();

Husk, at disse elementer meget kan afhænge af, hvad du brugte. Dette skal dog være nok til at komme i gang. Virkelig den vigtigste del er at gå til en iframe og tilbage.

Ryd op

Ben Wrigley spørger, hvordan man sletter brugeren fra Stripe, når testen var afsluttet.

Du kan ikke gøre dette under tearDown (), da du har brug for brugeren. Så dette skal være i slutningen af ​​selve testen

// Slet abonnementet
$ Bruger-> abonnement () -> slet ();
// Slet kunden fra Stripe
\ Stripe \ Stripe :: setApiKey (\ Config :: get ( 'services.stripe.secret'));
\ Stripe \ Customer :: hente ($ bruger-> stripe_id) -> slet ();

Bemærk: Det kan tage et par sekunder at køre den sidste bit.

Advarsler

Disse test er MEGET sprø. Det eneste, det kræver, er, at Stripe omdøber noget, og dine Dusk-tests stopper med at arbejde.

Jeg har haft et par lejligheder, hvor iframe ikke er fuldt indlæst, og testen mislykkedes. Dette virker sjældent, men noget at være opmærksom på.

Endelig ser Stripe ikke ud til at kunne lide dette og vil undertiden sætte en verifikationsside op for at bevise, at du er et menneske. Jeg løb kun ind i dette én gang, så jeg ved ikke, hvad der udløser det. Naturligvis kan dette være meget problematisk.

Værsgo. Test af Laravel Cashier Stripe ved hjælp af Laravel Dusk.

Jeg har ikke brugt Braintree, men jeg ville forestille mig, at den ville bruge en lignende metode.

Hvis du har bedre ideer eller kommentarer, så fortæl mig det nedenfor eller på Twitter.

Som altid tak til Taylor Otwell