[Selenium] shadow DOM 크롤링 하는법

html 코드를 보다보면

 

#document

또는

#shadow-root

 

형식 밑에 또 html 코드가 있는 경우가 있다.

 

이런 경우에는 selenium으로 바로 크롤링하려 할때 element를 못찾게 되는데,

 

이때는 javascript로 shadow DOM객체를 찾아서 반환한다음 selenium에서 반환하여야 한다.

 

예를 들어서 chrome://settings 에 들어가면 크롬의 설정을 변경할 수 있는데,

 

상단 검색창에 입력을 하고 싶다고 가정해보자, html소스상에서는 #searchInput을 찾으면 되지만 shadow DOM에 숨겨져 있어서 바로 찾을 수 없는 element라고 뜰것이다.

 

심지어 3중 shadow dom으로 되어 있는데, 이러한 경우에는 html코드의 shadow DOM 상단의 태그들을 이용해서 찾아서 들어가야 한다.

 

가령

<settings-ui>

- #shadow-root

--<cr-toolbar>

---#shadow-root

----<cr-toolbar-search-field>

-----#shadow-root

------<div id="searchInput">

 

인경우에 searchInput을 찾는 방법은

 

1. shadow-root 객체를 찾을 수 있는 함수선언

def expand_shadow_element(element):
    shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
    return shadow_root

2. 차례로 파고들어간다.

root1 = driver.find_element_by_tag_name('settings-ui')
shadow_root1 = expand_shadow_element(root1)

root2 = shadow_root1.find_element_by_tag_name('cr-toolbar')
shadow_root2 = expand_shadow_element(root2)

root3 = shadow_root2.find_element_by_css_selector('cr-toolbar-search-field')
shadow_root3 = expand_shadow_element(root3)

inputArea = shadow_root3.find_element_by_css_selector("#searchInput")

즉, shadow DOM을 크롤링하려면 shadow-dom 상위의 태그를 파악한 후 반복적으로 파고 들어가야 한다.

 

출처: stackoverflow.com/questions/36141681/does-anybody-know-how-to-identify-shadow-dom-web-elements-using-selenium-webdriv

 

 

 

 

 

*** 만약에 naver blog 같이 iframe 내부에 #document 처럼 숨겨진 html이 있는 경우에는

shadowRoot를 사용하여 접근할 수 없다.

이때에는

driver.switch_to_frame("프레임이름")

으로 프레임을 아예 바꾼후에 css select 를 사용하면 평소처럼 크롤링을 할 수 있다.