[실습] Selenium 사용자의 브라우저 이벤트 가져오기 #1

Topic. Selenium 에서 사용자가 브라우저 상에서 click, input 하는 이벤트를 감지하여 기록해보는 방법을 알아봅니다.

---

1. 개요

Selenium 이하 '셀레니움' 은 웹브라우저 드라이브를 관리하지만

드라이브에서 발생하는 이벤트를 가져오는 기능은 아무리 찾아보아도 없었습니다.

 

하지만 셀레니움에는 자바스크립트 주입 기능이 있습니다.

이 기능을 활용하여 사용자의 이벤트를 콘솔에 찍어보겠습니다.

이어서 파이썬 변수로 가져오는 방법도 알아보겠습니다.

---

2. 준비

os	macOS
python	3.12
selenium	4.15.2
selenium-wire	5.1.0

 

윈도우는 셀레니움 설치시 크롬드라이브 설치를 해야하니 아래 블로그를 참조하세요.

https://somjang.tistory.com/entry/WindowsWindows10%EC%97%90-Selenium%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

---

3. 실습

1. 드라이브 실행

from seleniumwire import webdriver as sw

options = sw.ChromeOptions()
options.add_argument("--ignore-certificate-errors")
options.add_experimental_option("detach", True)
driver = sw.Chrome(options=options)
driver.maximize_window()

 

- seleniumwire 를 webdriver 에서 import하여 sw 로 약어등록한다.
- sw 에서 ChromeOptions() 클래스를 가져온다.

 

- SSL인증 실패화면을 무시하는 옵션을 추가한다.

options.add_argument("--ignore-certificate-errors")

 

- 자동화실행이 끝나면 크롬이 꺼지지 않도록하는 옵션을 추가한다.
options.add_experimental_option("detach", True)

 

- 옵션을 크롬 클래스에 등록하고 실행한다.
driver = sw.Chrome(options=options)

 

- 크롬 창을 최대화시킨다.
driver.maximize_window()

---

2. 테스트 스크립트 주입

셀레니움 에서 띄운 드라이브에 스크립트를 주입합니다.

script = """
    alert("테스트 성공");
"""
driver.execute_script(script)

 

여기까지 되었다면 이제 셀레니움으로 브라우저를 제어 할 수 있는 범위가 어마어마하게 늘어났습니다.

---

3. 이벤트리스너 등록

document 객체에 eventListener를 등록해보겠습니다.

테스트를 위해 네이버홈페이지로 이동해서 이벤트를 주입합니다.

driver.get("https://www.naver.com/")
script = """
    document.addEventListener('click', (e)=>{console.log(e.target)})
"""
driver.execute_script(script)

 

검색창을 누르니 검색창 엘리먼트가 로그에 찍혔습니다.

---

4. DOM 조작

버튼 두개를 생성하여 body 에 붙여보겠습니다.

driver.execute_script("""
    let button1 = document.createElement("button");
    button1.id = 'test';
    button1.textContent = '테스트 버튼';
    document.body.prepend(button1);
    let button2 = document.createElement("button");
    button2.id = 'test';
    button2.textContent = '두번째 버튼';
    document.body.prepend(button2);
""")

---

5. 자바스크립트 변수 가져오기 (이벤트 기록 가져오기)

document에 클릭 이벤트리스너를 등록하고 이벤트가 발생하면 target을 eventList라는 배열에 push 해봅시다.

driver.execute_script("""
    let eventList = []
    document.addEventListener('click', (e)=>{
        eventList.push(e.target)
        console.log("eventList :",eventList);
    })
""")

그리고 반복문을 돌려 eventList를 리턴받아봅시다.

while True :
    eventList = driver.execute_script("""
        return eventList;
    """)
    print(eventList)
    time.sleep(3)

 

** driver.execute_script 내부에서 return을 시키면 스크립트의 결과를 파이썬 변수에 저장할 수 있습니다.

그런데 이상하게도 아래와같이 오류가 발생합니다.

 

아마도 driver.execute_script 는 스크립트가 1회만 실행되고 모두 증발하는것 같습니다.

따라서 스크립트에서 변수선언도 의미가 없습니다.

 

엄청난 삽질 끝에 문득 떠오르는 생각이 있습니다.

인터넷 브라우저 자바스크립트에는 영구적으로 존재하는 조상객체가 있습니다.

 

바로 window 객체입니다.

window 객체 내에 변수를 선언하여 리턴받아봅시다.

driver.execute_script("""
    window.eventList = []
    document.addEventListener('click', (e)=>{
        window.eventList.push(e.target)
        console.log("eventList :",window.eventList);
    })
""")

while True :
    eventList = driver.execute_script("""
        return window.eventList;
    """)
    print(eventList)
    time.sleep(3)
    print("-----------------")

신기하게도 DOM 형태가 아닌 셀레니움 객체로 넘어옵니다.

 

이를 디버그로 잡아보면 selenium 객체 내부 변수정보도 모두 가지고있는것을 확인했습니다.

 

이상으로 셀레니움을 이용하여 브라우저에서 사용자 이벤트를 파이썬 으로 가져오는 방법을 알아보았습니다.

 

 

다음시간에는 페이지가 다른 주소로 옮겨졌을때에도 기록을 계속 하는 방법을 알아보겠습니다.