[Python] Shadow DOM - Selenium

1. Selenium No Such Element 에러

최근 Selenium을 사용하여 크롤러를 구축할 일이 생겨 평소와 같이 Xpath, Selector 등을 사용하여 구축을 시도하였다. 하지만, Selenium 사용 시 가장 흔하게 발생하는 selenium.common.exceptions.NoSuchElementException: Message:no such element:Unable to locate element:{"method":"css selector", "selecto":"실제 사용한 구문"} 에러가 발생하여 모든 방법을 동원해 수정하였으나 오류는 해결되지 않았다.

 

해당 에러를 해러를 해결하는 방법에는 클래스 명에 공백이 존재하여 공백 대신에 점(.)을 사용하여 해결, 로딩 시간으로 인한 오류를 방지하기 위한 시간 지연 코드 추가 등 여러 가지 존재하지만 본질적인 문제는 해결되지 않았다.

(해당 에러 해결 방식은 해당 포스팅을 참고하였다.)

 

 

2. Shadow DOM가 적용된 코드

여러 해결 방법을 사용하였으나, 해결되지 않아 크롤링 대상 사이트 코드를 유심히 보던 중 다음과 같이 #shadow-root 문자열이 여러 개 존재하는 것을 발견하였다.

#shadow-root 문자열

 

해당 코드를 구글링한 결과 Shadow DOM 요소가 적용되었다는 것을 알 수 있었으며 HTML 코드 내 #document, #shadow-root 문자열이 존재하고 하단에 또 HTML 코드가 존재할 때 Shadow DOM 요소가 적용되었다고 판단할 수 있다.

 

 

3. Shadow DOM이란 무엇일까?

HTML 개발 시 코드가 복잡해지는 것을 방지하기 위해 숨겨놓은 HTML 요소로 일반 사용자가 볼 수 없며 개발자 도구의 Show user agent shadow DOM 옵션을 활성화할 경우 볼 수 있다.

Show user agent shadow DOM 옵션

 

Shadow DOM 요소가 적용되었을 때 찾고자 하는 Selenium Element가 숨겨진 상태이므로 No such element 에러가 발생하는 것이었다.

 

 

4. Shadow DOM 크롤링 방법

Selenium에서는 현재 Shadow DOM에 대한 기능을 지원하는지 모르겠으나 pyshadow 플러그인을 활용하여 크롤링을 정상적으로 수행할 수 있었다.

 

해당 플로그인을 사용할 경우 Shadow DOM 요소에 대한 접근이 가능해지며 설치는 일반 모듈과 동일하게 진행한다.

pip install pyshadow

 

pyshadow의 import는 아래와 같이 진행한다.

from pyshadow.main import Shadow

 

이후 실제 코드에서는 driver.get('크롤링 대상 URL') 코드 이후 Shadow 객체르 선언하고 기존 사용 방식과 동일하게 find_element()를 사용하면 원하는 결과를 크롤링할 수 있다. 예시 코드는 아래와 같다.

driver.get('크롤링 대상 URL')

shadow = Shadow(driver) # Shadow 객체 선언
temp = shadow.find_element('~~')