Testing Account Flows End-to-End

Thorough testing ensures your customer account pages work flawlessly. A broken login or confusing error can cost you customers. This lesson covers systematic testing approaches.

Setting Up Test Accounts

Create Test Customers

In Shopify Admin, go to Customers → Add customer
Create accounts with different scenarios:
- New customer (no orders)
- Customer with multiple orders
- Customer with saved addresses
- Customer with subscriptions (if applicable)

Use Unique Email Patterns

[email protected]       # New customer, no orders
[email protected]    # Has order history
[email protected] # Multiple saved addresses
[email protected]       # VIP tagged customer

Registration Flow Testing

Test Checklist

Test Case	Expected Result
Valid registration	Account created, redirected to account page
Existing email	Error message displayed
Missing required field	Validation error shown
Password too short	Error about minimum length
Marketing opt-in	Preference saved correctly

Registration Test Script

## Registration Test

1. Navigate to /account/register
2. Leave all fields empty, click Submit
   - [ ] All required fields show validation errors

3. Enter email that already exists
   - [ ] Error message about existing account

4. Enter valid info with 3-character password
   - [ ] Error about minimum password length

5. Enter valid info with marketing checkbox checked
   - [ ] Account created
   - [ ] Redirected to account page
   - [ ] Marketing preference saved in Admin

Test Checklist

Test Case	Expected Result
Valid credentials	Logged in, redirected to account
Wrong password	Generic error (no email leak)
Non-existent email	Same generic error
Empty fields	Validation errors
Return URL	Redirects to specified page

## Login Test

1. Navigate to /account/login
2. Enter wrong password
   - [ ] Generic error (doesn't reveal if email exists)

3. Enter correct credentials
   - [ ] Logged in successfully
   - [ ] Welcome message shows name

4. Log out, then visit /account directly
   - [ ] Redirected to login page

5. Add return_to parameter (/account/login?return_to=/collections/sale)
   - [ ] After login, redirected to sale collection

Password Recovery Testing

Test Script

## Password Recovery Test

1. On login page, click "Forgot your password?"
   - [ ] Recovery form appears
   - [ ] Login form hidden

2. Enter registered email, submit
   - [ ] Success message shown
   - [ ] Email received (check spam)

3. Click email link
   - [ ] Redirected to reset password page
   - [ ] Token in URL

4. Enter mismatched passwords
   - [ ] Error about password mismatch

5. Enter valid matching passwords
   - [ ] Password updated
   - [ ] Logged in automatically

Account Page Testing

Test Checklist

Test Case	Expected Result
Customer info displayed	Name and email shown
Orders listed	All orders visible with status
No orders state	Empty state message
Order link works	Links to order details
Logout works	Logged out, redirected

Account Test Script

## Account Overview Test

1. Log in as customer with orders
   - [ ] Order history shows all orders
   - [ ] Order status badges correct
   - [ ] Dates formatted correctly

2. Click an order
   - [ ] Order details page loads
   - [ ] Line items displayed

3. Log in as customer with no orders
   - [ ] Empty state message
   - [ ] "Start Shopping" link works

4. Check customer info section
   - [ ] Name displayed
   - [ ] Email displayed
   - [ ] Default address shown (if exists)

Address Management Testing

Test Script

## Address Management Test

1. Navigate to /account/addresses
2. Click "Add New Address"
   - [ ] Form appears

3. Submit empty form
   - [ ] Validation errors on required fields

4. Fill in valid address, submit
   - [ ] Address saved
   - [ ] Appears in address list

5. Set as default
   - [ ] Default badge updates
   - [ ] Appears first in list

6. Edit address
   - [ ] Form pre-filled with current values
   - [ ] Changes saved

7. Delete address
   - [ ] Confirmation prompt
   - [ ] Address removed

Order Details Testing

Test Script

## Order Details Test

1. View order with multiple items
   - [ ] All line items displayed
   - [ ] Images load correctly
   - [ ] Quantities correct

2. View order with discounts
   - [ ] Discount shown in summary
   - [ ] Totals calculate correctly

3. View fulfilled order
   - [ ] Fulfillment section visible
   - [ ] Tracking link works

4. View partially fulfilled order
   - [ ] Shows fulfilled vs unfulfilled items

5. View cancelled order
   - [ ] Cancelled notice displayed
   - [ ] Cancel reason shown

6. View refunded order
   - [ ] Refund section visible
   - [ ] Refund amount correct

Mobile Testing

Test all flows on mobile devices:

## Mobile Test Checklist

- [ ] Forms are touch-friendly (large tap targets)
- [ ] Keyboard types are correct (email, password)
- [ ] Error messages visible without scrolling
- [ ] Order table scrolls horizontally or stacks
- [ ] Address cards stack properly
- [ ] Buttons full-width on mobile

Edge Cases to Test

Special Characters

## Special Characters Test

- [ ] Name with apostrophe (O'Brien)
- [ ] Name with accents (José, Müller)
- [ ] Email with plus sign ([email protected])
- [ ] Address with special characters

International Addresses

## International Address Test

- [ ] Country selector updates province/state
- [ ] Postal code validation varies by country
- [ ] Address format displays correctly
- [ ] Phone numbers with country codes

Session Edge Cases

## Session Test

- [ ] Session persists after browser close (2 weeks)
- [ ] Multiple tabs stay synced
- [ ] Logout clears all session data
- [ ] Protected pages redirect when logged out

Debugging Techniques

Check Customer Object

Add debugging output temporarily:

{%- if customer -%}
  <script>
    console.log('Customer:', {
      id: {{ customer.id | json }},
      email: {{ customer.email | json }},
      orders_count: {{ customer.orders_count | json }},
      addresses_count: {{ customer.addresses_count | json }}
    });
  </script>
{%- endif -%}

Form Error Debugging

{%- form 'customer_login' -%}
  {%- if form.errors -%}
    <pre style="background: #fee; padding: 1rem;">
      Errors: {{ form.errors | json }}
      Messages: {{ form.errors.messages | json }}
    </pre>
  {%- endif -%}
  {# form fields #}
{%- endform -%}

Check Order Data

{%- if order -%}
  <!-- Debug: Order {{ order.name }} -->
  <!-- Status: {{ order.financial_status }} / {{ order.fulfillment_status }} -->
  <!-- Items: {{ order.line_items.size }} -->
  <!-- Fulfillments: {{ order.fulfillments.size }} -->
{%- endif -%}

Automated Testing Considerations

While Shopify doesn’t support traditional unit testing, you can:

Create a Test Script

// Manual test helper - run in browser console
const testAccountFlows = {
  checkLoginForm() {
    const form = document.querySelector('[action*="login"]');
    console.log('Login form exists:', !!form);
    console.log('Email field:', !!form.querySelector('[name*="email"]'));
    console.log('Password field:', !!form.querySelector('[type="password"]'));
  },

  checkOrderTable() {
    const orders = document.querySelectorAll('.order-card, .orders-table tr');
    console.log('Orders displayed:', orders.length);
  },

  checkAddresses() {
    const addresses = document.querySelectorAll('.address-card');
    console.log('Addresses displayed:', addresses.length);
  },
};

testAccountFlows.checkLoginForm();

Visual Regression Testing

Use tools like Percy or Chromatic to catch visual changes:

Screenshot each account page
Compare before/after changes
Flag unexpected differences

Common Issues and Solutions

Issue	Solution
Login redirects to wrong page	Check `return_to` parameter
Orders not showing	Verify orders exist for customer
Address form fails	Check country/province JS
Password reset link expired	Links expire after 48 hours
Customer tags not showing	Tags may take time to sync

Testing Checklist Summary

## Full Account Testing Checklist

### Registration

- [ ] Successful registration
- [ ] Duplicate email handling
- [ ] Validation errors
- [ ] Marketing opt-in

### Login

- [ ] Successful login
- [ ] Failed login (wrong password)
- [ ] Password recovery
- [ ] Password reset

### Account Overview

- [ ] Customer info display
- [ ] Order history (with orders)
- [ ] Empty state (no orders)

### Order Details

- [ ] Line items display
- [ ] Order summary
- [ ] Fulfillment tracking
- [ ] Cancelled/refunded states

### Addresses

- [ ] Add new address
- [ ] Edit address
- [ ] Delete address
- [ ] Set default

### Mobile

- [ ] All forms usable
- [ ] Tables readable
- [ ] Touch targets adequate

Practice Exercise

Create a comprehensive test plan for your customer account pages:

List all pages to test
Define test cases for each
Document expected outcomes
Execute tests systematically
Log and fix any issues

Key Takeaways

Systematic testing catches issues before customers do
Test accounts with various scenarios
Edge cases like special characters matter
Mobile testing is essential
Debug output helps troubleshoot
Checklist approach ensures coverage
Regular testing after any changes

What’s Next?

Congratulations on completing the Customer Account Pages module! Next, you’ll learn about Theme Settings and Extensibility for global theme customization.

Setting Up Test Accounts

Create Test Customers

Use Unique Email Patterns

Registration Flow Testing

Test Checklist

Registration Test Script

Test Checklist

Password Recovery Testing

Test Script

Account Page Testing

Test Checklist

Account Test Script

Address Management Testing

Test Script

Order Details Testing

Test Script

Mobile Testing

Edge Cases to Test

Special Characters

International Addresses

Session Edge Cases

Debugging Techniques

Check Customer Object

Form Error Debugging

Check Order Data

Automated Testing Considerations

Create a Test Script

Visual Regression Testing

Common Issues and Solutions

Testing Checklist Summary

Practice Exercise

Key Takeaways

What’s Next?

Finished this lesson?

Discussion

Setting Up Test Accounts

Create Test Customers

Use Unique Email Patterns

Registration Flow Testing

Test Checklist

Registration Test Script

Login Flow Testing

Test Checklist

Login Test Script

Password Recovery Testing

Test Script

Account Page Testing

Test Checklist

Account Test Script

Address Management Testing

Test Script

Order Details Testing

Test Script

Mobile Testing

Edge Cases to Test

Special Characters

International Addresses

Session Edge Cases

Debugging Techniques

Check Customer Object

Form Error Debugging

Check Order Data

Automated Testing Considerations

Create a Test Script

Visual Regression Testing

Common Issues and Solutions

Testing Checklist Summary

Practice Exercise

Key Takeaways

What’s Next?

Finished this lesson?

Discussion