브라우저 콘솔 로그 캡처의 필요성
시스템 테스트가 간헐적으로 실패하고 JavaScript 실행 문제로 의심되는 시나리오를 가정해 봅시다. 디버깅을 위해 앱에 console.log 문을 추가했지만, 헤드리스 모드에서는 이 로그에 접근하기 어렵습니다. 비-헤드리스 브라우저(예: Chrome)로 테스트를 실행하고 binding.pry와 같은 디버깅 도구를 사용하는 방법도 있지만, 이 방법은 브라우저 속도를 늦춰 타이밍 관련 문제가 발생하지 않을 수 있습니다. 진정한 실패를 재현하려면 테스트를 전체 속도로 실행하면서 브라우저 콘솔 로그를 캡처해야 합니다.
해결책: Cuprite 드라이버 설정
Cuprite 드라이버를 구성하여 브라우저 콘솔 로그를 캡처하는 방법은 다음과 같습니다.
-
Capybara 드라이버 설정 수정:
spec/support/capybara.rb파일에서 Cuprite 드라이버를 등록할 때StringIO로거를 정의하여 콘솔 출력을 캡처합니다.ruby # spec/support/capybara.rb Capybara.register_driver :cuprite do |app| logger = StringIO.new Capybara::Cuprite::Driver.new( app, window_size: [1440, 900], timeout: 5, # other config ... logger: logger # 로거를 전달하여 콘솔 로그 캡처 ) end이 설정은 테스트 실행 중 모든 브라우저 콘솔 출력을StringIO로거에 캡처합니다. -
테스트에서 로거 사용: Cuprite 드라이버가 로그를 캡처하도록 설정되었으므로, 테스트에서 이 로그에 접근할 수 있습니다.
ruby # spec/features/some_spec.rb it "Does something" do visit some_path click_button "Some Action" logs = page.driver.browser.options.logger.string puts "BROWSER LOGS CAPTURED FROM TEST: #{logs}" expect(URI.parse(page.current_url).request_uri).to eql("/account") end페이지 방문 및 JavaScript 동작 트리거 후,logger.string속성에서 캡처된 로그를 추출하여 출력합니다. -
로그 출력 관리: 캡처된 출력은
console.log문뿐만 아니라 많은 내부 브라우저 출력을 포함하므로 매우 방대할 수 있습니다. 이를 관리하기 위해 출력을 클립보드로 파이프하거나 텍스트 파일로 리디렉션하여 검사하는 것이 좋습니다. 예를 들어, Mac에서는bin/rspec spec/features/some_spec.rb | pbcopy명령을 사용할 수 있습니다. 캡처된 로그는Runtime.consoleAPICalled를 포함하는 JSON 형식이며, 특정 로그를 필터링하여 확인할 수 있습니다.ruby # spec/features/some_spec.rb it "Does something" do visit some_path click_button "Some Action" logs = page.driver.browser.options.logger.string matching_logs = logs.lines.select { |line| line.include?("=== ROUTER") } puts "FILTERED BROWSER LOGS:" puts matching_logs expect(URI.parse(page.current_url).request_uri).to eql("/account") end
중요 사항: 자산(Asset) 재컴파일
JavaScript 파일을 수정(예: 디버깅을 위해 console.log 추가)한 후에는 반드시 bin/rails assets:precompile 명령을 실행해야 합니다. 그렇지 않으면 테스트 모드에서 Rails는 사전 컴파일된 자산 번들을 사용하므로, 새로운 로그 문이 나타나지 않을 수 있습니다.
Cuprite 소스 코드 탐색
Cuprite 문서에서 명확한 해결책을 찾기 어려울 때, 오픈 소스 프로젝트의 강점을 활용하여 소스 코드와 테스트 스위트를 살펴보는 것이 좋습니다. Cuprite 코드베이스에서 console.log를 검색하여 StringIO 로거를 사용하여 콘솔 로그를 캡처하는 방법을 보여주는 테스트 케이스를 찾을 수 있습니다. 이는 개발자가 의심스러울 때 소스 코드와 테스트를 통해 풍부한 정보를 얻을 수 있다는 교훈을 줍니다.