Playwright + JavaScript | Google, Naver 로그인 자동화 테스트

오늘은 Playwright와 JavaScript를 활용해 Google 로그인 자동화 테스트를 진행해보려 한다.
기존에 Selenium과 Python을 사용해 실무에 자동화 테스트를 간단히 적용해본 경험이 있지만, 보안적인 이슈로 인해 해당 내용을 블로그에 포스팅하기에는 적합하지 않다고 판단했다.
이에 새로운 기술을 익힐 겸 Playwright와 JavaScript를 학습하고, 개인 학습용으로 포스팅을 진행하기로 결정했다.
** Selenium + Python은 실무에 적용하는 데 활용하고, Playwright + JavaScript는 학습 및 공유 목적으로 다룰 예정이다.

Playwright를 설치하기 전 확인사항

node -v // Node.js 버전 확인 (JS를 사용할 것이므로)
npm -v // npm 버전 확인

Node.js 최소 요구 사항

Playwright v1.30+: Node.js 14.x 이상
Playwright v1.40+: Node.js 16.x 이상 권장
최신 Node.js 버전을 사용하는 것이 안정성과 최신 기능 지원 면에서 좋다.

npm 최소 요구 사항

Playwright는 npm의 버전에 민감하지 않다.
Node.js와 함께 설치된 기본 npm 버전
(Noje.js 14.x에서는 npm 6, Nojde.js 16.x에서는 npm 7 이상)이면 충분하다.
웬만하면 npm 7 이상을 사용할 것을 추천한다.

사실 실무에서는 이미 구축된 버전을 사용할 가능성이 높고, 개인 학습이나 실습 목적으로 다룰 때는 최신 LTS(Long Term Support) 버전을 사용하는 것을 권장한다. 최신 버전을 사용하면 호환성 문제를 방지할 수 있어 안정성을 높이고, 최신 기능과 보안 업데이트를 활용할 수 있다.

Playwright 설치

npm install playwright@latest // Playwright 라이브러리 설치
npx playwright install // Playwright 브라우저 설치(모든 브라우저)

모든 브라우저가 아닌 특정 브라우저만 설치할 수도 있다.
npx playwright install chromium // 크롬
npx playwright install firefox // 파이어폭스
npx playwright install webkit // 웹킷

> npx playwright는 Playwright를 글로벌 설치 없이도 실행할 수 있는 도구라 개인 학습이나 테스트 시 유용하다.

---

소스 코드 (Google)

🔊 Google OAuth 정책 주의
Google 계정 로그인은 보안 정책상 추가적인 인증 절차(2FA, CAPTCHA 등)가 있을 수 있다. Playwright는 CAPTCHA를 우회하지 못하므로 테스트 계정을 생성하거나, Google 로그인 없이 테스트를 수행하도록 OAuth 토큰 기반 접근을 고려하는 것이 좋다. 필자는 추가적인 인증이 필요 없는 새로운 테스트 계정을 생성해서 테스트를 진행했다.

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch({ 
        headless: false,
        args: ['--disable-blink-features=AutomationControlled']
    });

    
    const context = await browser.newContext({
        locale: 'ko-KR',
        storageState: 'session.json',
    });

    const page = await context.newPage();

    if (!context.storageState()) {
        await page.goto('https://accounts.google.com/');

        await page.fill('input[type="email"]', 'your_email');
        await page.click('text=다음');

        await page.fill('input[type="password"]', 'your_passwd');
        await page.click('text=다음');
        
        await context.storageState({ path: 'session.json' });
    }

    
    await page.goto('https://myaccount.google.com/');
    
    console.log('로그인 완료');
    // await browser.close();
})();

구글은 어찌저찌 로그인까지는 성공했으나, 보안이 어찌나 강하던지 간단한 로그인 테스트 구현도 애를 먹었다. 위 코드는 다음 포스팅에 리팩토링을 해서 가져오도록 하겠다... 스스로 내놓기에도 매우 부끄럽지만 이 또한 성장통이라 여기고 앞으로 나아가야겠다...

소스 코드 (Naver)

Naver 또한 OAuth 정책 주의 !!

const { chromium } = require('playwright');

(async () => {
    // 브라우저 실행
    const browser = await chromium.launch({ headless: false }); // UI 확인을 위해.
    const context = await browser.newContext();

    // 페이지 열기
    const page = await context.newPage();
    // 로그인 페이지 default가 QR 코드 스캔 로그인으로 지정되어 있어 form 모드로 바꿔주어야 함
    await page.goto('https://nid.naver.com/nidlogin.login?mode=form'); 

    // 로그인 정보 입력
    await page.fill('#id', 'your_id'); // ID 입력
    await page.fill('#pw', 'your_pw'); // 비밀번호 입력

    await page.click('.btn_login');

    console.log('로그인 완료');
    
    // new Notification('알림', { body: '로그인 완료' });
    // await browser.close();
})();

네이버도 새로운 계정을 생성해서 진행했고, 구글처럼 따로 보안 쪽으로 건드리지 않아도 테스트는 무사히 완료할 수 있었다.

초기 코드가 완벽하지 않더라도 그 과정을 기록하는 것이 장기적인 성장과 발전에 중요한 역할을 할 것이라 생각하며 항상 기록해두기

구글과 네이버 소스 코드가 예기치 않게 복잡하거나 엉망일 수 있지만, 처음에 작성한 코드와 그 접근 방식을 기록해 두는 것이 중요해서 기록을 남긴다. 이렇게 기록을 남겨두면 나중에 해당 코드를 리뷰하고, 개선 사항을 발견하며, 개인적인 성장을 이룰 수 있다고 생각하기 때문에...
또한 코드 리뷰와 반성 과정을 통해 더 나은 코딩 습관을 기르고, 문제 해결 능력을 향상시킬 수 있다고 믿는다.

결론

구글이나 네이버와 같은 플랫폼에서 자동화 테스트를 구현하기 전에, 해당 사이트의 보안 정책과 네트워크 동작 방식에 대해 충분히 이해하는 것이 중요한 것 같다. 각 사이트는 자동화 도구를 탐지하거나 보안을 강화하기 위해 고유의 메커니즘을 가지고 있으므로, 이를 고려하지 않고 테스트 코드를 작성하면 예상치 못한 오류나 접근 차단이 발생할 수 있다. 따라서 효율적이고 신뢰성 있는 테스트를 위해 보안 및 네트워크 동작에 대한 사전 이해를 바탕으로 테스트 환경을 설계하는 것이 필수적인 것으로 느껴진다.
자동화 코드만 짠다고 되는 것이 아닌 것을 명심하자.