Day 14 of 100: Spread and Rest — Copy Configs, Build Variants

Day 14 of 100 — 100 Days of Playwright with TypeScript Challenge. Phase: JavaScript Fundamentals. JavaScript (Days 1-33) → TypeScript (Days 34-63) → Playwright (Days 64-96) → AI Framework Capstone (Days 97-100).

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Three dots, two meanings. Spread expands; rest gathers. Both everywhere in test config.

Spread: Expand and Copy

const baseConfig = { timeout: 30000, retries: 0 };

// Copy + override — THE config pattern
const ciConfig = { ...baseConfig, retries: 2 };
// { timeout: 30000, retries: 2 }

// Merge arrays
const smoke = ['login', 'checkout'];
const all = [...smoke, 'profile', 'admin'];

// Playwright config uses this exact shape:
// use: { ...devices['Desktop Chrome'], baseURL: '...' }

Rest: Gather Leftovers

function logAll(first, ...others) {
  console.log('first:', first);
  console.log('rest:', others);
}
logAll('a', 'b', 'c'); // first: a, rest: ['b','c']

// In destructuring
const { id, ...withoutId } = { id: 1, name: 'x', role: 'y' };
// withoutId = { name: 'x', role: 'y' } — strip a field

QA Pattern: Test Data Variants

const validUser = { name: 'Jane', email: 'j@t.com', age: 30 };

const noEmail = { ...validUser, email: '' };
const minor = { ...validUser, age: 15 };
// One base, many negative-case variants

Tomorrow (Day 15): Closures — why your loop variables behave strangely.