ทดสอบ React Component ด้วย Playwright

Playwright Version 1.22 ได้รองรับ Component Tests โดยรองรับ React, Vue และ Svelte. สำหรับ Version 1.22 ฟังก์ชั่น Component Tests ยังเป็น Experimental หรือ รุ่นทดลองใช้นั่นเอง ใครนำไปใช้งานเลยก็อาจจะเจอ Bug หรือข้อจำกัดบางส่วนนะ ดูเพิ่มได้จาก Know issues & Limitation

Component Testing คืออะไร

Component Testing เป็นการทดสอบเฉพาะ Component ที่ต้องการ โดยแยกการทำงานกับ Compoenent อื่นๆ ในหน้าจอ ซึ่งคล้ายกับการทำ Unit Test แต่แตกต่างกันที่ Level ของการเทสจะเป็นชั้นของ Component แทนนั่นเอง โดย Component Testing เป็นการทดสอบแบบ Blackbox testing ซึ่งดำเนินการโดย QA Team

เตรียม Library ให้พร้อม

ถ้าจะใช้งาน Component Test ต้องติดตั้ง library เพิ่มโดยใช้ command ตามนี้ได้เลยครับ

npm install --save-dev @playwright/experimental-ct-react

ตัวอย่าง Component Test

ก่อนอื่นมาดูตัวอย่างการทำ Component Test สำหรับ Todo list app ที่เขียนด้วย React กัน

โดย Component ที่เราจะดึงมาเดโมก็คือ AddArea ที่เป็นส่วนในการเพิ่ม Todo Item นั่นเอง

เทส Component AddArea

import { test, expect } from '@playwright/experimental-ct-react';
import { AddArea } from './components/AddArea/index';


test('should able to fill the new todo item',async ({ mount, page }) => {
  let setTaskName = '';
  const component = await mount(<AddArea onEnter={function (taskName: string): void {
    setTaskName = taskName;
  } }></AddArea>);

  await component.locator('css=input').fill('Take lunch with my team');
  await page.keyboard.press('Enter');
  
  expect(setTaskName).toEqual('Take lunch with my team');
});

mount api เป็นคำสั่งใหม่ที่เพิ่มขึ้นมา ซึ่งเป็นตัวช่วยที่ทำให้ Playwright สามารถ โหลด Component ที่เราต้องการจะทดสอบ ในที่นี้คือ AddArea Component

ที่เหลือเราก็สามารถทำการเทส Component ที่เราโหลดขึ้นมาได้เหมือนการเทส E2E ธรรมดาเลยครับ สะดวกใช้มากๆเลย

โดยเราสามารถรัน Component เทส โดยใช้คำสั่ง

npm run test-ct

การทำงานของ Mount API

ซึ่งถ้าใน test case ของเรามีการใช้งาน mount Playwright จะทำการ สร้าง map ของ Module ออกมาแล้วทำการ compile และ bundle เก็บไว้ เมื่อเราใช้คำสั่ง mount แล้วตามด้วยชื่อ Component Playwright ก็จะโหลด Component นั้นๆขึ้นมาแสดงใน หน้าเว็บนั่นเอง

โดย Return value ของ Mount API คือ Playwright Locator ซึ่งเป็น รูทของ HTML dom element ของ Component นั้นๆ

ในเคสของ AddArea นั่นก็คือ _selector:’#root > *’

import { useState } from 'react';
import * as C from './styles';

type Props = {
    onEnter: (taskName: string) => void
}

export const AddArea = ({onEnter}: Props) => {
    const [inputText, setInputText] = useState('');
    const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
        if(event.code === 'Enter' && inputText !== ''){
            onEnter(inputText);
            setInputText('')
        }
    }

    return(
        <C.Container>
           <div className='Image'>&#10133;</div> 
           <input 
            type="text" 
            placeholder='Adicione uma tarefa'
            value={inputText}
            onChange={e => setInputText(e.target.value)}
            onKeyUp={handleKeyUp}
        />
        </C.Container>
    )
}

Source Code

สามารถ Download ไปลองรันกันได้ ที่ Github

Playwright Web Automated Test

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

Playwright และ TypeScript