웹 페이지에서 요소를 찾고 선택하는 것이 Selenium으로 웹 스크래핑의 핵심입니다. 웹 페이지에서 요소를 찾고 선택하기 위해 Selenium에서 XPath 선택기를 사용할 수 있습니다.
이 기사에서는 Selenium python 라이브러리와 함께 Selenium의 XPath 선택기를 사용하여 웹 페이지에서 요소를 찾고 선택하는 방법을 보여 드리겠습니다. 시작하겠습니다.
전제 조건:
이 문서의 명령과 예제를 시도하려면 다음이 필요합니다.
- 컴퓨터에 설치된 Linux 배포판(우분투 권장).
- 컴퓨터에 설치된 Python 3.
- 컴퓨터에 설치된 PIP 3.
- 파이썬 가상 환경 컴퓨터에 설치된 패키지.
- 컴퓨터에 설치된 Mozilla Firefox 또는 Google Chrome 웹 브라우저.
- Firefox Gecko 드라이버 또는 Chrome 웹 드라이버를 설치하는 방법을 알아야 합니다.
요구 사항 4, 5 및 6을 충족하려면 내 기사를 읽으십시오. Python 3의 셀레늄 소개 . 다른 주제에 대한 많은 기사를 찾을 수 있습니다. 리눅스힌트닷컴 . 도움이 필요한 경우 반드시 확인하십시오.
프로젝트 디렉토리 설정:
모든 것을 정리하려면 새 프로젝트 디렉토리를 만드세요. 셀레늄-xpath/ 다음과 같이:
$mkdir -pv셀레늄 xpath/운전사 
다음으로 이동합니다. 셀레늄-xpath/ 프로젝트 디렉토리는 다음과 같습니다.
$CD셀레늄 xpath/ 
다음과 같이 프로젝트 디렉터리에 Python 가상 환경을 만듭니다.
$가상 환경 
다음과 같이 가상 환경을 활성화합니다.
$원천.venv/오전/활성화 
다음과 같이 PIP3를 사용하여 Selenium Python 라이브러리를 설치합니다.
$ pip3 셀레늄 설치 
필요한 모든 웹 드라이버를 다운로드하여 설치하십시오. 드라이버/ 프로젝트의 디렉토리. 내 기사에서 웹 드라이버를 다운로드하고 설치하는 과정을 설명했습니다. Python 3의 셀레늄 소개 .
Chrome 개발자 도구를 사용하여 XPath 선택기를 가져옵니다.
이 섹션에서는 Google Chrome 웹 브라우저의 내장 개발자 도구를 사용하여 Selenium으로 선택하려는 웹 페이지 요소의 XPath 선택기를 찾는 방법을 보여 드리겠습니다.
Google Chrome 웹 브라우저를 사용하여 XPath 선택기를 가져오려면 Google Chrome을 열고 데이터를 추출하려는 웹 사이트를 방문하십시오. 그런 다음 페이지의 빈 영역에서 마우스 오른쪽 버튼(RMB)을 누르고 검사 열다 크롬 개발자 도구 .
누를 수도 있습니다. + 옮기다 + NS 열다 크롬 개발자 도구 .
크롬 개발자 도구 열어야 합니다.
원하는 웹 페이지 요소의 HTML 표현을 찾으려면 검사 (
) 아이콘, 아래 스크린샷에 표시된 대로.
그런 다음 원하는 웹 페이지 요소 위에 마우스를 놓고 마우스 왼쪽 버튼(LMB)을 눌러 선택합니다.
선택한 웹 요소의 HTML 표현이 집단 탭 크롬 개발자 도구, 아래 스크린샷에서 볼 수 있듯이.
원하는 요소의 XPath 선택기를 가져오려면 집단 탭 크롬 개발자 도구 마우스 오른쪽 버튼(RMB)을 클릭합니다. 그런 다음 선택 복사 > XPath 복사, 아래 스크린샷에 표시된 대로.
텍스트 편집기에서 XPath 선택기를 붙여넣었습니다. XPath 선택기는 아래 스크린샷과 같습니다.
Firefox 개발자 도구를 사용하여 XPath 선택기를 가져옵니다.
이 섹션에서는 Mozilla Firefox 웹 브라우저의 내장 개발자 도구를 사용하여 Selenium으로 선택하려는 웹 페이지 요소의 XPath 선택기를 찾는 방법을 보여 드리겠습니다.
Firefox 웹 브라우저를 사용하여 XPath 선택기를 가져오려면 Firefox를 열고 데이터를 추출할 웹 사이트를 방문하십시오. 그런 다음 페이지의 빈 영역에서 마우스 오른쪽 버튼(RMB)을 누르고 요소 검사(Q) 열다 파이어폭스 개발자 도구 .
파이어폭스 개발자 도구 열어야 합니다.
원하는 웹 페이지 요소의 HTML 표현을 찾으려면 검사 (
) 아이콘, 아래 스크린샷에 표시된 대로.
그런 다음 원하는 웹 페이지 요소 위에 마우스를 놓고 마우스 왼쪽 버튼(LMB)을 눌러 선택합니다.
선택한 웹 요소의 HTML 표현이 조사관 탭 파이어폭스 개발자 도구, 아래 스크린샷에서 볼 수 있듯이.
원하는 요소의 XPath 선택기를 가져오려면 조사관 탭 파이어폭스 개발자 도구 마우스 오른쪽 버튼(RMB)을 클릭합니다. 그런 다음 선택 복사 > XPath 아래 스크린샷에 표시된 대로.
원하는 요소의 XPath 선택기는 다음과 같아야 합니다.
XPath 선택기를 사용하여 웹 페이지에서 데이터 추출:
이 섹션에서는 Selenium Python 라이브러리와 함께 XPath 선택기를 사용하여 웹 페이지 요소를 선택하고 데이터를 추출하는 방법을 보여 드리겠습니다.
먼저 새 Python 스크립트를 만듭니다. ex01.py 다음 코드 줄을 입력합니다.
~에서셀렌수입웹드라이버~에서셀렌.웹드라이버.흔한.열쇠 수입열쇠
~에서셀렌.웹드라이버.흔한.~에 의해 수입에 의해
옵션=웹드라이버.크롬옵션()
옵션.목이 없는 = 진실
브라우저=웹드라이버.크롬(실행 파일 경로='./드라이버/크롬드라이버',
옵션=옵션)
브라우저.가져 오기('https://www.unixtimestamp.com/')
타임스탬프=브라우저.find_element_by_xpath('/html/body/div[1]/div[1]
/div[2]/div[1]/div/div/h3[2]')
인쇄('현재 타임스탬프: %s'%(타임스탬프.텍스트.나뉘다('')[0]))
브라우저.닫다()
완료되면 저장 ex01.py 파이썬 스크립트.
1-3행은 필요한 모든 Selenium 구성 요소를 가져옵니다.
5행은 Chrome 옵션 개체를 만들고 6행은 Chrome 웹 브라우저에 대한 헤드리스 모드를 활성화합니다.
8행은 Chrome을 만듭니다. 브라우저 를 사용하여 개체 크롬 드라이버 바이너리 드라이버/ 프로젝트의 디렉토리.
10행은 브라우저에게 unixtimestamp.com 웹사이트를 로드하도록 지시합니다.
12행은 XPath 선택기를 사용하여 페이지에서 타임스탬프 데이터가 있는 요소를 찾아 저장합니다. 타임스탬프 변하기 쉬운.
13행은 요소의 타임스탬프 데이터를 구문 분석하여 콘솔에 출력합니다.
표시된 XPath 선택기를 복사했습니다. h2 요소 unixtimestamp.com Chrome 개발자 도구를 사용하여
14행은 브라우저를 닫습니다.
Python 스크립트 실행 ex01.py 다음과 같이:
$ python3 ex01.파이 
보시다시피 타임스탬프 데이터가 화면에 인쇄됩니다.
여기에서 내가 사용한 browser.find_element_by_xpath(선택기) 방법. 이 방법의 유일한 매개변수는 선택자, 요소의 XPath 선택자입니다.
대신에 browser.find_element_by_xpath() 방법, 당신은 또한 사용할 수 있습니다 browser.find_element(By, 선택자) 방법. 이 메서드에는 두 개의 매개변수가 필요합니다. 첫 번째 매개변수 에 의해 될거야 By.XPATH XPath 선택자와 두 번째 매개변수를 사용할 것이기 때문에 선택자 XPath 선택기 자체가 됩니다. 결과는 동일할 것입니다.
방법을 보려면 browser.find_element() 메서드가 XPath 선택기에서 작동하고 새 Python 스크립트를 만듭니다. ex02.py , 다음의 모든 줄을 복사하여 붙여넣습니다. ex01.py 에게 ex02.py 그리고 변화 12행 아래 스크린샷에 표시된 대로.
보시다시피 Python 스크립트는 ex02.py 와 같은 결과를 제공합니다 ex01.py .
$ python3 ex02.파이 
NS browser.find_element_by_xpath() 그리고 browser.find_element() 메소드는 웹 페이지에서 단일 요소를 찾고 선택하는 데 사용됩니다. XPath 선택기를 사용하여 여러 요소를 찾고 선택하려면 다음을 사용해야 합니다. browser.find_elements_by_xpath() 또는 browser.find_elements() 행동 양식.
NS browser.find_elements_by_xpath() 메소드는 다음과 같은 인수를 취합니다. browser.find_element_by_xpath() 방법.
NS browser.find_elements() 메서드는 다음과 같은 인수를 사용합니다. browser.find_element() 방법.
다음에서 XPath 선택기를 사용하여 이름 목록을 추출하는 예를 살펴보겠습니다. random-name-generator.info Selenium Python 라이브러리와 함께.
정렬되지 않은 목록( 주사위 태그)에는 10이 있습니다. ~에서 임의의 이름을 포함하는 각 태그 내부. 모든 선택을 위한 XPath ~에서 내부의 태그 주사위 이 경우 태그는 //*[@id=메인]/div[3]/div[2]/ol//li
XPath 선택기를 사용하여 웹 페이지에서 여러 요소를 선택하는 예를 살펴보겠습니다.
새 Python 스크립트 만들기 ex03.py 다음 코드 줄을 입력하십시오.
~에서셀렌수입웹드라이버~에서셀렌.웹드라이버.흔한.열쇠 수입열쇠
~에서셀렌.웹드라이버.흔한.~에 의해 수입에 의해
옵션=웹드라이버.크롬옵션()
옵션.목이 없는 = 진실
브라우저=웹드라이버.크롬(실행 파일 경로='./드라이버/크롬드라이버',
옵션=옵션)
브라우저.가져 오기('http://random-name-generator.info/')
이름=브라우저.find_elements_by_xpath('
//*[@id='메인']/div[3]/div[2]/ol//li')
~을위한이름~에이름:
인쇄(이름.텍스트)
브라우저.닫다()
완료되면 저장 ex03.py 파이썬 스크립트.
1-8행은 다음과 같습니다. ex01.py 파이썬 스크립트. 따라서 여기서 다시 설명하지 않겠습니다.
10행은 웹사이트 random-name-generator.info를 로드하도록 브라우저에 지시합니다.
12행은 다음을 사용하여 이름 목록을 선택합니다. browser.find_elements_by_xpath() 방법. 이 방법은 XPath 선택기를 사용합니다. //*[@id=메인]/div[3]/div[2]/ol//li 이름 목록을 찾습니다. 그런 다음 이름 목록이 이름 변하기 쉬운.
13행과 14행에서, ~을위한 루프는 반복하는 데 사용됩니다. 이름 콘솔에 이름을 나열하고 인쇄하십시오.
16행은 브라우저를 닫습니다.
Python 스크립트 실행 ex03.py 다음과 같이:
$ python3 ex03.파이 
보시다시피 이름은 웹 페이지에서 추출되어 콘솔에 인쇄됩니다.
를 사용하는 대신 browser.find_elements_by_xpath() 방법, 당신은 또한 사용할 수 있습니다 browser.find_elements() 방법은 이전과 같습니다. 이 방법의 첫 번째 인수는 By.XPATH, 두 번째 인수는 XPath 선택기입니다.
실험하려면 browser.find_elements() 메서드, 새 Python 스크립트 만들기 ex04.py , 모든 코드 복사 ex03.py 에게 ex04.py , 아래 스크린샷에 표시된 대로 12행을 변경합니다.
이전과 동일한 결과를 얻어야 합니다.
$ python3 ex04.파이 
XPath 선택기의 기본 사항:
Firefox 또는 Google Chrome 웹 브라우저의 개발자 도구는 XPath 선택기를 자동으로 생성합니다. 그러나 이러한 XPath 선택기는 때때로 프로젝트에 충분하지 않습니다. 이 경우 특정 XPath 선택기가 XPath 선택기를 빌드하기 위해 수행하는 작업을 알아야 합니다. 이 섹션에서는 XPath 선택기의 기본 사항을 보여 드리겠습니다. 그런 다음 고유한 XPath 선택기를 빌드할 수 있어야 합니다.
새 디렉토리 생성 www/ 다음과 같이 프로젝트 디렉토리에서
$mkdir -Vwww 
새 파일 만들기 web01.html 에서 www/ 디렉토리를 만들고 해당 파일에 다음 줄을 입력합니다.
< HTML 랑='에'>
< 머리 >
< 메타 문자 집합='UTF-8'>
< 메타 이름='뷰포트' 콘텐츠='너비=장치 너비, 초기 크기=1.0'>
< 제목 >기본 HTML 문서</ 제목 >
</ 머리 >
< 신체 >
< h1 >헬로월드</ h1 >
</ 신체 >
</ HTML >
완료되면 저장 web01.html 파일.
다음 명령을 사용하여 포트 8080에서 간단한 HTTP 서버를 실행합니다.
$ python3 -m http.섬기는 사람--디렉토리 www/8080 
HTTP 서버가 시작되어야 합니다.
액세스할 수 있어야 합니다. web01.html URL을 사용하는 파일 http://localhost:8080/web01.html , 아래 스크린샷에서 볼 수 있듯이.
Firefox 또는 Chrome 개발자 도구가 열려 있는 동안 + NS 검색 상자를 엽니다. 여기에 XPath 선택기를 입력하고 선택 항목을 매우 쉽게 확인할 수 있습니다. 이 섹션 전체에서 이 도구를 사용할 것입니다.
XPath 선택기는 슬래시(/) 대부분의 시간. Linux 디렉토리 트리와 같습니다. NS / 웹 페이지에 있는 모든 요소의 루트입니다.
첫 번째 요소는 HTML . 따라서 XPath 선택자는 /html 전체를 선택 HTML 꼬리표.
내부 HTML 태그, 우리는 신체 꼬리표. NS 신체 태그는 XPath 선택기로 선택할 수 있습니다. /html/바디
NS h1 헤더는 내부에 있습니다 신체 꼬리표. NS h1 헤더는 XPath 선택기로 선택할 수 있습니다. /html/body/h1
이러한 유형의 XPath 선택기를 절대 경로 선택기라고 합니다. 절대 경로 선택기에서는 페이지의 루트(/)에서 웹 페이지를 탐색해야 합니다. 절대 경로 선택기의 단점은 웹 페이지 구조를 약간만 변경해도 XPath 선택기가 무효화될 수 있다는 것입니다. 이 문제에 대한 해결책은 상대 또는 부분 XPath 선택기입니다.
상대 경로 또는 부분 경로가 어떻게 작동하는지 보려면 새 파일을 만드십시오. web02.html 에서 www/ 디렉토리에 다음 코드 줄을 입력하십시오.
< HTML 랑='에'>
< 머리 >
< 메타 문자 집합='UTF-8'>
< 메타 이름='뷰포트' 콘텐츠='너비=장치 너비, 초기 크기=1.0'>
< 제목 >기본 HTML 문서</ 제목 >
</ 머리 >
< 신체 >
< h1 >헬로월드</ h1 >
< div >
< NS >이것은 메시지입니다</ NS >
</ div >
< div >
< 기간 >안녕하세요 세계</ 기간 >
</ div >
</ 신체 >
</ HTML >
완료되면 저장 web02.html 파일을 만들고 웹 브라우저에 로드합니다.
보시다시피 XPath 선택기는 //div/p 를 선택합니다 NS 내부에 태그 div 꼬리표. 이것은 상대 XPath 선택기의 예입니다.
상대 XPath 선택기는 다음으로 시작합니다. // . 그런 다음 선택하려는 요소의 구조를 지정합니다. 이 경우, div/p .
그래서, //div/p 를 선택하는 것을 의미합니다 NS 내부의 요소 div 요소, 그 앞에 오는 것은 중요하지 않습니다.
다음과 같은 다른 속성으로 요소를 선택할 수도 있습니다. ID , 수업 , 유형, XPath 선택기를 사용하는 등. 방법을 알아보겠습니다.
새 파일 만들기 web03.html 에서 www/ 디렉토리에 다음 코드 줄을 입력하십시오.
< HTML 랑='에'>
< 머리 >
< 메타 문자 집합='UTF-8'>
< 메타 이름='뷰포트' 콘텐츠='너비=장치 너비, 초기 크기=1.0'>
< 제목 >기본 HTML 문서</ 제목 >
</ 머리 >
< 신체 >
< h1 >헬로월드</ h1 >
< div 수업='컨테이너1'>
< NS > 이것은 메시지입니다</ NS >
< 기간 > 이것은 또 다른 메시지입니다</ 기간 >
</ div >
< div 수업='컨테이너1'>
< h2 >제목2</ h2 >
< NS > 어떤 사람들은
선택받은 자에게 속하지 않는 고통, 문제, 고통을 선택하는 것이 현명하다
쉬운 비행이나 다른 훌륭한 서비스? 그는 어디서 태어났습니까?</ NS >
</ div >
< 기간 ID='바닥글-메시지'> 바닥글입니다</ 기간 >
</바닥글>
</ 신체 >
</ HTML >
완료되면 저장 web03.html 파일을 만들고 웹 브라우저에 로드합니다.
모든 항목을 선택한다고 가정해 보겠습니다. div 가지고 있는 요소 수업 이름 컨테이너1 . 그렇게 하려면 XPath 선택기를 사용할 수 있습니다. //div[@class='container1']
보시다시피 XPath 선택기와 일치하는 2개의 요소가 있습니다. //div[@class='container1']
첫 번째를 선택하려면 div 요소 수업 이름 컨테이너1 , 추가하다 [1] 아래 스크린샷과 같이 XPath 선택의 끝에서
같은 방법으로 두 번째를 선택할 수 있습니다. div 요소 수업 이름 컨테이너1 XPath 선택기 사용 //div[@class='container1'][2]
다음으로 요소를 선택할 수 있습니다. ID 또한.
예를 들어, ID NS 바닥글 메시지 , XPath 선택기를 사용할 수 있습니다. //*[@id='바닥글-msg']
여기서, * ~ 전에 [@id='바닥글-msg'] 태그에 관계없이 모든 요소를 선택하는 데 사용됩니다.
이것이 XPath 선택기의 기본 사항입니다. 이제 Selenium 프로젝트에 대한 고유한 XPath 선택기를 만들 수 있습니다.
결론:
이 기사에서는 Selenium Python 라이브러리와 함께 XPath 선택기를 사용하여 웹 페이지에서 요소를 찾고 선택하는 방법을 보여주었습니다. 또한 가장 일반적인 XPath 선택자에 대해서도 논의했습니다. 이 기사를 읽은 후에는 Selenium Python 라이브러리와 함께 XPath 선택기를 사용하여 웹 페이지에서 요소를 선택하는 데 꽤 자신감을 느낄 것입니다.