لقد كنت في تطوير الواجهة الأمامية لفترة كافية لرؤية الاتجاه على مر السنين: المطورون الأصغر سنًا يعملون بنموذج جديد من البرمجة دون فهم السياق التاريخي له. من المفهوم تمامًا، بالطبع، عدم معرفة شيء ما. يعد الويب مكانًا كبيرًا جدًا يضم مجموعة متنوعة من المهارات والتخصصات، ونحن لا نعرف دائمًا ما لا نعرفه. التعلم في هذا المجال هو رحلة مستمرة وليس شيئًا يحدث مرة واحدة وينتهي. مثال على ذلك: سأل أحد أعضاء فريقي عما إذا كان من الممكن معرفة ما إذا كان المستخدمون يتنقلون بعيدًا عن علامة تبويب معينة في واجهة المستخدم. لقد أشرت إلى حدث JavaScript beforeunload. لكن أولئك الذين تعاملوا مع هذا من قبل يعرفون أن هذا ممكن لأنهم تلقوا تنبيهات حول البيانات غير المحفوظة على مواقع أخرى، والتي تعد حالة الاستخدام النموذجية لها قبل التفريغ. أشرت أيضًا إلى صفحة إخفاء الأحداث وتغيير الرؤية لزملائي من أجل حسن التدبير. كيف عرفت عن ذلك؟ لأنها ظهرت في مشروع آخر، وليس لأنني درستها عندما تعلمت JavaScript في البداية. والحقيقة هي أن أطر الواجهة الأمامية الحديثة تقف على أكتاف عمالقة التكنولوجيا الذين سبقوها. إنهم يقومون بتجريد ممارسات التطوير، غالبًا من أجل تجربة مطور أفضل تقلل، أو حتى تلغي، الحاجة إلى معرفة أو لمس ما كان تقليديًا مفاهيم الواجهة الأمامية الأساسية التي ربما يجب على الجميع معرفتها. فكر في نموذج كائن CSS (CSSOM). قد تتوقع أن أي شخص يعمل في CSS وJavaScript لديه مجموعة من الخبرة العملية في CSSOM، لكن هذا لن يكون هو الحال دائمًا. كان هناك مشروع React لموقع تجارة إلكترونية عملت عليه حيث كنا بحاجة إلى تحميل ورقة أنماط لموفر الدفع المحدد حاليًا. كانت المشكلة أنه تم تحميل ورقة الأنماط في كل صفحة عندما كانت هناك حاجة إليها بالفعل في صفحة معينة فقط. المطور المكلف بتحقيق ذلك لم يقم بتحميل ورقة أنماط ديناميكيًا على الإطلاق. مرة أخرى، هذا أمر مفهوم تمامًا عندما تقوم React بتجريد النهج التقليدي الذي ربما تكون قد توصلت إليه. من المحتمل ألا يكون CSSOM شيئًا تحتاجه في عملك اليومي. ولكن من المحتمل أنك ستحتاج إلى التفاعل معه في مرحلة ما، حتى في حالة لمرة واحدة. هذه التجارب ألهمتني لكتابة هذا المقال. هناك العديد من ميزات وتقنيات الويب الموجودة حاليًا والتي قد لا تلمسها أبدًا بشكل مباشر في عملك اليومي. ربما تكون جديدًا إلى حد ما في مجال تطوير الويب ولا تعرفها ببساطة لأنك غارق في تجريد إطار عمل محدد لا يتطلب منك معرفته بعمق، أو حتى على الإطلاق. أنا أتحدث على وجه التحديد عن XML، والتي يعرف الكثير منا أنها لغة قديمة لا تختلف تمامًا عن HTML. أطرح هذا الأمر بسبب مناقشات WHATWG الأخيرة التي تقترح إزالة جزء كبير من حزمة XML المعروفة باسم برمجة XSLT من المتصفحات. هذا هو بالضبط نوع التكنولوجيا الأقدم الموجودة لدينا منذ سنوات والتي يمكن استخدامها لشيء عملي مثل موقف CSSOM الذي كان فريقي يواجهه. هل عملت مع XSLT من قبل؟ دعونا نرى ما إذا كنا نعتمد بشدة على هذه التكنولوجيا القديمة ونستفيد من ميزاتها خارج سياق XML لمعالجة مشاكل العالم الحقيقي اليوم. XPath: واجهة برمجة التطبيقات المركزية تقنية XML الأكثر أهمية والتي ربما تكون الأكثر فائدة خارج منظور XML المباشر هي XPath، وهي لغة استعلام تسمح لك بالعثور على أي عقدة أو سمة في شجرة العلامات باستخدام عنصر جذر واحد. لدي عاطفة شخصية تجاه XSLT، ولكن هذا يعتمد أيضًا على XPath، ويجب وضع العاطفة الشخصية جانبًا في أهمية التصنيف. لا تتضمن الحجة الخاصة بإزالة XSLT أي ذكر لـ XPath، لذلك أفترض أنه لا يزال مسموحًا به. وهذا أمر جيد لأن XPath هو واجهة برمجة التطبيقات المركزية والأكثر أهمية في هذه المجموعة من التقنيات، خاصة عند محاولة العثور على شيء ما لاستخدامه خارج استخدام XML العادي. وهذا مهم لأنه على الرغم من أنه يمكن استخدام محددات CSS للعثور على معظم العناصر الموجودة في صفحتك، إلا أنها لا تستطيع العثور عليها جميعًا. علاوة على ذلك، لا يمكن استخدام محددات CSS للعثور على عنصر بناءً على موضعه الحالي في DOM. يمكن لـ XPath. الآن، البعض منكم الذي يقرأ هذا قد يعرف XPath، والبعض الآخر قد لا يعرفه. يعد XPath مجالًا كبيرًا جدًا من مجالات التكنولوجيا، ولا يمكنني حقًا تعليم جميع الأساسيات وإظهار الأشياء الرائعة التي يمكنك فعلها بها في مقال واحد مثل هذا. لقد حاولت بالفعل كتابة هذا المقال، لكن متوسط منشور مجلة Smashing لا يتجاوز 5000 كلمة. لقد كنت بالفعل في أكثر من2000 كلمة في منتصف الطريق فقط خلال الأساسيات. لذا، سأبدأ في القيام بأشياء رائعة باستخدام XPath وسأعطيك بعض الروابط التي يمكنك استخدامها للأساسيات إذا وجدت هذه الأشياء مثيرة للاهتمام. الجمع بين XPath وCSS يمكن لـ XPath القيام بالكثير من الأشياء التي لا تستطيع محددات CSS القيام بها عند الاستعلام عن العناصر. لكن يمكن لمحددات CSS أيضًا القيام ببعض الأشياء التي لا يستطيع XPath القيام بها، وهي الاستعلام عن العناصر حسب اسم الفئة.
CSS XPath .myClass /*[يحتوي على(@class, "myClass")]
في هذا المثال، يستعلم CSS عن العناصر التي تحتوي على اسم فئة .myClass. وفي الوقت نفسه، يستعلم مثال XPath عن العناصر التي تحتوي على فئة سمة مع السلسلة "myClass". بمعنى آخر، فإنه يحدد العناصر التي تحتوي على myClass في أي سمة، بما في ذلك العناصر ذات اسم الفئة .myClass - بالإضافة إلى العناصر التي تحتوي على "myClass" في السلسلة، مثل .myClass2. XPath أوسع بهذا المعنى. لذا، لا. أنا لا أقترح التخلص من CSS والبدء في تحديد جميع العناصر عبر XPath. هذه ليست النقطة. النقطة المهمة هي أن XPath يمكنه القيام بأشياء لا تستطيع CSS أن تظل مفيدة جدًا، على الرغم من أنها تقنية قديمة في حزمة المتصفح وقد لا تبدو واضحة للوهلة الأولى. دعونا نستخدم التقنيتين معًا ليس فقط لأننا نستطيع ذلك، ولكن لأننا سنتعلم شيئًا عن XPath في هذه العملية، مما يجعله أداة أخرى في مجموعتك - أداة ربما لم تكن تعلم بوجودها طوال الوقت! المشكلة هي أن طريقة document.evaluate الخاصة بـ JavaScript وطرق تحديد الاستعلام المتنوعة التي نستخدمها مع واجهات برمجة تطبيقات CSS لـ JavaScript غير متوافقة. لقد قمت بإنشاء واجهة برمجة تطبيقات استعلام متوافقة لبدء العمل، على الرغم من أنني لم أفكر كثيرًا فيها نظرًا لأنها تمثل خروجًا عما نفعله هنا. فيما يلي مثال عمل بسيط إلى حد ما لمنشئ استعلام قابل لإعادة الاستخدام: راجع Pen queryXPath [متشعب] بواسطة Bryan Rasmussen. لقد أضفت طريقتين إلى كائن المستند: queryCSSSelectors (وهو في الأساس querySelectorAll) وqueryXPaths. يقوم كلاهما بإرجاع كائن queryResults:
{ نوع الاستعلام: العقد | سلسلة | رقم | منطقية, النتائج: أي [] // عناصر html، عناصر xml، سلاسل، أرقام، منطقيات، queryCSSSelectors: (الاستعلام: سلسلة، تعديل: منطقي) => queryResults، queryXpaths: (الاستعلام: سلسلة، تعديل: منطقي) => queryResults }
تقوم الدالتان queryCSSSelectors وqueryXpaths بتشغيل الاستعلام الذي تقدمه لهما عبر العناصر الموجودة في مصفوفة النتائج، طالما أن مصفوفة النتائج من النوع العقد، بالطبع. وإلا، فسوف يُرجع نتيجة استعلام بمصفوفة فارغة ونوع العقد. إذا تم تعيين خاصية التعديل على true، فستقوم الوظائف بتغيير نتائج الاستعلام الخاصة بها. لا ينبغي بأي حال من الأحوال استخدام هذا في بيئة الإنتاج. أنا أفعل ذلك بهذه الطريقة فقط لتوضيح التأثيرات المختلفة لاستخدام واجهتي برمجة تطبيقات الاستعلام معًا. استعلامات المثال أريد أن أعرض بعض الأمثلة لاستعلامات XPath المختلفة التي توضح بعض الأشياء القوية التي يمكنها القيام بها وكيف يمكن استخدامها بدلاً من الطرق الأخرى. المثال الأول هو //li/text(). يؤدي هذا إلى الاستعلام عن جميع عناصر li وإرجاع العقد النصية الخاصة بها. لذا، إذا أردنا الاستعلام عن HTML التالي:
- واحد
- اثنان
- ثلاثة
…وهذا ما تم إرجاعه:
{"queryType": "xpathEvaluate"، "results":["one"، "two"، "ثلاثة"]، "resultType": "string"}
بمعنى آخر، نحصل على المصفوفة التالية: ["واحد"، "اثنان"، "ثلاثة"]. عادةً، يمكنك الاستعلام عن عناصر li للحصول على ذلك، وتحويل نتيجة هذا الاستعلام إلى مصفوفة، وتعيين المصفوفة، وإرجاع العقدة النصية لكل عنصر. لكن يمكننا القيام بذلك بشكل أكثر دقة باستخدام XPath: document.queryXPaths("//li/text()").النتائج.
لاحظ أن طريقة الحصول على عقدة نصية هي استخدام text()، الذي يشبه توقيع دالة - وهو كذلك بالفعل. تقوم بإرجاع العقدة النصية لعنصر ما. في مثالنا، هناك ثلاثة عناصر li في الترميز، يحتوي كل منها على نص ("واحد"، و"اثنان"، و"ثلاثة").
دعونا نلقي نظرة على مثال آخر لاستعلام text(). افترض أن هذا هو ترميزنا:
لنكتب استعلامًا يُرجع قيمة السمة href: document.queryXPaths("//a[text() = 'تسجيل الدخول']/@href").results.
هذا هو استعلام XPath في المستند الحالي، تمامًا مثل المثال الأخير، ولكن هذه المرة نعيد سمة href لرابط (عنصر) يحتوي على النص "تسجيل الدخول". عاد الفعليالنتيجة هي ["/login.html"]. نظرة عامة على وظائف XPath هناك عدد من وظائف XPath، وربما لا تكون على دراية بها. أعتقد أن هناك العديد من الأمور التي تستحق المعرفة، بما في ذلك ما يلي:
يبدأ بـإذا كان النص يبدأ بمثال نصي آخر محدد، فإن يبدأ بـ(@href, 'http:') يُرجع صحيحًا إذا كانت سمة href تبدأ بـ http:. يحتوي على إذا كان النص يحتوي على مثال نصي آخر معين، فإن يحتوي على (نص ()، "Smashing Magazine") يُرجع صحيحًا إذا كانت العقدة النصية تحتوي على الكلمات "Smashing Magazine" بداخلها في أي مكان. countإرجاع عدد التطابقات الموجودة للاستعلام. على سبيل المثال، يُرجع count(//*[starts-with(@href, 'http:']) عدد الروابط الموجودة في عقدة السياق التي تحتوي على عناصر ذات سمة href تحتوي على النص الذي يبدأ بـ http:. تعمل السلسلة الفرعية مثل سلسلة جافا سكريبت الفرعية، باستثناء أنك تقوم بتمرير السلسلة كوسيطة. على سبيل المثال، السلسلة الفرعية ("my text"، 2، 4) تُرجع "y t". سلسلة فرعية قبل إرجاع جزء من السلسلة قبل سلسلة أخرى. على سبيل المثال، يؤدي substing-before("my text", " ") إلى إرجاع "my". وبالمثل، تقوم السلسلة الفرعية قبل ("hi"، "bye") بإرجاع سلسلة فارغة. سلسلة فرعية بعد إرجاع جزء من السلسلة بعد سلسلة أخرى. على سبيل المثال، يؤدي substing-after("my text", " ") إلى إرجاع "text". وبالمثل، تقوم السلسلة الفرعية بعد ("hi"، "bye") بإرجاع سلسلة فارغة. تطبيع المسافة - إرجاع سلسلة الوسيطة بمسافة بيضاء تمت تسويتها عن طريق تجريد المسافة البيضاء البادئة واللاحقة واستبدال تسلسل أحرف المسافة البيضاء بمسافة واحدة. لا يُرجع قيمة منطقية صحيحة إذا كانت الوسيطة خاطئة، وإلا فهي خاطئة. صحيح إرجاع منطقي صحيح. falseإرجاع خطأ منطقي. concat هو نفس الشيء مثل JavaScript concat، إلا أنك لا تقوم بتشغيله كطريقة على سلسلة. بدلاً من ذلك، يمكنك وضع كافة السلاسل التي تريد ربطها. string-lengthهذا ليس هو نفسه طول السلسلة في JavaScript، ولكنه يُرجع طول السلسلة المعطاة له كوسيطة. TranslateThis يأخذ سلسلة ويغير الوسيطة الثانية إلى الوسيطة الثالثة. على سبيل المثال، ترجمة ("abcdef"، "abc"، "XYZ") تُخرج XYZdef.
وبصرف النظر عن وظائف XPath هذه، هناك عدد من الوظائف الأخرى التي تعمل تمامًا مثل نظيراتها في JavaScript - أو نظيراتها في أي لغة برمجة - والتي من المحتمل أن تجدها مفيدة أيضًا، مثل الأرضية، والسقف، والدائرية، والمجموع، وما إلى ذلك. يوضح العرض التوضيحي التالي كلًا من هذه الوظائف: راجع الدالات العددية لـ Pen XPath [متشعبة] بواسطة Bryan Rasmussen. لاحظ أنه، مثل معظم وظائف معالجة السلسلة، فإن العديد من الوظائف الرقمية تأخذ مدخلاً واحدًا. هذا بالطبع لأنه من المفترض أن يتم استخدامها للاستعلام، كما في مثال XPath الأخير: //li[floor(text()) > 250]/@val
إذا استخدمتها، كما تفعل معظم الأمثلة، فسوف ينتهي بك الأمر إلى تشغيلها على العقدة الأولى التي تطابق المسار. هناك أيضًا بعض وظائف تحويل النوع التي ربما ينبغي عليك تجنبها لأن JavaScript لديها بالفعل مشاكل تحويل النوع الخاصة بها. ولكن قد تكون هناك أوقات تريد فيها تحويل سلسلة إلى رقم لمقارنتها برقم آخر. الوظائف التي تحدد نوع الشيء هي المنطقية والرقمية والسلسلة والعقدة. هذه هي أنواع بيانات XPath المهمة. وكما قد تتخيل، يمكن استخدام معظم هذه الوظائف على أنواع البيانات التي ليست عقد DOM. على سبيل المثال، سلسلة فرعية بعد تأخذ سلسلة كما غطينا بالفعل، ولكن يمكن أن تكون سلسلة من سمة href. ويمكن أيضًا أن يكون مجرد سلسلة:
const testSubstringAfter = document.queryXPaths("substring-after('hello World',' ')");
من الواضح أن هذا المثال سيعيد لنا مصفوفة النتائج كـ ["world"]. لإظهار ذلك عمليًا، قمت بإنشاء صفحة تجريبية باستخدام وظائف مقابل أشياء ليست عقد DOM: راجع Pen queryXPath [متشعب] بواسطة Bryan Rasmussen. يجب أن تلاحظ الجانب المفاجئ لوظيفة الترجمة، وهو أنه إذا كان لديك حرف في الوسيطة الثانية (أي قائمة الأحرف التي تريد ترجمتها) ولا يوجد حرف مطابق للترجمة إليه، فستتم إزالة هذا الحرف من الإخراج. وبالتالي هذا:
ترجمة ("مرحبًا، اسمي إنيجو مونتويا، لقد قتلت والدي، استعد للموت")
…النتائج في السلسلة، بما في ذلك المسافات: [" * * ** "]
وهذا يعني أنه تتم ترجمة الحرف "a" إلى علامة النجمة (*)، ولكن تتم إزالة كل حرف آخر لا يحتوي على ترجمة نظرًا للسلسلة المستهدفة بالكامل. المسافة البيضاء هي كل ما تبقى لدينابين الحروف "a" المترجمة. ثم مرة أخرى هذا الاستعلام:
ترجمة('مرحبًا، اسمي إنيجو مونتويا، لقد قتلت والدي، استعد للموت','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
...ليس لديه المشكلة ويخرج نتيجة تبدو كما يلي:
"****** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"
قد يلفت انتباهك أنه لا توجد طريقة سهلة في JavaScript للقيام بالضبط بما تفعله وظيفة ترجمة XPath، على الرغم من أنه في العديد من حالات الاستخدام، يمكن لاستبدال الكل بالتعبيرات العادية التعامل معها. يمكنك استخدام نفس النهج الذي أوضحته، ولكن هذا ليس الأمثل إذا كان كل ما تريده هو ترجمة السلاسل. يلخص العرض التوضيحي التالي وظيفة الترجمة الخاصة بـ XPath لتوفير إصدار JavaScript: راجع وظيفة ترجمة القلم [متشعبة] بواسطة Bryan Rasmussen. أين يمكنك استخدام شيء مثل هذا؟ خذ بعين الاعتبار تشفير Caesar Cipher بإزاحة ثلاثة أماكن (على سبيل المثال، التشفير الأفضل من عام 48 قبل الميلاد):
ترجمة("قيصر يخطط لعبور الروبيكون!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"، "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
نص الإدخال "قيصر يخطط لعبور الروبيكون!" يؤدي إلى "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" ولإعطاء مثال سريع آخر على الاحتمالات المختلفة، قمت بإنشاء دالة معدنية تأخذ إدخال سلسلة وتستخدم وظيفة ترجمة لإرجاع النص، بما في ذلك جميع الأحرف التي تأخذ علامات تغير الصوت. انظر وظيفة القلم المعدني [متشعبة] لبريان راسموسن.
معدن ثابت = (شارع) => { return Translator(str, "AOUaou"،"ÄÖÜäöü"); }
وإذا تم إعطاء النص "قواعد Motley Crue، صخرة على الرجال!"، فسيتم إرجاع "Mötley Crüe rüles, röck ön düdes!" من الواضح أنه قد يكون لدى المرء جميع أنواع الاستخدامات المحاكاة الساخرة لهذه الوظيفة. إذا كنت أنت، فيجب أن توفر لك مقالة TVTropes هذه الكثير من الإلهام. استخدام CSS مع XPath تذكر السبب الرئيسي لاستخدام محددات CSS مع XPath: يفهم CSS إلى حد كبير ماهية الفئة، في حين أن أفضل ما يمكنك فعله باستخدام XPath هو مقارنات السلسلة لسمة الفئة. وهذا سوف يعمل في معظم الحالات. ولكن إذا واجهت موقفًا، على سبيل المثال، حيث قام شخص ما بإنشاء فئات باسم .primaryLinks و.primaryLinks2 وكنت تستخدم XPath للحصول على فئة .primaryLinks، فمن المحتمل أن تواجه مشكلات. طالما لا يوجد شيء سخيف من هذا القبيل، فمن المحتمل أن تستخدم XPath. لكن يؤسفني أن أبلغكم أنني عملت في أماكن يقوم فيها الناس بهذه الأنواع من الأشياء السخيفة. إليك عرضًا توضيحيًا آخر يستخدم CSS وXPath معًا. إنه يوضح ما يحدث عندما نستخدم الكود لتشغيل XPath على عقدة سياق ليست عقدة المستند. شاهد Pen css وxpath معًا [متشعب] بواسطة Bryan Rasmussen. استعلام CSS هو .relatedarticles a، والذي يجلب العنصرين a في div المعينين لفئة .relatedarticles. بعد ذلك هناك ثلاثة استعلامات "سيئة"، أي الاستعلامات التي لا تفعل ما نريدها أن تفعله عند التشغيل مع هذه العناصر كعقدة السياق. أستطيع أن أشرح لماذا يتصرفون بشكل مختلف عما قد تتوقعه. الاستعلامات الثلاثة السيئة المعنية هي:
//text(): إرجاع النص بالكامل في المستند. //a/text(): إرجاع كل النص الموجود داخل الروابط في المستند. ./a/text(): لا يُرجع أي نتائج.
سبب هذه النتائج هو أنه على الرغم من أن السياق الخاص بك عبارة عن عناصر تم إرجاعها من استعلام CSS، إلا أن // يتعارض مع المستند بأكمله. هذه هي قوة XPath؛ لا يمكن لـ CSS الانتقال من عقدة إلى سلف ومن ثم إلى شقيق ذلك الجد، ثم النزول إلى سليل ذلك الأخ. لكن XPath يستطيع ذلك. وفي الوقت نفسه، ./ يستعلم عن العقد الفرعية الحالية، حيث تمثل النقطة (.) العقدة الحالية، وتمثل الشرطة المائلة للأمام (/) الانتقال إلى عقدة فرعية - سواء كانت سمة أو عنصرًا أو نصًا يتم تحديدها من خلال الجزء التالي من المسار. ولكن لا يوجد عنصر فرعي محدد بواسطة استعلام CSS، وبالتالي لا يُرجع هذا الاستعلام أي شيء أيضًا. هناك ثلاثة استعلامات جيدة في العرض التوضيحي الأخير:
.//نص ()، ./نص ()، تطبيع الفضاء (./text()).
يوضح استعلام مساحة التطبيع استخدام دالة XPath، ولكنه يعمل أيضًا على إصلاح مشكلة مضمنة في الاستعلامات الأخرى. تم تنظيم HTML على النحو التالي:
أتمتة اختبار الميزات الخاصة بك باستخدام Selenium WebDriver
يقوم الاستعلام بإرجاع تغذية سطر في بداية العقدة النصية ونهايتها،وتطبيع الفضاء يزيل هذا. استخدام أي دالة XPath تقوم بإرجاع شيء آخر غير القيمة المنطقية مع إدخال ينطبق XPath على وظائف أخرى. يوضح العرض التوضيحي التالي عددًا من الأمثلة: راجع أمثلة وظائف Pen xpath [متشعبة] بواسطة Bryan Rasmussen. يوضح المثال الأول مشكلة يجب عليك الانتباه إليها. وعلى وجه التحديد الكود التالي:
document.queryXPaths("substring-after(//a/@href,'https://')");
…إرجاع سلسلة واحدة:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
فمن المنطقي، أليس كذلك؟ لا تُرجع هذه الوظائف صفائف، بل تُرجع سلاسل مفردة أو أرقامًا مفردة. يؤدي تشغيل الدالة في أي مكان بنتائج متعددة إلى إرجاع النتيجة الأولى فقط. والنتيجة الثانية توضح ما نريده حقًا:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
الذي يقوم بإرجاع مجموعة من سلسلتين:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"، "www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
يمكن أن تتداخل وظائف XPath تمامًا مثل الوظائف الموجودة في JavaScript. لذا، إذا كنا نعرف بنية عنوان URL لمجلة Smashing Magazine، فيمكننا القيام بما يلي (يوصى باستخدام القيم الحرفية للنموذج): `ترجمة( سلسلة فرعية( سلسلة فرعية بعد (./@href، "www.smashingmagazine.com/") ،9)، '/'،'')`
أصبح هذا الأمر معقدًا بعض الشيء إلى حد أنه يحتاج إلى تعليقات تصف ما يفعله: خذ كل عنوان URL من سمة href بعد www.smashingmagazine.com/، وأزل الأحرف التسعة الأولى، ثم قم بترجمة حرف الشرطة المائلة للأمام (/) إلى لا شيء وذلك للتخلص من الشرطة المائلة الأمامية في النهاية. المصفوفة الناتجة:
["ميزة-اختبار-السيلينيوم-webdriver"،"نتائج-الاختبار الآلي-تحسين-إمكانية الوصول"]
المزيد من حالات استخدام XPath يمكن لـ XPath أن يتألق حقًا في الاختبار. ليس من الصعب معرفة السبب، إذ يمكن استخدام XPath للحصول على كل عنصر في DOM، من أي موضع في DOM، بينما لا يمكن استخدام CSS. لا يمكنك الاعتماد على بقاء فئات CSS متسقة في العديد من أنظمة البناء الحديثة، ولكن باستخدام XPath، أصبحنا قادرين على إجراء تطابقات أكثر قوة فيما يتعلق بمحتوى النص الخاص بالعنصر، بغض النظر عن بنية DOM المتغيرة. لقد تم إجراء بحث حول التقنيات التي تسمح لك بإجراء اختبارات XPath المرنة. ليس هناك ما هو أسوأ من توقف الاختبارات وفشلها لمجرد أن محدد CSS لم يعد يعمل بسبب إعادة تسمية شيء ما أو إزالته. يعد XPath أيضًا رائعًا حقًا في استخراج محدد المواقع المتعدد. توجد أكثر من طريقة لاستخدام استعلامات XPath لمطابقة عنصر ما. وينطبق الشيء نفسه مع CSS. لكن استعلامات XPath يمكنها التعمق في الأشياء بطريقة أكثر استهدافًا مما يحد من ما يتم إرجاعه، مما يسمح لك بالعثور على تطابق محدد حيث قد يكون هناك العديد من التطابقات المحتملة. على سبيل المثال، يمكننا استخدام XPath لإرجاع عنصر h2 محدد موجود داخل div الذي يتبع مباشرة div الشقيق والذي بدوره يحتوي على عنصر صورة فرعي مع سمة data-testID='leader' عليه: <ديف> <ديف>
