كيفية استخدام Laravel Dusk لاختبار Stripe (Cashier)

لم أجد أي واحد يصف كيفية القيام بذلك. إذا كان هناك طريقة أو مورد أفضل ، فيرجى إخبارنا بذلك.

يرجى التأكد من قراءة التحذيرات أسفل المشاركة.

Stripe.js أو الشريط v2

هذه هي الطريقة القديمة المهملة ولكن لا يزال يتم استخدامها من قبل عدد من المواقع.

أولاً ، نظرة عامة سريعة على ما يحدث لفهم تحدي اختباره بشكل أفضل. عند النقر على زر الدفع ، يتم تراكب إطار iframe أعلى الشاشة. داخل هذا الإطار هو طريقة الدفع. بعد إجراء الدفع ، يختفي الإطار.

لذلك نحن بحاجة إلى النقر فوق زر الدفع ، والانتقال إلى الشريط "iframe" ، وإدخال معلومات الدفع والأخطاء ، والنقر فوق زر الدفع ، والانتظار حتى تتم معالجتها ، ثم مغادرة الإطار.

في هذا المثال ، استخدمت هذا الكود لإنشاء الزر والشرط:

مما يخلق هذا الزر:

وهذه الوسائط:

لاحظ أنه تم تمكين إدخال الرمز البريدي ، إلا أنه لا يظهر حتى تبدأ في إدخال رقم بطاقة الائتمان الخاصة بك. وهو تحد آخر.

هنا هو الاختبار:

الأجزاء المهمة:

انتظر حتى يفتح تراكب iframe:

-> WAITFOR ( 'الإطار من [اسم = stripe_checkout_app]')

انتقل إلى استخدام iframe:

$ browser-> driver-> switchTo () -> الإطار ( "stripe_checkout_app ')؛

انتظر iframe للذهاب بعيدا:

-> waitUntilMissing ( 'الإطار من [اسم = stripe_checkout_app]')

ملاحظة: لدي معظم المشاكل في هذا. إنه يفشل باستمرار لأنه يأخذ لحظة إلى POST ثم يذهب بعيدا. فقط كن على دراية أنك قد تحتاج إلى إضافة المزيد من التأخير إذا كان لديك مشاكل

العودة إلى الافتراضي:

$ browser-> driver-> switchTo () -> defaultContent ()؛

ملاحظة: هذا الجزء ليس ضروريًا إلا إذا كان لديك المزيد من الاختبارات التي تريد تشغيلها بعد أن يقوم Stripe بالقيام بذلك.

ربما تسأل نفسك عن الحقول ، لماذا استخدمت العنصر النائب كمحدد؟ لنلقِ نظرة على حقل بطاقة الائتمان الخاص بي

لاحظ عنصر الإدخال الفعلي:

المعرف هو حقل عشوائي. هناك أيضا لا اسم. أنا أعتقد أن هذا هو وقف أشياء مثل هذا. لذا فإن استخدام العنصر النائب هو الشيء الوحيد الذي يبدو قابلاً للاستخدام. ومع ذلك فإنه يجعل هذا الاختبار هش جدا.

شريط v3 أو عناصر شريطية

في هذا المثال ، استخدمت الكود الشريطي يحتوي على مثال 3 في صفحة البداية السريعة الخاصة بهم.

يعطي إدخال يبدو:

أولاً ، نظرة عامة سريعة على ما يحدث لفهم تحدي اختباره بشكل أفضل. عند تحميل الصفحة ، يتم تحميل iframe على عنصر أو عناصر لديك ، مع عناصر إدخال إدخال بطاقة الائتمان عليها.

لذلك في المثال:

الحصول على تبديل مع إدخال البطاقة الذي تراه في لقطة الشاشة.

تكمن المشكلة في أنه نظرًا لوجود إطار مختلف يجعل الوصول إليه أكثر تعقيدًا. لاختبار أننا بحاجة إلى انتظار تحميل هذه العناصر ، قم بملء جميع المعلومات الأخرى ، وانتقل إلى Stripe iframe ، املأ عناصر بطاقة الائتمان ، واترك ثم عد إلى النافذة الرئيسية وانقر على زر الدفع ، وأخيراً انتظر العملية.

هنا اختبار الغسق الذي استخدمته:

وهنا الأجزاء المهمة:

انتظر حتى يتم تحميل عناصر الشريط:

-> WAITFOR ( 'الإطار من [اسم = __ privateStripeFrame3]')

التغيير إلى الشريط iframe:

$ browser-> driver-> switchTo () -> الإطار ( '__ privateStripeFrame3')؛

العودة إلى الافتراضي:

$ browser-> driver-> switchTo () -> defaultContent ()؛

ضع في اعتبارك أن هذه العناصر يمكن أن تعتمد اعتمادا كبيرا على ما استخدمته. ولكن هذا يجب أن يكون كافيا لتبدأ. حقا الجزء الأكثر أهمية هو الذهاب إلى iframe والعودة.

نظف

بن ريجلي يسأل عن كيفية حذف المستخدم من الشريط عند اكتمال الاختبار.

لن تكون قادرًا على القيام بذلك أثناء tearDown () كما تحتاج المستخدم. لذلك يجب أن يكون هذا في نهاية الاختبار نفسه

// حذف الاشتراك
$ من قبل المستخدم> الاشتراك () -> حذف ()؛
// حذف العميل من الشريط
\ الشريط \ الشريط :: setApiKey (\ التكوين :: الحصول على ( 'services.stripe.secret'))؛
\ الشريط \ العملاء :: استرداد ($ من قبل المستخدم> stripe_id) -> حذف ()؛

ملاحظة: يمكن أن يستغرق تشغيل البت الأخير بضع ثوانٍ.

تحذيرات

هذه الاختبارات هشة للغاية. كل ما يتطلبه الأمر هو أن يعيد Stripe تسمية شيء ما وستتوقف اختبارات الغسق عن العمل.

لقد مررت في مناسبات قليلة حيث لم يتم تحميل iframe بالكامل وفشل الاختبار. هذا يبدو نادرا ، ولكن شيئا ليكون على بينة من.

أخيرًا ، لا يبدو Stripe معجبًا بهذا وسيضع أحيانًا صفحة تحقق لإثبات أنك إنسان. لقد واجهت هذا مرة واحدة فقط ، لذلك لا أعرف ما الذي يطلقه. من الواضح أن هذا قد يكون مشكلة كبيرة.

ها أنت ذا. اختبار Laravel Cashier Stripe باستخدام Laravel Dusk.

لم أستخدم Braintree ، ومع ذلك أود أن أتصور أنه سيستخدم طريقة مماثلة.

إذا كانت لديك أية أفكار أو تعليقات أفضل ، فيرجى إخبارنا أدناه أو عبر Twitter.

كما هو الحال دائمًا ، شكرًا لك على تايلور أوتويل