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을 모두 찾아올 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
# -*- 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()
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

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

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

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

1
2
3
4
5
6
7
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# -*- 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()
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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