kdrug-inventory-system/dev_scripts/test_js_debug.py

#!/usr/bin/env python3
"""JavaScript 디버깅을 위한 Playwright 테스트"""

import asyncio
from playwright.async_api import async_playwright

async def debug_herb_info():
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        page = await browser.new_page()

        # 콘솔 메시지 캡처
        console_messages = []
        page.on("console", lambda msg: console_messages.append({
            "type": msg.type,
            "text": msg.text,
            "args": msg.args
        }))

        # 네트워크 요청 캡처
        network_requests = []
        page.on("request", lambda req: network_requests.append({
            "url": req.url,
            "method": req.method
        }))

        # 네트워크 응답 캡처
        network_responses = []
        async def log_response(response):
            if "/api/" in response.url:
                try:
                    body = await response.text()
                    network_responses.append({
                        "url": response.url,
                        "status": response.status,
                        "body": body[:200] if body else None
                    })
                except:
                    pass
        page.on("response", log_response)

        try:
            # 페이지 접속
            print("페이지 접속 중...")
            await page.goto("http://localhost:5001")
            await page.wait_for_load_state("networkidle")

            # JavaScript 실행하여 직접 함수 호출
            print("\n직접 JavaScript 함수 테스트...")

            # loadHerbInfo 함수 존재 확인
            has_function = await page.evaluate("typeof loadHerbInfo === 'function'")
            print(f"1. loadHerbInfo 함수 존재: {has_function}")

            # loadAllHerbsInfo 함수 존재 확인
            has_all_herbs = await page.evaluate("typeof loadAllHerbsInfo === 'function'")
            print(f"2. loadAllHerbsInfo 함수 존재: {has_all_herbs}")

            # displayHerbCards 함수 존재 확인
            has_display = await page.evaluate("typeof displayHerbCards === 'function'")
            print(f"3. displayHerbCards 함수 존재: {has_display}")

            # 약재 정보 페이지로 이동
            await page.click('a[data-page="herb-info"]')
            await page.wait_for_timeout(2000)

            # herbInfoGrid 요소 확인
            grid_exists = await page.evaluate("document.getElementById('herbInfoGrid') !== null")
            print(f"4. herbInfoGrid 요소 존재: {grid_exists}")

            # herbInfoGrid 내용 확인
            grid_html = await page.evaluate("document.getElementById('herbInfoGrid')?.innerHTML || 'EMPTY'")
            print(f"5. herbInfoGrid 내용 길이: {len(grid_html)} 문자")
            if grid_html and grid_html != 'EMPTY':
                print(f"   처음 100자: {grid_html[:100]}...")

            # API 호출 직접 테스트
            print("\n\nAPI 응답 직접 테스트...")
            api_response = await page.evaluate("""
                fetch('/api/herbs/masters')
                    .then(res => res.json())
                    .then(data => ({
                        success: data.success,
                        dataLength: data.data ? data.data.length : 0,
                        firstItem: data.data ? data.data[0] : null
                    }))
                    .catch(err => ({ error: err.toString() }))
            """)
            print(f"API 응답: {api_response}")

            # displayHerbCards 직접 호출 테스트
            if api_response.get('dataLength', 0) > 0:
                print("\n\ndisplayHerbCards 직접 호출...")
                await page.evaluate("""
                    fetch('/api/herbs/masters')
                        .then(res => res.json())
                        .then(data => {
                            if (typeof displayHerbCards === 'function') {
                                displayHerbCards(data.data);
                            } else {
                                console.error('displayHerbCards 함수가 없습니다');
                            }
                        })
                """)
                await page.wait_for_timeout(1000)

                # 다시 확인
                grid_html_after = await page.evaluate("document.getElementById('herbInfoGrid')?.innerHTML || 'EMPTY'")
                print(f"displayHerbCards 호출 후 내용 길이: {len(grid_html_after)} 문자")

                card_count = await page.evaluate("document.querySelectorAll('.herb-card').length")
                print(f"herb-card 요소 개수: {card_count}")

            # 콘솔 메시지 출력
            print("\n\n=== 콘솔 메시지 ===")
            for msg in console_messages:
                if 'error' in msg['type'].lower():
                    print(f"❌ {msg['type']}: {msg['text']}")
                else:
                    print(f"📝 {msg['type']}: {msg['text']}")

            # API 응답 상태 확인
            print("\n\n=== API 응답 ===")
            for resp in network_responses:
                if '/api/herbs/masters' in resp['url']:
                    print(f"URL: {resp['url']}")
                    print(f"상태: {resp['status']}")
                    print(f"응답: {resp['body'][:100] if resp['body'] else 'No body'}")

        finally:
            await browser.close()

if __name__ == "__main__":
    asyncio.run(debug_herb_info())