Playwright ลดการ Login ซ้ำๆด้วย Authentication State

ในการรันเทส End-to-end จะมีขั้นตอนพื้นฐานที่ต้องทำเสมอคือ การ Login เพราะการใช้งานฟีเจอร์หลักต่างๆมักต้องทำการ Login ก่อนนั่นเอง แล้วถ้าขั้นตอนนี้กินเวลาการเทสล่ะ เช่น หน้า Login โหลดช้า กว่าที่จะ login เสร็จ แต่ละครั้งใช้เวลาไป 5 – 6 วินาที ลองนึกภาพว่าเรามีเทสซักร้อยข้อ เท่ากับเราเสียเวลาแค่ Login อย่างเดียวๆรวมเกือบ 10 นาทีเลย

จัดเก็บค่าการ Login ด้วย Storage State

โดยผมจะแสดงตัวอย่างการที่เราเอาขั้นตอนการ Login ไปไว้ที่ Global Setup และให้ทำการบันทึก State เก็บไว้ หลังจากนั้นในเทสเคสก็จะสั่งให้ไปใช้งาน Storage ทำให้ไม่จำเป็นต้อง Login ซ้ำๆในแต่ละเคสนั่นเอง

global-setup.ts เพิ่มขั้นตอนในการ login เข้าไป และหลัง login ผ่านแล้วให้ทำการบันทึก State โดยใช้คำสั่ง storageState โดย save เป็น json file

// global-setup.ts

import { chromium, FullConfig } from '@playwright/test';

async function globalSetup(config: FullConfig) {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://demoqa.com/login');
  await page.fill('id=userName', 'demoqahive01');
  await page.fill('id=password', 'T@stpw120');
  await Promise.all([
    page.waitForNavigation(),
    page.click('id=login')
  ]);
  await page.context().storageState({ path: 'storageState.json' });
  await browser.close();
}

export default globalSetup;

playwright.config.ts ให้เพิ่มการเรียกใช้ Global setup step ลงไป

const config: PlaywrightTestConfig = {
  globalSetup: './global-setup', 
  ...
}

ใน test spec เพิ่มการเรียกใช้ State ที่เราทำการ save ไว้ โดยการสั่ง use storageState ที่เราบันทึกไว้นั่นเอง

import { expect, test } from '@playwright/test';

test.use({ storageState: 'storageState.json' });
test.only('Reuse Authentication state', async ({ page }) => {
  await page.goto('https://demoqa.com/profile');
  await expect(page.locator('id=userName-value')).toContainText('demoqahive01');
});

ประโยชน์

• ลดเวลาการเทสลงอย่างเห็นได้ชัด ไม่ต้องมา login ซ้ำๆ
• ลดการพึ่งพาระบบอื่นๆ ถ้า Authen มาจาก 3rd Party
• นำไปใช้กับเทสเคสอื่นๆได้ด้วยนะ เพื่อข้ามบางขึ้นตอนที่ระบบยังไม่เสถียร

ดาวน์โหลดตัวอย่าง Source code ได้ที่ Githhub

Playwright Web Automated Test

เรียนรู้การทดสอบ Web Application ด้วย

Playwright และ TypeScript