Robot Framework & Vitest 비교

Robot Framework & Vitest 개념 비교

항목	Robot Framework	Vitest
주 사용 언어	키워드 기반 DSL (.robot), Python 라이브러리 확장 가능	JavaScript / TypeScript
테스트 타입	주로 E2E(End-to-end), UI/브라우저 자동화, API 테스트	주로 단위(Unit)·통합(Integration) 테스트, UI 렌더링 테스트
대상	Selenium, API, DB, CLI 등 여러 시스템 조작 가능	Node.js 환경 또는 브라우저 환경에서 코드 로직 검증
실행 속도	브라우저 구동 등으로 느림	코드 실행 기반이라 매우 빠름
난이도	문법 간단하지만, 브라우저/환경 설정 필요	JS/TS에 익숙하면 바로 가능
장점	비개발자도 읽기 쉬움, 다양한 외부 시스템 제어	프론트엔드와 궁합 좋음, 모듈/컴포넌트 단위 테스트에 강함
단점	JS UI 컴포넌트 단위 테스트에는 불리	UI 자동화는 직접 제어 어려움, 브라우저 제어하려면 Playwright/Cypress 필요

각각의 시나리오

"로그인 후 화면에서 companyname이 기대한 값과 같은지 확인"

Robot Framework 예시

(SeleniumLibrary 사용, URL과 로그인 요소는 가상의 예)

• 브라우저를 직접 띄우고, 로그인, 요소 텍스트 가져오기, 비교까지 전부 실행.
• 테스트가 실제 UI와 네트워크를 거쳐서 동작.

*** Settings ***
Library    SeleniumLibrary

*** Variables ***
${URL}           https://example.com/login
${USERNAME}      gildong.hong
${PASSWORD}      12345678!@#$%^&*
${EXPECTED_COMPANY}    myCompanyName

*** Test Cases ***
Verify Company Name After Login
    Open Browser    ${URL}    chrome
    Input Text    name=admin_id    ${USERNAME}
    Input Text    name=password    ${PASSWORD}
    Click Button  xpath=//button[@buttoncontent="로그인"]
    Wait Until Element Is Visible    id=companyname    timeout=10s
    ${actual}=    Get Text    id=companyname
    Should Be Equal    ${actual}    ${EXPECTED_COMPANY}
    Close Browser

Vitest 예시

(프론트엔드 함수/컴포넌트를 테스트한다고 가정, companyname을 API로 가져온다고 가정)

• 실제 브라우저 없이 함수 동작을 검증.(렌더링 테스트를 하려면 @testing-library/react 설치하여 테스트 가능)
• API 호출은 mock 처리해서 속도 빠름.
• UI 변화는 직접 확인 불가.

// companyService.ts
export async function getCompanyNameAfterLogin(username: string, password: string) {
  const res = await fetch("/api/login", {
    method: "POST",
    body: JSON.stringify({ username, password })
  });
  if (!res.ok) throw new Error("Login failed");

  const userData = await res.json();
  return userData.companyname;
}

// companyService.test.ts
import { describe, it, expect, vi } from "vitest";
import { getCompanyNameAfterLogin } from "./companyService";

describe("Login and check company name", () => {
  it("회사 이름 myCompanyName으로 잘 반환하는지 확인", async () => {
    // fetch를 mock 처리
    global.fetch = vi.fn().mockResolvedValue({
      ok: true,
      json: async () => ({ companyname: "myCompanyName" })
    });

    const companyname = await getCompanyNameAfterLogin("gildong.hong", "12345678!@#$%^&*");
    expect(companyname).toBe("myCompanyName");
  });
});

핵심 차이

"로그인 후 화면에서 companyname이 기대한 값과 같은지 확인"

• Robot Framework - 진짜로 로그인 페이지 띄워서 테스트 
  (→ 실제 브라우저에서 UI와 상호작용 → "실제 사용자가 하는 것"을 그대로 재현)
• Vitest - 코드 로직이 로그인 후 데이터를 제대로 처리하는지 테스트 
  (→ 함수/컴포넌트 로직이 기대대로 작동하는지, 모듈 서비스 간의 연결 동작 확인 → "코드 레벨"에서 검증)

📌 정리

• Robot Framework는 실제 브라우저에서 동작하기 때문에 사용자 관점 검증 가능하지만 속도가 느리고 CI 환경에서 부담될 수 있음
• Vitest는 빠른 단위/컴포넌트 테스트 가능하지만, 실제 브라우저 동작과 UI 렌더링은 완전히 검증 불가
• 서비스 안전성 가장 중요시한다면 둘 다 모두 사용이 필요할 수 있음

📌 결론 Vitest 사용한다면?

• Vitest를 도입한다면 아래 요소들로 인해 테스트 피드백 루프가 빠르다는 장점이 있어 개발 경험 향상
• Mock 데이터 사용 가능 → 테스트 환경 독립적, 서버/네트워크 상태에 영향 받지 않음
• HMR 지원 → 코드 변경 즉시 테스트 재실행, 개발 경험 향상