PHPUnit과 Selenium을 이용한 E2E 테스트 자동화 🚀

웹 개발의 세계에서 품질 보증은 매우 중요합니다. 특히 PHP 기반의 프로젝트에서 End-to-End (E2E) 테스트는 전체 시스템의 안정성을 확보하는 데 핵심적인 역할을 합니다. 이 글에서는 PHPUnit과 Selenium을 활용하여 E2E 테스트를 자동화하는 방법에 대해 상세히 알아보겠습니다. 🧐

PHP 개발자들에게 있어 테스트 자동화는 더 이상 선택이 아닌 필수입니다. 특히 재능넷과 같은 복잡한 웹 플랫폼을 운영할 때, 사용자 경험을 지속적으로 개선하고 버그를 최소화하기 위해서는 체계적인 테스트 전략이 필요합니다. PHPUnit과 Selenium의 조합은 이러한 요구를 충족시키는 강력한 도구가 될 수 있습니다.

이 글을 통해 여러분은 다음과 같은 내용을 배우게 될 것입니다:

PHPUnit의 기본 개념과 설정 방법
Selenium WebDriver의 작동 원리
PHPUnit과 Selenium을 통합하는 방법
실제 E2E 테스트 시나리오 작성 및 실행
테스트 자동화의 모범 사례와 팁

자, 그럼 PHP 프로젝트의 품질을 한 단계 끌어올릴 준비가 되셨나요? 함께 PHPUnit과 Selenium의 세계로 뛰어들어 봅시다! 💪

1. PHPUnit 기초 📚

PHPUnit은 PHP 프로그래밍 언어를 위한 유닛 테스팅 프레임워크입니다. 이 도구는 개발자들이 코드의 작은 단위(주로 함수나 메소드)를 독립적으로 테스트할 수 있게 해줍니다. PHPUnit을 사용하면 예상된 결과와 실제 결과를 비교하여 코드의 정확성을 검증할 수 있습니다.

1.1 PHPUnit 설치하기

PHPUnit을 설치하는 가장 쉬운 방법은 Composer를 사용하는 것입니다. 프로젝트 디렉토리에서 다음 명령어를 실행하세요:

composer require --dev phpunit/phpunit

이 명령어는 PHPUnit을 프로젝트의 개발 의존성으로 추가합니다.

1.2 첫 번째 PHPUnit 테스트 작성하기

간단한 예제로 PHPUnit 테스트를 작성해 보겠습니다. 먼저, 테스트할 클래스를 만들어 보죠.


// Calculator.php
class Calculator {
    public function add($a, $b) {
        return $a + $b;
    }
}

이제 이 Calculator 클래스를 테스트하는 PHPUnit 테스트 케이스를 작성해 봅시다.


// CalculatorTest.php
use PHPUnit\Framework\TestCase;

class CalculatorTest extends TestCase {
    public function testAdd() {
        $calculator = new Calculator();
        $result = $calculator->add(2, 3);
        $this->assertEquals(5, $result);
    }
}

이 테스트는 Calculator 클래스의 add 메소드가 2와 3을 더했을 때 5를 반환하는지 확인합니다.

1.3 PHPUnit 실행하기

테스트를 실행하려면 터미널에서 다음 명령어를 입력하세요:

./vendor/bin/phpunit CalculatorTest.php

테스트가 성공하면 녹색 바가 표시되고, 실패하면 빨간색 바와 함께 오류 메시지가 표시됩니다.

1.4 PHPUnit의 주요 개념

Assertions: 테스트 결과를 검증하는 메소드들 (예: assertEquals, assertTrue)
Fixtures: 테스트 실행 전후에 일관된 테스트 환경을 설정하고 정리하는 메소드들 (setUp, tearDown)
Data Providers: 여러 데이터 세트로 동일한 테스트를 반복 실행할 수 있게 해주는 기능
Mocking: 외부 의존성을 가짜 객체로 대체하여 독립적인 테스트를 가능하게 하는 기법

PHPUnit의 이러한 기능들을 잘 활용하면, 코드의 품질을 크게 향상시킬 수 있습니다. 특히 재능넷과 같은 복잡한 웹 애플리케이션을 개발할 때, 이러한 단위 테스트는 버그를 조기에 발견하고 수정하는 데 큰 도움이 됩니다.

다음 섹션에서는 Selenium WebDriver에 대해 알아보고, 이를 PHPUnit과 어떻게 통합하여 강력한 E2E 테스트 솔루션을 구축할 수 있는지 살펴보겠습니다. 🚀

2. Selenium WebDriver 소개 🌐

Selenium WebDriver는 웹 브라우저를 자동화하는 강력한 도구입니다. 이를 통해 개발자들은 실제 사용자의 행동을 시뮬레이션하여 웹 애플리케이션을 테스트할 수 있습니다. Selenium은 다양한 브라우저와 플랫폼을 지원하며, 여러 프로그래밍 언어와 함께 사용할 수 있습니다.

2.1 Selenium WebDriver의 작동 원리

Selenium WebDriver는 브라우저의 네이티브 지원을 사용하여 브라우저를 직접 제어합니다. 이는 다음과 같은 과정을 통해 이루어집니다:

클라이언트 라이브러리(이 경우 PHP)를 통해 명령을 전송합니다.
명령은 JSON Wire Protocol을 통해 브라우저 드라이버로 전달됩니다.
브라우저 드라이버는 해당 브라우저의 네이티브 메서드를 호출하여 명령을 실행합니다.
실행 결과가 같은 경로를 통해 클라이언트로 반환됩니다.

2.2 Selenium WebDriver 설치

PHP에서 Selenium WebDriver를 사용하기 위해서는 Composer를 통해 필요한 패키지를 설치해야 합니다. 다음 명령어를 실행하세요:

composer require php-webdriver/webdriver

또한, 사용하고자 하는 브라우저의 WebDriver도 설치해야 합니다. 예를 들어, Chrome을 사용한다면 ChromeDriver를 다운로드하고 시스템 경로에 추가해야 합니다.

2.3 기본적인 Selenium 스크립트 작성

간단한 Selenium 스크립트를 작성해 보겠습니다. 이 스크립트는 Google 홈페이지를 열고 제목을 확인합니다.


use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\WebDriverBy;

$host = 'http://localhost:4444/wd/hub';
$capabilities = DesiredCapabilities::chrome();
$driver = RemoteWebDriver::create($host, $capabilities);

$driver->get('https://www.google.com');
$title = $driver->getTitle();

echo "The title is: " . $title . "\n";

$driver->quit();

이 스크립트는 다음과 같은 작업을 수행합니다:

Chrome WebDriver에 연결합니다.
Google 홈페이지로 이동합니다.
페이지의 제목을 가져옵니다.
제목을 출력합니다.
브라우저 세션을 종료합니다.

2.4 Selenium의 주요 기능

Selenium WebDriver는 다음과 같은 주요 기능을 제공합니다:

요소 찾기: ID, 클래스, XPath 등을 사용하여 웹 요소를 찾을 수 있습니다.
요소 조작: 클릭, 텍스트 입력, 드롭다운 선택 등의 작업을 수행할 수 있습니다.
웹 페이지 탐색: URL로 이동, 뒤로 가기, 새로고침 등의 탐색 기능을 제공합니다.
대기 전략: 동적 콘텐츠가 로드될 때까지 기다리는 명시적, 암시적 대기 기능을 제공합니다.
스크린샷 캡처: 테스트 실행 중 화면 캡처를 할 수 있습니다.
JavaScript 실행: 페이지에서 직접 JavaScript를 실행할 수 있습니다.

이러한 기능들을 활용하면, 재능넷과 같은 복잡한 웹 애플리케이션의 다양한 시나리오를 자동으로 테스트할 수 있습니다. 예를 들어, 사용자 등록 프로세스, 재능 검색 기능, 결제 시스템 등을 자동화된 방식으로 테스트할 수 있죠.

다음 섹션에서는 PHPUnit과 Selenium WebDriver를 통합하여 강력한 E2E 테스트 프레임워크를 구축하는 방법에 대해 알아보겠습니다. 이를 통해 여러분은 재능넷과 같은 웹 플랫폼의 품질을 한층 더 높일 수 있을 것입니다. 🚀

3. PHPUnit과 Selenium 통합하기 🔗

PHPUnit과 Selenium WebDriver를 통합하면 강력한 E2E 테스트 프레임워크를 구축할 수 있습니다. 이 조합은 단위 테스트의 구조화된 접근 방식과 브라우저 자동화의 유연성을 결합하여, 웹 애플리케이션의 전체적인 기능을 효과적으로 테스트할 수 있게 해줍니다.

3.1 환경 설정

PHPUnit과 Selenium을 통합하기 위해 다음과 같은 환경 설정이 필요합니다:

PHPUnit 설치 (이미 완료)
Selenium WebDriver PHP 클라이언트 설치 (이미 완료)
Selenium Server 설치 및 실행
원하는 브라우저의 WebDriver 설치 (예: ChromeDriver)

Selenium Server를 설치하고 실행하는 방법은 다음과 같습니다:


# Selenium Server JAR 파일 다운로드
wget https://selenium-release.storage.googleapis.com/3.141/selenium-server-standalone-3.141.59.jar

# Selenium Server 실행
java -jar selenium-server-standalone-3.141.59.jar

3.2 기본 테스트 케이스 작성

PHPUnit과 Selenium을 통합한 기본적인 테스트 케이스를 작성해 보겠습니다. 이 예제에서는 재능넷의 홈페이지를 열고 제목을 확인하는 간단한 테스트를 수행합니다.


use PHPUnit\Framework\TestCase;
use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\WebDriverBy;

class JaenungNetTest extends TestCase
{
    protected $webDriver;

    public function setUp(): void
    {
        $host = 'http://localhost:4444/wd/hub';
        $capabilities = DesiredCapabilities::chrome();
        $this->webDriver = RemoteWebDriver::create($host, $capabilities);
    }

    public function testHomePage()
    {
        $this->webDriver->get('https://www.jaenung.net');
        $title = $this->webDriver->getTitle();
        $this->assertStringContainsString('재능넷', $title);
    }

    public function tearDown(): void
    {
        $this->webDriver->quit();
    }
}

이 테스트 케이스는 다음과 같은 작업을 수행합니다:

setUp() 메소드에서 WebDriver 인스턴스를 생성합니다.
testHomePage() 메소드에서 재능넷 홈페이지로 이동하고 제목을 확인합니다.
tearDown() 메소드에서 WebDriver 세션을 종료합니다.

3.3 고급 테스트 시나리오

실제 E2E 테스트에서는 더 복잡한 시나리오를 다루게 됩니다. 예를 들어, 재능넷에서 사용자 등록 프로세스를 테스트하는 시나리오를 작성해 보겠습니다.


public function testUserRegistration()
{
    $this->webDriver->get('https://www.jaenung.net/register');
    
    // 사용자 정보 입력
    $this->webDriver->findElement(WebDriverBy::id('username'))->sendKeys('testuser');
    $this->webDriver->findElement(WebDriverBy::id('email'))->sendKeys('testuser@example.com');
    $this->webDriver->findElement(WebDriverBy::id('password'))->sendKeys('securepassword');
    $this->webDriver->findElement(WebDriverBy::id('confirm_password'))->sendKeys('securepassword');
    
    // 등록 버튼 클릭
    $this->webDriver->findElement(WebDriverBy::id('register_button'))->click();
    
    // 등록 성공 메시지 확인
    $successMessage = $this->webDriver->findElement(WebDriverBy::className('success-message'))->getText();
    $this->assertEquals('회원가입이 완료되었습니다!', $successMessage);
}

이 테스트는 다음과 같은 단계를 수행합니다:

재능넷의 회원가입 페이지로 이동합니다.
사용자 정보(사용자명, 이메일, 비밀번호)를 입력합니다.
등록 버튼을 클릭합니다.
성공 메시지를 확인하여 등록이 완료되었는지 검증합니다.

3.4 테스트 실행 및 결과 분석

작성한 테스트를 실행하려면 다음 명령어를 사용합니다:

./vendor/bin/phpunit JaenungNetTest.php

테스트 실행 결과는 다음과 같이 표시됩니다:

이 결과는 다음을 의미합니다:

모든 테스트가 성공적으로 실행되었습니다 (녹색 점으로 표시).
테스트 실행에 1.23초가 소요되었습니다.
1개의 테스트 메소드가 실행되었고, 2개의 assertion이 수행되었습니다.

만약 테스트가 실패한다면, 실패한 assertion에 대한 상세한 정보가 표시되어 문제를 쉽게 파악하고 수정할 수 있습니다.

이렇게 PHPUnit과 Selenium을 통합하면, 재능넷과 같은 복잡한 웹 애플리케이션의 다양한 기능을 자동으로 테스트할 수 있습니다. 사용자 등록, 로그인, 재능 검색, 결제 프로세스 등 다양한 시나리오를 커버하는 종합적인 E2E 테스트 스위트를 구축할 수 있죠. 이는 애플리케이션의 안정성을 크게 향상시키고, 개발 팀이 자신 있게 새로운 기능을 출시할 수 있게 해줍니다. 🚀

4. 실제 E2E 테스트 시나리오 작성 및 실행 🎭

이제 PHPUnit과 Selenium을 통합하는 방법을 알았으니, 재능넷과 같은 웹 플랫폼에서 실제로 사용할 수 있는 E2E 테스트 시나리오를 몇 가지 작성해 보겠습니다. 이러한 시나리오들은 사용자의 실제 행동을 시뮬레이션하여 애플리케이션의 주요 기능들이 제대로 작동하는지 확인합니다.

4.1 사용자 로그인 테스트

첫 번째로, 사용자 로그인 프로세스를 테스트하는 시나리오를 작성해 보겠습니다.


public function testUserLogin()
{
    $this->webDriver->get('https://www.jaenung.net/login');
    
    // 로그인 정보 입력
    $this->webDriver->findElement(WebDriverBy::id('username'))->sendKeys('testuser');
    $this->webDriver->findElement(WebDriverBy::id('password'))->sendKeys('securepassword');
    
    // 로그인 버튼 클릭
    $this->webDriver->findElement(WebDriverBy::id('login_button'))->click();
    
    // 로그인 성공 확인
    $this->webDriver->wait(10)->until(
        WebDriverExpectedCondition::presenceOfElementLocated(WebDriverBy::id('user_profile'))
    );
    
    $profileElement = $this->webDriver->findElement(WebDriverBy::id('user_profile'));
    $this->assertStringContainsString('testuser', $profileElement->getText());  4.2 재능 검색 테스트

다음으로, 재능넷의 핵심 기능인 재능 검색 기능을 테스트하는 시나리오를 작성해 보겠습니다.


public function testTalentSearch()
{
    $this->webDriver->get('https://www.jaenung.net');
    
    // 검색어 입력
    $searchBox = $this->webDriver->findElement(WebDriverBy::id('search_box'));
    $searchBox->sendKeys('웹 개발');
    
    // 검색 버튼 클릭
    $this->webDriver->findElement(WebDriverBy::id('search_button'))->click();
    
    // 검색 결과 로딩 대기
    $this->webDriver->wait(10)->until(
        WebDriverExpectedCondition::presenceOfElementLocated(WebDriverBy::className('search-results'))
    );
    
    // 검색 결과 확인
    $searchResults = $this->webDriver->findElements(WebDriverBy::className('talent-card'));
    $this->assertGreaterThan(0, count($searchResults), '검색 결과가 없습니다.');
    
    // 첫 번째 검색 결과의 제목 확인
    $firstResultTitle = $searchResults[0]->findElement(WebDriverBy::className('talent-title'))->getText();
    $this->assertStringContainsString('웹 개발', $firstResultTitle, '검색 결과가 검색어와 일치하지 않습니다.');
}


4.3 재능 등록 프로세스 테스트

이번에는 사용자가 새로운 재능을 등록하는 프로세스를 테스트해 보겠습니다.


public function testTalentRegistration()
{
    // 로그인 (이전에 정의한 testUserLogin 메소드 활용)
    $this->testUserLogin();
    
    // 재능 등록 페이지로 이동
    $this->webDriver->get('https://www.jaenung.net/register-talent');
    
    // 재능 정보 입력
    $this->webDriver->findElement(WebDriverBy::id('talent_title'))->sendKeys('전문적인 웹 개발 서비스');
    $this->webDriver->findElement(WebDriverBy::id('talent_description'))->sendKeys('최신 기술을 활용한 웹사이트 개발');
    $this->webDriver->findElement(WebDriverBy::id('talent_price'))->sendKeys('100000');
    
    // 카테고리 선택 (드롭다운)
    $categorySelect = new WebDriverSelect($this->webDriver->findElement(WebDriverBy::id('talent_category')));
    $categorySelect->selectByVisibleText('IT & 프로그래밍');
    
    // 재능 등록 버튼 클릭
    $this->webDriver->findElement(WebDriverBy::id('register_talent_button'))->click();
    
    // 등록 성공 메시지 확인
    $this->webDriver->wait(10)->until(
        WebDriverExpectedCondition::presenceOfElementLocated(WebDriverBy::className('success-message'))
    );
    
    $successMessage = $this->webDriver->findElement(WebDriverBy::className('success-message'))->getText();
    $this->assertEquals('재능이 성공적으로 등록되었습니다!', $successMessage);
    
    // 등록된 재능 확인
    $this->webDriver->get('https://www.jaenung.net/my-talents');
    $talentList = $this->webDriver->findElements(WebDriverBy::className('talent-item'));
    $latestTalent = $talentList[0]->getText();
    $this->assertStringContainsString('전문적인 웹 개발 서비스', $latestTalent);
}


4.4 결제 프로세스 테스트

마지막으로, 재능 구매 및 결제 프로세스를 테스트하는 시나리오를 작성해 보겠습니다.


public function testPaymentProcess()
{
    // 로그인
    $this->testUserLogin();
    
    // 특정 재능 페이지로 이동
    $this->webDriver->get('https://www.jaenung.net/talent/123'); // 가정: ID가 123인 재능
    
    // 구매 버튼 클릭
    $this->webDriver->findElement(WebDriverBy::id('buy_button'))->click();
    
    // 결제 페이지로 이동 확인
    $this->webDriver->wait(10)->until(
        WebDriverExpectedCondition::urlContains('payment')
    );
    
    // 결제 정보 입력
    $this->webDriver->findElement(WebDriverBy::id('card_number'))->sendKeys('1234-5678-9012-3456');
    $this->webDriver->findElement(WebDriverBy::id('expiry_date'))->sendKeys('12/25');
    $this->webDriver->findElement(WebDriverBy::id('cvv'))->sendKeys('123');
    
    // 결제 진행 버튼 클릭
    $this->webDriver->findElement(WebDriverBy::id('process_payment_button'))->click();
    
    // 결제 성공 페이지 확인
    $this->webDriver->wait(10)->until(
        WebDriverExpectedCondition::urlContains('payment-success')
    );
    
    $successMessage = $this->webDriver->findElement(WebDriverBy::className('payment-success-message'))->getText();
    $this->assertEquals('결제가 성공적으로 완료되었습니다!', $successMessage);
}


4.5 테스트 실행 및 결과 분석

이제 작성한 모든 테스트 케이스를 실행해 보겠습니다. 전체 테스트 스위트를 실행하는 명령어는 다음과 같습니다:

./vendor/bin/phpunit JaenungNetTest.php

테스트 실행 결과는 다음과 같이 표시될 수 있습니다:



이 결과는 다음을 의미합니다:


  모든 5개의 테스트 케이스가 성공적으로 실행되었습니다.
  총 12개의 assertion이 수행되었습니다.
  전체 테스트 실행에 약 25.67초가 소요되었습니다.


이러한 종합적인 E2E 테스트 스위트를 구축함으로써, 재능넷의 핵심 기능들이 예상대로 작동하는지 자동으로 확인할 수 있게 되었습니다. 이는 새로운 기능을 추가하거나 기존 기능을 수정할 때 발생할 수 있는 예기치 않은 버그를 조기에 발견하고 수정하는 데 큰 도움이 됩니다.

다음 섹션에서는 이러한 E2E 테스트를 지속적 통합(CI) 파이프라인에 통합하는 방법과 테스트 자동화의 모범 사례에 대해 알아보겠습니다. 이를 통해 재능넷의 품질 보증 프로세스를 한 단계 더 발전시킬 수 있을 것입니다. 🚀

5. 지속적 통합(CI)과 테스트 자동화 모범 사례 🔄

E2E 테스트를 작성하고 실행하는 것은 시작에 불과합니다. 진정한 가치는 이러한 테스트를 개발 프로세스에 완전히 통합하고 지속적으로 실행하는 데 있습니다. 이를 위해 지속적 통합(CI) 파이프라인을 구축하고 테스트 자동화의 모범 사례를 따르는 것이 중요합니다.

5.1 CI 파이프라인에 E2E 테스트 통합

CI 파이프라인에 E2E 테스트를 통합하면 코드 변경사항이 주요 기능에 영향을 미치지 않는지 자동으로 확인할 수 있습니다. 다음은 GitLab CI를 사용한 예시 설정입니다:


stages:
  - test

e2e_tests:
  stage: test
  image: php:7.4
  services:
    - selenium/standalone-chrome
  before_script:
    - apt-get update && apt-get install -y libzip-dev
    - docker-php-ext-install zip
    - curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
    - composer install
  script:
    - vendor/bin/phpunit JaenungNetTest.php
  only:
    - master
    - develop

이 설정은 다음과 같은 작업을 수행합니다:

PHP 7.4 환경을 설정합니다.
Selenium 서버를 서비스로 실행합니다.
필요한 의존성을 설치합니다.
E2E 테스트를 실행합니다.
master와 develop 브랜치에 변경사항이 있을 때만 실행됩니다.

5.2 테스트 자동화 모범 사례

효과적인 E2E 테스트 자동화를 위해 다음과 같은 모범 사례를 따르는 것이 좋습니다:

테스트 안정성 확보: 불안정한 요소(예: 애니메이션)를 처리하기 위해 적절한 대기 전략을 사용합니다.
테스트 데이터 관리: 테스트에 필요한 데이터를 자동으로 생성하고 정리하는 메커니즘을 구현합니다.
페이지 객체 모델 사용: 웹 페이지의 구조와 동작을 캡슐화하여 테스트 코드의 유지보수성을 높입니다.
병렬 테스트 실행: 테스트 실행 시간을 줄이기 위해 여러 테스트를 동시에 실행합니다.
로깅과 보고: 상세한 테스트 로그와 보고서를 생성하여 실패한 테스트의 원인을 쉽게 파악할 수 있게 합니다.

5.3 페이지 객체 모델 구현 예시

페이지 객체 모델을 사용하여 재능넷의 로그인 페이지를 캡슐화하는 예시를 살펴보겠습니다:


class LoginPage
{
    protected $webDriver;

    public function __construct(RemoteWebDriver $webDriver)
    {
        $this->webDriver = $webDriver;
    }

    public function open()
    {
        $this->webDriver->get('https://www.jaenung.net/login');
        return $this;
    }

    public function login($username, $password)
    {
        $this->webDriver->findElement(WebDriverBy::id('username'))->sendKeys($username);
        $this->webDriver->findElement(WebDriverBy::id('password'))->sendKeys($password);
        $this->webDriver->findElement(WebDriverBy::id('login_button'))->click();
        return new DashboardPage($this->webDriver);
    }
}

// 테스트 코드에서의 사용
public function testUserLogin()
{
    $loginPage = new LoginPage($this->webDriver);
    $dashboardPage = $loginPage->open()->login('testuser', 'securepassword');
    $this->assertTrue($dashboardPage->isLoggedIn());
}