내려받기와 설치

사전 준비에서 공통 묶음을 끝냈다면 이 단계는 보통 5~10분 정도 걸립니다.

1) base를 내 프로젝트로 가져오기

base를 받는 방법은 두 가지가 있습니다. git이 처음이면 GitHub Template 쪽이 더 친절합니다.

A. GitHub Template 방식(권장)

1. base의 GitHub 페이지(github.com/ddakit/e2e-base)를 엽니다.
2. 우측 상단의 초록색 Use this template 버튼을 누르고 Create a new repository를 고릅니다.
3. 본인 GitHub 계정 아래 새 저장소 이름을 정합니다. 예를 들면 my-app-e2e입니다.
4. Create repository를 누릅니다.

내 계정 아래에 base의 새 복제본이 만들어집니다. 이제 그 복제본을 컴퓨터로 받아 옵니다. 터미널을 열고 다음 명령을 실행합니다.

cd ~/Desktop                                # 또는 원하는 작업 폴더로 이동합니다
git clone https://github.com/<your-id>/my-app-e2e.git
cd my-app-e2e

<your-id> 에는 본인 GitHub 사용자명을 넣어 주세요.

B. git clone 방식(git이 이미 익숙하다면)

git clone https://github.com/ddakit/e2e-base.git my-app-e2e
cd my-app-e2e
git remote rename origin base               # ddakit 갱신 채널을 base 라는 이름으로 남겨 둡니다
# 본인 GitHub에 빈 저장소를 만든 다음, 그 주소로 origin 을 새로 잡습니다:
# git remote add origin https://github.com/<your-id>/my-app-e2e.git

base 원격은 끊지 말고 남겨 두면 베이스 업데이트 받기 단계에서 그대로 씁니다. 본인 저장소인 origin과 ddakit 갱신 채널인 base가 한 저장소에 같이 있는 구조입니다.

2) 본인 GitHub 저장소 연결 확인

이 다음부터 본인이 만드는 모든 commit은 본인 GitHub 저장소로 흘러갑니다. 연결이 잘 잡혔는지 한 번만 확인합니다.

git remote -v

A 경로로 받았다면 origin 두 줄에 본인 저장소 주소가 적혀 있습니다.

origin  https://github.com/<your-id>/my-app-e2e.git (fetch)
origin  https://github.com/<your-id>/my-app-e2e.git (push)

B 경로로 받았는데 origin이 보이지 않는다면, 본인 GitHub에 빈 저장소를 먼저 만들고 다음 두 줄로 연결합니다.

git remote add origin https://github.com/<your-id>/my-app-e2e.git
git push -u origin main

-u 플래그는 다음 push부터 git push만 쳐도 같은 곳으로 가도록 기억시켜 둡니다. 처음 한 번만 필요한 플래그입니다.

3) 환경 부트스트랩

base 안에는 init.sh라는 스크립트가 들어 있습니다. 의존성 설치, typecheck, 그리고 Playwright 브라우저 설치(웹과 데스크톱 트랙일 때)까지 한 번에 실행해 줍니다. 다음 한 줄을 실행합니다.

bash init.sh

정상 화면

스크립트가 위에서 아래로 단계를 출력하면서 진행하는데, 보통 다음 모양으로 흘러갑니다.

→ Node 버전 확인
v20.x.x
→ 패키지 매니저: pnpm
→ 의존성 설치
...
✓ 환경 준비 완료.

마지막에 ✓ 환경 준비 완료.가 보이고, 그 아래 “다음 단계” 안내와 운영 환경 금지 경고가 같이 떠 있으면 잘 끝난 것입니다.

막힌 화면

• ✗ package.json이 없습니다. 가 보이면 아직 테스트 골격이 만들어지지 않은 상태입니다. 첫 fork 직후라면 정상입니다. 이 경우는 첫 실행에서 프로젝트 시작을 먼저 실행해 /2-setup-base로 골격을 만든 다음 init.sh를 다시 실행합니다.
• (Playwright 설치 실패 — 네트워크 확인) 줄은 브라우저 내려받기가 네트워크에서 막혔다는 뜻입니다. 잠시 후 pnpm exec playwright install --with-deps chromium을 직접 한 번 더 실행해 봅니다.
• command not found: pnpm 같은 줄이 보이면 사전 준비의 패키지 매니저 설치가 끝나지 않은 상태입니다.

4) 첫 fork 직후라면 골격이 비어 있는 것이 정상입니다

여기서 한 가지 헷갈리기 쉬운 점이 있습니다. base를 막 받은 직후에는 tests/ 폴더가 비어 있거나 아예 없습니다. 테스트 파일이 하나도 보이지 않아도 정상입니다.

이 base는 무오염 원칙을 둡니다. 다른 사람의 테스트 결과물을 미리 넣어 두지 않습니다. 본인이 첫 실행에서 프로젝트 시작을 실행하는 순간 빈 템플릿이 만들어지고, 무엇을 테스트할지 정하기와 첫 테스트 한 개를 거치면서 본인 앱에 맞는 테스트가 채워집니다.

그러니 지금 ls tests/를 쳐서 아무것도 나오지 않아도 당황하지 않으셔도 됩니다. 채우는 것은 다음 단계들입니다.

다음

bash init.sh가 ✓ 환경 준비 완료.로 끝났다면 첫 실행으로 갑니다.