helloahram

wait_for_network_idle()을 호출했는데 그 직후 요소를 찾지 못해 실패한다면, networkidle이 보장하는 것이 무엇인지 다시 생각해볼 필요가 있다networkidle이 실제로 보장하는 것Playwright의 networkidle 상태는 정확히 하나만 보장한다> "500ms 이상 진행 중인 네트워크 요청이 없음"API 응답이 도착했다는 뜻이지, 그 응답으로 React가 DOM을 다 그렸다는 뜻이 아니다React SPA에서 데이터 흐름은 이렇게 진행된다1. fetch('/api/bench/123') ← 네트워크 요청2. 서버 응답 수신 ← networkidle이 이 시점을 감지3. setState({ data }) ← 클라이언트 사이드, 네트워크 없음4...

E2E 자동화에서 언어 전환은 생각보다 자주 깨진다헤더의 글로브 아이콘을 찾고, 드롭다운을 열고, "Korean"을 선택하는 흐름은 직관적으로 보이지만 실제로는 취약 지점이 많다모달이 버튼을 가리면 실패하고, UI 구조가 바뀌면 로케이터가 무효화된다이번에 70줄 JS sibling 탐색을 15줄 쿠키 주입으로 교체하면서 왜 UI 조작 방식이 근본적으로 불안정한지, 그리고 어떻게 해결했는지 정리한다문제: 70줄짜리 JS evaluate가 필요했던 이유로그인 직후 앱이 영어로 표시되는 경우가 있었다. URL에 /en/이 포함된 상태였다언어 전환 버튼을 선택하기 위해 다음 흐름을 구현했다:1. 헤더에서 아바타 버튼(button:has(p))의 부모 컨테이너 찾기2. JS evaluate로 형제(sibling)..

pages/ 디렉토리에 wait_for_timeout 호출이 263개 있었다대부분은 "혹시 느릴 수 있으니까"라는 이유로 들어간 것들이었다이 글은 4일에 걸쳐 210개를 이벤트 기반 대기로 전환하고, 재발 방지 Hook까지 구축한 과정을 기록한다wait_for_timeout이 왜 문제인가wait_for_timeout(1000)은 1초를 고정으로 기다린다버튼이 100ms 만에 활성화되어도 1초를 기다린다반대로 네트워크가 느린 날에는 1초 안에 준비가 안 되어 검증이 실패한다두 문제가 동시에 존재한다: 빠를 때는 낭비, 느릴 때는 불안정263개의 wait_for_timeout 호출을 분류해보니 네 가지 카테고리로 나뉘었다카테고리내용건수A이벤트 기반으로 완전 교체 가능25BMCP 실측 기반으로 값 단축 가능1..

Page Object에서 이런 코드를 발견했다def click_save_button(self): try: button = self.page.locator(self.locators.SAVE_BUTTON) button.clikc() # ← 오타! click이 아니라 clikc except Exception: logger.warning("저장 버튼을 찾을 수 없음") return Nonebutton.clikc()은 AttributeError를 발생시킨다except Exception이 이걸 잡아서 "저장 버튼을 찾을 수 없음"으로 로깅한다로그만 보면 로케이터 문제 같다실제로는 오타다이 문제가 왜 오래 숨어 있었는가except Exception은 Py..

Bench에서 분자를 삭제하는 시나리오가 있다Scenario: 분자를 삭제한다 Given Bench 페이지에 진입한다 When 첫 번째 분자를 삭제한다 Then 분자가 삭제되었음을 확인한다검증이 매번 PASS였다그런데 Then Step 코드를 열어보니 이랬다@then("분자가 삭제되었음을 확인한다")def verify_molecule_removed(bench_page, bench_context): bench_page.take_screenshot("molecule_deleted") logger.info("✓ 분자 삭제 완료")스크린샷 찍고, 로그에 체크마크 출력하고, pytest는 PASS를 반환한다실제로 분자가 삭제되었는지는 아무도 확인하지 않는다삭제 API가 500을 반환해도..

언어 전환 버튼을 선택하는 코드가 있다로컬에서는 잘 돌았는데, CI 에서 터졌다원인을 찾는데 2시간 걸렸다문제: 버튼 인덱스가 밀린다기존 코드는 전체 button 목록에서 인덱스로 언어 버튼을 찾았다# ❌ 기존 코드 — 글로벌 button 인덱스 기반user_btn_idx = page.evaluate(""" () => { const btns = Array.from(document.querySelectorAll('button')); return btns.findIndex(b => b.querySelector('p')); }""")# 언어 버튼 = 아바타 바로 앞 버튼lang_button = page.locator("button").nth(user_btn_idx - 1)l..

"저장" 버튼을 못 찾는다FAILED - playwright._impl._errors.TimeoutError: Timeout 30000ms exceeded. Locator: get_by_role("button", name="저장")로케이터가 틀렸나? 텍스트가 바뀌었나? 아니면 버튼이 아예 안 나오나?에러 로그만 보고는 모른다에러 로그만 보고 추측하면 생기는 일에러: "저장" 버튼 Timeout ↓추측: "텍스트가 바뀌었겠지" → name="Save" 로 변경 ↓실행 → 또 실패 ↓추측: "버튼이 아니라 link 겠지" → get_by_role("link") 로 변경 ↓실행 → 또 실패 ↓추측: "로딩이 느린가봐" → timeout 60초로 증가 ↓실행 → 또 실패 (6..

HyperDesign 에서 Warhead 원자가 선택 보호되어 있는지 검증해야 했다처음엔 선택해서 반응이 없으면 보호가 정상이라고 판단했다틀렸다force=True 가 보호를 우회하기 때문이다상황: Covalent HyperDesign 의 Warhead 보호약물 설계 도구에서 분자 구조를 수정할 수 있다그런데 Warhead (반응기) 부분은 수정하면 안 된다UI 에서 Warhead 원자를 선택해도 반응되지 않아야 한다이걸 E2E 자동화로 검증해야 한다첫 번째 시도: 선택 기반 검증 (실패)# ❌ Bad — 선택해서 반응 없으면 보호 정상이라고 판단def test_warhead_protection(page): warhead_atom = page.locator(".warhead-atom").first ..

Claude Code Agent 를 만들어서 E2E Test 를 만들고 있는데 속도가 많이 나질 않아, Playwright 에서 제공하는 공식 Test Agents (Planner/ Generator/ Healer) 를 사용하려고 한다 1. 공식 문서 https://playwright.dev/docs/test-agents Agents | PlaywrightIntroductionplaywright.dev 2. Init프로젝트에 에이전트의 정의를 추가한다npx playwright init-agents --loop=claude 3. Role of Agents1) playwright-test-planner (테스트 계획자)역할: 웹 애플리케이션의 테스트 계획 수립색상: 초록색주요 기능:브라우저 탐색 및 인..

https://helloahram.tistory.com/257 [TIL] Claude Code 설정 #1 - 자주 사용하는 명령어, 유용한 서비스Claude Code Init init 을 실행하면 Claude Code 가 프로젝트를 분석하고, CLAUDE.md 파일을 자동으로 생성한다 CLAUDE.md 파일에는 Project Overview, Essential Commands, Running Tests 등이 포함된다 여기에 내가 주로 사용helloahram.tistory.comhttps://helloahram.tistory.com/259 [TIL] Claude Code 설정 #2 - Super Claude 설치하고 사용하기설정 #1 - https://helloahram.tistory.com/257 [T..