[실습] Playwright를 활용한 E2E 테스트

JSCODE 시니

2026. 04. 09.

✅ 1. E2E(End-to-End) 테스트란?

• E2E는 "끝에서 끝까지"라는 뜻

• 사용자의 관점에서 애플리케이션의 전체 흐름을 처음부터 끝까지 검증하는 테스트

• 실제 브라우저를 띄우고 사용자가 하는 행동(로그인 클릭, 상품 검색, 결제 등)을 그대로 시뮬레이션을 진행함

• 배포 전 전체 시스템을 점검하는 아주 중요한 테스트

• 해당 테스트를 위해서는 어딘가에 우리 프로그램이 배포돼 있어야 함

✅ 2. npm run build의 비밀

npm run build

npm install -g serve
serve -s build

• 빌드된 정적 파일(HTML, CSS, JS)을 실제 서버처럼 브라우저에서 확인할 수 있게 해주는 미니 웹 서버 도구를 설치하는 명령어

✅ 3. Playwright를 활용하여 Jenkins 에서도 동일하게 세팅해보기

• Jenkins에서도 해당 환경과 동일하게 미니 웹 서버를 통해 배포를 하고, 테스트를 진행할 수 있다.

• 이것을 편하게 도와주는 도구가 바로 Playwright 임

Docker | Playwright

Introduction

https://playwright.dev/docs/docker

pipeline {
    agent {
        docker {
		        // 강의 자료와 버전을 맞춰주세요! 영상과는 다름!
            image 'mcr.microsoft.com/playwright:v1.39.0-jammy'
            reuseNode true
        }
    }

    stages {
        stage('Build') {
            
            steps {
                sh '''
                    ls -la
                    node --version
                    npm --version
                    npm ci
                    npm run build
                    ls -la
                '''
            }
        }

        stage('Test') {
            steps {
                echo 'Test stage'
                sh '''
		            test -f build/index.html
                    npm test
                '''
            }
        }

        stage('E2E') {
            steps {
                sh '''
				            npm install -g serve
                    serve -s build
                    npx playwright test
                '''
            }
        }
    }

    post {
        always {
            junit 'test-results/junit.xml'
        }
    }
}

• -g 옵션은 전역 설치 옵션이라 root 계정 권한이 필요함

• 따라서 -g 옵션을 제거하여 진행

• 우선 터미널에 npm install serve를 입력 후 정상 구동이 확인되면 진행한다

stage('E2E') {
    steps {
        sh '''
            npm install serve
            node_modules/.bin/serve -s build
            npx playwright test
        '''
    }
}

• 콘솔 에러 없는 것을 확인하고, 수동으로 종료시킬 것!

✅ 4. 백그라운드로 실행하여 Playwright 테스트하기

stage('E2E') {
    steps {
        sh '''
            npm install serve
            node_modules/.bin/serve -s build & sleep 10
            npx playwright test
        '''
    }
}

• sleep 10 명령어를 통해 백그라운드로 실행되게 한다.

"jest-junit": {
  "suiteName": "jest tests",
  "outputDirectory": "jest-results",
  "outputName": "junit.xml",
  "uniqueOutputName": "false",
  "classNameTemplate": "{classname}-{title}",
  "titleTemplate": "{classname}-{title}",
  "ancestorSeparator": " › ",
  "usePathForSuiteName": "true"
}

pipeline {
   ...

    post {
        always {
            junit 'jest-results/junit.xml'
        }
    }
}

• junit jest와 Playwright가 둘다 test-results 라는 폴더를 사용함. 충돌을 막아주기 위하여 junit의 폴더명을 변경해야한다.