Scenario Testing

Scottsdale Mint uses Jest + Puppeteer for end-to-end browser-based scenario testing. These tests simulate real customer interactions to validate critical checkout and purchasing flows.

---

Test Framework

Tool	Version	Purpose
Jest	^29.x	Test runner, assertions
jest-puppeteer	^9.x	Puppeteer integration for Jest
Puppeteer	^21.x	Headless Chrome browser automation

Location: scenario-testing/

---

Directory Structure

scenario-testing/
├── config.json                 ← Test configuration (target URL, credentials)
├── jest.config.js              ← Jest configuration
├── jest-puppeteer.config.js    ← Puppeteer launch options
├── scenario-testing.js         ← Shared utilities and helpers
├── package.json                ← npm dependencies
└── src/
    ├── checkout.test.js        ← Checkout and payment scenarios
    └── utility.js              ← Reusable helper functions

---

Configuration

config.json

{
  "baseUrl": "https://scottsdalemint.test",
  "testUser": {
    "email": "[email protected]",
    "password": "password"
  },
  "testProduct": {
    "sku": "SM-TEST-1OZ-SILVER",
    "url": "/product/1-oz-silver-bar/"
  },
  "timeouts": {
    "navigation": 30000,
    "waitForSelector": 10000
  }
}

jest-puppeteer.config.js

module.exports = {
  launch: {
    headless: process.env.PUPPETEER_HEADLESS !== 'false',  // headless unless PUPPETEER_HEADLESS=false
    slowMo: 0,
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage'
    ]
  },
  server: null  // Tests run against existing site, no local server started
};

---

Running Tests

Install dependencies

cd scenario-testing
npm install

Run all tests

npm test

Run a specific test file

npx jest src/checkout.test.js

Run with browser visible (debug mode)

PUPPETEER_HEADLESS=false npm test

Run against a specific URL

BASE_URL=https://staging.scottsdalemint.com npm test

---

Test Scenarios (src/checkout.test.js)

Guest Checkout — Credit Card

1. Navigate to a product page
2. Add product to cart
3. Proceed to checkout as guest
4. Fill in billing/shipping address
5. Select PayPal PPCP hosted card payment
6. Enter test card details
7. Submit order
8. Assert: "Order received" page shown with order number

Registered User Checkout

1. Log in with test customer account
2. Navigate to a product page
3. Add to cart
4. Proceed to checkout (address pre-filled)
5. Select saved credit card (if available)
6. Submit order
7. Assert: Order confirmation page

Add to Cart

1. Navigate to product listing page
2. Click "Add to Cart"
3. Assert: Cart badge count increases
4. Navigate to cart page
5. Assert: Product appears in cart

Search — Algolia

1. Click the search bar
2. Type a search query (e.g., "silver bar")
3. Assert: Autocomplete suggestions appear within 2 seconds
4. Click a suggestion
5. Assert: Navigate to correct product page

Order Tracking

1. Navigate to order tracking page
2. Enter an order number and email
3. Assert: Order details and status are displayed

---

Utility Functions (src/utility.js)

// Navigate to page and wait for load
async function navigateTo(page, path) { ... }

// Fill a form field by label text
async function fillField(page, label, value) { ... }

// Wait for WooCommerce AJAX to complete
async function waitForAjax(page) { ... }

// Take a screenshot for debugging
async function screenshot(page, name) { ... }

// Add a product to cart by URL
async function addToCart(page, productUrl) { ... }

---

CI Integration

Scenario tests can be run in the Bitbucket Pipeline after deploying to staging:

# In bitbucket-pipelines.yml
- step:
    name: Scenario Tests
    image: node:20
    script:
      - cd scenario-testing
      - npm install
      - BASE_URL=$STAGING_URL npm test
    artifacts:
      - scenario-testing/screenshots/**

note

Scenario tests should run against staging only — never run automated checkout tests against production, as they would create real orders or trigger real payment flows.

---

Writing New Tests

1. Create a new .test.js file in scenario-testing/src/
2. Import utilities from utility.js
3. Use page from jest-puppeteer (global)
4. Add meaningful describe and it blocks
5. Always await page navigations and assertions

Template:

const config = require('../config.json');
const { navigateTo } = require('./utility.js');

describe('Feature Name', () => {
  beforeEach(async () => {
    await navigateTo(page, '/');
  });

  it('should do something', async () => {
    await navigateTo(page, '/some-page');
    await page.waitForSelector('.element');
    const text = await page.$eval('.element', el => el.textContent);
    expect(text).toBe('Expected text');
  });
});

---

Troubleshooting

Issue	Action
Tests timing out	Increase timeout in config.json; check site is reachable at baseUrl
Puppeteer browser not launching	Add --no-sandbox to launch args; ensure Chrome dependencies installed
Checkout test failing on payment	PayPal sandbox credentials may be expired; check Kount sandbox mode
Tests pass locally but fail in CI	Check CI environment has Chrome; use --disable-dev-shm-usage arg