DOM Path Finder ช่วยให้คุณชี้เมาส์เหนือองค์ประกอบใดก็ได้บนหน้าเว็บเพื่อดู CSS Selector ที่ไม่ซ้ำกัน, Selector แบบย่อ, XPath และโค้ด querySelector ที่พร้อมนำไปวาง คลิกเพื่อล็อกองค์ประกอบนั้นๆ แล้วสำรวจโครงสร้างด้วยปุ่ม Parent/Child/Sibling จำเป็นอย่างยิ่งสำหรับผู้ใช้ Selenium, Puppeteer, Playwright และ Cypress
การเขียนการทดสอบอัตโนมัติ (Automation Test), เครื่องมือดึงข้อมูลเว็บ (Web Scraper) หรือ Bookmarklet จำเป็นต้องมีการเขียน Selector — แต่การหา Selector ที่เสถียรและไม่ซ้ำกันสำหรับองค์ประกอบใดองค์ประกอบหนึ่งนั้นเป็นเรื่องน่าเบื่อ คุณต้องเปิด DevTools, ตรวจสอบ (Inspect), คลิกขวา, คัดลอก Selector และหวังว่าผลลัพธ์ที่ได้จะไม่ซ้ำและเสถียรจริงๆ DOM Path Finder ทำให้เรื่องนี้เหลือเพียงแค่การคลิกครั้งเดียว เปิดใช้งานเครื่องมือแล้วชี้เมาส์เหนือองค์ประกอบบนหน้าเว็บ — มันจะไฮไลต์สีม่วงตามการเคลื่อนที่ของคุณ คลิกเพื่อล็อกไว้ แล้วแผงควบคุมจะแสดงรูปแบบ Selector สี่ประเภท: CSS Selector ที่อิงตามเส้นทางที่ไม่ซ้ำกัน, Selector แบบย่อ (Tag + Class หรือ ID), XPath แบบสัมบูรณ์ และโค้ด document.querySelector('...') ที่พร้อมนำไปวางในสคริปต์ เมื่อล็อกแล้ว คุณสามารถสำรวจโครงสร้าง DOM ด้วยปุ่ม Parent / First Child / Prev Sibling / Next Sibling ได้โดยไม่เสียการโฟกัส ระบบจะตรวจจับและให้ความสำคัญกับแอตทริบิวต์ data-testid หากมีอยู่ — ซึ่งเหมาะสำหรับผู้ใช้ Playwright/Cypress ที่ใช้แอตทริบิวต์เหล่านี้เป็นหลัก เครื่องมือยังแสดงแท็ก, ID, คลาส, ขนาดขอบเขต และคุณสมบัติ Display/Position เพื่อให้ข้อมูลประกอบที่รวดเร็ว
เลื่อนเมาส์ไปบนหน้าเว็บเพื่อดูองค์ประกอบต่างๆ ไฮไลต์สีม่วง คลิกเพื่อล็อก — ไม่จำเป็นต้องใช้ DevTools Inspector
CSS Path ที่ไม่ซ้ำกัน, Selector แบบย่อ, XPath แบบสัมบูรณ์ และโค้ด querySelector เลือกรูปแบบที่เหมาะกับเครื่องมือของคุณ
เมื่อล็อกแล้ว สามารถใช้ปุ่ม Parent / First Child / Prev / Next เพื่อเคลื่อนที่ผ่าน DOM ได้โดยไม่ต้องเลือกใหม่
แต่ละ Selector มีปุ่ม Copy ของตัวเอง เลือกรูปแบบที่สคริปต์ต้องการแล้ววางลงในการทดสอบหรือเครื่องมือดึงข้อมูลได้ทันที
แสดงแท็ก, ID, คลาส, ขนาด, การแสดงผล และตำแหน่ง — สรุปข้อมูลภาพรวมได้ทันทีโดยไม่ต้องตรวจสอบซ้ำ
หากองค์ประกอบมี ID ระบบจะใช้ #id ใน CSS Selector อัตโนมัติ หากมี data-testid ระบบจะดึงออกมาให้ใช้สำหรับ Playwright/Cypress
เลือกองค์ประกอบที่ต้องการทดสอบ คัดลอก Selector แล้ววางลงในโค้ดทดสอบ — ไม่ต้องเดาสุ่มหาเส้นทางที่ไม่ซ้ำกันอีกต่อไป
หา Selector เชิงโครงสร้างสำหรับรายการต่างๆ ในเป้าหมายการดึงข้อมูล เลือกใช้ Selector แบบย่อหรือแบบอิงตามเส้นทางตามความเสถียรที่ต้องการ
ล็อกองค์ประกอบแล้วคัดลอกเส้นทางเพื่อหาสาเหตุที่ CSS ไม่แสดงผล — Selector ที่ไม่ซ้ำกันจะแสดงตำแหน่งทั้งหมดในโครงสร้างขององค์ประกอบนั้น
คัดลอกโค้ด document.querySelector(...) ที่เตรียมไว้ให้แล้วไปวางใน DevTools Console เพื่อการดีบั๊กแบบโต้ตอบที่รวดเร็ว
เมื่อทำการตรวจสอบการเข้าถึงข้อมูล (Accessibility) ให้ใช้ XPath เพื่อส่งข้อมูลองค์ประกอบไปยัง axe-core หรือเครื่องมือ A11y อื่นๆ ที่ต้องการการอ้างอิงแบบ XPath
คลิกไอคอน Path Finder ใน DevSuite Pro dock เครื่องมือจะเริ่มโหมดเลือกองค์ประกอบทันที
เลื่อนเมาส์ไปบนหน้าเว็บ — แต่ละองค์ประกอบจะไฮไลต์สีม่วงเมื่อเมาส์ผ่าน เลื่อนหน้าเว็บได้ตามต้องการเพื่อหาเป้าหมาย
คลิกองค์ประกอบที่ต้องการ การเลือกจะหยุดลงและแผงควบคุมจะแสดงรูปแบบ Selector, ข้อมูลประกอบ และปุ่มคัดลอก
ใช้ปุ่ม Parent/Child/Sibling เพื่อปรับแต่งการเลือก หรือคลิก Pick Element เพื่อเริ่มการเลือกโดยการชี้เมาส์ใหม่อีกครั้ง
คลิก Copy ข้างรูปแบบที่ต้องการ (CSS, XPath หรือ querySelector) แล้ววางลงในการทดสอบ, เครื่องมือดึงข้อมูล หรือ Console ได้ทันที
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 64 รายการสำหรับเบราว์เซอร์ของคุณ
