DOM Yol Bulucu, benzersiz CSS seçicisini, kısa seçicisini, XPath'ini ve yapıştırmaya hazır querySelector kod parçacığını görmek için sayfadaki herhangi bir öğenin üzerine gelmenizi sağlar. Öğeyi kilitlemek için tıklayın, ardından Üst/Alt/Kardeş butonlarıyla gezinin. Selenium, Puppeteer, Playwright ve Cypress kullanıcıları için temel bir araçtır.
Otomasyon testleri, web kazıma araçları veya bookmarklet'ler yazmak, seçiciler yazmak anlamına gelir; ancak belirli bir öğe için kararlı ve benzersiz bir seçici bulmak zahmetlidir. DevTools'u açar, incele der, sağ tıklar, seçiciyi kopyalar ve sonucun gerçekten benzersiz ve kararlı olmasını umarsınız. DOM Yol Bulucu bunu tek bir tıklamaya indirger. Aracı etkinleştirin ve sayfadaki herhangi bir öğenin üzerine gelin; siz hareket ettikçe öğe mor renkle vurgulanır. Kilitlemek için tıkladığınızda panel dört seçici formatıyla dolar: benzersiz bir yol tabanlı CSS seçici, kısa bir seçici (etiket + sınıflar veya id), mutlak bir XPath ve bir betiğe yapıştırılmaya hazır önceden paketlenmiş bir document.querySelector('...') kod parçacığı. Kilitlendikten sonra, odak noktasını kaybetmeden Üst Öğe / İlk Alt Öğe / Önceki Kardeş / Sonraki Kardeş butonlarıyla DOM ağacında gezinebilirsiniz. Mevcut olduğunda data-testid öznitelikleri algılanır ve önceliklendirilir; bu, bunları çapa olarak kullanan Playwright/Cypress kullanıcıları için idealdir. Araç ayrıca hızlı bağlam için etiket, id, sınıflar, sınır boyutu ve görüntüleme/konum özelliklerini de gösterir.
Öğelerin mor renkle vurgulandığını görmek için farenizi sayfanın üzerinde gezdirin. Kilitlemek için tıklayın; DevTools Inspector'a gerek kalmaz.
Benzersiz CSS yolu, kısa seçici, mutlak XPath ve paketlenmiş querySelector kod parçacığı. Araç setinize hangisi uyuyorsa onu seçin.
Kilitlendikten sonra, yeniden seçim yapmaya gerek kalmadan DOM içinde hareket etmek için Üst / İlk Alt / Önceki / Sonraki butonlarını kullanın.
Her seçicinin kendi Kopyala butonu vardır. Betiğinizin ihtiyaç duyduğu formatı alın ve doğrudan testinize veya kazıma aracınıza yapıştırın.
Etiket, id, sınıflar, boyut, görüntüleme ve konum bilgilerini görüntüler; yeniden inceleme yapmadan hızlı bir genel bakış sunar.
Öğenin bir id'si varsa, benzersiz CSS #id kullanır. Bir data-testid mevcutsa, Playwright/Cypress kullanımı için yüzeye çıkarılır.
Test edilen öğeyi seçin, seçicisini kopyalayın ve test kodunuza yapıştırın; benzersiz yolları tahmin etmeye çalışmaya son verin.
Bir kazıma hedefindeki liste öğeleri için yapısal seçiciyi bulun. Kararlılık ihtiyaçlarına bağlı olarak kısa veya yol tabanlı seçici kullanın.
Bir öğeyi kilitleyin ve CSS'in neden uygulanmadığını araştırmak için yolunu kopyalayın; benzersiz seçici, öğenin tam ağaç konumunu gösterir.
Hızlı etkileşimli hata ayıklama için önceden paketlenmiş document.querySelector(...) kod parçacığını doğrudan DevTools Konsoluna kopyalayın.
Erişilebilirlik denetimi yaparken, XPath referansları bekleyen axe-core veya diğer a11y araçlarını beslemek için XPath kullanın.
DevSuite Pro dock'undaki Yol Bulucu simgesine tıklayın. Araç hemen seçim modunda etkinleşir.
Farenizi sayfanın üzerinde gezdirin; üzerinden geçtiğiniz her öğe mor renkle vurgulanır. Hedefinizi bulmak için gerektiği kadar kaydırın.
İstediğiniz öğeye tıklayın. Seçici durur ve panel seçici formatları, bağlam ve kopyalama butonlarıyla dolar.
Seçimi hassaslaştırmak için Üst/Alt/Kardeş butonlarını kullanın veya tekrar seçim moduna dönmek için Öğeyi Seç (Pick Element) butonuna tıklayın.
İhtiyacınız olan formatın (CSS, XPath veya querySelector) yanındaki Kopyala butonuna tıklayın. Doğrudan testinize, kazıma aracınıza veya konsola yapıştırın.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 64'dan fazla geliştirici aracının kilidini açın.
