เวลาเราเขียน Automation Test ด้วย Playwright สิ่งหนึ่งที่ควรเลี่ยงเด็ดขาดคือการ Hardcode ข้อมูลสำคัญ ๆ อย่างรหัสผ่าน, API Token หรือแม้กระทั่ง Base URL ลงไปในโค้ดตรง ๆ เพราะนอกจากจะไม่ปลอดภัยแล้ว เวลาจะเปลี่ยนไปรันบน Environment อื่น (เช่น Staging หรือ Production) ก็ต้องมานั่งแก้โค้ดกันวุ่นวาย
วิธีที่ดีกว่าคือการเก็บค่าเหล่านี้ไว้ในไฟล์ .env ครับ มาดูกันว่าต้องทำอย่างไรบ้าง
🛠️ ขั้นตอนที่ 1: ติดตั้งแพ็กเกจ dotenv
Playwright รองรับการทำงานร่วมกับแพ็กเกจ dotenv ได้อย่างแนบเนียน ให้เราติดตั้งแพ็กเกจนี้เข้าไปในโปรเจกต์ก่อน โดยรันคำสั่งใน Terminalnpm 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 ได้อย่างมืออาชีพแล้วครับ!
อ่านเพิ่มเติม