הייתי בפיתוח חזיתי מספיק זמן כדי לראות מגמה לאורך השנים: מפתחים צעירים עובדים עם פרדיגמה חדשה של תכנות מבלי להבין את ההקשר ההיסטורי שלה. זה, כמובן, מובן לחלוטין לא לדעת משהו. האינטרנט הוא מקום גדול מאוד עם מגוון של כישורים והתמחויות, ולא תמיד אנחנו יודעים מה אנחנו לא יודעים. למידה בתחום זה היא מסע מתמשך ולא משהו שקורה פעם אחת ומסתיים. מקרה לגופו: מישהו בצוות שלי שאל אם אפשר לדעת אם משתמשים מנווטים מטאב מסוים בממשק המשתמש. ציינתי את אירוע before unload של JavaScript. אבל מי שהתמודד עם זה בעבר יודע שזה אפשרי מכיוון שהם קיבלו התראות על נתונים שלא נשמרו באתרים אחרים, שעבורם לפני פריקה הוא מקרה שימוש טיפוסי. גם הצבעתי לעמית שלי על אירועי הדףHide and visibilityChange. איך ידעתי על זה? בגלל שזה עלה בפרויקט אחר, לא בגלל שלמדתי את זה בהתחלה שלמדתי JavaScript. העובדה היא שמסגרות חזית מודרניות עומדות על כתפיהן של ענקיות הטכנולוגיה שקדמו להן. הם מופשטים שיטות פיתוח, לעתים קרובות עבור חוויית מפתח טובה יותר שמפחיתה, או אפילו מבטלת, את הצורך לדעת או לגעת במה שהיו מסורתיים מושגים חזיתיים חיוניים שכולם כנראה צריכים לדעת. שקול את מודל האובייקט CSS (CSSOM). אתה עשוי לצפות שלכל מי שעובד ב-CSS ו-JavaScript יש הרבה ניסיון מעשי ב-CSSOM, אבל זה לא תמיד יהיה המקרה. היה פרויקט React עבור אתר מסחר אלקטרוני שעבדתי עליו בו היינו צריכים לטעון גיליון סגנונות עבור ספק התשלומים שנבחר כעת. הבעיה הייתה שגיליון הסגנונות נטען בכל עמוד כשצריך אותו רק בעמוד מסוים. המפתח שהוטל עליו לגרום לזה לקרות מעולם לא טען גיליון סגנונות באופן דינמי. שוב, זה מובן לחלוטין כאשר 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 הוא תחום די גדול של טכנולוגיה, ואני לא באמת יכול ללמד את כל היסודות וגם להראות לך דברים מגניבים לעשות איתו במאמר בודד כזה. למעשה ניסיתי לכתוב את המאמר הזה, אבל הפרסום הממוצע של מגזין Smashing לא עולה על 5,000 מילים. הייתי כבר יותר מ2,000 מילים רק באמצע היסודות. אז, אני אתחיל לעשות דברים מגניבים עם XPath ולתת לך כמה קישורים שבהם תוכל להשתמש ליסודות אם אתה מוצא את הדברים האלה מעניינים. שילוב של XPath ו-CSS XPath יכול לעשות הרבה דברים שבוררי CSS לא יכולים בעת שאילתות על אלמנטים. אבל בוררי CSS יכולים גם לעשות כמה דברים ש-Xpath לא יכול, כלומר, לבצע שאילתות על רכיבים לפי שם מחלקה.
CSS XPath .myClass /*[contains(@class, "myClass")]
בדוגמה זו, CSS מבצע שאילתות על אלמנטים המכילים שם מחלקה .myClass. בינתיים, הדוגמה של XPath מבצעת שאילתות על אלמנטים המכילים מחלקה של תכונה עם המחרוזת "myClass". במילים אחרות, הוא בוחר אלמנטים עם myClass בכל תכונה, כולל אלמנטים עם שם הכיתה .myClass - כמו גם אלמנטים עם "myClass" במחרוזת, כגון .myClass2. XPath רחב יותר במובן זה. אז, לא. אני לא מציע שאנחנו צריכים לזרוק CSS ולהתחיל לבחור את כל האלמנטים דרך XPath. זו לא הנקודה. הנקודה היא ש-Xpath יכול לעשות דברים ש-CSS לא יכול ועדיין יכול להיות מאוד שימושי, למרות שזו טכנולוגיה ישנה יותר בערימת הדפדפן ואולי לא נראה ברור במבט ראשון. בוא נשתמש בשתי הטכנולוגיות יחד לא רק בגלל שאנחנו יכולים, אלא בגלל שנלמד משהו על XPath בתהליך, מה שהופך אותו לעוד כלי בערימה שלך - כזה שאולי לא ידעת שהיה שם כל הזמן! הבעיה היא ששיטת document.evaluate של JavaScript ושיטות בורר השאילתות השונות בהן אנו משתמשים עם ה-CSS APIs עבור JavaScript אינם תואמים. יצרתי ממשק API לשאילתות תואם כדי להתחיל, אם כי אני מודה, לא השקעתי בזה הרבה מחשבה מכיוון שזו סטייה ממה שאנחנו עושים כאן. הנה דוגמה פשוטה למדי של בנאי שאילתות לשימוש חוזר: ראה את ה-Pen queryXPath [מזלג] מאת Bryan Rasmussen. הוספתי שתי שיטות על אובייקט המסמך: queryCSSSelectors (שזה בעצם querySelectorAll) ו-queryXPaths. שני אלה מחזירים אובייקט queryResults:
{ queryType: צמתים | מחרוזת | מספר | בוליאני, תוצאות: כל [] // רכיבי html, רכיבי xml, מחרוזות, מספרים, בוליאנים, queryCSSSelectors: (שאילתה: string, amend: boolean) => queryResults, queryXpaths: (שאילתה: string, amend: boolean) => queryResults }
הפונקציות queryCSSSelectors ו-queryXpaths מריצים את השאילתה שאתה נותן להם על האלמנטים במערך התוצאות, כל עוד מערך התוצאות הוא מסוג צמתים, כמובן. אחרת, הוא יחזיר queryResult עם מערך ריק וסוג של צמתים. אם המאפיין amend מוגדר כ-true, הפונקציות ישנו את queryResults משלהן. בשום פנים ואופן אין להשתמש בזה בסביבת ייצור. אני עושה את זה רק כדי להדגים את ההשפעות השונות של השימוש בשני ממשקי ה-API של שאילתות ביחד. שאילתות לדוגמה אני רוצה להראות כמה דוגמאות לשאילתות XPath שונות המדגימות כמה מהדברים החזקים שהם יכולים לעשות וכיצד ניתן להשתמש בהן במקום גישות אחרות. הדוגמה הראשונה היא //li/text(). זה מבצע שאילתות על כל רכיבי li ומחזיר את צמתי הטקסט שלהם. אז, אם היינו מבקשים את ה-HTML הבא:
- אחד
- שניים
- שלוש
...זה מה שמוחזר:
{"queryType":"xpathEvaluate","results":["one","two","three"],"resultType":"string"}
במילים אחרות, נקבל את המערך הבא: ["אחד", "שניים", "שלושה"]. בדרך כלל, אתה תבקש את רכיבי ה-li כדי לקבל את זה, הופך את התוצאה של השאילתה למערך, ממפה את המערך ומחזיר את צומת הטקסט של כל אלמנט. אבל אנחנו יכולים לעשות זאת בצורה תמציתית יותר עם XPath: document.queryXPaths("//li/text()").results.
שימו לב שהדרך להשיג צומת טקסט היא להשתמש ב-text(), שנראה כמו חתימת פונקציה - וזהו. זה מחזיר את צומת הטקסט של אלמנט. בדוגמה שלנו, ישנם שלושה אלמנטים li בסימון, כל אחד מכיל טקסט ("אחד", "שניים" ו-"שלושה").
בואו נסתכל על עוד דוגמה אחת של שאילתת טקסט (). נניח שזהו הסימון שלנו:
בוא נכתוב שאילתה שמחזירה את ערך התכונה href: document.queryXPaths("//a[text() = 'כניסה']/@href").results.
זוהי שאילתת XPath במסמך הנוכחי, בדיוק כמו הדוגמה האחרונה, אך הפעם אנו מחזירים את תכונת href של קישור (אלמנט) שמכיל את הטקסט "Sign In". בפועל חזרהתוצאה היא ["/login.html"]. סקירת פונקציות XPath ישנן מספר פונקציות של XPath, וכנראה שאינך מכיר אותן. יש כמה, לדעתי, שכדאי לדעת עליהם, כולל הדברים הבאים:
starts-withאם טקסט מתחיל בדוגמה מסוימת של טקסט אחר, starts-with(@href, 'http:') מחזירה true אם תכונת href מתחילה ב-http:. containsIf טקסט מכיל דוגמה מסוימת של טקסט אחר, contains(text(), "Smashing Magazine") מחזירה true אם צומת טקסט מכיל את המילים "Smashing Magazine" בכל מקום. countמחזיר ספירה של כמה התאמות יש לשאילתה. לדוגמה, count(//*[starts-with(@href, 'http:']) מחזירה ספירה של כמה קישורים בצומת ההקשר יש אלמנטים עם תכונת href שמכילה את הטקסט שמתחיל ב-http:. substring פועל כמו מחרוזת משנה של JavaScript, אלא שאתה מעביר את המחרוזת כארגומנט. לדוגמה, substring("my text", 2, 4) מחזירה "y t". substring-beforeמחזיר את החלק של מחרוזת לפני מחרוזת אחרת. לדוגמה, substing-before("my text", " ") מחזירה "my". באופן דומה, substring-before("hi","bye") מחזירה מחרוזת ריקה. substring-afterמחזיר את החלק של מחרוזת אחרי מחרוזת אחרת. לדוגמה, substing-after("my text", " ") מחזירה "טקסט". באופן דומה, substring-after("hi","bye") מחזיר מחרוזת ריקה. normalize-space מחזירה את מחרוזת הארגומנט עם רווח לבן מנורמל על ידי הפשטת רווחים מובילים ונגררים והחלפת רצפים של תווי רווח לבן ברווח בודד. notמחזיר אמת בוליאני אם הארגומנט הוא שקר, אחרת שקר. trueמחזירה בוליאנית אמיתית. falseמחזיר שקר בוליאני. concat אותו דבר כמו JavaScript concat, אלא שאתה לא מפעיל אותו כשיטה על מחרוזת. במקום זאת, אתה מכניס את כל המחרוזות שאתה רוצה לשרשר. string-lengthזה לא זהה ל-JavaScript string-length, אלא מחזיר את אורך המחרוזת שהיא ניתנת כארגומנט. translateThis לוקח מחרוזת ומשנה את הארגומנט השני לארגומנט השלישי. לדוגמה, translate("abcdef", "abc", "XYZ") מוציא XYZdef.
מלבד פונקציות XPath הספציפיות הללו, ישנן מספר פונקציות אחרות שעובדות בדיוק כמו המקבילות שלהן ב-JavaScript - או מקבילות בכל שפת תכנות בעצם - שכנראה גם תמצא בהן שימושיות, כגון רצפה, תקרה, עגול, סכום וכו'. ההדגמה הבאה ממחישה כל אחת מהפונקציות הללו: ראה את הפונקציות המספריות של Pen XPath [מתפצל] מאת בריאן רסמוסן. שים לב שכמו רוב פונקציות המניפולציה של מחרוזת, רבות מהמספריות מקבלות קלט בודד. זה, כמובן, בגלל שהם אמורים לשמש עבור שאילתות, כמו בדוגמה האחרונה של XPath: //li[floor(text()) > 250]/@val
אם תשתמש בהם, כפי שעושות רוב הדוגמאות, בסופו של דבר תפעיל אותו בצומת הראשון שתואם לנתיב. ישנן גם כמה פונקציות המרת סוגים שכדאי להימנע מהן מכיוון של-JavaScript כבר יש בעיות המרה מסוג משלה. אבל יכולים להיות מקרים שבהם אתה רוצה להמיר מחרוזת למספר כדי לבדוק אותה מול מספר אחר. פונקציות שקובעות את סוג המשהו הן בוליאנית, מספר, מחרוזת וצומת. אלו הם סוגי הנתונים החשובים של XPath. וכפי שאתה יכול לדמיין, ניתן להשתמש ברוב הפונקציות הללו על סוגי נתונים שאינם צמתי DOM. לדוגמה, substring-after לוקח מחרוזת כפי שכבר סקרנו, אבל זה יכול להיות המחרוזת מתכונת href. זה גם יכול להיות רק מחרוזת:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
ברור שהדוגמה הזו תחזיר לנו את מערך התוצאות בתור ["עולם"]. כדי להראות זאת בפעולה, יצרתי דף הדגמה באמצעות פונקציות כנגד דברים שאינם צמתי DOM: ראה את ה-Pen queryXPath [מזלג] מאת Bryan Rasmussen. כדאי לשים לב להיבט המפתיע של פונקציית התרגום, שהוא שאם יש לך תו בארגומנט השני (כלומר, רשימת התווים שאתה רוצה לתרגם) ואין תו תואם לתרגם אליו, התו הזה יוסר מהפלט. לפיכך, זה:
translate('שלום, שמי איניגו מונטויה, הרגת את אבי, תתכונן למות','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
...תוצאות במחרוזת, כולל רווחים: [" * * ** "]
המשמעות היא שהאות "a" מתורגמת לכוכבית (*), אבל כל תו אחר שאין לו תרגום בהתחשב במחרוזת היעד מוסר לחלוטין. הרווח הלבן הוא כל מה שנשאר לנובין תווי "a" המתורגמים. ואז שוב, השאילתה הזו:
translate('שלום, שמי איניגו מונטויה, הרגת את אבי, תתכונן למות','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*******************************************************')")
...אין את הבעיה ומוציא תוצאה שנראית כך:
"***** *** **** *** ***** ******** *** ****** *** ****** ******** *** ***"
זה עשוי להדהים אותך שאין דרך קלה ב-JavaScript לעשות בדיוק את מה שפונקציית התרגום של XPath עושה, אם כי עבור מקרי שימוש רבים, replaceAll עם ביטויים רגולריים יכול להתמודד עם זה. אתה יכול להשתמש באותה גישה שהדגמתי, אבל זה לא אופטימלי אם כל מה שאתה רוצה זה לתרגם את המחרוזות. ההדגמה הבאה עוטפת את פונקציית התרגום של XPath כדי לספק גרסת JavaScript: ראה את פונקציית תרגום העט [מזלג] מאת בריאן רסמוסן. איפה אתה יכול להשתמש בדבר כזה? שקול הצפנת Caesar Cipher עם היסט של שלושה מקומות (לדוגמה, הצפנה מהשורה הראשונה משנת 48 לפנה"ס):
translate("קיסר מתכנן לחצות את הרוביקון!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
טקסט הקלט "קיסר מתכנן לחצות את הרוביקון!" תוצאות ב"Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" כדי לתת עוד דוגמה מהירה לאפשרויות שונות, הכנתי פונקציית מתכת שלוקחת קלט מחרוזת ומשתמשת בפונקציית תרגום כדי להחזיר את הטקסט, כולל כל התווים שמקבלים אומלאוטים. ראה את פונקציית המתכת Pen [מחולקת] מאת בריאן רסמוסן.
const metal = (str) => { return translate(str, "AOUaou","ÄÖÜäöü"); }
ואם מקבלים את הטקסט "Motley Crue ruler, rock on dudes!", מחזיר "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 בצומת הקשר שאינו הצומת של המסמך. ראה את ה-CSS של Pen ו-xpath ביחד [מחולקים] מאת בריאן רסמוסן. שאילתת ה-CSS היא .relatedarticles a, אשר מביאה את שני האלמנטים a ב-div שהוקצה לו מחלקה .relatedarticles. לאחר מכן יש שלוש שאילתות "גרועות", כלומר שאילתות שאינן עושות את מה שאנו רוצים שהן יעשו כאשר הן פועלות עם האלמנטים הללו כצומת ההקשר. אני יכול להסביר למה הם מתנהגים אחרת ממה שאתה יכול לצפות. שלוש השאילתות הרעות המדוברות הן:
//text(): מחזירה את כל הטקסט במסמך. //a/text(): מחזירה את כל הטקסט בתוך קישורים במסמך. ./a/text(): לא מחזירה תוצאות.
הסיבה לתוצאות אלו היא שבעוד שההקשר שלך הוא אלמנטים המוחזרים משאילתת ה-CSS, // נוגד את כל המסמך. זה הכוח של XPath; CSS לא יכול לעבור מצומת למעלה לאב קדמון ואז לאח של אותו אב קדמון, וללכת למטה לצאצא של אותו אח. אבל XPath יכול. בינתיים, ./ שואל את הילדים של הצומת הנוכחי, כאשר הנקודה (.) מייצגת את הצומת הנוכחי, והלוכסן קדימה (/) מייצג מעבר לצומת צאצא כלשהו - אם זה תכונה, אלמנט או טקסט נקבע על ידי החלק הבא של הנתיב. אבל אין אלמנט שנבחר על ידי שאילתת ה-CSS, ולכן גם השאילתה הזו לא מחזירה כלום. יש שלוש שאילתות טובות בהדגמה האחרונה:
.//text(), ./text(), normalize-space(./text()).
השאילתה normalize-space מדגימה שימוש בפונקציית XPath, אך גם מתקנת בעיה הכלולה בשאילתות האחרות. ה-HTML בנוי כך:
אוטומציה של בדיקת התכונות שלך עם Selenium WebDriver
השאילתה מחזירה הזנת שורה בתחילת ובסוף צומת הטקסט,ו-normalize-space מסיר את זה. שימוש בכל פונקציית 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, נוכל לעשות את הפעולות הבאות (מומלץ להשתמש במילולי תבנית): `תרגם( תת מחרוזת( substring-after(./@href, 'www.smashingmagazine.com/') ,9), '/','')'
זה נהיה קצת מורכב מדי עד שהוא זקוק להערות המתארות את מה שהוא עושה: קח את כל כתובת האתר מתכונת href אחרי www.smashingmagazine.com/, הסר את תשעת התווים הראשונים, ואז תרגם את התו הקדמי (/) לכלום כדי להיפטר מהלוכסן הקדמי המסתיים. המערך שהתקבל:
["feature-testing-selenium-webdriver","automated-test-results-improve-accessibility"]
מקרי שימוש נוספים ב-Xpath XPath באמת יכול לזרוח בבדיקות. הסיבה לא קשה לראות, מכיוון שניתן להשתמש ב-Xpath כדי לקבל כל אלמנט ב-DOM, מכל מיקום ב-DOM, בעוד ש-CSS לא יכול. אינך יכול לסמוך על כך ששיעורי CSS יישארו עקביים במערכות בנייה מודרניות רבות, אך עם XPath, אנו מסוגלים לבצע התאמות חזקות יותר לגבי תוכן הטקסט של אלמנט, ללא קשר למבנה ה-DOM המשתנה. היה מחקר על טכניקות המאפשרות לך לבצע בדיקות XPath עמידות. אין דבר גרוע יותר מאשר בדיקות מתקלפות ונכשלות רק בגלל שבורר CSS כבר לא עובד כי שם משהו שונה או הוסר. XPath גם ממש מעולה בחילוץ איתור מרובה. יש יותר מדרך אחת להשתמש בשאילתות XPath כדי להתאים אלמנט. הדבר נכון גם לגבי CSS. אבל שאילתות XPath יכולות להתעמק בדברים בצורה ממוקדת יותר שמגבילה את מה שמוחזר, ומאפשרת לך למצוא התאמה ספציפית שבה עשויות להיות כמה התאמות אפשריות. לדוגמה, אנו יכולים להשתמש ב-XPath כדי להחזיר אלמנט h2 ספציפי הכלול בתוך div שעוקב מיד אחרי div אח אשר, בתורו, מכיל רכיב תמונה ילד עם תכונת data-testID="leader" עליו:
אל תבין את הכותרת הזו
אל תקבל גם את הכותרת הזו
הכותרת של תמונת המנהיג
זו השאילתה: document.queryXPaths(` //div[ הבא-אחי::div[1] /img[@data-testID='leader'] ] /h2/ טקסט() `);
בוא ניכנס להדגמה כדי לראות איך כל זה מתחבר: ראה את שאילתת העט H2 Complex [מחולקת] מאת בריאן רסמוסן. אז כן. ישנם הרבה נתיבים אפשריים לכל רכיב בבדיקה באמצעות XPath. הוצאה משימוש XSLT 1.0 ציינתי מוקדם שצוות Chrome מתכנן להסיר את תמיכת XSLT 1.0 מהדפדפן. זה חשוב מכיוון ש-XSLT 1.0 משתמש בתכנות ממוקדות XML עבור טרנספורמציה של מסמכים, אשר, בתורו, מסתמך על XPath 1.0, וזה מה שנמצא ברוב הדפדפנים. כשזה יקרה, נאבד רכיב מרכזי של XPath. אבל בהתחשב בעובדה ש-XPath הוא באמת מצוין לכתיבת מבחנים, אני מוצא את זה לא סביר ש-Xpath בכללותו ייעלם בקרוב. עם זאת, שמתי לב שאנשים מתעניינים בתכונה כאשר היא נלקחת משם. וזה בהחלט נכון במקרה של XSLT 1.0 שהוצא משימוש. יש דיון שלם שמתנהל ב-Hacker News מלא בטיעונים נגד ההדחה. הפוסט עצמו הוא דוגמה מצוינת ליצירת מסגרת בלוגים עם XSLT. אַתָהאתה יכול לקרוא את הדיון בעצמך, אבל זה נכנס לאופן שבו JavaScript עשוי לשמש כסם עבור XLST לטיפול בסוגים כאלה של מקרים. ראיתי גם הצעות שדפדפנים צריכים להשתמש ב-SaxonJS, שהיא יציאה למנועי Saxon XSLT, XQUERY ו-Xpath של JavaScript. זה רעיון מעניין, במיוחד מכיוון ש-Saxon-JS מיישמת את הגרסה הנוכחית של מפרטים אלה, בעוד שאין דפדפן שמיישם גרסה כלשהי של XPath או XSLT מעבר ל-1.0, ואף אחד שמיישם את XQuery. פניתי לנורם טובי-וולש ב-Saxonica, החברה שמאחורי SaxonJS וגרסאות אחרות של המנוע ה-Saxon. הוא אמר: "אם ספק דפדפן כלשהו היה מעוניין לקחת את SaxonJS כנקודת מוצא לשילוב טכנולוגיות XML מודרניות בדפדפן, נשמח לדבר איתם על כך." - נורם טובי-וולש
אבל הוסיף גם: "אופתע מאוד אם מישהו חושב שלקחת את SaxonJS במתכונתו הנוכחית והורדתו לבניית הדפדפן ללא שינוי תהיה הגישה האידיאלית. ספק דפדפן, מטבעו של העובדה שהם בונים את הדפדפן, יכול לגשת לאינטגרציה ברמה הרבה יותר עמוקה ממה שאנחנו יכולים 'מבחוץ'." - נורם טובי-וולש
ראוי לציין שההערות של טובי-וולש הגיעו כשבוע לפני הודעת הביטול משימוש XSLT. מסקנה יכולתי להמשיך עוד ועוד. אבל אני מקווה שזה הוכיח את הכוח של XPath ונתן לך המון דוגמאות המדגימות איך להשתמש בו כדי להשיג דברים גדולים. זוהי דוגמה מושלמת לטכנולוגיה ישנה יותר בערימת הדפדפן שעדיין יש לה הרבה שימושים היום, גם אם מעולם לא ידעת שהיא קיימת או שמעולם לא שקלת להגיע אליה. קריאה נוספת
"שיפור החוסן של בדיקות אינטרנט אוטומטיות עם שפה טבעית" (ספרייה דיגיטלית של ACM) מאת Maroun Ayli, Youssef Bakouny, Nader Jalloul, Rima Kilany מאמר זה מספק דוגמאות רבות של XPath לכתיבת מבחנים עמידים. XPath (MDN) זהו מקום מצוין להתחיל בו אם אתה רוצה הסבר טכני המפרט כיצד XPath עובד. הדרכה של XPath (ZVON) מצאתי שהמדריך הזה הוא המועיל ביותר בלמידה שלי, הודות לשפע של דוגמאות והסברים ברורים. XPather הכלי האינטראקטיבי הזה מאפשר לך לעבוד ישירות עם הקוד.
