Day 7 of 100: Arrow Functions — Playwright’s Default Syntax

Day 7 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.

---

Arrow functions dominate modern test code. Every Playwright callback uses them.

Syntax Progression

// Full function
const add = function(a, b) { return a + b; };

// Arrow with body
const add2 = (a, b) => { return a + b; };

// Arrow implicit return
const add3 = (a, b) => a + b;

// Single param — no parens needed
const double = x => x * 2;

// No params
const now = () => Date.now();

Where Playwright Uses Arrows

// You will write this exact shape hundreds of times:
// test('login works', async ({ page }) => { ... });

// Array callbacks
const statuses = [200, 404, 500];
const errors = statuses.filter(s => s >= 400);  // [404, 500]

// Route handlers
// page.route('**/api/**', route => route.fulfill({ status: 200 }));

Arrow vs Function: this Binding

// Arrows inherit 'this' from surrounding scope.
// Regular functions get their own 'this'.
// In test code: prefer arrows for callbacks, regular methods in classes.
class LoginPage {
  async login() { /* method — this = the page object */ }
}

Tomorrow (Day 8): Week 1 wrap: arrays — storing and slicing test data.