2026-06-21 – PlusMagi's Blog By Pitt Phunsanit

เวลาเราเขียน Automation Test ด้วย Playwright สิ่งหนึ่งที่ควรเลี่ยงเด็ดขาดคือการ Hardcode ข้อมูลสำคัญ ๆ อย่างรหัสผ่าน, API Token หรือแม้กระทั่ง Base URL ลงไปในโค้ดตรง ๆ เพราะนอกจากจะไม่ปลอดภัยแล้ว เวลาจะเปลี่ยนไปรันบน Environment อื่น (เช่น Staging หรือ Production) ก็ต้องมานั่งแก้โค้ดกันวุ่นวาย

วิธีที่ดีกว่าคือการเก็บค่าเหล่านี้ไว้ในไฟล์ .env ครับ มาดูกันว่าต้องทำอย่างไรบ้าง

🛠️ ขั้นตอนที่ 1: ติดตั้งแพ็กเกจ dotenv

Playwright รองรับการทำงานร่วมกับแพ็กเกจ dotenv ได้อย่างแนบเนียน ให้เราติดตั้งแพ็กเกจนี้เข้าไปในโปรเจกต์ก่อน โดยรันคำสั่งใน Terminal
npm i --save-dev dotenv

📄 ขั้นตอนที่ 2: สร้างไฟล์ .env.example, .env

สร้างไฟล์ชื่อ .env.example (ตัวอย่าง) และ .env ไว้ที่ Root Directory (โฟลเดอร์นอกสุดของโปรเจกต์) จากนั้นใส่ค่าที่เราต้องการใช้งานลงไป เช่น

# .env
BASE_URL=https://pitt.plusmagi.com
USER_NAME=my_awesome_user
USER_PASSWORD=super_secret_password123

⚠️ ข้อควรระวัง: อย่าลืมเพิ่มไฟล์ .env เข้าไปใน .gitignore เพื่อป้องกันไม่ให้เผลอ Push ข้อมูลลับขึ้น GitHub/GitLab นะครับ!

⚙️ ขั้นตอนที่ 3: ตั้งค่าใน playwright.config.ts

เพื่อให้ Playwright โหลดค่าจาก .env มาใช้งานตั้งแต่เริ่มทำงาน ให้เราไปเปิดไฟล์ playwright.config.ts แล้วเพิ่มโค้ด dotenv.config() ไว้ที่ด้านบนสุดของไฟล์

import { defineConfig, devices } from '@playwright/test';
import dotenv from 'dotenv';
import path from 'path';

// โหลดไฟล์ .env เข้าสู่ process.env
dotenv.config({ path: path.resolve(__dirname, '.env') });

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  
  // เราสามารถนำค่าจาก .env มากำหนดเป็น baseURL ของโปรเจกต์ได้เลย
  use: {
    baseURL: process.env.BASE_URL || 'https://default.example.com',
    trace: 'on-first-retry',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});

🧪 ขั้นตอนที่ 4: นำไปใช้งานใน Test Script

เมื่อตั้งค่าเสร็จแล้ว เราจะสามารถดึงค่าจาก .env มาใช้งานในไฟล์ทดสอบผ่าน process.env.ชื่อตัวแปร ได้ทันที

// tests/login.spec.ts
import { test, expect } from '@playwright/test';

test('ทดสอบระบบ Login ด้วย Account จาก .env', async ({ page }) => {
  // เปิดหน้าเว็บ (จะวิ่งไปที่ BASE_URL ที่ตั้งไว้ใน config)
  await page.goto('/login');

  // ดึงค่าจาก process.env มากรอกในฟอร์ม
  await page.fill('input[name="username"]', process.env.USER_NAME || '');
  await page.fill('input[name="password"]', process.env.USER_PASSWORD || '');
  
  await page.click('button[type="submit"]');

  // ตรวจสอบผลลัพธ์
  await expect(page).toHaveURL(/dashboard/);
});

💡 Pro Tip: แยกไฟล์ตาม Environment (Dev / Staging / Prod)

หากต้องการให้ยืดหยุ่นขึ้นไปอีก เราสามารถแยกไฟล์เป็น .env.staging หรือ .env.production แล้วเขียนโค้ดใน playwright.config.ts ให้เลือกโหลดตามตัวแปรที่เราส่งมาตอนรันได้ เช่น

// playwright.config.ts
import dotenv from 'dotenv';
import path from 'path';

// ถ้ารันด้วย ENV=staging จะโหลด .env.staging ถ้าไม่มีจะโหลด .env ปกติ
const ENV = process.env.ENV || '';
dotenv.config({ path: path.resolve(__dirname, `.env${ENV ? '.' + ENV : ''}`) });

เวลาสั่งรันก็แค่ระบุ ENV นำหน้าคำสั่ง (บนระบบ Unix/Linux/macOS)

ENV=staging npx playwright test

เพียงเท่านี้ โปรเจกต์ Playwright ของคุณก็จะมีโครงสร้างที่สะอาด ปลอดภัย และพร้อมที่จะนำไปปลั๊กเข้ากับระบบ CI/CD ได้อย่างมืออาชีพแล้วครับ!

อ่านเพิ่มเติม

วัน: 21 มิถุนายน 2026

Playwright: EnvironmentPlaywright: Environment