Định vị và chọn các phần tử từ trang web là chìa khóa để tìm kiếm web với Selenium. Để định vị và chọn các phần tử từ trang web, bạn có thể sử dụng bộ chọn XPath trong Selenium.
Trong bài viết này, tôi sẽ chỉ cho bạn cách định vị và chọn các phần tử từ các trang web bằng cách sử dụng bộ chọn XPath trong Selenium với thư viện python Selenium. Vậy hãy bắt đầu.
Điều kiện tiên quyết:
Để thử các lệnh và ví dụ của bài viết này, bạn phải có,
- Bản phân phối Linux (tốt nhất là Ubuntu) được cài đặt trên máy tính của bạn.
- Python 3 đã được cài đặt trên máy tính của bạn.
- PIP 3 đã được cài đặt trên máy tính của bạn.
- Python virtualenv gói được cài đặt trên máy tính của bạn.
- Trình duyệt web Mozilla Firefox hoặc Google Chrome được cài đặt trên máy tính của bạn.
- Phải biết cách cài đặt Trình điều khiển Firefox Gecko hoặc Trình điều khiển Web Chrome.
Để đáp ứng các yêu cầu 4, 5 và 6, hãy đọc bài viết của tôi Giới thiệu về Selenium trong Python 3 . Bạn có thể tìm thấy nhiều bài viết về các chủ đề khác trên LinuxHint.com . Hãy chắc chắn kiểm tra chúng nếu bạn cần bất kỳ hỗ trợ nào.
Thiết lập Thư mục Dự án:
Để giữ mọi thứ có tổ chức, hãy tạo một thư mục dự án mới selen-xpath / như sau:
$mkdir -pvselen-xpath/người lái xe 
Điều hướng đến selen-xpath / thư mục dự án như sau:
$đĩa CDselen-xpath/ 
Tạo một môi trường ảo Python trong thư mục dự án như sau:
$virtualenv .venv 
Kích hoạt môi trường ảo như sau:
$nguồn.venv/là/hoạt động 
Cài đặt thư viện Selenium Python bằng PIP3 như sau:
$ pip3 cài đặt selen 
Tải xuống và cài đặt tất cả trình điều khiển web được yêu cầu trong trình điều khiển / thư mục của dự án. Tôi đã giải thích quá trình tải xuống và cài đặt trình điều khiển web trong bài viết của mình Giới thiệu về Selenium trong Python 3 .
Tải xuống Bộ chọn XPath bằng Công cụ dành cho nhà phát triển Chrome:
Trong phần này, tôi sẽ chỉ cho bạn cách tìm bộ chọn XPath của phần tử trang web bạn muốn chọn bằng Selenium bằng cách sử dụng Công cụ dành cho nhà phát triển tích hợp sẵn của trình duyệt web Google Chrome.
Để có bộ chọn XPath bằng trình duyệt web Google Chrome, hãy mở Google Chrome và truy cập trang web mà bạn muốn trích xuất dữ liệu. Sau đó, nhấn nút chuột phải (RMB) trên vùng trống của trang và nhấp vào Quan sát để mở Công cụ dành cho nhà phát triển Chrome .
Bạn cũng có thể nhấn + Sự thay đổi + tôi để mở Công cụ dành cho nhà phát triển Chrome .
Công cụ dành cho nhà phát triển Chrome nên được mở.
Để tìm biểu diễn HTML của phần tử trang web mong muốn của bạn, hãy nhấp vào Quan sát (
), như được đánh dấu trong ảnh chụp màn hình bên dưới.
Sau đó, di chuột qua phần tử trang web mong muốn của bạn và nhấn nút chuột trái (LMB) để chọn nó.
Biểu diễn HTML của phần tử web bạn đã chọn sẽ được đánh dấu trong Các yếu tố tab của Công cụ dành cho nhà phát triển Chrome, như bạn có thể thấy trong ảnh chụp màn hình bên dưới.
Để có được bộ chọn XPath của phần tử bạn muốn, hãy chọn phần tử từ Các yếu tố tab của Công cụ dành cho nhà phát triển Chrome và nhấp chuột phải (RMB) vào nó. Sau đó, chọn Sao chép > Sao chép XPath, như được đánh dấu trong ảnh chụp màn hình bên dưới.
Tôi đã dán bộ chọn XPath vào trình soạn thảo văn bản. Bộ chọn XPath trông như thể hiện trong ảnh chụp màn hình bên dưới.
Tải xuống Bộ chọn XPath bằng Công cụ dành cho nhà phát triển Firefox:
Trong phần này, tôi sẽ chỉ cho bạn cách tìm bộ chọn XPath của phần tử trang web bạn muốn chọn với Selenium bằng cách sử dụng Công cụ dành cho nhà phát triển tích hợp sẵn của trình duyệt web Mozilla Firefox.
Để lấy bộ chọn XPath bằng trình duyệt web Firefox, hãy mở Firefox và truy cập trang web mà bạn muốn trích xuất dữ liệu. Sau đó, nhấn nút chuột phải (RMB) trên vùng trống của trang và nhấp vào Kiểm tra phần tử (Q) để mở Công cụ dành cho nhà phát triển Firefox .
Công cụ dành cho nhà phát triển Firefox nên được mở.
Để tìm biểu diễn HTML của phần tử trang web mong muốn của bạn, hãy nhấp vào Quan sát (
), như được đánh dấu trong ảnh chụp màn hình bên dưới.
Sau đó, di chuột qua phần tử trang web mong muốn của bạn và nhấn nút chuột trái (LMB) để chọn nó.
Biểu diễn HTML của phần tử web bạn đã chọn sẽ được đánh dấu trong Thanh tra tab của Công cụ dành cho nhà phát triển Firefox, như bạn có thể thấy trong ảnh chụp màn hình bên dưới.
Để có được bộ chọn XPath của phần tử bạn muốn, hãy chọn phần tử từ Thanh tra tab của Công cụ dành cho nhà phát triển Firefox và nhấp chuột phải (RMB) vào nó. Sau đó, chọn Sao chép > XPath như được đánh dấu trong ảnh chụp màn hình bên dưới.
Bộ chọn XPath của phần tử mong muốn của bạn sẽ trông giống như thế này.
Trích xuất dữ liệu từ các trang web bằng Bộ chọn XPath:
Trong phần này, tôi sẽ chỉ cho bạn cách chọn các phần tử trang web và trích xuất dữ liệu từ chúng bằng cách sử dụng bộ chọn XPath với thư viện Selenium Python.
Đầu tiên, tạo một tập lệnh Python mới ex01.py và nhập các dòng mã sau.
từselennhập khẩuwebdrivertừselen.webdriver.chung.chìa khóa nhập khẩuChìa khóa
từselen.webdriver.chung.qua nhập khẩuQua
tùy chọn=webdriver.ChromeOptions()
tùy chọn.không đầu = Thật
trình duyệt=webdriver.Trình duyệt Chrome(thực thi_path='./drivers/chromedriver',
tùy chọn=tùy chọn)
trình duyệt.hiểu được('https://www.unixtimestamp.com/')
dấu thời gian=trình duyệt.find_element_by_xpath('/ html / body / div [1] / div [1]
/ div [2] / div [1] / div / div / h3 [2] ')
in('Dấu thời gian hiện tại:% s'%(dấu thời gian.chữ.tách ra('')[0]))
trình duyệt.gần()
Khi bạn đã hoàn tất, hãy lưu ex01.py Tập lệnh Python.
Dòng 1-3 nhập khẩu tất cả các thành phần Selen cần thiết.
Dòng 5 tạo đối tượng Tùy chọn Chrome và dòng 6 bật chế độ không sử dụng cho trình duyệt web Chrome.
Dòng 8 tạo Chrome trình duyệt đối tượng sử dụng máy cắt crôm nhị phân từ trình điều khiển / thư mục của dự án.
Dòng 10 cho trình duyệt tải trang web unixtimestamp.com.
Dòng 12 tìm phần tử có dữ liệu dấu thời gian từ trang bằng bộ chọn XPath và lưu trữ nó trong dấu thời gian Biến đổi.
Dòng 13 phân tích cú pháp dữ liệu dấu thời gian từ phần tử và in nó trên bảng điều khiển.
Tôi đã sao chép bộ chọn XPath của h2 yếu tố từ unixtimestamp.com bằng Công cụ dành cho nhà phát triển Chrome.
Dòng 14 đóng trình duyệt.
Chạy tập lệnh Python ex01.py như sau:
$ python3 ex01.py 
Như bạn có thể thấy, dữ liệu dấu thời gian được in trên màn hình.
Ở đây, tôi đã sử dụng browser.find_element_by_xpath (bộ chọn) phương pháp. Tham số duy nhất của phương thức này là bộ chọn, là bộ chọn XPath của phần tử.
Thay vì browser.find_element_by_xpath () phương pháp, bạn cũng có thể sử dụng browser.find_element (Bởi, bộ chọn) phương pháp. Phương thức này cần hai tham số. Tham số đầu tiên Qua sẽ là Bởi.XPATH vì chúng ta sẽ sử dụng bộ chọn XPath và tham số thứ hai bộ chọn sẽ là bộ chọn XPath chính nó. Kết quả sẽ giống nhau.
Để xem làm thế nào browser.find_element () phương thức hoạt động cho bộ chọn XPath, tạo một tập lệnh Python mới ex02.py , sao chép và dán tất cả các dòng từ ex01.py đến ex02.py và thay đổi dòng 12 như được đánh dấu trong ảnh chụp màn hình bên dưới.
Như bạn có thể thấy, tập lệnh Python ex02.py cho kết quả tương tự như ex01.py .
$ python3 ex02.py 
Các browser.find_element_by_xpath () và browser.find_element () các phương pháp được sử dụng để tìm và chọn một phần tử đơn lẻ từ các trang web. Nếu bạn muốn tìm và chọn nhiều phần tử bằng bộ chọn XPath, thì bạn phải sử dụng browser.find_elements_by_xpath () hoặc browser.find_elements () các phương pháp.
Các browser.find_elements_by_xpath () phương thức lấy cùng đối số với browser.find_element_by_xpath () phương pháp.
Các browser.find_elements () phương thức nhận các đối số giống như browser.find_element () phương pháp.
Hãy xem ví dụ về trích xuất danh sách tên bằng bộ chọn XPath từ random-name-generator.info với thư viện Selenium Python.
Danh sách không có thứ tự ( chết thẻ) có 10 tại bên trong mỗi thẻ chứa một tên ngẫu nhiên. XPath để chọn tất cả tại thẻ bên trong chết trong trường hợp này là // * [@ id = main] / div [3] / div [2] / ol // li
Hãy xem qua một ví dụ về việc chọn nhiều phần tử từ trang web bằng bộ chọn XPath.
Tạo một tập lệnh Python mới ex03.py và nhập các dòng mã sau vào đó.
từselennhập khẩuwebdrivertừselen.webdriver.chung.chìa khóa nhập khẩuChìa khóa
từselen.webdriver.chung.qua nhập khẩuQua
tùy chọn=webdriver.ChromeOptions()
tùy chọn.không đầu = Thật
trình duyệt=webdriver.Trình duyệt Chrome(thực thi_path='./drivers/chromedriver',
tùy chọn=tùy chọn)
trình duyệt.hiểu được('http://random-name-generator.info/')
những cái tên=trình duyệt.find_elements_by_xpath('
// * [@ id = 'main'] / div [3] / div [2] / ol // li ')
vìTêntrongtên:
in(Tên.chữ)
trình duyệt.gần()
Khi bạn đã hoàn tất, hãy lưu ex03.py Tập lệnh Python.
Dòng 1-8 giống như trong ex01.py Tập lệnh Python. Vì vậy, tôi sẽ không giải thích chúng ở đây một lần nữa.
Dòng 10 cho trình duyệt tải trang web random-name-generator.info.
Dòng 12 chọn danh sách tên bằng cách sử dụng browser.find_elements_by_xpath () phương pháp. Phương pháp này sử dụng bộ chọn XPath // * [@ id = main] / div [3] / div [2] / ol // li để tìm danh sách tên. Sau đó, danh sách tên được lưu trữ trong những cái tên Biến đổi.
Trong dòng 13 và 14, a vì vòng lặp được sử dụng để lặp qua những cái tên liệt kê và in tên trên bảng điều khiển.
Dòng 16 đóng trình duyệt.
Chạy tập lệnh Python ex03.py như sau:
$ python3 ex03.py 
Như bạn có thể thấy, tên được trích xuất từ trang web và in trên bảng điều khiển.
Thay vì sử dụng browser.find_elements_by_xpath () , bạn cũng có thể sử dụng browser.find_elements () phương pháp như trước đây. Đối số đầu tiên của phương pháp này là Bởi.XPATH, và đối số thứ hai là bộ chọn XPath.
Để thử nghiệm với browser.find_elements () phương pháp, tạo một tập lệnh Python mới ex04.py , sao chép tất cả các mã từ ex03.py đến ex04.py và thay đổi dòng 12 như được đánh dấu trong ảnh chụp màn hình bên dưới.
Bạn sẽ nhận được kết quả tương tự như trước đây.
$ python3 ex04.py 
Khái niệm cơ bản về Bộ chọn XPath:
Công cụ dành cho nhà phát triển của trình duyệt web Firefox hoặc Google Chrome tự động tạo bộ chọn XPath. Nhưng những bộ chọn XPath này đôi khi không đủ cho dự án của bạn. Trong trường hợp đó, bạn phải biết một bộ chọn XPath nhất định làm gì để xây dựng bộ chọn XPath của bạn. Trong phần này, tôi sẽ chỉ cho bạn những điều cơ bản về bộ chọn XPath. Sau đó, bạn sẽ có thể xây dựng bộ chọn XPath của riêng mình.
Tạo một thư mục mới www / trong thư mục dự án của bạn như sau:
$mkdir -vwww 
Tạo một tệp mới web01.html bên trong www / thư mục và gõ vào các dòng sau trong tệp đó.
< html lang='trên'>
< cái đầu >
< meta bảng chữ cái='UTF-8'>
< meta Tên='khung nhìn' Nội dung='width = device-width, initial-scale = 1.0'>
< chức vụ >Tài liệu HTML cơ bản</ chức vụ >
</ cái đầu >
< cơ thể người >
< h1 >Chào thế giới</ h1 >
</ cơ thể người >
</ html >
Khi bạn đã hoàn tất, hãy lưu web01.html tập tin.
Chạy một máy chủ HTTP đơn giản trên cổng 8080 bằng lệnh sau:
$ python3 -m http.người phục vụ- thư mục www /8080 
Máy chủ HTTP sẽ bắt đầu.
Bạn sẽ có thể truy cập vào web01.html tập tin bằng cách sử dụng URL http: // localhost: 8080 / web01.html , như bạn có thể thấy trong ảnh chụp màn hình bên dưới.
Trong khi Công cụ nhà phát triển Firefox hoặc Chrome được mở, hãy nhấn + NS để mở hộp tìm kiếm. Bạn có thể nhập bộ chọn XPath của mình tại đây và xem những gì nó chọn rất dễ dàng. Tôi sẽ sử dụng công cụ này trong suốt phần này.
Bộ chọn XPath bắt đầu bằng dấu gạch chéo (/) hầu hết thời gian. Nó giống như một cây thư mục Linux. Các / là gốc của tất cả các phần tử trên trang web.
Yếu tố đầu tiên là html . Vì vậy, bộ chọn XPath / html chọn toàn bộ html nhãn.
Bên trong html thẻ, chúng tôi có một cơ thể người nhãn. Các cơ thể người có thể được chọn bằng công cụ chọn XPath / html / body
Các h1 tiêu đề bên trong cơ thể người nhãn. Các h1 tiêu đề có thể được chọn bằng bộ chọn XPath / html / body / h1
Loại bộ chọn XPath này được gọi là bộ chọn đường dẫn tuyệt đối. Trong bộ chọn đường dẫn tuyệt đối, bạn phải duyệt qua trang web từ gốc (/) của trang. Nhược điểm của bộ chọn đường dẫn tuyệt đối là ngay cả một sự thay đổi nhỏ đối với cấu trúc trang web cũng có thể làm cho bộ chọn XPath của bạn không hợp lệ. Giải pháp cho vấn đề này là một bộ chọn XPath tương đối hoặc một phần.
Để xem đường dẫn tương đối hoặc đường dẫn một phần hoạt động như thế nào, hãy tạo một tệp mới web02.html bên trong www / và nhập các dòng mã sau vào đó.
< html lang='trên'>
< cái đầu >
< meta bảng chữ cái='UTF-8'>
< meta Tên='khung nhìn' Nội dung='width = device-width, initial-scale = 1.0'>
< chức vụ >Tài liệu HTML cơ bản</ chức vụ >
</ cái đầu >
< cơ thể người >
< h1 >Chào thế giới</ h1 >
< div >
< P >đây là tin nhắn</ P >
</ div >
< div >
< nhịp >Chào thế giới</ nhịp >
</ div >
</ cơ thể người >
</ html >
Khi bạn đã hoàn tất, hãy lưu web02.html và tải nó trong trình duyệt web của bạn.
Như bạn có thể thấy, bộ chọn XPath // div / p chọn P thẻ bên trong div nhãn. Đây là một ví dụ về bộ chọn XPath tương đối.
Bộ chọn XPath tương đối bắt đầu bằng // . Sau đó, bạn chỉ định cấu trúc của phần tử bạn muốn chọn. Trong trường hợp này, div / p .
Vì thế, // div / p có nghĩa là chọn P phần tử bên trong một div yếu tố, không quan trọng những gì đến trước nó.
Bạn cũng có thể chọn các phần tử theo các thuộc tính khác nhau như Tôi , lớp , kiểu, vv bằng cách sử dụng bộ chọn XPath. Hãy xem cách thực hiện điều đó.
Tạo một tệp mới web03.html bên trong www / và nhập các dòng mã sau vào đó.
< html lang='trên'>
< cái đầu >
< meta bảng chữ cái='UTF-8'>
< meta Tên='khung nhìn' Nội dung='width = device-width, initial-scale = 1.0'>
< chức vụ > Tài liệu HTML cơ bản</ chức vụ >
</ cái đầu >
< cơ thể người >
< h1 > Xin chào thế giới</ h1 >
< div lớp='container1'>
< P > đây là tin nhắn</ P >
< nhịp > đây là một tin nhắn khác</ nhịp >
</ div >
< div lớp='container1'>
< h2 > tiêu đề2</ h2 >
< P > Một số người
khôn ngoan để lựa chọn những nỗi đau, những rắc rối, những thứ không rơi vào người đã chọn
các chuyến bay dễ dàng hoặc các dịch vụ tuyệt vời khác? Anh ấy được sinh ra từ bao giờ hay năm nào?</ P >
</ div >
< nhịp Tôi='footer-msg'> đây là chân trang</ nhịp >
</footer>
</ cơ thể người >
</ html >
Khi bạn đã hoàn tất, hãy lưu web03.html và tải nó trong trình duyệt web của bạn.
Giả sử bạn muốn chọn tất cả div các yếu tố có lớp Tên container1 . Để làm điều đó, bạn có thể sử dụng bộ chọn XPath // div [@ class = ’container1 ′]
Như bạn thấy, tôi có 2 phần tử phù hợp với bộ chọn XPath // div [@ class = ’container1 ′]
Để chọn cái đầu tiên div phần tử với lớp Tên container1 , cộng [1] ở cuối lựa chọn XPath, như được hiển thị trong ảnh chụp màn hình bên dưới.
Theo cách tương tự, bạn có thể chọn thứ hai div phần tử với lớp Tên container1 sử dụng bộ chọn XPath // div [@ class = ’container1 ′] [2]
Bạn có thể chọn các phần tử bằng cách Tôi cũng.
Ví dụ: để chọn phần tử có Tôi của footer-msg , bạn có thể sử dụng bộ chọn XPath // * [@ id = ’footer-msg’]
Đây, * trước [@ id = ’footer-msg’] được sử dụng để chọn bất kỳ phần tử nào bất kể thẻ của chúng là gì.
Đó là những điều cơ bản của bộ chọn XPath. Bây giờ, bạn sẽ có thể tạo bộ chọn XPath của riêng mình cho các dự án Selenium của bạn.
Phần kết luận:
Trong bài viết này, chúng tôi đã giới thiệu cho các bạn cách tìm và chọn các phần tử từ các trang web bằng cách sử dụng bộ chọn XPath với thư viện Selenium Python. Tôi cũng đã thảo luận về các bộ chọn XPath phổ biến nhất. Sau khi đọc bài viết này, bạn sẽ cảm thấy khá tự tin khi chọn các phần tử từ các trang web bằng cách sử dụng bộ chọn XPath với thư viện Selenium Python.