Playwright Mock Network ง่ายๆด้วย HAR file

July 17, 2022

3190

การเทส E2E บางครั้งเราจำเป็นที่จะต้องเชื่อมต่อกับ service ของ 3rd Party และมักพบว่า หลายๆครั้ง Service เหล่านั้นไม่เสถียร หรือมีข้อจำกัดการใช้งาน ทำให้ test script ของเราไม่เสถียร รันผ่านบ้างไม่ผ่านบ้าง แต่พอตรวจสอบ มักเกิดจาก 3rd Party เองที่มีปัญหา เราสามารถแก้ปัญหาได้ง่ายๆด้วยการ Mock Network ของ 3rd Party นั่นเอง

รู้จักกับ HAR file

HAR file เป็นไฟล์ json ที่เก็บข้อมูลเซสชัน HTTP ของ Browser ที่เราใช้งาน โดยเราสามารถสร้าง HAR file โดยการ record จาก browser ได้ง่ายด้วยคำสั่งนี้ครับ

npx playwright open --save-har=hars/valid-login-har.har --save-har-glob="**/v1/**" https://demoqa.com/login

จากตัวอย่างโค้ดด้านบน จะเป็นการรัน Web Browser ขึ้นมาที่ URL https://demoqa.com/login และจะทำการ record HTTP ที่ match กับ “**/v1/**” เมื่อเราทำการปิด browser ก็จะทำการ Save HTTP Request & Repose ไว้ที่ file hars/valid-login-har.har โดยให้เราทำการ Record step ในการ login success เอาไว้ครับ แล้วค่อยปิด browser เพื่อเป็นการสร้าง HAR file

สนใจข้อมูลเพิ่มเติมคลิก

รันเทสโดยใช้ HAR file

ใน Playwright เราสามารถเรียกใช้งาน HAR file ได้ง่ายโดยใช้คำสั่ง page.routeFromHAR ดูจากตัวอย่างด้านล่างได้เลย

test('mock network using HAR file', async ({ page }) => {
  await page.goto('https://demoqa.com/login');
  
  await page.routeFromHAR('hars/valid-login-har.har');
  
  await page.fill('id=userName', 'demoqahive01');
  await page.fill('id=password', 'T@stpw120');
  await Promise.all([
    page.waitForNavigation(),
    page.click('id=login')
  ]);

  await expect(page.locator('id=userName-value')).toContainText('demoqahive01');
});

จาก step await page.routeFromHAR(‘hars/valid-login-har.har’); จะเป็นการโหลด Har file และทำการ return response ที่ match กับ HAR ที่เรา record เอาไว้อัตโนมัตินั่นเอง โดย Step หลังจากนั้นจะเป็นการรันเทสแบบปกติเลย แต่เมื่อเรารันเทส จะเป็นการเรียกใช้ service จาก HAR file แทนการเรียก Web service ตรง

แก้ไข HAR File

นอกจาก Record & Replay แล้ว เรายังสามารถจะแก้ไข HAR file ได้อีกด้วย ช่วยให้เราสามารถออกแบบ Test case ได้อย่างอิสระ
และไม่ต้องเสียเวลาไป record HAR file หลายๆรอบนั่นเอง เช่น เราต้องการเปลี่ยน username จากเดิมที่ใช้ demoqahive01 เป็น demo0001 แทน

ทำการแก้ไข HAR file ด้วย visual studio code โดยตรง และทำการ replace text จาก demoqahive01 เป็น demo0001 โดยเราจำเป็นที่จะต้องปรับเทสดาต้าใน Test script ให้ตรงกันด้วย