iframe 처리하기

selenium 실습을 하는 도중 iframe에 많이 막히는 것 같습니다.

iframe 처리에 대해 알아보겠습니다.

메일을 작성하는 실습이 있는데 메일 본문을 작성하는 부분이 iframe으로 되어 있습니다.

iframe은 html안에 또 다른 html이 오는 경우이기 때문에 switch_to_frame() 함수를 사용해 iframe 안에있는 elenemt를 확인할 수 있게 해줘야 합니다. 그리고 iframe에서 원래있던 전체 웹 페이지로 나오려면 switch_to_default_content() 함수로 빠저나와야 합니다.

만약 iframe 태그에 name 속성이 있다면 driver.switch_to_frame("iframe name 값")으로 해당 iframe으로 focus를 맞춰줄수 있습니다. 그런데...

chrome의 개발자 도구로 소스를 확인해 보면 iframe에 대한 name도 없습니다.

iframe 값을 가져오는 방법은 여러가지가 있을 수 있습니다. 그중 iframe 태그를 확인하는 방법과 iframe을 감싸고 있는 상위 div 태그의 class로 확인하는 방법을 알아보겠습니다.

먼저 iframe 태그로 확인하는 방법입니다.

하나의 tag를 확인하는 함수는 find_element_by_tag_name 입니다. 그리고 여러개의 tag를 확인하는 함수는 find_elements_by_tag_name 입니다. 

find_elements_by_tag_name를 사용하면 현재 웹 페이지에서 해당 tag를 모두 배열로 가져오게 됩니다.

driver.find_elements_by_tag_name('div')로 하면 웹 페이지의 처음부터 끝까지 순서대로 div를 모두 가저오게 됩니다. 이걸 이용해 현재 웹 페이지에서 iframe을 모두 찾아올 수 있습니다.

# -*- coding: utf-8 -*-
import time
from selenium import webdriver

# chromedriver로 브라우저를 설정합니다.
driver = webdriver.Chrome('./chromedriver')

# find_element_by_ 함수를 사용해 element를 찾을때 최대 30초까지 기다립니다.
driver.implicitly_wait(30)

# 회사 메일(worksmobile) 사이트를 엽니다.
driver.get('https://mail.worksmobile.com/')

# 로그인을 위한 계정을 입력합니다.
driver.find_element_by_id('user_id').send_keys('tongchun@ngle.co.kr')

# 로그인 시작을 클릭합니다.
driver.find_element_by_id('loginStart').click()

# 비밀번호를 넣습니다.
driver.find_element_by_id('password').send_keys('123456')

# 로그인 버튼을 클릭합니다.
driver.find_element_by_id('loginBtn').click()

# 메일쓰기 버튼(링크)을 찾아 클릭합니다.
driver.find_element_by_link_text('메일쓰기').click()

# 보내는 사람을 지정합니다.
driver.find_element_by_id('toInput').send_keys('tongchun@ngle.co.kr')

# 제목을 넣습니다.
driver.find_element_by_id('subject').send_keys('selenium은 즐기고 계신가요?')

# 현재 웹페이지에서 iframe이 몇개가 있는지 변수에 넣고 확인해 봅니다.
iframes = driver.find_elements_by_tag_name('iframe')
print('현재 페이지에 iframe은 %d개가 있습니다.' % len(iframes))

# 배열로된 iframes 변수를 for문을 이용해 하나씩 확인해 봅니다.
# enumerate() 함수를 사용하면 배열의 index(순번)을 확인할 수 있습니다.
for i, iframe in enumerate(iframes):
	try:
		print('%d번째 iframe 입니다.' % i)

		# i 번째 iframe으로 변경합니다.
		driver.switch_to_frame(iframes[i])

		# 변경한 iframe 안의 소스를 확인합니다.
		print(driver.page_source)

		# 원래 frame으로 돌아옵니다.
		driver.switch_to_default_content()
	except:
		# exception이 발생했다면 원래 frame으로 돌아옵니다.
		driver.switch_to_default_content()

		# 몇 번째 frame에서 에러가 났었는지 확인합니다.
		print('pass by except : iframes[%d]' % i)

		# 다음 for문으로 넘어갑니다.
		pass

# 확인된 ifrime으로 변경합니다.
driver.switch_to_frame(iframes[1])

# 메일 본문을 작성하는 editor element를 지정합니다.
editor = driver.find_element_by_class_name('workseditor')

# editor element에 글을 작성합니다.
editor.send_keys('안녕하세요. 김동춘입니다.\nselenium은 재미 있나요?\n어려워 하지 마세요. 인생이 다 그래요. 해보면 벌거 아니에요.\n좋은하루 보내세요~')

# ifrime에서 원래 frame으로 돌아옵니다.
driver.switch_to_default_content()

# 보내기 버튼을 클릭합니다.
driver.find_element_by_id('sendBtn').click()

위 코드처럼 iframe을 모두 불러온 다음 for문을 이용해 iframe안에 소스를 확인할 수 있습니다.

메일 본문을 작성하는 editor가 몇번째 iframe에 있는지 확인하고 switch_to_frame() 함수로 들어갈 수 있습니다.

다음은 iframe 상위에 있는 div 태그의 class를 이용하는 벙법입니다.

iframe이 있는 html 소스는 아래와 같이 되어 있습니다.

<div class="editor_body">
	<div>
		<textarea tabindex="5" style="display: none; border: none; outline: none; resize: none; overflow: auto; width: 100%; height: 445px;"></textarea>
		<textarea tabindex="5" style="display: none; border: none; outline: none; resize: none; overflow: auto; width: 100%; height: 445px;"></textarea>
		<iframe style="width: 100%; height: 445px;" frameborder="0" smart-mod="wysiwyg" tabindex="5"></iframe>
	</div>
</div>

iframe의 상위 div 중 <div class="editor_body">를 이용하는 방법입니다.

find_element_by_css_selector() 함수로 editor_body 안의 iframe을 확인할 수 있습니다.

# -*- coding: utf-8 -*-
import time
from selenium import webdriver

# chromedriver로 브라우저를 설정합니다.
driver = webdriver.Chrome('./chromedriver')

# find_element_by_ 함수를 사용해 element를 찾을때 최대 30초까지 기다립니다.
driver.implicitly_wait(30)

# 회사 메일(worksmobile) 사이트를 엽니다.
driver.get('https://mail.worksmobile.com/')

# 로그인을 위한 계정을 입력합니다.
driver.find_element_by_id('user_id').send_keys('tongchun@ngle.co.kr')

# 로그인 시작을 클릭합니다.
driver.find_element_by_id('loginStart').click()

# 비밀번호를 넣습니다.
driver.find_element_by_id('password').send_keys('123456')

# 로그인 버튼을 클릭합니다.
driver.find_element_by_id('loginBtn').click()

# 메일쓰기 버튼(링크)을 찾아 클릭합니다.
driver.find_element_by_link_text('메일쓰기').click()

# 보내는 사람을 지정합니다.
driver.find_element_by_id('toInput').send_keys('tongchun@ngle.co.kr')

# 제목을 넣습니다.
driver.find_element_by_id('subject').send_keys('selenium은 즐기고 계신가요?')

# class selector를 이용해 iframe을 확인합니다.
editor_frame = driver.find_element_by_css_selector('.editor_body iframe')

# 확인된 ifrime으로 변경합니다.
driver.switch_to_frame(editor_frame)

# 메일 본문을 작성하는 editor element를 지정합니다.
editor = driver.find_element_by_class_name('workseditor')

# editor element에 글을 작성합니다.
editor.send_keys('안녕하세요. 김동춘입니다.\nselenium은 재미 있나요?\n어려워 하지 마세요. 인생이 다 그래요. 해보면 벌거 아니에요.\n좋은하루 보내세요~')

# ifrime에서 원래 frame으로 돌아옵니다.
driver.switch_to_default_content()

# 보내기 버튼을 클릭합니다.
driver.find_element_by_id('sendBtn').click()

html과 css를 이용해 여러 방법으로 elenemt를 확인할 수 있습니다.