GIS Developer

플레이라이트는 웹앱에 대한 테스트 자동화 라이브러리로 JS 코드(또는 TS)로 테스트를 작성할 수 있다. 바이브 코딩 시 기능에 대한 테스트를 AI 통해 하고자할때 매우 유용한데, 웹브라우저의 특정 버튼을 AI가 클릭하고 그 결과가 기대한 것와 같은지에 대한 인터렉티브한 행동 테스트도 가능하다. 우와, 몇달 전까지만 해도 이런건 사람의 영역이라 생각했다. 하나씩 하나씩 인간의 만용을 AI는 박살내고 있다. 겸손 겸손…

플레이라이트의 목적이 특정 웹앱에 대한 테스트에 있다. 즉, 테스트를 위한 독립된 프로젝트를 구성할 수 있다. 명령은 다음과 같다.

npm init playwright@latest

위의 명령이 실행되면 인간은 다음과 같은 내용을 입력해야 한다. (음.. AI를 에이전트라고 부른다면 인간은 어떻게 불러야 구분이 될까? 개발자라고 하기엔 AI 역시 코딩을 작성하므로 개발자가 아닌게 아니니..)

Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (Y/n) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

테스트 프로젝트를 위한 파일들이 자동으로 구성되는데, 여기서 테스트를 위한 코드 작성은 tests 폴더(앞서 인간이 입력한 값)에 example.spec.ts 파일이 보이는데, 그냥 이 파일에 테스트 코드를 입력하면 된다. 이미 테스트로 잘 잘동하는 테스트 코드가 있는데, 그건 지우고 다음과 같은 코드를 작성해 테스트해 보았다.

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

test('login', async () => {
  const browser = await chromium.launch({
    headless: false,
    args: [
      '--enable-unsafe-webgpu',
      '--enable-features=Vulkan'
    ]
  });

  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.hyyyydai-3d.com');

  await page.fill('.user-id input', 'gizmo');  
  await page.fill('.user-pw input', '*********');

  await page.locator('.user-id input').press('Tab');

  await page.click('.btn-login');

  await expect(page.getByText('공지사항')).toBeVisible();
});

위의 테스트는 딱 1개인데, 주어진 url에 들어가서 id와 암호를 자동으로 채우고 로그인 버튼을 클릭해서 ‘공지사항’이라는 텍스트가 보이면 테스트 성공이라는 것이다.

내가 테스트해야할 웹 페이지가 3D 그래픽인지라 WebGPU에 대한 활성화 없이는 테스트에 실패함으로, 위의 코드에는 WebGPU에 대한 활성화 코드가 있고 테스트가 잘되는것을 확인할 수 있었다. 실제 테스트 실행은 다음과 같다.

npx playwright test

테스트를 위한 전용 웹브라우저를 보면서 테스트가 진행되는 것을 살펴보고 싶은 꼼꼼이라면 (대신 사는게 고달프겠지.. 나처럼 ㅜ_ㅜ) 다음과 같은 방식의 테스트 실행도 가능하다.

npx playwright test --ui

이 글은 플레이라이트를 처음 사용하는 인간을 위한 가이드일뿐이다. 보다 상세한 방법은 AI에게 물어보고 가이드 받으라.

```mermaid
graph TD
    A[사각박스] --> B{다이아몬드박스}
    B -->|라벨1| C((원형박스))
    B -->|라벨2| D(라운드박스)
    C --> E([텍스트])
    subgraph 서브그래프
        D --> E
        E --> F[[서브루틴]]
        E --> G[(저장소박스)]
    end
    E --> H([경기장박스])
    E --> I>리본박스]
    E --> J[/기울박스1/]
    E --> K[\기울박스2\]
    J ---|실선| K
    A -.->|점선| F
    G ==>|굵은화살| H
    F ===|굵은실선| H
    K --> L{{육각박스}}
```

```mermaid
classDiagram

class 클래스명 {
    +공용_필드: string
    -비공개_필드
    #보호된_필드
    ~패키지_내부_필드
    +공용_메서드(a: int): void
    -비공개_메서드()
    #보호된_메서드()
    ~패키지_내부_매서드()
}
```

```mermaid
classDiagram
    class 오리 {}
    class 물고기
    class 얼룩말 {
        <<abstract>>
    }
    class 동물 {
        <<interface>>
    }
    class 닭
    class 날개
    
    동물 <-- 오리
    동물 <.. 물고기
    동물 <|-- 얼룩말
    동물 <|.. 닭
    얼룩말 -- 물고기
    오리 *--> 날개
    닭 *-->"2" 날개
    비늘"*"--"1"물고기
```

Mermaid 참조

npm 방식임. 먼저 npm-check-updates를 전역적으로다가 설치(설치 없이 바로 실행하는 방법은 맨 하단 참조)

npm install -g npm-check-updates

이미 설치된 패키지가 담긴 node_modules 폴더와 패키지 고정 버전 정보가 담긴 package-lock.json 파일을 삭제 후 다음 명령 입력 …

ncu -u

package.json에 최신 버전의 패키지가 반영되고 이제 npm i로 설치하면 끝.

설치없이 바로 실행은 아래 참조 …

npx npm-check-updates -u