E-commerce Checkout

This tutorial shows you how to create a test for an e-commerce checkout process.

Overview

This tutorial covers:

• Recording a checkout flow

• Handling form inputs

• Verifying order confirmation

• Testing with different payment methods

Prerequisites

• TrueAssert account

• Browser plugin installed

• E-commerce website to test

• Test products available

Step 1: Plan Your Test

Test Flow:

1. Navigate to product page

2. Add product to cart

3. Go to cart

4. Proceed to checkout

5. Fill shipping information

6. Select payment method

7. Complete order

8. Verify order confirmation

Step 2: Record the Test

1. Open browser plugin

2. Navigate to e-commerce website

3. Click "Record"

4. Perform checkout flow:

   • Navigate to product page

   • Click "Add to Cart"

   • Click cart icon/badge

   • Click "Checkout" or "Proceed to Checkout"

   • Fill shipping form:

     • Name

     • Address

     • City, State, ZIP

     • Phone

   • Select shipping method

   • Fill payment information:

     • Card number

     • Expiry date

     • CVV

   • Click "Place Order"

   • Wait for order confirmation

5. Click "Stop and Save"

6. Enter test name: E-commerce Checkout Test

7. Click "Save"

Step 3: Review Generated Steps

1. Go to test detail page

2. Review all steps:

   • Verify selectors for form fields

   • Check values are correct

   • Ensure step order is logical

3. Edit any incorrect steps:

   • Fix selectors if needed

   • Update values if needed

   • Add waits if timing issues

Step 4: Optimize the Test

Add Waits

Add waits before critical interactions:

• Wait for cart to update after adding item

• Wait for checkout page to load

• Wait for payment form to appear

Use Test Data

Consider using test data:

• Use test credit card numbers

• Use test addresses

• Use test email addresses

Handle Dynamic Elements

• Cart item counts may be dynamic

• Order numbers are unique

• Use stable selectors for confirmation

Step 5: Execute Test

1. Click "Run Test"

2. Monitor execution:

   • Watch for form filling

   • Check for navigation

   • Verify order completion

3. Wait for completion

Step 6: Verify Results

1. Check execution status:

   • Should be SUCCESS if all steps passed

   • Review any FAIL steps

2. Review step results:

   • Verify all form fields were filled

   • Check navigation steps succeeded

   • Confirm order was placed

3. View screenshots:

   • Check form filling screenshots

   • Verify order confirmation screenshot

   • Review any failure points

Advanced Scenarios

Multiple Products

Test checkout with multiple products:

1. Add multiple products to cart

2. Verify cart shows all items

3. Proceed through checkout

4. Verify order includes all items

Different Payment Methods

Test different payment methods:

1. Create separate tests for each method

2. Or use test data to switch methods

3. Verify each method works

Shipping Options

Test different shipping options:

1. Select different shipping methods

2. Verify shipping costs update

3. Complete checkout with each option

Troubleshooting

Form Fields Not Filling

Problem: FILL steps fail

Solution:

1. Check selectors for form fields

2. Verify fields are visible and enabled

3. Add waits before filling

4. Check for iframes (payment forms)

Cart Not Updating

Problem: Cart count doesn't update

Solution:

1. Add WAIT step after adding to cart

2. Wait for cart badge to update

3. Use stable selector for cart count

Payment Form Issues

Problem: Payment form not accessible

Solution:

1. Check if payment form is in iframe

2. Verify iframe is loaded

3. Use appropriate selectors for iframe content

Best Practices

1. Use Test Data: Always use test payment methods

2. Handle Timing: Add waits for dynamic content

3. Verify Results: Always verify order confirmation

4. Test Edge Cases: Test with different scenarios

Related Topics

• Browser Plugin Recording - Recording guide

• Running Tests - Execute tests

• Debugging Failed Tests - Fix issues

---

← Back to Documentation