[네이버 스마트 에디터 2.0] iframe 선택, 게시판 글쓰기 자동화

네이버 스마트 에디터 2.0 게시판 글쓰기 자동화(셀레니움) iframe 선택

나는 한달에 한번씩 게시판에 주기적으로 올려야 할 자료가 있다.

 

양이 그렇게 많지 않아 한시간내에 마무리 할 수 있어 번거로움을 느끼진 못했다.

 

어느날 자동화 프로그램을 하나 만들면 5분안에 끝낼 수 있지 않을까? 하는 생각이 들었다.

 

바로 만들기 시작했다.

 

예전에 네이버 카페에 글을 자동으로 올려주는 자동화 시스템을 만들던 파일이 있어 그 파일을 재사용했다.

 

파이썬 셀레니움을 이용해서 하는건 자료가 많다.

 

하지만 유일하게 내가 해결하지 못한 일이 있었다.

 

[스마트 에디터 2.0] 게시판 글쓰기 자동화 문제 발생

다른 부분들은 직관적으로 id 항목이 노출되서 넣기만 하면 되는데 문제는 바로 여기 에디터 부분이다.

 

iframe으로 씌워져 있어 id 값이 노출이 안된다. 

 

그럼 CSS 선택자로 하면되지 저기 보이잖아!! 했더니 역시나 안된다.

iframe 최상단 코드

코드를 볼 줄 모르는 나는 이것저것 다 확인해봤다. iframe은 선택이 안되고 iframe으로 진입해서 해야한단다 하하.. 쉬운게 없구만

 

구글링을 해봐도 뾰족한 해결 방법은 보이지 않았다.

 

 

해결방법

 

1. 아이프레임 찾기

2. 아이프레임 안으로 들어가기

 

3. 아이프레임 안의 특정 텍스트 영역 찾기

4. 위에서 찾지 못한 .se_inputarea를 찾아준다. (아이프레임 내부에 있는 id 혹은 선택자 넣기)

 

5. 데이터 넣기

 

6. 아이프레임안에서 나오기

iframe = driver.find_element(By.TAG_NAME, 'iframe')
driver.switch_to.frame(iframe)
driver.execute_script("""
    var editor = document.querySelector('iframe').contentDocument;
    editor.querySelector('.se2_inputarea').innerHTML = arguments[0];
""", field_4_data)
driver.switch_to.default_content()

 

위의 코드로 해결되었다. 누군가에게는 도움이 되길..

 

참고로 그누보드 네이버 스마트 에디터 2.0 사용했다.

 

그누보드 사용자에게는 꽤 유용할지도..

 

위의 코드는 iframe으로 설정되어있는 값을 찾는 모든곳에 사용 가능할 것 같다.

 

해결방법 설명

 

• 아이프레임은 독립된 환경이기 때문에 Selenium은 기본적으로 그 안에 접근할 수 없습니다.
• 따라서 switch_to.frame()으로 아이프레임 안으로 들어가야 합니다.
• 그리고 텍스트 입력 필드가 JavaScript로 만들어져 있기 때문에, 단순히 send_keys()로는 데이터를 입력할 수 없습니다. 그래서 execute_script()로 데이터를 조작합니다.

비전공자를 위한 쉬운 요약

1. 아이프레임 찾기: 웹 페이지 안에 있는 작은 창(아이프레임)을 찾는다.
2. 아이프레임 내부로 이동: Selenium을 통해 작은 창 안으로 들어간다.
3. 작업 수행: 작은 창 안에서 텍스트를 입력하거나 수정한다.
4. 다시 기본 페이지로 이동: 작업을 마치고 원래의 큰 페이지로 돌아온다.

이 과정을 거쳐야 아이프레임 내부의 데이터를 수정할 수 있습니다!

 

후일담

내가 막 이것저것 해보다가 해결이 안되서 잠깐 쉬고 있었다. 내 자리가 정수기 옆에 있어 물 뜨러온 개발자님에게 살짝 조언을 구했다.

 

그러자 개발자님의 멘트 : "우리서버면 그냥 DB로 밀어넣으면 끝나잖아요" 

나 : "아....."

 

맞다. 그냥 DB로 밀어넣으면 끝난다. 그래도 뭐 재밌었다. 

 

실제로 위의 코드도 개발자님이 짜주셨다 데헷..