การใช้ XPath และ Selenium เพื่อค้นหาองค์ประกอบใน HTML Page

การค้นหาและเลือกองค์ประกอบจากหน้าเว็บเป็นกุญแจสำคัญในการขูดเว็บด้วยซีลีเนียม สำหรับการค้นหาและเลือกองค์ประกอบจากหน้าเว็บ คุณสามารถใช้ตัวเลือก XPath ใน Selenium

ในบทความนี้ ผมจะแสดงวิธีค้นหาและเลือกองค์ประกอบจากหน้าเว็บโดยใช้ตัวเลือก XPath ใน Selenium ด้วยไลบรารี Selenium python มาเริ่มกันเลยดีกว่า

ข้อกำหนดเบื้องต้น:

หากต้องการลองใช้คำสั่งและตัวอย่างของบทความนี้ คุณต้องมี

1. การกระจาย Linux (ควรเป็น Ubuntu) ที่ติดตั้งบนคอมพิวเตอร์ของคุณ
2. Python 3 ติดตั้งบนคอมพิวเตอร์ของคุณ
3. PIP 3 ติดตั้งบนคอมพิวเตอร์ของคุณ
4. Python virtualenv แพ็คเกจที่ติดตั้งบนคอมพิวเตอร์ของคุณ
5. เว็บเบราว์เซอร์ Mozilla Firefox หรือ Google Chrome ที่ติดตั้งบนคอมพิวเตอร์ของคุณ
6. ต้องทราบวิธีการติดตั้งไดรเวอร์ Firefox Gecko หรือ Chrome Web Driver

หากต้องการปฏิบัติตามข้อกำหนด 4, 5 และ 6 โปรดอ่านบทความของฉัน รู้เบื้องต้นเกี่ยวกับซีลีเนียมใน Python 3 . คุณสามารถค้นหาบทความมากมายในหัวข้ออื่น ๆ ได้ที่ LinuxHint.com . อย่าลืมตรวจสอบหากคุณต้องการความช่วยเหลือ

การตั้งค่าไดเรกทอรีโครงการ:

เพื่อให้ทุกอย่างเป็นระเบียบ ให้สร้างไดเร็กทอรีโครงการใหม่ ซีลีเนียม-xpath/ ดังนี้

นำทางไปยัง ซีลีเนียม-xpath/ ไดเรกทอรีโครงการดังต่อไปนี้:

สร้างสภาพแวดล้อมเสมือน Python ในไดเร็กทอรีโครงการดังนี้:

เปิดใช้งานสภาพแวดล้อมเสมือนดังต่อไปนี้:

ติดตั้งไลบรารี Selenium Python โดยใช้ PIP3 ดังนี้:

ดาวน์โหลดและติดตั้งไดรเวอร์เว็บที่จำเป็นทั้งหมดในไฟล์ คนขับรถ/ ไดเรกทอรีของโครงการ ฉันได้อธิบายขั้นตอนการดาวน์โหลดและติดตั้งไดรเวอร์เว็บในบทความของฉันแล้ว รู้เบื้องต้นเกี่ยวกับซีลีเนียมใน Python 3 .

รับ XPath Selector โดยใช้ Chrome Developer Tool:

ในส่วนนี้ ฉันจะแสดงวิธีค้นหาตัวเลือก XPath ขององค์ประกอบหน้าเว็บที่คุณต้องการเลือกด้วย Selenium โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในตัวของเว็บเบราว์เซอร์ Google Chrome

ในการรับตัวเลือก XPath โดยใช้เว็บเบราว์เซอร์ Google Chrome ให้เปิด Google Chrome และไปที่เว็บไซต์ที่คุณต้องการดึงข้อมูล จากนั้นกดปุ่มเมาส์ขวา (RMB) บนพื้นที่ว่างของหน้าแล้วคลิก ตรวจสอบ เพื่อเปิด เครื่องมือสำหรับนักพัฒนา Chrome .

คุณยังสามารถกด + กะ + ผม เพื่อเปิด เครื่องมือสำหรับนักพัฒนา Chrome .

เครื่องมือสำหรับนักพัฒนา Chrome ควรจะเปิด

หากต้องการค้นหาการแสดง HTML ขององค์ประกอบหน้าเว็บที่คุณต้องการ ให้คลิกที่ ตรวจสอบ (

) ตามที่ระบุไว้ในภาพหน้าจอด้านล่าง

จากนั้นวางเมาส์เหนือองค์ประกอบหน้าเว็บที่คุณต้องการแล้วกดปุ่มซ้ายของเมาส์ (LMB) เพื่อเลือก

การแสดง HTML ขององค์ประกอบเว็บที่คุณเลือกจะถูกเน้นใน องค์ประกอบ แท็บของ เครื่องมือนักพัฒนา Chrome, ดังที่คุณเห็นในภาพหน้าจอด้านล่าง

ในการรับตัวเลือก XPath ขององค์ประกอบที่คุณต้องการ ให้เลือกองค์ประกอบจาก องค์ประกอบ แท็บของ เครื่องมือสำหรับนักพัฒนา Chrome และคลิกขวา (RMB) ที่มัน จากนั้นเลือก สำเนา > คัดลอก XPath ตามที่ทำเครื่องหมายไว้ในภาพหน้าจอด้านล่าง

ฉันได้วางตัวเลือก XPath ในโปรแกรมแก้ไขข้อความแล้ว ตัวเลือก XPath จะมีลักษณะตามที่แสดงในภาพหน้าจอด้านล่าง

รับ XPath Selector โดยใช้ Firefox Developer Tool:

ในส่วนนี้ ฉันจะแสดงวิธีค้นหาตัวเลือก XPath ขององค์ประกอบหน้าเว็บที่คุณต้องการเลือกด้วย Selenium โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในตัวของเว็บเบราว์เซอร์ Mozilla Firefox

ในการรับตัวเลือก XPath โดยใช้เว็บเบราว์เซอร์ Firefox ให้เปิด Firefox และไปที่เว็บไซต์ที่คุณต้องการดึงข้อมูล จากนั้นกดปุ่มเมาส์ขวา (RMB) บนพื้นที่ว่างของหน้าแล้วคลิก ตรวจสอบองค์ประกอบ (Q) เพื่อเปิด เครื่องมือสำหรับนักพัฒนา Firefox .

เครื่องมือสำหรับนักพัฒนา Firefox ควรจะเปิด

หากต้องการค้นหาการแสดง HTML ขององค์ประกอบหน้าเว็บที่คุณต้องการ ให้คลิกที่ ตรวจสอบ (

) ตามที่ระบุไว้ในภาพหน้าจอด้านล่าง

จากนั้นวางเมาส์เหนือองค์ประกอบหน้าเว็บที่คุณต้องการแล้วกดปุ่มซ้ายของเมาส์ (LMB) เพื่อเลือก

การแสดง HTML ขององค์ประกอบเว็บที่คุณเลือกจะถูกเน้นใน สารวัตร แท็บของ เครื่องมือสำหรับนักพัฒนา Firefox, ดังที่คุณเห็นในภาพหน้าจอด้านล่าง

ในการรับตัวเลือก XPath ขององค์ประกอบที่คุณต้องการ ให้เลือกองค์ประกอบจาก สารวัตร แท็บของ เครื่องมือสำหรับนักพัฒนา Firefox และคลิกขวา (RMB) ที่มัน จากนั้นเลือก สำเนา > XPath ตามที่ทำเครื่องหมายไว้ในภาพหน้าจอด้านล่าง

ตัวเลือก XPath ขององค์ประกอบที่คุณต้องการควรมีลักษณะดังนี้

การดึงข้อมูลจากเว็บเพจโดยใช้ตัวเลือก XPath:

ในส่วนนี้ ฉันจะแสดงวิธีเลือกองค์ประกอบหน้าเว็บและดึงข้อมูลจากองค์ประกอบโดยใช้ตัวเลือก XPath กับไลบรารี Selenium Python

ขั้นแรก สร้างสคริปต์ Python ใหม่ ex01.py และพิมพ์รหัสบรรทัดต่อไปนี้

เมื่อเสร็จแล้วให้บันทึก ex01.py สคริปต์ไพทอน

บรรทัดที่ 1-3 นำเข้าส่วนประกอบซีลีเนียมที่จำเป็นทั้งหมด

บรรทัดที่ 5 สร้างวัตถุตัวเลือกของ Chrome และบรรทัดที่ 6 เปิดใช้งานโหมดหัวขาดสำหรับเว็บเบราว์เซอร์ Chrome

บรรทัดที่ 8 สร้าง Chrome เบราว์เซอร์ วัตถุโดยใช้ chromedriver เลขฐานสองจาก คนขับรถ/ ไดเรกทอรีของโครงการ

บรรทัดที่ 10 บอกให้เบราว์เซอร์โหลดเว็บไซต์ unixtimestamp.com

บรรทัดที่ 12 ค้นหาองค์ประกอบที่มีข้อมูลการประทับเวลาจากหน้าโดยใช้ตัวเลือก XPath และจัดเก็บไว้ใน ประทับเวลา ตัวแปร.

บรรทัดที่ 13 แยกวิเคราะห์ข้อมูลการประทับเวลาจากองค์ประกอบและพิมพ์บนคอนโซล

ฉันได้คัดลอกตัวเลือก XPath ของเครื่องหมาย ชั่วโมง2 องค์ประกอบจาก unixtimestamp.com โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

บรรทัดที่ 14 ปิดเบราว์เซอร์

เรียกใช้สคริปต์ Python ex01.py ดังนี้

อย่างที่คุณเห็น ข้อมูลการประทับเวลาจะถูกพิมพ์บนหน้าจอ

ที่นี่ฉันได้ใช้ browser.find_element_by_xpath(ตัวเลือก) กระบวนการ. พารามิเตอร์เดียวของวิธีนี้คือ ตัวเลือก, ซึ่งเป็นตัวเลือก XPath ขององค์ประกอบ

แทน browser.find_element_by_xpath() วิธี คุณยังสามารถใช้ browser.find_element (โดย ตัวเลือก) กระบวนการ. วิธีนี้ต้องการพารามิเตอร์สองตัว พารามิเตอร์แรก โดย จะ By.XPATH เนื่องจากเราจะใช้ตัวเลือก XPath และพารามิเตอร์ตัวที่สอง ตัวเลือก จะเป็นตัวเลือก XPath เอง ผลลัพธ์จะเหมือนกัน

มาดูกันว่า browser.find_element() วิธีการใช้ได้กับตัวเลือก XPath สร้างสคริปต์ Python ใหม่ ex02.py คัดลอกและวางบรรทัดทั้งหมดจาก ex01.py ถึง ex02.py และเปลี่ยน สาย 12 ตามที่ทำเครื่องหมายไว้ในภาพหน้าจอด้านล่าง

อย่างที่คุณเห็น สคริปต์ Python ex02.py ให้ผลเช่นเดียวกับ ex01.py .

NS browser.find_element_by_xpath() และ browser.find_element() ใช้เพื่อค้นหาและเลือกองค์ประกอบเดียวจากหน้าเว็บ หากคุณต้องการค้นหาและเลือกหลายองค์ประกอบโดยใช้ตัวเลือก XPath คุณต้องใช้ browser.find_elements_by_xpath() หรือ browser.find_elements() วิธีการ

NS browser.find_elements_by_xpath() method ใช้อาร์กิวเมนต์เดียวกับ the browser.find_element_by_xpath() กระบวนการ.

NS browser.find_elements() method ใช้อาร์กิวเมนต์เดียวกับ the browser.find_element() กระบวนการ.

มาดูตัวอย่างการแยกรายชื่อโดยใช้ตัวเลือก XPath จาก random-name-generator.info ด้วยไลบรารี Selenium Python

รายการที่ไม่เรียงลำดับ ( ตาย แท็ก) มี 10 ที่ ในแต่ละแท็กจะมีชื่อแบบสุ่ม XPath เพื่อเลือก .ทั้งหมด ที่ แท็กภายใน ตาย แท็กในกรณีนี้คือ //*[@id=main]/div[3]/div[2]/ol//li

มาดูตัวอย่างการเลือกองค์ประกอบหลายรายการจากหน้าเว็บโดยใช้ตัวเลือก XPath

สร้างสคริปต์ Python ใหม่ ex03.py และพิมพ์รหัสบรรทัดต่อไปนี้ลงไป

เมื่อเสร็จแล้วให้บันทึก ex03.py สคริปต์ไพทอน

บรรทัดที่ 1-8 เหมือนกับใน ex01.py สคริปต์ไพทอน ดังนั้น ฉันจะไม่อธิบายพวกเขาที่นี่อีก

บรรทัดที่ 10 บอกให้เบราว์เซอร์โหลดเว็บไซต์ random-name-generator.info

บรรทัดที่ 12 เลือกรายชื่อโดยใช้ browser.find_elements_by_xpath() กระบวนการ. เมธอดนี้ใช้ตัวเลือก XPath //*[@id=main]/div[3]/div[2]/ol//li เพื่อค้นหารายชื่อ จากนั้นรายชื่อจะถูกเก็บไว้ใน ชื่อ ตัวแปร.

ในบรรทัดที่ 13 และ 14 a สำหรับ วนซ้ำใช้เพื่อวนซ้ำผ่าน ชื่อ รายการและพิมพ์ชื่อบนคอนโซล

บรรทัดที่ 16 ปิดเบราว์เซอร์

เรียกใช้สคริปต์ Python ex03.py ดังนี้

อย่างที่คุณเห็น ชื่อจะถูกดึงมาจากหน้าเว็บและพิมพ์บนคอนโซล

แทนที่จะใช้ browser.find_elements_by_xpath() วิธี คุณยังสามารถใช้ browser.find_elements() วิธีการเหมือนเดิม อาร์กิวเมนต์แรกของวิธีนี้คือ By.XPATH, และอาร์กิวเมนต์ที่สองคือตัวเลือก XPath

ทดลองกับ browser.find_elements() เมธอด สร้างสคริปต์ Python ใหม่ ex04.py , คัดลอกรหัสทั้งหมดจาก ex03.py ถึง ex04.py และเปลี่ยนบรรทัดที่ 12 ตามที่ทำเครื่องหมายในภาพหน้าจอด้านล่าง

คุณควรได้ผลลัพธ์เหมือนเดิม

พื้นฐานของตัวเลือก XPath:

เครื่องมือสำหรับนักพัฒนาของเว็บเบราว์เซอร์ Firefox หรือ Google Chrome จะสร้างตัวเลือก XPath โดยอัตโนมัติ แต่ตัวเลือก XPath เหล่านี้บางครั้งอาจไม่เพียงพอสำหรับโครงการของคุณ ในกรณีนั้น คุณต้องรู้ว่าตัวเลือก XPath บางตัวทำอะไรเพื่อสร้างตัวเลือก XPath ของคุณ ในส่วนนี้ ฉันจะแสดงให้คุณเห็นพื้นฐานของตัวเลือก XPath จากนั้น คุณควรจะสามารถสร้างตัวเลือก XPath ของคุณเองได้

สร้างไดเร็กทอรีใหม่ www/ ในไดเร็กทอรีโครงการของคุณดังนี้:

สร้างไฟล์ใหม่ web01.html ใน www/ ไดเร็กทอรีและพิมพ์บรรทัดต่อไปนี้ในไฟล์นั้น

เมื่อเสร็จแล้วให้บันทึก web01.html ไฟล์.

เรียกใช้เซิร์ฟเวอร์ HTTP อย่างง่ายบนพอร์ต 8080 โดยใช้คำสั่งต่อไปนี้:

เซิร์ฟเวอร์ HTTP ควรเริ่มทำงาน

คุณควรจะสามารถเข้าถึง web01.html ไฟล์โดยใช้ URL http://localhost:8080/web01.html ดังที่คุณเห็นในภาพหน้าจอด้านล่าง

ขณะที่เปิดเครื่องมือสำหรับนักพัฒนา Firefox หรือ Chrome ให้กด + NS เพื่อเปิดช่องค้นหา คุณสามารถพิมพ์ตัวเลือก XPath ของคุณที่นี่ และดูว่ามันเลือกอะไรได้ง่ายมาก ฉันจะใช้เครื่องมือนี้ตลอดส่วนนี้

ตัวเลือก XPath เริ่มต้นด้วย a เครื่องหมายทับ (/) เวลาส่วนใหญ่. มันเหมือนกับแผนผังไดเร็กทอรีของ Linux NS / เป็นรากขององค์ประกอบทั้งหมดบนหน้าเว็บ

องค์ประกอบแรกคือ html . ดังนั้น ตัวเลือก XPath /html เลือกทั้งหมด html แท็ก

ข้างใน html แท็ก เรามี ร่างกาย แท็ก NS ร่างกาย แท็กสามารถเลือกได้ด้วยตัวเลือก XPath /html/body

NS ชั่วโมง1 ส่วนหัวอยู่ภายใน ร่างกาย แท็ก NS ชั่วโมง1 สามารถเลือกส่วนหัวได้ด้วยตัวเลือก XPath /html/body/h1

ตัวเลือก XPath ประเภทนี้เรียกว่าตัวเลือกพาธแบบสัมบูรณ์ ในตัวเลือกพาธแบบสัมบูรณ์ คุณต้องสำรวจหน้าเว็บจากรูท (/) ของเพจ ข้อเสียของตัวเลือกเส้นทางแบบสัมบูรณ์คือแม้การเปลี่ยนแปลงเล็กน้อยในโครงสร้างหน้าเว็บอาจทำให้ตัวเลือก XPath ของคุณไม่ถูกต้อง วิธีแก้ปัญหานี้คือตัวเลือก XPath ที่เกี่ยวข้องหรือบางส่วน

หากต้องการดูว่าเส้นทางสัมพันธ์หรือเส้นทางบางส่วนทำงานอย่างไร ให้สร้างไฟล์ใหม่ web02.html ใน www/ ไดเร็กทอรีและพิมพ์รหัสในบรรทัดต่อไปนี้

เมื่อเสร็จแล้วให้บันทึก web02.html ไฟล์และโหลดในเว็บเบราว์เซอร์ของคุณ

อย่างที่คุณเห็น ตัวเลือก XPath //div/p เลือก NS แท็กภายใน div แท็ก นี่คือตัวอย่างของตัวเลือก XPath แบบสัมพัทธ์

ตัวเลือก XPath สัมพัทธ์เริ่มต้นด้วย // . จากนั้นคุณระบุโครงสร้างขององค์ประกอบที่คุณต้องการเลือก ในกรณีนี้, div/p .

ดังนั้น, //div/p หมายถึงเลือก NS องค์ประกอบภายใน a div องค์ประกอบไม่สำคัญว่าจะมีอะไรมาก่อน

คุณยังสามารถเลือกองค์ประกอบตามคุณลักษณะต่างๆ เช่น NS , ระดับ , พิมพ์, ฯลฯ โดยใช้ตัวเลือก XPath เรามาดูวิธีการทำกัน

สร้างไฟล์ใหม่ web03.html ใน www/ ไดเร็กทอรีและพิมพ์รหัสในบรรทัดต่อไปนี้

เมื่อเสร็จแล้วให้บันทึก web03.html ไฟล์และโหลดในเว็บเบราว์เซอร์ของคุณ

สมมติว่าคุณต้องการเลือกทั้งหมด div องค์ประกอบที่มี ระดับ ชื่อ ตู้คอนเทนเนอร์1 . ในการทำเช่นนั้น คุณสามารถใช้ตัวเลือก XPath //div[@class='container1′]

อย่างที่คุณเห็น ฉันมี 2 องค์ประกอบที่ตรงกับตัวเลือก XPath //div[@class='container1′]

เพื่อเลือกอันแรก div องค์ประกอบที่มี ระดับ ชื่อ ตู้คอนเทนเนอร์1 , เพิ่ม [1] ที่ส่วนท้ายของ XPath เลือกตามที่แสดงในภาพหน้าจอด้านล่าง

ในทำนองเดียวกันคุณสามารถเลือกที่สอง div องค์ประกอบที่มี ระดับ ชื่อ ตู้คอนเทนเนอร์1 โดยใช้ตัวเลือก XPath //div[@class='container1′][2]

คุณสามารถเลือกองค์ประกอบโดย NS เช่นกัน.

ตัวอย่างเช่น การเลือกองค์ประกอบที่มี NS ของ ส่วนท้าย-msg คุณสามารถใช้ตัวเลือก XPath //*[@id='footer-msg']

ที่นี่ * ก่อน [@id='footer-msg'] ใช้เพื่อเลือกองค์ประกอบใด ๆ โดยไม่คำนึงถึงแท็ก

นั่นคือพื้นฐานของตัวเลือก XPath ตอนนี้ คุณควรจะสามารถสร้างตัวเลือก XPath ของคุณเองสำหรับโปรเจ็กต์ Selenium ของคุณได้

บทสรุป:

ในบทความนี้ ฉันได้แสดงวิธีค้นหาและเลือกองค์ประกอบจากหน้าเว็บโดยใช้ตัวเลือก XPath กับไลบรารี Selenium Python ฉันได้พูดถึงตัวเลือก XPath ที่พบบ่อยที่สุดแล้ว หลังจากอ่านบทความนี้ คุณควรรู้สึกมั่นใจมากในการเลือกองค์ประกอบจากหน้าเว็บโดยใช้ตัวเลือก XPath กับไลบรารี Selenium Python