من ئەوەندە ماوە لە گەشەپێدانی پێشەوە بووم کە بەدرێژایی ساڵان ڕەوتێک ببینم: گەشەپێدەرانی گەنجتر کاردەکەن بە پارادایمێکی نوێی بەرنامەسازی بەبێ ئەوەی لە چوارچێوەی مێژوویی ئەو پارادایمە تێبگەن. بێگومان شتێکی تەواو تێدەگەین کە شتێک نەزانیت. وێب شوێنێکی زۆر گەورەیە و کۆمەڵێک کارامەیی و پسپۆڕی هەمەچەشنی هەیە، و ئێمە هەمیشە نازانین چی نازانین. فێربوون لەم بوارەدا گەشتێکی بەردەوامە نەک شتێک کە یەکجار ڕووبدات و کۆتایی پێبێت. کەیسێکی خاڵ: کەسێک لە تیمەکەم پرسیاری ئەوەی کرد کە ئایا دەتوانرێت بزانرێت کە ئایا بەکارهێنەران لە تابێکی دیاریکراو لە UI دوور دەڕۆن. ئاماژەم بە ڕووداوی پێش دابەزاندنی جاڤاسکڕێپت کرد. بەڵام ئەوانەی پێشتر مامەڵەیان لەگەڵ ئەم بابەتەدا کردووە دەزانن ئەمە ئەگەری هەیە چونکە ئاگادارکردنەوەیان لێدراوە سەبارەت بە داتای پاشەکەوت نەکراو لە سایتەکانی تردا، کە بۆ ئەمەش پێش دابەزاندن حاڵەتێکی بەکارهێنانی ئاساییە. هەروەها ئاماژەم بە ڕووداوەکانی pageHide و visibilityChange کرد بۆ هاوکارەکەم بۆ پێوەرێکی باش. چۆن زانیم لەو بارەیەوە؟ چونکە لە پرۆژەیەکی تردا هاتە ئاراوە، نەک لەبەر ئەوەی من لە سەرەتادا فێربوونی جاڤاسکڕێپتم لەسەری خوێندووە. ڕاستییەکە ئەوەیە کە چوارچێوەی پێشەوەی مۆدێرن لەسەر شانی ئەو کۆمپانیا زەبەلاحانەی تەکنەلۆژیا وەستاون کە پێش خۆیان بوون. ئەوان پراکتیکەکانی گەشەپێدان ئەبستراکت دەکەن، زۆرجار بۆ ئەزموونێکی باشتری گەشەپێدەر کە پێویستی زانین یان دەست لێدان کەمدەکاتەوە، یان تەنانەت نەهێڵێت، کە بە شێوەیەکی نەریتی چەمکی پێشەوەی بنەڕەتی بوون کە ڕەنگە هەمووان دەبێ بزانن. مۆدێلی ئۆبجێکتی CSS (CSSOM) لەبەرچاو بگرە. لەوانەیە چاوەڕێی ئەوە بکەیت کە هەر کەسێک کە لە CSS و JavaScript کار بکات کۆمەڵێک ئەزموونی دەستی CSSOM ی هەبێت، بەڵام هەمیشە ئەوە وا نابێت. پڕۆژەیەکی React هەبوو بۆ سایتێکی بازرگانی ئەلیکترۆنی کە من کارم لەسەر کردبوو کە پێویست بوو ستایل شیتێک بۆ دابینکەری پارەدانی هەڵبژێردراوی ئێستا بار بکەین. کێشەکە ئەوە بوو کە ستایلشیتەکە لە هەموو لاپەڕەیەکدا باردەکرا لە کاتێکدا تەنها بەڕاستی پێویست بوو لە لاپەڕەیەکی دیاریکراودا. ئەو گەشەپێدەرەی کە ئەرکی ئەوە بوو ئەمە ڕووبدات، هەرگیز بە شێوەیەکی داینامیکی ستایلشیتێکی بار نەکردبوو. دیسانەوە ئەمە بە تەواوی تێدەگەین کاتێک ڕیاکت ئەو ڕێبازە تەقلیدییە کورت دەکاتەوە کە ڕەنگە دەستت پێ بگات. پێدەچێت CSSOM شتێک نەبێت کە پێویستت پێیەتی لە کارەکانی ڕۆژانەتدا. بەڵام پێدەچێت لە شوێنێکدا پێویستت بە کارلێککردن بێت لەگەڵیدا، تەنانەت لە نموونەیەکی یەکجارەکیشدا. ئەم ئەزموونانە ئیلهامبەخش بوون بۆ نووسینی ئەم بابەتە. زۆر تایبەتمەندی و تەکنەلۆژیای وێب لە کێودا هەن کە ڕەنگە هەرگیز ڕاستەوخۆ دەستیان لێ نەدەیت لە کارەکانی ڕۆژانەتدا. ڕەنگە تۆ تا ڕادەیەک تازە بیت لە پەرەپێدانی وێب و بە سادەیی ئاگاداریان بیت چونکە تۆ نوقم بوویت لە ئەبستراکتکردنی چوارچێوەیەکی دیاریکراو کە پێویست ناکات بە قووڵی بیناسیت، یان تەنانەت بە هیچ شێوەیەک. من بە تایبەتی باس لە XML دەکەم، کە زۆرێک لە ئێمە دەزانین زمانێکی کۆن و کۆنە و بە تەواوی جیاواز نییە لە HTML. من ئەمە دەهێنمە ئاراوە بەهۆی گفتوگۆکانی ئەم دواییەی WHATWG کە پێشنیاری ئەوە دەکەن کە بەشێکی بەرچاو لە ستاکی XML ناسراو بە بەرنامەسازی XSLT لە وێبگەڕەکاندا لاببرێت. ئەمە ڕێک ئەو جۆرە تەکنەلۆژیایە کۆن و هەبووەیە کە ساڵانێکە هەمانە کە دەتوانرێت بۆ شتێکی پراکتیکی بەکاربهێنرێت وەک ئەو دۆخەی CSSOM کە تیمەکەم تێیدا بوو. پێشتر لەگەڵ XSLT کارت کردووە؟ با بزانین ئایا ئێمە زۆر پشت بەم تەکنەلۆژیا کۆنە دەبەستین و تایبەتمەندییەکانی لە دەرەوەی چوارچێوەی XML بەکاربهێنین بۆ ڕووبەڕووبوونەوەی کێشەکانی جیهانی ڕاستەقینە لەمڕۆدا. XPath: API ی ناوەندی گرنگترین تەکنەلۆژیای XML کە ڕەنگە لە دەرەوەی ڕوانگەیەکی ڕاست و دروستی XML بەسوودترین بێت XPath ە، زمانێکی پرسیارکردنە کە ڕێگەت پێدەدات هەر گرێیەک یان تایبەتمەندییەک لە دارێکی مارکاپدا بدۆزیتەوە بە یەک توخمێکی ڕەگ. من سۆزێکی کەسیم هەیە بۆ XSLT، بەڵام ئەوەش پشت بە XPath دەبەستێت، و سۆز و خۆشەویستی کەسیش دەبێت لە گرنگی ڕیزبەندیکردندا بخرێتە لایەک. ئارگومێنت بۆ لابردنی XSLT هیچ باسێک لە XPath ناکات، بۆیە پێموایە هێشتا ڕێگەپێدراوە. ئەوە باشە چونکە XPath ناوەندی و گرنگترین API یە لەم کۆمەڵە تەکنەلۆژیایەدا، بە تایبەت کاتێک هەوڵدەدەیت شتێک بدۆزیتەوە بۆ بەکارهێنان لە دەرەوەی بەکارهێنانی ئاسایی XML. گرنگە چونکە، لە کاتێکدا دەتوانرێت هەڵبژێرەری CSS بەکاربهێنرێت بۆ دۆزینەوەی زۆربەی توخمەکانی ناو لاپەڕەکەت، بەڵام ناتوانن هەموویان بدۆزنەوە. جگە لەوەش، ناتوانرێت هەڵبژێرەری CSS بەکاربهێنرێت بۆ دۆزینەوەی توخمێک بە پشتبەستن بە شوێنی ئێستای لە DOM. XPath دەتوانێت. ئێستا، ڕەنگە هەندێکتان کە ئەمە دەخوێننەوە XPath بزانن، و هەندێکیش نەزانن. XPath بوارێکی زۆر گەورەی تەکنەلۆژیایە، و من بەڕاستی ناتوانم هەموو بنەماکان فێر بکەم و هەروەها شتە فێنکەکانت پیشان بدەم کە لە یەک بابەتدا وەک ئەم. لە ڕاستیدا هەوڵمدا ئەو بابەتە بنووسم، بەڵام تێکڕای بڵاوکراوەی گۆڤاری سماشینگ زیاتر لە ٥٠٠٠ وشە ناڕوات. من پێشتر لە زیاتر لە...2000 وشە لە کاتێکدا تەنها نیوەی ڕێگاکە لە بنەماکان. بۆیە، من دەست دەکەم بە ئەنجامدانی شتە نایابەکان لەگەڵ XPath و چەند بەستەرێکتان پێدەدەم کە دەتوانن بۆ بنەماکان بەکاری بهێنن ئەگەر ئەم شتانەتان بە سەرنجڕاکێش زانی. تێکەڵکردنی XPath و CSS XPath دەتوانێت زۆر شت بکات کە هەڵبژێرەرانی CSS ناتوانن لەکاتی پرسیارکردن لە توخمەکان. بەڵام هەڵبژێرەرانی CSS دەتوانن چەند شتێک بکەن کە XPath ناتوانێت، ئەوانیش پرسیار لە توخمەکان بکات بەپێی ناوی پۆل.
CSS XPath .myClass /*[contains(@class, "پۆلی من")]
لەم نموونەیەدا، CSS پرسیار لەو توخمانە دەکات کە ناوی پۆلی .myClass لەخۆدەگرن. لەم نێوەندەدا، نموونەی XPath پرسیار لەو توخمانە دەکات کە پۆلێکی تایبەتمەندییان تێدایە بە ڕستەی “myClass”. بە واتایەکی تر، ئەو توخمانەی کە myClass یان هەیە لە هەر تایبەتمەندییەکدا هەڵدەبژێرێت، لەوانەش ئەو توخمانەی کە ناوی پۆلی .myClass یان هەیە — هەروەها ئەو توخمانەی کە “myClass” یان هەیە لە ڕیزەکەدا، وەک .myClass2. XPath بەو مانایە فراوانترە. کەواتە، نەخێر. من پێشنیار ناکەم کە ئێمە CSS فڕێ بدەینە دەرەوە و دەست بکەین بە هەڵبژاردنی هەموو توخمەکان لە ڕێگەی XPath. مەسەلەکە ئەوە نییە. مەسەلەکە ئەوەیە کە XPath دەتوانێت ئەو کارانە بکات کە CSS ناتوانێت و هێشتا دەتوانێت زۆر بەسوود بێت، هەرچەندە تەکنەلۆژیایەکی کۆنترە لە ستاکی وێبگەڕەکەدا و ڕەنگە لە یەکەم نیگادا دیار نەبێت. با هەردوو تەکنەلۆژیاکە پێکەوە بەکاربهێنین نەک تەنها لەبەر ئەوەی دەتوانین، بەڵکو لەبەر ئەوەی لە پرۆسەکەدا شتێک دەربارەی XPath فێر دەبین، ئەمەش دەیکەین بە ئامرازێکی دیکە لە ستاکەکەتدا — یەکێک کە ڕەنگە نەتزانیبێت بە درێژایی ماوە لەوێ بووە! کێشەکە ئەوەیە کە شێوازی document.evaluate ی جاڤاسکڕێپت و شێوازە جیاوازەکانی هەڵبژێرەری پرسیار کە لەگەڵ API ی CSS بۆ جاڤاسکڕێپت بەکاری دەهێنین ناتەبان. من API ی پرسیارکردنی گونجاوم دروست کردووە بۆ ئەوەی دەست پێبکەین، هەرچەندە دان بەوەدا بنێم، بیرکردنەوەیەکی زۆرم لێ نەکردۆتەوە لەبەرئەوەی جیابوونەوەیەک لەوەی ئێمە لێرەدا دەیکەین. لێرەدا نموونەیەکی کارکردنی تاڕادەیەک سادەی بنیاتنەری پرسیاری دووبارە بەکارهێنەرەوە دەخەینەڕوو: سەیری Pen queryXPath [forked] بکە لەلایەن Bryan Rasmussen. من دوو شێوازم لەسەر ئۆبجێکتی بەڵگەنامەکە زیاد کردووە: queryCSSSelectors (کە لە بنەڕەتدا querySelectorAll ە) و queryXPaths. هەردوو ئەمانە ئۆبجێکتی queryResults دەگەڕێننەوە:
{ جۆری پرسیار: گرێکان | ڕیز | ژمارە | بولی، ئەنجامەکان: هەر[] // توخمەکانی html، توخمەکانی xml، ڕیزەکان، ژمارەکان، بولیەکان، queryCSSSelectors: (پرسیار: ڕستە، هەموارکردنەوە: بولی) => ئەنجامەکانی پرسیار، queryXpaths: (پرسیار: ڕستە، هەموارکردنەوە: boolean) => queryResults }
فەنکشنەکانی queryCSSSelectors و queryXpaths ئەو پرسیارە بەڕێوەدەبەن کە تۆ پێیان دەدەیت لەسەر توخمەکانی ناو ڕیزبەندی ئەنجامەکان، بە مەرجێک ڕیزبەندی ئەنجامەکان لە جۆری گرێکان بێت، بێگومان. ئەگەرنا، queryResult دەگەڕێنێتەوە بە ڕیزبەندییەکی بەتاڵ و جۆرێک لە گرێ. ئەگەر تایبەتمەندی هەموارکردنەوە لەسەر ڕاست دانرا، ئەوا فەنکشنەکان queryResults ی خۆیان دەگۆڕن. لە هیچ بارودۆخێکدا نابێت ئەمە لە ژینگەی بەرهەمهێناندا بەکاربهێنرێت. من بەم شێوەیە ئەوە دەکەم تەنها بۆ ئەوەی کاریگەرییە جیاوازەکانی بەکارهێنانی دوو API پرسیارەکە پێکەوە نیشان بدەم. نموونە پرسیارەکان من دەمەوێت چەند نموونەیەک لە پرسیارە جیاوازەکانی XPath نیشان بدەم کە هەندێک لەو شتە بەهێزانە نیشان دەدەن کە دەتوانن بیکەن و چۆن دەتوانرێت لە جیاتی ڕێگاکانی تر بەکاربهێنرێن. نموونەی یەکەم بریتییە لە //li/text(). ئەمەش پرسیار لە هەموو توخمەکانی li دەکات و گرێ دەقەکانیان دەگەڕێنێتەوە. کەواتە، ئەگەر پرسیار لەم HTML یەی خوارەوە بکەین:
- یەک
- دوو
- سێ
...ئەمە ئەوەیە کە دەگەڕێتەوە:
{"جۆری پرسیار":"xpathEvaluate","ئەنجامەکان":["یەک","دوو","سێ"],"جۆری ئەنجام":"ڕیز"}
بە واتایەکی تر، ئەم ڕیزبەندییەی خوارەوەمان دەست دەکەوێت: ["یەک","دوو","سێ"]. بە شێوەیەکی ئاسایی، تۆ پرسیار دەکەیت بۆ توخمەکانی li بۆ ئەوەی ئەوە بەدەستبهێنیت، ئەنجامی ئەو پرسیارە دەکەیتە ڕیزبەندێک، نەخشەی ڕیزبەندییەکە و گرێی دەقی هەر توخمێک دەگەڕێنێتەوە. بەڵام دەتوانین بە پوختتر ئەوە بکەین لەگەڵ XPath: document.queryXPaths("//li/text()").ئەنجامەکان.
سەرنج بدە کە ڕێگەی بەدەستهێنانی گرێی دەق ئەوەیە کە text() بەکاربهێنیت، کە لە واژۆی فەنکشن دەچێت — و هەروایە. گرێی دەقی توخمێک دەگەڕێنێتەوە. لە نموونەکەماندا سێ توخمە li لە مارکاپەکەدا هەیە، هەریەکەیان دەق ("یەک"، "دوو" و "سێ") لەخۆدەگرێت.
با سەیری نموونەیەکی دیکە بکەین لە پرسیاری text(). گریمان ئەمە مارکاپەکەمانە:
با پرسیارێک بنووسین کە بەهای تایبەتمەندی href دەگەڕێنێتەوە: document.queryXPaths("//a[text() = 'چوونە ژوورەوە']/@href").ئەنجامەکان.
ئەمە پرسیارێکی XPath ە لەسەر بەڵگەنامەی ئێستا، هەروەک نموونەی کۆتایی، بەڵام ئەمجارەیان تایبەتمەندی href ی بەستەرێک (توخمێک) دەگەڕێنینەوە کە دەقی “Sign In” لەخۆدەگرێت. ڕاستەقینەکە گەڕایەوەئەنجامەکەی بریتییە لە ["/login.html"]. تێڕوانینێکی گشتی بۆ ئەرکەکانی XPath کۆمەڵێک فەنکشنی XPath هەیە، و ڕەنگە تۆش پێی ئاشنا نەبیت. پێموایە چەندین کەس هەن کە شایەنی زانینن، لەوانە ئەمانەی خوارەوە:
starts-withئەگەر دەقێک بە نموونەیەکی دەقێکی دیکەی دیاریکراو دەست پێبکات، starts-with(@href، 'http:') ڕاست دەگەڕێنێتەوە ئەگەر تایبەتمەندی href بە http: دەستپێبکات. containsئەگەر دەقێک نموونەیەکی دەقی دیکەی تایبەتی تێدابێت، contains(text(), "Smashing Magazine") ڕاست دەگەڕێنێتەوە ئەگەر گرێیەکی دەق وشەکانی "Smashing Magazine"ی تێدابێت لە هەر شوێنێکدا. countژماردنێک دەگەڕێنێتەوە کە چەند یەکسانبوون هەیە بۆ پرسیارێک. بۆ نموونە count(//*[starts-with(@href, 'http:']) ژماردنێک دەگەڕێنێتەوە کە چەند بەستەر لە گرێی کۆنتێکستدا توخمیان هەیە کە تایبەتمەندی href یان هەیە کە دەقەکەی تێدایە کە بە http: دەست پێدەکات. substring وەک substring جاڤاسکڕێپت کاردەکات، تەنها ئەوە نەبێت کە تۆ ڕیزەکە وەکو ئارگومێنتێک تێپەڕێنیت. بۆ نموونە substring("دەقەکەم"، 2، 4) "y t" دەگەڕێنێتەوە. substring-beforeبەشی ڕیزێک دەگەڕێنێتەوە پێش ڕیزێکی تر. بۆ نموونە substing-before("دەقی من", " ") "my" دەگەڕێنێتەوە. بە هەمان شێوە substring-before("hi","bye") ڕستەیەکی بەتاڵ دەگەڕێنێتەوە. substring-afterبەشی ڕیزێک دەگەڕێنێتەوە دوای ڕیزێکی تر. بۆ نموونە substing-after("دەقەکەم", " ") "دەق" دەگەڕێنێتەوە. بە هەمان شێوە substring-after("hi","bye")ڕیزێکی بەتاڵ دەگەڕێنێتەوە. normalize-space ڕیزەکەی ئارگومێنت دەگەڕێنێتەوە کە بۆشایی سپی ئاسایی کراوە بە لابردنی شوێنی سپی پێشەنگ و دواوە و گۆڕینی زنجیرەکانی کاراکتەرەکانی بۆشایی سپی بە یەک بۆشایی. notڕاستی بولی دەگەڕێنێتەوە ئەگەر ئارگومێنتەکە هەڵە بێت، ئەگەرنا هەڵە. trueبۆلیانی ڕاست دەگەڕێنێتەوە. false هەڵەی بولی دەگەڕێنێتەوە. concatهەمان شتە کە جاڤاسکڕێپت concat، تەنها ئەوە نەبێت کە تۆ وەک میتۆدێک لەسەر ڕستەیەک جێبەجێی ناکەیت. لەبری ئەوە هەموو ئەو ڕستانە دەخەیتە ناویەوە کە دەتەوێت بەیەکەوە ببەستیتەوە. string-lengthئەمە هەمان ڕیزبەندی جاڤاسکڕێپت نییە، بەڵکو درێژی ئەو ڕیزە دەگەڕێنێتەوە کە وەک ئارگومێنتێک پێی دراوە. translateئەمە ڕیزێک وەردەگرێت و ئارگومێنتی دووەم دەگۆڕێت بۆ ئارگومێنتی سێیەم. بۆ نموونە translate("abcdef", "abc", "XYZ") XYZdef دەردەچێت.
جگە لەم فەنکشنە تایبەتانەی XPath، کۆمەڵێک فەنکشنی تر هەن کە تەنها وەک هاوتاکانیان لە جاڤاسکڕێپت کاردەکەن — یان هاوتاکانیان لە بنەڕەتدا لە هەر زمانێکی بەرنامەسازیدا — کە ڕەنگە بەسوودیان بزانیت، وەک زەوی، سەقف، دەوری، کۆ و هتد. ئەم دیمۆیەی خوارەوە هەریەکێک لەم ئەرکانە نیشان دەدات: سەیری فەنکشنەکانی ژمارەیی Pen XPath بکە [forked] لەلایەن Bryan Rasmussen. سەرنج بدە کە وەک زۆربەی فەنکشنەکانی دەستکاریکردنی ڕیز، زۆرێک لەوانەی ژمارەیی یەک ئینپوت وەردەگرن. بێگومان ئەمەش لەبەر ئەوەیە کە بڕیارە بۆ پرسیارکردن بەکاربهێنرێن، وەک لە دوایین نموونەی XPath: //li[floor(text()) > 250]/@val
ئەگەر بەکاریان بهێنیت، وەک زۆربەی نموونەکان دەیکەن، لە کۆتاییدا لەسەر یەکەم گرێ کە لەگەڵ ڕێڕەوەکەدا دەگونجێت، جێبەجێی دەکەیت. هەروەها هەندێک ئەرکی گۆڕینی جۆر هەیە کە ڕەنگە پێویستە خۆت لێی بەدوور بگرێت چونکە جاڤاسکڕێپت پێشتر کێشەی گۆڕینی جۆری خۆی هەیە. بەڵام دەکرێت کاتێک هەبێت کە بتەوێت ڕستەیەک بگۆڕیت بۆ ژمارەیەک بۆ ئەوەی لە بەرامبەر ژمارەیەکی تردا پشکنین بۆ بکەیت. ئەو فەنکشنانەی کە جۆری شتێک دادەنێن بریتین لە بولی، ژمارە، ڕستە و گرێ. ئەمانە جۆرە داتا گرنگەکانی XPathن. وە وەک ڕەنگە خەیاڵت پێی بێت، زۆربەی ئەم فەنکشنانە دەتوانرێت لەسەر جۆرە داتاکان بەکاربهێنرێت کە گرێی DOM نین. بۆ نموونە، substring-after ڕستەیەک وەردەگرێت وەک ئەوەی پێشتر ڕووماڵمان کردووە، بەڵام دەتوانێت ڕستەیەک بێت کە لە تایبەتمەندی href ەوە هاتووە. هەروەها دەتوانێت تەنها ڕستەیەک بێت:
const testSubstringAfter = document.queryXPaths("ژێر ڕیز-دوای ('سڵاو جیهان'،' ')");
دیارە ئەم نموونەیە ڕیزبەندی ئەنجامەکانمان پێدەداتەوە وەک ["جیهان"]. بۆ ئەوەی ئەمە بە کردار نیشان بدەم، لاپەڕەیەکی دیمۆم دروست کردووە بە بەکارهێنانی فەنکشنەکان دژی ئەو شتانەی کە گرێی DOM نین: سەیری Pen queryXPath [forked] بکە لەلایەن Bryan Rasmussen. پێویستە سەرنجی لایەنە سەرسوڕهێنەرەکەی فەنکشنی وەرگێڕان بدەیت، کە ئەوەیە ئەگەر لە ئارگومێنتی دووەمدا کاراکتەرێکت هەبێت (واتە لیستی ئەو کاراکتەرانەی کە دەتەوێت وەربگێڕدرێن) و هیچ کاراکتەری هاوتا نەبێت بۆ وەرگێڕان، ئەوا ئەو کاراکتەرە لە دەرچوونەکە لادەبرێت. بەم شێوەیە ئەمە:
translate('سڵاو، ناوم ئینیگۆ مۆنتۆیایە، تۆ باوکمت کوشت، خۆت ئامادە بکە بۆ مردن','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
...ئەنجامەکانی ناو ڕیزەکە، لەوانەش بۆشاییەکان: [" * * ** "]
ئەمەش بەو مانایەیە کە پیتی “a” وەرگێڕدراوە بۆ ئەستێرەیەکی (*)، بەڵام هەموو کاراکتەرێکی تر کە وەرگێڕانێکی نییە کە ڕیزەکەی ئامانجەکەی پێدراوە، بە تەواوی لادەبرێت. فەزای سپی تەنها شتێکە کە ئێمە ماوەلە نێوان پیتە وەرگێڕدراوەکانی “a”دا. پاشان دیسانەوە ئەم پرسیارە:
translate('سڵاو، ناوم ئینیگۆ مۆنتۆیایە، تۆ باوکمت کوشت، خۆت ئامادە بکە بۆ مردن','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','**************************************************')")
...کێشەکەی نییە و ئەنجامێک دەردەچێت کە بەم شێوەیە بێت:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"
لەوانەیە ئەوەت لێ بێت کە هیچ ڕێگەیەکی ئاسان لە جاڤاسکڕێپتدا نییە بۆ ئەوەی بە تەواوی ئەو کارە بکەیت کە فەنکشنی وەرگێڕانی XPath دەیکات، هەرچەندە بۆ زۆرێک لە حاڵەتەکانی بەکارهێنان، replaceAll بە دەربڕینە ئاساییەکان دەتوانن مامەڵەی لەگەڵ بکەن. دەتوانیت هەمان ئەو ڕێگایە بەکاربهێنیت کە من نیشانم داوە، بەڵام ئەوە لە ئاستێکی خراپدایە ئەگەر تەنها شتێک کە دەتەوێت وەرگێڕانی ڕیزەکان بێت. ئەم دیمۆیەی خوارەوە فەنکشنی وەرگێڕانی XPath دەپێچێتەوە بۆ دابینکردنی وەشانی جاڤاسکڕێپت: سەیری فەنکشنی وەرگێڕانی قەڵەم بکە [forked] لەلایەن برایان ڕاسموسنەوە. ڕەنگە لە کوێ شتێکی لەم شێوەیە بەکاربهێنیت؟ کۆدکردنی سیزار سیفەر بە ئۆفسێتی سێ شوێن لەبەرچاو بگرە (بۆ نموونە، کۆدکردنی سەرەوەی هێڵ لە ساڵی ٤٨ پێش زایین):
translate("قەیسەر بەنیازە لە ڕوبیکۆن بپەڕێتەوە!"، "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"، "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefغیجکلمنۆپقرستوڤ")
دەقی هاتنە ژوورەوە “قەیسەر پلانی هەیە ڕوبیکۆن ببڕێت!” ئەنجامەکەی “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” بۆ ئەوەی نموونەیەکی خێرای دیکەی ئەگەرە جیاوازەکان بهێنمەوە، فەنکشنێکی کانزایم دروستکرد کە ئینپوتێکی ڕستە وەردەگرێت و فەنکشنێکی وەرگێڕان بەکاردەهێنێت بۆ گەڕاندنەوەی دەقەکە، لەنێویاندا هەموو ئەو کاراکتەرانەی کە umlauts وەردەگرن. سەیری فەنکشنی Pen metal بکە [forked] لەلایەن برایان ڕاسموسنەوە.
const کانزا = (str) => { گەڕانەوە وەرگێڕان(str, "AOUaou","ÄÖÜäöü"); }
وە، ئەگەر دەقی "مۆتلی کرو یاساکان، ڕۆک لەسەر دۆدز!" دیارە ڕەنگە مرۆڤ هەموو جۆرە بەکارهێنانێکی پارۆدی ئەم فەنکشنەی هەبێت. ئەگەر ئەوە تۆیت، ئەوا ئەم بابەتەی TVTropes دەبێ ئیلهامێکی زۆرت بۆ دابین بکات. بەکارهێنانی CSS لەگەڵ XPath هۆکاری سەرەکیمان لەبیرت بێت بۆ بەکارهێنانی هەڵبژێرەری CSS پێکەوە لەگەڵ XPath: CSS زۆر بە باشی تێدەگات کە پۆل چییە، لە کاتێکدا باشترین شت کە دەتوانیت بە XPath بیکەیت بەراوردکردنی ڕیزەکانی تایبەتمەندی پۆلەکەیە. کە لە زۆربەی حاڵەتەکاندا کاردەکات. بەڵام ئەگەر هەرگیز تووشی دۆخێک بوویت کە بڵێین کەسێک پۆلەکانی بە ناوی .primaryLinks و .primaryLinks2 دروست کردبێت و تۆ XPath بەکاردەهێنیت بۆ بەدەستهێنانی پۆلی .primaryLinks، ئەوا بە ئەگەرێکی زۆرەوە تووشی کێشە دەبیت. تا ئەو کاتەی هیچ شتێکی گەمژانەی لەو جۆرە نەبێت، ڕەنگە تۆ XPath بەکاربهێنیت. بەڵام دڵتەنگم کە ڕاپۆرت دەدەم کە من لەو شوێنانە کارم کردووە کە خەڵک ئەو جۆرە شتە گەمژانە دەکەن. لێرەدا دیمۆیەکی تر هەیە کە CSS و XPath پێکەوە بەکاردەهێنێت. ئەوە نیشان دەدات کە چی ڕوودەدات کاتێک کۆدەکە بەکاردەهێنین بۆ بەڕێوەبردنی XPath لەسەر گرێیەکی کۆنتێکست کە گرێی بەڵگەنامەکە نییە. سەیری Pen css و xpath بکە بەیەکەوە [forked] لەلایەن Bryan Rasmussen. پرسیاری CSS بریتییە لە .relatedarticles a، کە دوو توخمەکەی a لە divێکدا دەهێنێت کە پۆلێکی .relatedarticles ی بۆ دیاری کراوە. دوای ئەوە سێ پرسیاری "خراپ" هەیە، واتە ئەو پرسیارانەی کە ئەو کارە ناکەن کە ئێمە دەمانەوێت بیکەن کاتێک بەم توخمانانە وەک گرێی کۆنتێکست کاردەکەن. دەتوانم ڕوونی بکەمەوە کە بۆچی ڕەفتارەکانیان جیاوازە لەوەی چاوەڕێی دەکەیت. ئەو سێ پرسیارە خراپەی کە باسی لێوە دەکرێت بریتین لە:
//text(): هەموو دەقەکانی ناو بەڵگەنامەکە دەگەڕێنێتەوە. //a/text(): هەموو دەقەکانی ناو بەستەرەکانی ناو بەڵگەنامەکە دەگەڕێنێتەوە. ./a/text(): هیچ ئەنجامێک ناگەڕێتەوە.
هۆکاری ئەم ئەنجامانە ئەوەیە کە لە کاتێکدا کۆنتێکستەکەت توخمێکە کە لە پرسیاری CSS گەڕاوەتەوە، // پێچەوانەی تەواوی بەڵگەنامەکە دەڕوات. ئەمە هێزی XPath ە؛ CSS ناتوانێت لە گرێیەکەوە بچێتە سەرەوە بۆ باپیرێک و دواتر بۆ خوشک و برایەکی ئەو باپیرە، و بە پێ بچێتە خوارەوە بۆ نەوەیەکی ئەو خوشک و برایە. بەڵام XPath دەتوانێت. لەم نێوەندەدا، ./ پرسیار لە منداڵانی گرێی ئێستا دەکات، کە خاڵی (.) نوێنەرایەتی گرێی ئێستا دەکات، و هێڵی پێشەوە (/) نوێنەرایەتی چوون بۆ هەندێک گرێی منداڵ دەکات — ئایا تایبەتمەندی، توخم، یان دەق بێت لەلایەن بەشی داهاتووی ڕێڕەوەکەوە دیاری دەکرێت. بەڵام هیچ منداڵێک نییە کە توخمێک بێت کە لەلایەن پرسیاری CSS هەڵبژێردراوە، بەم شێوەیە ئەو پرسیارەش هیچ ناگەڕێنێتەوە. لەو دیمۆیەی کۆتاییدا سێ پرسیاری باش هەیە:
.//text(), ./text(), normalize-space(./دەق ()).
پرسیاری normalize-space بەکارهێنانی فەنکشنی XPath نیشان دەدات، بەڵام کێشەیەکیش چارەسەر دەکات کە لە پرسیارەکانی تردا هاتووە. HTML بەم شێوەیە پێکهاتووە:
ئۆتۆماتیکیکردنی تاقیکردنەوەی تایبەتمەندییەکانتان بە Selenium WebDriver
پرسیارەکە هێڵێک دەگەڕێنێتەوە لە سەرەتا و کۆتایی گرێی دەقەکەدا،و normalize-space ئەمە لا دەبات. بەکارهێنانی هەر فەنکشنێکی XPath کە شتێکی تر دەگەڕێنێتەوە جگە لە بولی بە XPath ی هاتنەژوورەوە بۆ فەنکشنەکانی تریش دەگونجێت. ئەم دیمۆیەی خوارەوە کۆمەڵێک نموونە نیشان دەدات: سەیری نموونەکانی فەنکشنەکانی Pen xpath بکە [forked] لەلایەن Bryan Rasmussen. نموونەی یەکەم کێشەیەک نیشان دەدات کە پێویستە ئاگاداری بیت. بە تایبەتی ئەم کۆدەی خوارەوە:
document.queryXPaths("substring-after (//a/@href،'https://')");
...یەک ڕیز دەگەڕێنێتەوە:
"www.smashingmagazine.com/2018/04/تایبەتمەندی-تاقیکردنەوەی-سێلینیۆم-وێبدرایڤەر/"
مانای هەیە، ڕاستە؟ ئەم فەنکشنانە ڕیزبەندی ناگەڕێننەوە بەڵکو تاکە ڕستە یان تاکە ژمارە دەگەڕێننەوە. بەڕێوەبردنی فەنکشنەکە لە هەر شوێنێک بە چەندین ئەنجام تەنها ئەنجامی یەکەم دەگەڕێنێتەوە. ئەنجامی دووەم ئەوەمان بۆ دەردەخات کە ئێمە بەڕاستی چیمان دەوێت:
document.queryCSSSelectors("a").queryXPaths("ڕستەی ژێرەوە-دوای (./@href،'https://')");
کە ڕیزبەندییەک لە دوو ڕستە دەگەڕێنێتەوە:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/ئەنجامی-تاقیکردنەوەی ئۆتۆماتیکی-دەستگەیشتن-باشتر دەکات/"]
دەتوانرێت فەنکشنەکانی XPath هەروەک فەنکشنەکانی ناو جاڤاسکڕێپت هێلانە بکرێت. کەواتە، ئەگەر پێکهاتەی URL ی گۆڤاری Smashing Magazine بزانین، دەتوانین ئەم کارانەی خوارەوە بکەین (بەکارهێنانی وشەی قاڵب پێشنیار دەکرێت): `وەرگێڕان( substring( substring-after(./@href، ‘www.smashingmagazine.com/') ،٩)، '/','')`
ئەمە کەمێک زۆر ئاڵۆز دەبێت تا ئەو ڕادەیەی کە پێویستی بە کۆمێنت هەیە کە باس لەوە بکەن کە چی دەکات: هەموو URLەکە لە تایبەتمەندی href وەربگرە دوای www.smashingmagazine.com/، نۆ پیتی یەکەم لاببە، پاشان کاراکتەری پێشەوە (/) وەربگێڕە بۆ هیچ بۆ ئەوەی ڕزگارت بێت لە کۆتایی هاتنی پێشەوە. ڕیزبەندی دەرەنجامی:
["تایبەتمەندی-تاقیکردنەوەی-سێلینیۆم-وێبشۆفێر","ئەنجامی-تاقیکردنەوەی ئۆتۆماتیکی-دەستگەیشتن-باشتر دەکات"]
کەیسی بەکارهێنانی XPath زیاتر بەڕاستی XPath دەتوانێت لە تاقیکردنەوەدا بدرەوشێتەوە. هۆکارەکەی زەحمەت نییە بۆ بینینی، چونکە دەتوانرێت XPath بەکاربهێنرێت بۆ وەرگرتنی هەموو توخمێک لە DOM، لە هەر شوێنێکەوە لە DOM، لەکاتێکدا CSS ناتوانێت. ناتوانیت حساب بۆ ئەوە بکەیت کە پۆلەکانی CSS لە زۆرێک لە سیستەمی دروستکردنی مۆدێرندا بە یەکسانی بمێننەوە، بەڵام لەگەڵ XPath، ئێمە دەتوانین یەکسانیەکی بەهێزتر بکەین کە ناوەڕۆکی دەقی توخمێک چییە، بەبێ گوێدانە گۆڕانی پێکهاتەی DOM. لێکۆڵینەوە لەسەر ئەو تەکنیکانە کراوە کە ڕێگەت پێدەدات تاقیکردنەوەی XPath ی خۆڕاگر ئەنجام بدەیت. هیچ شتێک لەوە خراپتر نییە کە تاقیکردنەوەکان بشکێن و شکست بهێنن تەنها لەبەر ئەوەی هەڵبژێرەری CSS ئیتر کارناکات چونکە شتێک ناوی گۆڕاوە یان لابراوە. هەروەها XPath بەڕاستی زۆر باشە لە دەرهێنانی چەندین شوێنی شوێن. زیاتر لە ڕێگەیەک هەیە بۆ بەکارهێنانی پرسیارەکانی XPath بۆ هاوتاکردنی توخمێک. هەروەها لە CSSشدا ڕاستە. بەڵام پرسیارەکانی XPath دەتوانن بە شێوەیەکی ئامانجدارتر شتەکان کون بکەن کە سنووردار دەکات ئەوەی دەگەڕێتەوە، ڕێگەت پێدەدات یەکسانیەکی دیاریکراو بدۆزیتەوە کە لەوانەیە چەندین یەکسانبوونی ئەگەری هەبێت. بۆ نموونە دەتوانین XPath بەکاربهێنین بۆ گەڕاندنەوەی توخمێکی h2 تایبەت کە لەناو div ێکدا هەیە کە یەکسەر دوای div ی خوشک و برا دێت کە لە بەرامبەردا توخمێکی وێنەی منداڵی تێدایە کە تایبەتمەندی data-testID="leader" ی لەسەرە:
ئەم مانشێتە بەدەست مەهێنە
ئەم سەردێڕەش بەدەست مەهێنە
سەردێڕی وێنەی سەرکردە
ئەمە پرسیارەکەیە: بەڵگەنامە.پرسیارXPaths(` //div[ following-sibling::div[1] /img[@data-testID='سەرکردە'] ] /h2/ text() `);
با دیمۆیەک دابنێین بۆ ئەوەی بزانین چۆن ئەوانە هەمووی پێکەوە کۆدەبنەوە: سەیری پرسیاری Pen Complex H2 بکە [forked] لەلایەن برایان ڕاسموسنەوە. کەواتە، بەڵێ. زۆر ڕێڕەوی ئەگەری هەیە بۆ هەر توخمێک لە تاقیکردنەوەیەکدا کە XPath بەکاردەهێنێت. XSLT 1.0 کەمکردنەوە سەرەتا باسم لەوە کرد کە تیمی کرۆم پلانی هەیە پشتگیری XSLT 1.0 لە وێبگەڕەکەدا لاببات. ئەوە گرنگە چونکە XSLT 1.0 بەرنامەسازی XML-focused بەکاردەهێنێت بۆ گۆڕینی بەڵگەنامەکان کە لە بەرامبەردا پشت بە XPath 1.0 دەبەستێت، کە ئەمەش ئەوەیە کە لە زۆربەی وێبگەڕەکاندا دەبینرێت. کاتێک ئەوە ڕوودەدات، ئێمە پێکهاتەیەکی سەرەکی XPath لەدەست دەدەین. بەڵام بە لەبەرچاوگرتنی ئەو ڕاستییەی کە XPath بەڕاستی زۆر باشە بۆ نووسینی تاقیکردنەوەکان، بەدووری دەزانم کە XPath بە گشتی بەم زووانە نەمێنێت. کە ووتمان، تێبینیم کردووە کە خەڵک ئارەزووی تایبەتمەندییەک دەکەن کاتێک دەبرێن. و ئەوە بە دڵنیاییەوە ڕاستە لە حاڵەتی بەکارنەهێنانی XSLT 1.0. گفتوگۆیەکی تەواو لە هاکەر نیوز ڕوودەدات کە پڕە لە ئارگیومێنت دژی ئەو سووکایەتیکردنە. پۆستەکە خۆی نموونەیەکی زۆر باشە بۆ دروستکردنی چوارچێوەی بلۆگکردن بە XSLT. تۆدەتوانیت بۆ خۆت باسەکە بخوێنیتەوە، بەڵام دەچێتە ناوەوە کە چۆن جاڤاسکڕێپت وەکو شیمێک بۆ XLST بەکاربهێنرێت بۆ مامەڵەکردن لەگەڵ ئەو جۆرە حاڵەتانە. هەروەها پێشنیارەکانم بینیوە کە وێبگەڕەکان پێویستە SaxonJS بەکاربهێنن کە دەروازەیە بۆ بزوێنەری Saxon XSLT و XQUERY و XPath ی جاڤاسکڕێپت. ئەوە بیرۆکەیەکی سەرنجڕاکێشە، بە تایبەت کە Saxon-JS وەشانی ئێستای ئەم تایبەتمەندییانە جێبەجێ دەکات، لە کاتێکدا هیچ وێبگەڕێک نییە کە هیچ وەشانی XPath یان XSLT لە دەرەوەی 1.0 جێبەجێ بکات، و هیچیان نییە کە XQuery جێبەجێ بکات. دەستم گەیاندە نۆرم تۆڤی-والش لە ساکسۆنیکا، کۆمپانیای پشت ساکسۆن جەی ئێس و وەشانی تری بزوێنەری ساکسۆن. وتی؛ "ئەگەر هەر فرۆشیارێکی وێبگەڕ ئارەزووی وەرگرتنی SaxonJS وەک خاڵی دەستپێک بۆ یەکخستنی تەکنەلۆژیای XML مۆدێرن لە وێبگەڕەکەدا هەبوو، ئێمە زۆر خۆشحاڵ دەبین کە لەگەڵیان باسی بکەین."- Norm Tovey-Walsh
بەڵام هەروەها زیادی کرد: "زۆر سەرم سوڕدەمێنێت ئەگەر کەسێک پێیوابێ کە وەرگرتنی SaxonJS بە شێوەی ئێستای و دانانی بۆ ناو دروستکردنی وێبگەڕەکە بەبێ گۆڕانکاری ڕێگەیەکی ئایدیاڵ دەبێت. فرۆشیارێکی وێبگەڕ، بە سروشتی ئەو ڕاستییەی کە وێبگەڕەکە دروست دەکەن، دەتوانێت لە ئاستێکی زۆر قووڵتردا لە یەکگرتنەکە نزیک بێتەوە لەوەی کە ئێمە دەتوانین 'لە دەرەوە'."— Norm Tovey-Walsh
شایەنی باسە کە لێدوانەکانی تۆڤی-والش نزیکەی هەفتەیەک پێش ڕاگەیاندنی کەمکردنەوەی XSLT هات. دەرەنجام دەمتوانی بەردەوام بم و بەردەوام بم. بەڵام هیوادارم ئەمە هێزی XPath ی نیشان دابێت و نموونەی زۆری پێ ببەخشێت کە چۆنیەتی بەکارهێنانی بۆ بەدەستهێنانی شتە گەورەکان نیشان دەدات. نموونەیەکی تەواو و بێ کەموکوڕییە لە تەکنەلۆژیای کۆنتر لە ستاکی وێبگەڕەکاندا کە تا ئەمڕۆش سوودێکی زۆری هەیە، تەنانەت ئەگەر هەرگیز نەتزانیبێت کە بوونی هەیە یان هەرگیز بیرت لەوە نەکردبێتەوە دەستت پێی بگات. خوێندنەوەی زیاتر
"بەرزکردنەوەی خۆڕاگری تاقیکردنەوە ئۆتۆماتیکیەکانی وێب بە زمانی سروشتی" (کتێبخانەی دیجیتاڵی ACM) لەلایەن مارون ئایلی، یوسف باکۆنی، نادر جەلول و ڕیما کیلانیئەم بابەتە زۆر نموونەی XPath بۆ نووسینی تاقیکردنەوە خۆڕاگرەکان دەخاتە ڕوو. XPath (MDN)ئەمە شوێنێکی نایاب و باشە بۆ دەستپێکردن ئەگەر دەتەوێت ڕوونکردنەوەیەکی تەکنیکی بە وردی باس لە چۆنیەتی کارکردنی XPath بکات. فێرکاری XPath (ZVON)ئەم فێرکاریەم بۆم دەرکەوتووە کە یارمەتیدەرترینە لە فێربوونی خۆمدا، بەهۆی کۆمەڵێک نموونە و ڕوونکردنەوەی ڕوونەوە. XPatherئەم ئامرازە کارلێککارە ڕێگەت پێدەدات ڕاستەوخۆ لەگەڵ کۆدەکەدا کاربکەیت.
