JavaScriptExecutor를 활용한 Selenium 웹 인터랙션 강화
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
소프트웨어 개발자 및 QA 엔지니어 (중급~고급)
핵심 요약
- JavaScriptExecutor는 Selenium WebDriver의 executeScript() 및 executeAsyncScript() 메서드를 통해 DOM 조작, 비동기 처리, 스크롤 등 표준 메서드로 처리 불가능한 작업을 수행
- executeScript()는 즉시 실행되는 동기 처리로 간단한 JS 명령(예: 클릭, 스크롤, 텍스트 읽기)에 적합
- executeAsyncScript()는 setTimeout, AJAX 등 비동기 작업 처리에 사용되며, 콜백 기반으로 동작
- 비동기 처리 시 executeAsyncScript()를, DOM 조작 시 executeScript()를 사용해야 함
섹션별 세부 요약
- JavaScriptExecutor 소개
- Selenium은 표준 WebDriver 메서드(
click()
,sendKeys()
)로 처리 불가능한 경우 JavaScriptExecutor를 사용 - JavaScriptExecutor는 브라우저의 내장 JS 엔진(V8, SpiderMonkey)을 통해 JS 코드를 실행
- 사용 시
import org.openqa.selenium.JavascriptExecutor;
패키지 필요
- executeScript() 메서드
- 동기 처리로 실행되며, 즉시 결과 반환
- 예시:
js.executeScript("return document.title;")
→ 현재 페이지 제목 반환 - 사용 사례: 버튼 클릭, 스크롤, 텍스트 입력, 페이지 새로고침
- executeAsyncScript() 메서드
- 비동기 처리로 실행되며, AJAX, setTimeout 등과 연동
- 예시:
js.executeAsyncScript("var callback = arguments[arguments.length - 1]; setTimeout(function(){ callback('Async script executed'); }, 1000);")
- 사용 시 콜백 함수를 포함한 JS 코드 필요
- JavaScriptExecutor 사용 시나리오
- 스크롤:
window.scrollTo(0, document.body.scrollHeight)
- 비활성화 요소 처리:
document.getElementById('element id').click()
- DOM 조작: 스타일, 속성 변경 또는 요소 삽입/삭제
- 마우스 이벤트 시뮬레이션:
dispatchEvent()
를 통해 직접 DOM에 이벤트 전달
- 실제 사용 예시
- 버튼 클릭:
js.executeScript("document.getElementById('submit').click();")
- 요소 스크롤:
js.executeScript("arguments[0].scrollIntoView(true);", element)
- 텍스트 입력:
js.executeScript("document.getElementById('email').value='username@xyz.com';")
결론
JavaScriptExecutor는 Selenium의 표준 WebDriver 메서드로 처리 불가능한 복잡한 웹 인터랙션(예: 비동기 처리, DOM 조작)을 가능하게 하는 핵심 도구이다.
- executeScript()는 간단한 동작(예: 클릭, 스크롤)에, executeAsyncScript()는 비동기 처리(예: AJAX)에 사용
- 브라우저의 JS 엔진(Chrome의 V8, Firefox의 SpiderMonkey)을 활용해 실행되며, 동기/비동기 처리 구분이 필수적
- 실무 적용 시
executeAsyncScript()
를 사용해 AJAX 처리를,executeScript()
를 사용해 DOM 조작을 수행할 것 - 예외 처리(예:
ElementNotInteractableException
) 발생 시 JavaScriptExecutor를 통해 DOM 직접 조작으로 대응 가능