මම වසර ගණනාවක් පුරා ප්රවණතාවක් දැකීමට ප්රමාණවත් තරම් ඉදිරිපෙළ සංවර්ධනයේ සිටිමි: තරුණ සංවර්ධකයින් එහි ඓතිහාසික සන්දර්භය තේරුම් නොගෙන වැඩසටහන්කරණයේ නව ආදර්ශයක් සමඟ වැඩ කරයි. ඇත්ත වශයෙන්ම, යමක් නොදැන සිටීම සම්පූර්ණයෙන්ම තේරුම් ගත හැකිය. වෙබ් යනු විවිධ කුසලතා සහ විශේෂතා සහිත ඉතා විශාල ස්ථානයක් වන අතර, අප නොදන්නා දේ අපි සැමවිටම නොදනිමු. මෙම ක්ෂේත්රයේ ඉගෙනීම එක් වරක් සිදුවී අවසන් වන දෙයකට වඩා අඛණ්ඩ ගමනකි. කාරණය: පරිශීලකයන් UI හි ඇති විශේෂිත ටැබ් එකකින් ඉවතට ගමන් කරන්නේ දැයි පැවසිය හැකිදැයි මගේ කණ්ඩායමේ කෙනෙක් ඇසුවා. මම JavaScript හි පෙර බාගැනීමේ සිදුවීම පෙන්වා දුන්නෙමි. නමුත් මීට පෙර මෙය විසඳා ඇති අය මෙය කළ හැකි බව දනිති, මන්ද ඔවුන් වෙනත් වෙබ් අඩවි වල සුරකින ලද දත්ත පිළිබඳ ඇඟවීම් සමඟ පහර දී ඇති අතර, ඒ සඳහා පෙර බාගැනීම සාමාන්ය භාවිතයකි. මම pageHide සහ visibility වෙනස් කරන්න සිදුවීම් මගේ සගයාට හොඳ පියවරක් සඳහා පෙන්වා දුන්නෙමි. මම කොහොමද ඒ ගැන දැනගත්තේ? එය වෙනත් ව්යාපෘතියකින් මතු වූ නිසා, මුලදී ජාවාස්ක්රිප්ට් ඉගෙන ගන්නා විට මම ඒ ගැන අධ්යයනය කළ නිසා නොවේ. කාරණය නම් නවීන ඉදිරිපස රාමු ඒවාට පෙර සිටි තාක්ෂණ දැවැන්තයින්ගේ උරහිස් මත නැගී සිටීමයි. ඔවුන් බොහෝ විට වඩා හොඳ සංවර්ධක අත්දැකීමක් සඳහා වියුක්ත සංවර්ධන භාවිතයන්, සාම්ප්රදායිකව අත්යවශ්ය ඉදිරිපස-අන්ත සංකල්ප සියල්ල දැන සිටිය යුතු දේ දැන ගැනීමට හෝ ස්පර්ශ කිරීමට ඇති අවශ්යතාවය අඩු කරයි. CSS Object Model (CSSOM) සලකා බලන්න. CSS සහ JavaScript හි වැඩ කරන ඕනෑම කෙනෙකුට CSSOM අත්දැකීමක් ඇති බව ඔබ අපේක්ෂා කළ හැකිය, නමුත් එය සැමවිටම එසේ නොවනු ඇත. දැනට තෝරාගත් ගෙවීම් සපයන්නා සඳහා මෝස්තර පත්රිකාවක් පූරණය කිරීමට අවශ්ය තැන මා වැඩ කළ ඊ-වාණිජ්ය අඩවියක් සඳහා ප්රතික්රියා ව්යාපෘතියක් තිබුණි. ගැටලුව වූයේ එය නිශ්චිත පිටුවක පමණක් අවශ්ය වූ විට සෑම පිටුවකම ස්ටයිල් ෂීට් පූරණය වීමයි. මෙය සිදු කිරීමට පැවරී ඇති සංවර්ධකයා කිසි විටෙක මෝස්තර පත්රිකාවක් ගතිකව පූරණය කර නොතිබුණි. නැවතත්, ප්රතික්රියා ඔබ වෙත ළඟා විය හැකි සාම්ප්රදායික ප්රවේශය වියුක්ත කරන විට මෙය සම්පූර්ණයෙන්ම තේරුම් ගත හැකිය. CSSOM ඔබේ එදිනෙදා වැඩ කටයුතුවලදී ඔබට අවශ්ය දෙයක් නොවේ. නමුත් එය එක් අවස්ථාවකදී පවා ඔබට යම් අවස්ථාවක දී එය සමඟ අන්තර් ක්රියා කිරීමට අවශ්ය වනු ඇත. මෙම අත්දැකීම් මෙම ලිපිය ලිවීමට මා පෙලඹවූයේය. ඔබගේ එදිනෙදා වැඩ කටයුතු වලදී ඔබ කිසිවිටෙක සෘජුව ස්පර්ශ නොකළ හැකි බොහෝ වෙබ් විශේෂාංග සහ තාක්ෂණයන් වනයේ ඇත. සමහර විට ඔබ වෙබ් සංවර්ධනයට තරමක් අලුත් වන අතර ඔබ ඒවා ගැඹුරින් හෝ කිසිසේත් දැන ගැනීමට අවශ්ය නොවන නිශ්චිත රාමුවක වියුක්තකරණයේ ගිලී සිටින නිසා ඒවා ගැන නොදැන සිටින්නට ඇත. මම විශේෂයෙන්ම කතා කරන්නේ XML ගැන, අපි බොහෝ දෙනෙක් දන්නා පැරණි භාෂාවක් HTML වලින් සම්පූර්ණයෙන්ම වෙනස් නොවේ. මම මෙය ගෙන එන්නේ මෑතකාලීන WHATWG සාකච්ඡා නිසා XSLT ක්රමලේඛනය ලෙස හැඳින්වෙන XML තොගයේ සැලකිය යුතු කොටසක් බ්රවුසරයෙන් ඉවත් කළ යුතු බව ය. මෙය හරියටම වසර ගණනාවක් තිස්සේ අප සතුව තිබූ පැරණි, පවතින තාක්ෂණය වන අතර එය මගේ කණ්ඩායම සිටි CSSOM තත්ත්වය වැනි ප්රායෝගික දෙයක් සඳහා භාවිතා කළ හැකිය. ඔබ මීට පෙර XSLT සමඟ වැඩ කර තිබේද? අපි මෙම පැරණි තාක්ෂණයට දැඩි ලෙස නැඹුරු වී අද සැබෑ ලෝකයේ ගැටලු විසඳීමට XML සන්දර්භයට පිටින් එහි විශේෂාංග භාවිත කරන්නේ දැයි බලමු. XPath: මධ්යම API සමහර විට සෘජු XML ඉදිරිදර්ශනයකින් පිටත වඩාත්ම ප්රයෝජනවත් වන වඩාත්ම වැදගත් XML තාක්ෂණය වන්නේ XPath, එක් මූල මූලද්රව්යයක් සහිත සලකුණු ගසක ඕනෑම නෝඩයක් හෝ ගුණාංගයක් සොයා ගැනීමට ඔබට ඉඩ සලසන විමසුම් භාෂාවකි. මට XSLT සඳහා පුද්ගලික සෙනෙහසක් ඇත, නමුත් එයද XPath මත රඳා පවතින අතර, ශ්රේණිගත කිරීමේ වැදගත්කමේදී පුද්ගලික සෙනෙහස පසෙකට දැමිය යුතුය. XSLT ඉවත් කිරීමේ තර්කය XPath ගැන කිසිදු සඳහනක් නොකරයි, එබැවින් එය තවමත් අවසර දී ඇතැයි මම සිතමි. XPath මෙම තාක්ෂණ කට්ටලයේ කේන්ද්රීය සහ වැදගත්ම API වන නිසා එය හොඳයි, විශේෂයෙන් සාමාන්ය XML භාවිතයෙන් පිටත භාවිතා කිරීමට යමක් සොයා ගැනීමට උත්සාහ කරන විට. එය වැදගත් වන්නේ, ඔබේ පිටුවේ ඇති බොහෝ මූලද්රව්ය සොයා ගැනීමට CSS තේරීම්කාරක භාවිතා කළ හැකි නමුත්, ඔවුන්ට ඒවා සියල්ලම සොයාගත නොහැකි බැවිනි. තවද, DOM හි එහි වත්මන් පිහිටීම මත පදනම්ව මූලද්රව්යයක් සොයා ගැනීමට CSS තේරීම් භාවිතා කළ නොහැක. XPath හැක. දැන්, මෙය කියවන ඔබගෙන් සමහරෙක් XPath දැන සිටිය හැකි අතර සමහරු නොදැන සිටිය හැක. XPath යනු තාක්ෂණයේ ඉතා විශාල ක්ෂේත්රයක් වන අතර, මට ඇත්ත වශයෙන්ම සියලු මූලික කරුණු ඉගැන්විය නොහැකි අතර එය සමඟ කළ යුතු හොඳ දේවල් මෙවැනි තනි ලිපියකින් ඔබට පෙන්විය නොහැක. මම ඇත්ත වශයෙන්ම එම ලිපිය ලිවීමට උත්සාහ කළ නමුත් සාමාන්ය Smashing සඟරා ප්රකාශනය වචන 5,000 කට වඩා වැඩි නොවේ. මම දැනටමත් වඩා වැඩි වියවචන 2,000ක් මුලික කරුණු වලින් අඩක් පමණි. එබැවින්, මම XPath සමඟින් රසවත් දේවල් කිරීමට පටන් ගන්නා අතර ඔබට මෙම දේවල් රසවත් යැයි හැඟේ නම් ඔබට මූලික කරුණු සඳහා භාවිතා කළ හැකි සබැඳි කිහිපයක් ලබා දෙන්නෙමි. XPath සහ CSS ඒකාබද්ධ කිරීම මූලද්රව්ය විමසන විට CSS තේරීම්කරුවන්ට කළ නොහැකි බොහෝ දේ XPath හට කළ හැක. නමුත් CSS තේරීම්කරුවන්ට XPath හට කළ නොහැකි දේවල් කිහිපයක් කළ හැකිය, එනම්, පන්ති නාමයෙන් මූලද්රව්ය විමසන්න.
CSS XPath .myClass /*[අඩංගු (@class, "myClass")]
මෙම උදාහරණයේදී, CSS විසින් .myClass පන්ති නාමයක් අඩංගු මූලද්රව්ය විමසයි. මේ අතර, XPath උදාහරණය "myClass" තන්තුව සමඟ ගුණාංග පන්තියක් අඩංගු මූලද්රව්ය විමසයි. වෙනත් වචන වලින් කිවහොත්, එය .myClass පන්තියේ නම සහිත මූලද්රව්ය ඇතුළු ඕනෑම උපලක්ෂණයක myClass සහිත මූලද්රව්ය තෝරනවා — මෙන්ම .myClass2 වැනි තන්තුවෙහි “myClass” සහිත මූලද්රව්ය ද තෝරයි. XPath ඒ අර්ථයෙන් පුළුල් වේ. ඉතින්, නැහැ. අපි CSS ඉවත් කර XPath හරහා සියලුම මූලද්රව්ය තෝරා ගැනීම ආරම්භ කළ යුතු යැයි මම යෝජනා නොකරමි. කාරණය එය නොවේ. කාරණය නම්, එය බ්රවුසර තොගයේ පැරණි තාක්ෂණයක් වන අතර බැලූ බැල්මට පැහැදිලිව පෙනෙන්නට නොතිබුණද, CSS හට කළ නොහැකි සහ තවමත් ඉතා ප්රයෝජනවත් විය හැකි දේවල් XPath හට කළ හැකිය. අපට හැකි නිසා පමණක් නොව, අපි මෙම තාක්ෂණ දෙක එකට භාවිතා කරමු, නමුත් අපි ක්රියාවලියේදී XPath ගැන යමක් ඉගෙන ගන්නා නිසා, එය ඔබගේ තොගයේ තවත් මෙවලමක් බවට පත් කර ගනිමු - ඔබ නොදැන සිටි එකක් මෙතෙක් තිබී ඇත! ගැටළුව වන්නේ JavaScript හි document.evaluate ක්රමය සහ JavaScript සඳහා CSS API සමඟ අප භාවිතා කරන විවිධ විමසුම් තේරීම් ක්රම නොගැලපීමයි. අපව ආරම්භ කිරීම සඳහා මම ගැළපෙන විමසුම් API එකක් සාදා ඇත, නමුත් පිළිගත හැකි වුවද, එය අප මෙහි කරමින් සිටින දෙයින් ඉවත්වීමක් බැවින් මම ඒ ගැන වැඩි යමක් සිතුවේ නැත. නැවත භාවිතා කළ හැකි විමසුම් කන්ස්ට්රැක්ටරයක තරමක් සරල ක්රියාකාරී උදාහරණයක් මෙන්න: Bryan Rasmussen ගේ Pen queryXPath [forked] බලන්න. මම ලේඛන වස්තුව මත ක්රම දෙකක් එකතු කර ඇත: queryCSSSelectors (අත්යවශ්යයෙන්ම querySelectorAll) සහ queryXPaths. මේ දෙකම queryResults වස්තුවක් ලබා දෙයි:
{ විමසුම් වර්ගය: නෝඩ් | තන්තුව | අංකය | බූලියන්, ප්රතිඵල: ඕනෑම[] // html මූලද්රව්ය, xml මූලද්රව්ය, නූල්, අංක, බූලියන්ස්, queryCSSSelectors: (විමසුම: string, සංශෝධනය: boolean) => queryResults, queryXpaths: (විමසුම: string, සංශෝධනය: boolean) => queryResults }
queryCSSSelectors සහ queryXpaths ශ්රිතයන් ඔබ ලබා දෙන විමසුම ප්රතිඵල අරාවේ ඇති මූලද්රව්ය හරහා ක්රියාත්මක කරයි, ඇත්ත වශයෙන්ම ප්රතිඵල අරාව නෝඩ් ආකාරයේ පවතින තාක් කල්. එසේ නොමැතිනම්, එය හිස් අරාවක් සහ නෝඩ් වර්ගයක් සහිත විමසුම් ප්රතිඵලයක් ලබා දෙනු ඇත. සංශෝධන දේපල සත්ය ලෙස සකසා ඇත්නම්, ශ්රිත ඔවුන්ගේම විමසුම් ප්රතිඵල වෙනස් කරයි. කිසිම අවස්ථාවක මෙය නිෂ්පාදන පරිසරයක භාවිතා නොකළ යුතුය. මම මේ ආකාරයෙන් කරන්නේ විමසුම් API දෙක එකට භාවිතා කිරීමේ විවිධ බලපෑම් නිරූපණය කිරීමට පමණි. උදාහරණ විමසුම් මට විවිධ XPath විමසුම් සඳහා උදාහරණ කිහිපයක් පෙන්වීමට අවශ්ය වන අතර එමඟින් ඔවුන්ට කළ හැකි ප්රබල දේවල් සහ වෙනත් ප්රවේශයන් වෙනුවට ඒවා භාවිතා කළ හැකි ආකාරය පෙන්නුම් කරයි. පළමු උදාහරණය //li/text(). මෙය සියලුම li මූලද්රව්ය විමසා ඒවායේ පෙළ නෝඩ් ආපසු ලබා දෙයි. එබැවින්, අපි පහත HTML විමසන්නේ නම්:
- එකක්
- දෙකක්
- තුන
…මෙය ආපසු එවනු ලැබේ:
{"queryType":"xpathEvaluate","ප්රතිඵල":["එක","දෙක","තුන"],"ප්රතිඵල වර්ගය":"string"}
වෙනත් වචන වලින් කිවහොත්, අපට පහත අරාව ලැබේ: ["එක", "දෙක", "තුන"]. සාමාන්යයෙන්, ඔබ එය ලබා ගැනීම සඳහා li මූලද්රව්ය සඳහා විමසනු ඇත, එම විමසුමේ ප්රතිඵලය අරාවක් බවට පත් කර, අරාව සිතියම් ගත කර, එක් එක් මූලද්රව්යයේ පෙළ නෝඩය ආපසු ලබා දෙන්න. නමුත් අපට එය XPath සමඟ වඩාත් සංක්ෂිප්තව කළ හැකිය: document.queryXPaths("//li/text()").ප්රතිඵල.
පෙළ නෝඩයක් ලබා ගැනීමේ ක්රමය වන්නේ ශ්රිත අත්සනක් මෙන් පෙනෙන text() භාවිතා කිරීම බව සලකන්න - සහ එයයි. එය මූලද්රව්යයක පෙළ නෝඩය ආපසු ලබා දෙයි. අපගේ උදාහරණයේ, සලකුණු කිරීමේදී li මූලද්රව්ය තුනක් ඇත, එක් එක් පෙළ ("එක", "දෙක" සහ "තුන") අඩංගු වේ.
පෙළ() විමසුමක තවත් එක් උදාහරණයක් බලමු. මෙය අපගේ සලකුණු කිරීම යැයි උපකල්පනය කරන්න:
අපි href ගුණාංග අගය ලබා දෙන විමසුමක් ලියන්නෙමු: document.queryXPaths("//a[text() = 'Sign In']/@href").ප්රතිඵල.
මෙය පසුගිය උදාහරණය මෙන් වත්මන් ලේඛනයේ XPath විමසුමකි, නමුත් මෙවර අපි "පිවිසීම" යන පාඨය අඩංගු සබැඳියක (මූලද්රව්යයක) href ගුණාංගය ආපසු ලබා දෙමු. ඇත්ත නැවත පැමිණියේයප්රතිඵලය ["/login.html"] වේ. XPath කාර්යයන් දළ විශ්ලේෂණය XPath කාර්යයන් ගණනාවක් ඇති අතර, ඔබ ඒවා බොහෝ විට නුහුරු නුපුරුදු ය. පහත සඳහන් දෑ ඇතුළුව දැන ගැනීම වටී යැයි මම සිතමි.
starts-withI text එකක් වෙනත් විශේෂිත පෙළ උදාහරණයකින් ආරම්භ වන්නේ නම්, href උපලක්ෂණයක් http: සමඟ ආරම්භ වන්නේ නම් starts-with(@href, 'http:') true ලබා දෙයි. පාඨයක වෙනත් විශේෂිත පෙළ උදාහරණයක් තිබේ නම්, text (text(), "Smashing Magazine") Text node එකක ඕනෑම තැනක "Smashing Magazine" යන වචන අඩංගු නම් එය සත්ය වේ. countReturns විමසුමකට ගැළපීම් කීයක් තිබේද යන්න ගණනය කරයි. උදාහරණයක් ලෙස, count(//*[starts-with(@href, 'http:']) මඟින් http: සමඟින් ආරම්භ වන පෙළ අඩංගු href ගුණාංගයක් සහිත මූලද්රව්ය සන්දර්භය නෝඩයේ කොපමණ සබැඳි තිබේද යන්න ගණනය කරයි. substringJavaScript substring මෙන් ක්රියා කරයි, ඔබ තන්තුව තර්කයක් ලෙස ලබා දීම හැර. උදාහරණයක් ලෙස, substring("my text", 2, 4) "y t" ලබා දෙයි. substring-before තවත් තන්තුවකට පෙර තන්තුවක කොටස ආපසු ලබා දෙයි. උදාහරණයක් ලෙස, substing-before("my text", " ") returns "my". ඒ හා සමානව, substring-before("hi","bye") හිස් තන්තුවක් ලබා දෙයි. substring-after තවත් තන්තුවකට පසුව තන්තුවක කොටස ආපසු ලබා දෙයි. උදාහරණයක් ලෙස, substing-after("my text", " ") returns "text". ඒ හා සමානව, substring-after("hi","bye") හිස් තන්තුවක් ලබා දෙයි. සාමාන්යකරණය-අවකාශය ප්රමුඛ සහ පසුපස සුදු අවකාශය ඉවත් කිරීමෙන් සහ සුදු අවකාශ අක්ෂර අනුක්රම තනි ඉඩකින් ප්රතිස්ථාපනය කිරීමෙන් සාමාන්යකරණය වූ සුදු අවකාශය සමඟ තර්ක තන්තුව ආපසු ලබා දෙයි. notReturns boolean true නම් තර්කය අසත්ය නම්, එසේ නොමැතිනම් අසත්ය වේ. trueReturns boolean true. බොරු බූලියන් අසත්ය ලබා දෙයි. concat JavaScript concat හා සමාන දෙයක්, ඔබ එය තන්තුවක් මත ක්රමයක් ලෙස ක්රියාත්මක කරන්නේ නැත. ඒ වෙනුවට, ඔබ ඔබට සම්බන්ධ කිරීමට අවශ්ය සියලුම නූල් දමන්න. string-lengthමෙය JavaScript string-දිගට සමාන නොවේ, නමුත් තර්කයක් ලෙස ලබා දී ඇති තන්තුවේ දිග ආපසු ලබා දෙයි. translateමෙය තන්තුවක් ගෙන දෙවන තර්කය තුන්වන තර්කයට වෙනස් කරයි. උදාහරණයක් ලෙස, පරිවර්තනය ("abcdef", "abc", "XYZ") XYZdef ප්රතිදානය කරන්න.
මෙම විශේෂිත XPath ශ්රිතයන් හැරුණු විට, ඒවායේ JavaScript සගයන් - හෝ මූලික වශයෙන් ඕනෑම ක්රමලේඛන භාෂාවක සගයන් ලෙස ක්රියා කරන වෙනත් ශ්රිත ගණනාවක් තිබේ - ඔබට බිම, සිවිලිම, වටය, එකතුව සහ යනාදිය වැනි ප්රයෝජනවත් වනු ඇත. පහත ආදර්ශනය මෙම එක් එක් කාර්යය නිදර්ශනය කරයි: Bryan Rasmussen විසින් Pen XPath සංඛ්යාත්මක ශ්රිත [forked] බලන්න. බොහෝ තන්තු හැසිරවීමේ ශ්රිතයන් මෙන්, සංඛ්යාත්මක බොහෝ ඒවා තනි ආදානයක් ගන්නා බව සලකන්න. මෙය, ඇත්ත වශයෙන්ම, අවසාන XPath උදාහරණයේ මෙන්, ඒවා විමසීම සඳහා භාවිතා කළ යුතු බැවිනි: //li[මහල(පෙළ()) > 250]/@val
ඔබ ඒවා භාවිතා කරන්නේ නම්, බොහෝ උදාහරණ මෙන්, ඔබ එය මාර්ගයට ගැලපෙන පළමු නෝඩය මත ධාවනය කරයි. JavaScript දැනටමත් තමන්ගේම ආකාරයේ පරිවර්තන ගැටළු ඇති නිසා ඔබ බොහෝ විට වළක්වා ගත යුතු සමහර ආකාරයේ පරිවර්තන කාර්යයන් ද ඇත. නමුත් වෙනත් අංකයකට එරෙහිව එය පරීක්ෂා කිරීම සඳහා ඔබට තන්තුවක් අංකයකට පරිවර්තනය කිරීමට අවශ්ය අවස්ථා තිබිය හැක. යම් දෙයක වර්ගය සකසන ශ්රිත වන්නේ බූලියන්, අංකය, නූල් සහ නෝඩයයි. මේවා වැදගත් XPath දත්ත වර්ග වේ. ඔබ සිතන පරිදි, මෙම කාර්යයන් බොහොමයක් DOM නෝඩ් නොවන දත්ත වර්ග මත භාවිතා කළ හැක. උදාහරණයක් ලෙස, substring-after අපි දැනටමත් ආවරණය කර ඇති පරිදි තන්තුවක් ගනී, නමුත් එය href උපලක්ෂණයකින් තන්තුව විය හැක. එය තන්තුවක් ද විය හැකිය:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
පැහැදිලිවම, මෙම උදාහරණය අපට ප්රතිඵල අරාව ["ලෝකය"] ලෙස ලබා දෙනු ඇත. මෙය ක්රියාවෙන් පෙන්වීමට, මම DOM නෝඩ් නොවන දේවල් වලට එරෙහිව ශ්රිත භාවිතා කරමින් demo පිටුවක් සාදා ඇත: Bryan Rasmussen ගේ Pen queryXPath [forked] බලන්න. පරිවර්තන ශ්රිතයේ විස්මිත අංගය ඔබ සටහන් කළ යුතුය, එනම් ඔබට දෙවන තර්කයේ (එනම්, ඔබට පරිවර්තනය කිරීමට අවශ්ය අක්ෂර ලැයිස්තුව) අක්ෂරයක් තිබේ නම් සහ පරිවර්තනය කිරීමට ගැළපෙන අක්ෂරයක් නොමැති නම්, එම චරිතය ප්රතිදානයෙන් ඉවත් කරනු ලැබේ. මේ අනුව, මෙය:
පරිවර්තනය කරන්න ('හෙලෝ, මගේ නම ඉනිගෝ මොන්ටෝයා, ඔබ මගේ පියා මැරුවා, මැරෙන්න සූදානම්','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…අවකාශ ඇතුළුව තන්තුවෙහි ප්රතිඵල: [" * * ** "]
මෙයින් අදහස් කරන්නේ “a” අක්ෂරය තරු ලකුණකට (*) පරිවර්තනය වෙමින් පවතින නමුත් ඉලක්ක තන්තුව ලබා දී ඇති පරිවර්තනයක් නොමැති අනෙක් සෑම අක්ෂරයක්ම සම්පූර්ණයෙන්ම ඉවත් කර ඇති බවයි. අපට ඉතිරිව ඇත්තේ සුදු අවකාශය පමණිපරිවර්තනය කරන ලද "a" අක්ෂර අතර. ඉන්පසු නැවතත්, මෙම විමසුම:
පරිවර්තනය කරන්න ('හෙලෝ, මගේ නම ඉනිගෝ මොන්ටෝයා, ඔබ මගේ පියා මැරුවා, මැරෙන්න සූදානම්','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*******************************************************************************************************************************************************************************************************
… ගැටලුවක් නොමැති අතර ප්රතිඵලයක් මෙලෙස දිස්වේ:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ****"
XPath පරිවර්තන ශ්රිතය කරන දේ හරියටම කිරීමට ජාවාස්ක්රිප්ට් හි පහසු ක්රමයක් නොමැති බව ඔබට වැටහෙනු ඇත, නමුත් බොහෝ භාවිත අවස්ථා සඳහා, සියල්ල සාමාන්ය ප්රකාශන සමඟ එය හැසිරවිය හැක. ඔබට මා පෙන්වා ඇති ප්රවේශයම භාවිතා කළ හැක, නමුත් ඔබට අවශ්ය වන්නේ තන්තු පරිවර්තනය කිරීමට නම් එය උපප්රශස්ත වේ. ජාවාස්ක්රිප්ට් අනුවාදයක් සැපයීම සඳහා පහත ආදර්ශනය XPath හි පරිවර්තන කාර්යය ආවරණය කරයි: Bryan Rasmussen විසින් Pen translate function [forked] බලන්න. ඔබට මෙවැනි දෙයක් භාවිතා කළ හැක්කේ කොතැනින්ද? ස්ථාන තුනක ඕෆ්සෙට් සහිත සීසර් කේතාංක සංකේතනය සලකා බලන්න (උදා: ක්රි.පූ. 48 සිට ඉහළ පෙළේ සංකේතනය):
පරිවර්තනය කරන්න ("සීසර් රුබිකන් තරණය කිරීමට සැලසුම් කරයි!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
ආදාන පාඨය "සීසර් රුබිකන් තරණය කිරීමට සැලසුම් කරයි!" "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" විවිධ විභවයන් පිළිබඳ තවත් ඉක්මන් උදාහරණයක් දීමට, මම ලෝහ ශ්රිතයක් සෑදුවෙමි, එය තන්තු ආදානයක් ලබා ගන්නා අතර umlauts ගන්නා සියලුම අක්ෂර ඇතුළුව පෙළ ආපසු ලබා දීම සඳහා පරිවර්තන ශ්රිතයක් භාවිතා කරයි. Bryan Rasmussen විසින් Pen metal ශ්රිතය [forked] බලන්න.
const metal = (str) => { ආපසු පරිවර්තනය (str, "AOUaou","ÄÖÜäöü"); }
තවද, “Motley Crue Rules, Rock on dudes!” යන පාඨය ලබා දෙන්නේ නම්, “Mötley Crüe rüles, röck ön düdes!” ආපසු ලබා දෙයි. නිසැකවම, කෙනෙකුට මෙම ශ්රිතයේ සියලු ආකාරයේ උපහාසාත්මක භාවිතයන් තිබිය හැකිය. ඒ ඔබ නම්, මෙම TVTropes ලිපිය ඔබට බොහෝ ආශ්වාදයක් ලබා දිය යුතුය. XPath සමඟ CSS භාවිතා කිරීම XPath සමඟින් CSS තේරීම්කාරක භාවිතා කිරීමට අපගේ ප්රධාන හේතුව මතක තබා ගන්න: CSS පන්තියක් යනු කුමක්දැයි බොහෝ දුරට තේරුම් ගෙන ඇති අතර, XPath සමඟින් ඔබට කළ හැකි හොඳම දෙය වන්නේ පන්ති ගුණාංගයේ තන්තු සංසන්දනය කිරීමයි. එය බොහෝ අවස්ථාවලදී වැඩ කරනු ඇත. නමුත් ඔබ කවදා හෝ .primaryLinks සහ .primaryLinks2 නමින් පන්ති නිර්මාණය කර, ඔබ .primaryLinks පන්තිය ලබා ගැනීමට XPath භාවිතා කරමින් සිටින අවස්ථාවකට මුහුණ දීමට සිදුවුවහොත්, එවිට ඔබට ගැටලු ඇති වීමට ඉඩ ඇත. එවැනි මෝඩ කිසිවක් නොමැති තාක්, ඔබ බොහෝ විට XPath භාවිතා කරනු ඇත. නමුත් එවැනි මෝඩ වැඩ කරන මිනිසුන් සිටින ස්ථානවල මම වැඩ කර ඇති බව වාර්තා කිරීමට කණගාටුයි. මෙන්න CSS සහ XPath එකට භාවිතා කරන තවත් demo එකක්. ලේඛනයේ නෝඩය නොවන සන්දර්භ නෝඩයක XPath ධාවනය කිරීමට අපි කේතය භාවිතා කරන විට සිදු වන දේ එය පෙන්වයි. Bryan Rasmussen විසින් Pen css සහ xpath එකට [forked] බලන්න. CSS විමසුම .relatedarticles a වේ, එය .relatedarticles පන්තියක් පවරා ඇති div එකක මූලද්රව්ය දෙක ලබා ගනී. ඊට පසු "නරක" විමසුම් තුනක්, එනම්, මෙම මූලද්රව්ය සන්දර්භය නෝඩය ලෙස ක්රියාත්මක වන විට අපට අවශ්ය දේ නොකරන විමසුම්. ඔවුන් ඔබ බලාපොරොත්තු වෙනවාට වඩා වෙනස් ලෙස හැසිරෙන්නේ මන්දැයි මට පැහැදිලි කළ හැකිය. අදාළ නරක විමසුම් තුන නම්:
//text(): ලේඛනයේ ඇති සියලුම පෙළ ආපසු ලබා දෙයි. //a/text(): ලේඛනයේ ඇති සබැඳිවල සියලුම පෙළ ආපසු ලබා දෙයි. ./a/text(): ප්රතිඵල කිසිවක් ලබා නොදේ.
මෙම ප්රතිඵල සඳහා හේතුව වන්නේ ඔබේ සන්දර්භය CSS විමසුමෙන් ආපසු ලැබෙන මූලද්රව්යයක් වන අතර, // සම්පූර්ණ ලේඛනයටම පටහැනි වීමයි. XPath හි ශක්තිය මෙයයි; CSS හට නෝඩ් එකක සිට මුතුන්මිත්තෙකු දක්වා සහ පසුව එම මුතුන් මිත්තෙකුගේ සහෝදරයෙකු දක්වා ගොස් එම සහෝදරයාගෙන් පැවත එන්නෙකු දක්වා ගමන් කළ නොහැක. නමුත් XPath පුළුවන්. මේ අතර, ./ වත්මන් නෝඩයේ දරුවන් විමසයි, එහිදී තිත (.) වත්මන් නෝඩය නියෝජනය කරයි, සහ ඉදිරි ස්ලැෂ් (/) මඟින් යම් ළමා නෝඩයක් වෙත යාම නියෝජනය කරයි - එය උපලක්ෂණයක් ද, මූලද්රව්යයක් ද, පෙළක් ද යන්න තීරණය වන්නේ මාර්ගයේ ඊළඟ කොටස මගිනි. නමුත් CSS විමසුම මගින් තෝරාගත් මූලිකාංගයක් නොමැත, එබැවින් එම විමසුමද කිසිවක් ආපසු ලබා නොදේ. එම අවසන් demo එකේ හොඳ විමසුම් තුනක් තිබේ:
.//පෙළ(), ./text(), normalize-space(./text()).
සාමාන්යකරණය-අවකාශ විමසුම XPath ශ්රිත භාවිතය පෙන්නුම් කරයි, නමුත් අනෙකුත් විමසුම්වල ඇතුළත් ගැටලුවක් ද නිරාකරණය කරයි. HTML ව්යුහගත කර ඇත්තේ මෙසේය.
Selenium WebDriver සමඟින් ඔබේ විශේෂාංග පරීක්ෂාව ස්වයංක්රීය කිරීම
විමසුම පෙළ නෝඩයේ ආරම්භයේ සහ අවසානයේ රේඛා සංග්රහයක් ලබා දෙයි,සහ normalize-space මෙය ඉවත් කරයි. XPath ආදානයක් සහිත boolean එකක් හැර වෙනත් දෙයක් ආපසු ලබා දෙන ඕනෑම XPath ශ්රිතයක් භාවිතා කිරීම වෙනත් කාර්යයන් සඳහා අදාළ වේ. පහත ආදර්ශනය උදාහරණ ගණනාවක් පෙන්වයි: Bryan Rasmussen විසින් Pen xpath ශ්රිත උදාහරණ [forked] බලන්න. පළමු උදාහරණය ඔබ අවධානය යොමු කළ යුතු ගැටලුවක් පෙන්වයි. විශේෂයෙන්, පහත කේතය:
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 ශ්රිත ජාවාස්ක්රිප්ට් හි ඇති ශ්රිත මෙන් කැදලිගත හැක. එබැවින්, අපි Smashing Magazine URL ව්යුහය දන්නේ නම්, අපට පහත දේ කළ හැකිය (සැකිලි වචන භාවිතා කිරීම නිර්දේශ කෙරේ): පරිවර්තනය ( උපස්ථරය ( substring-after(./@href, 'www.smashingmagazine.com/') ,9), '/','')`
එය කරන්නේ කුමක්ද යන්න විස්තර කිරීමට අදහස් අවශ්ය වන තරමට මෙය තරමක් සංකීර්ණ වෙමින් පවතී: www.smashingmagazine.com/ ට පසුව ඇති href උපලක්ෂණයෙන් සියලුම URL ලබා ගන්න, පළමු අක්ෂර නවය ඉවත් කරන්න, ඉන්පසු ඉදිරියට යන ස්ලෑෂ් ඉවත් කිරීම සඳහා ඉදිරියට slash (/) අක්ෂරය කිසිවක් නොමැතිව පරිවර්තනය කරන්න. ප්රතිඵලය වන අරාව:
["විශේෂාංග-පරීක්ෂණ-සෙලේනියම්-වෙබ් ධාවකය","ස්වයංක්රීය-පරීක්ෂණ-ප්රතිඵල-ප්රවේශ්යතාව වැඩිදියුණු කිරීම"]
තවත් XPath භාවිත අවස්ථා XPath ඇත්තටම පරීක්ෂණ වලදී බැබළෙන්න පුළුවන්. හේතුව දැකීම අපහසු නැත, DOM හි ඇති සෑම අංගයක්ම DOM හි ඕනෑම ස්ථානයක සිට ලබා ගැනීමට XPath භාවිතා කළ හැකි නමුත් CSS හට එය ලබා ගත නොහැක. බොහෝ නවීන ගොඩනැගීම් පද්ධතිවල CSS පන්ති ස්ථාවරව පවතින බව ඔබට ගණන් ගත නොහැක, නමුත් XPath සමඟින්, වෙනස්වන DOM ව්යුහයක් කුමක් වුවත්, මූලද්රව්යයක පෙළ අන්තර්ගතය කුමක්ද යන්න පිළිබඳව වඩාත් ශක්තිමත් ගැලපීම් කිරීමට අපට හැකි වේ. ඔබට ඔරොත්තු දෙන XPath පරීක්ෂණ කිරීමට ඉඩ සලසන ශිල්පීය ක්රම පිළිබඳ පර්යේෂණ සිදු කර ඇත. යම් දෙයක් නැවත නම් කර හෝ ඉවත් කර ඇති නිසා CSS තේරීම් කාරකයක් තවදුරටත් ක්රියා නොකරන නිසා පරීක්ෂණ බිඳ වැටීමට හා අසාර්ථක වීමට වඩා නරක දෙයක් නැත. බහු ස්ථාන නිස්සාරණයේදී XPath ඇත්තෙන්ම විශිෂ්ටයි. මූලද්රව්යයකට ගැලපීම සඳහා XPath විමසුම් භාවිතා කිරීමට ක්රම එකකට වඩා තිබේ. CSS වලත් එහෙමයි. නමුත් XPath විමසුම්වලට වඩා ඉලක්කගත ආකාරයෙන් දේවල් සිදුරු කළ හැකි අතර එමඟින් ආපසු ලැබෙන දේ සීමා කරයි, හැකි ගැළපීම් කිහිපයක් තිබිය හැකි නිශ්චිත ගැළපීමක් සොයා ගැනීමට ඔබට ඉඩ සලසයි. උදාහරණයක් ලෙස, අපට XPath භාවිතා කළ හැකි අතර එය div එකක් තුළ අඩංගු විශේෂිත h2 මූලද්රව්යයක් ආපසු ලබා දිය හැක, එය වහාම සහෝදර div එකක් අනුගමනය කරයි, අනෙක් අතට, data-testID="leader" උපලක්ෂණයක් සහිත ළමා රූප මූලද්රව්යයක් අඩංගු වේ:
මෙම සිරස්තලය ගන්න එපා
මෙම සිරස්තලය ගන්න එපා
නායක රූපය සඳහා ශීර්ෂකය
විමසුම මෙයයි: document.queryXPaths(` //div[ පහත-සහෝදර සහෝදරියන්::div[1] /img[@data-testID='නායකයා'] ] /h2/ පෙළ () `);
ඒ සියල්ල එකට එකතු වන්නේ කෙසේදැයි බැලීමට අපි demo එකක් දමමු: Bryan Rasmussen විසින් Pen Complex H2 විමසුම [forked] බලන්න. ඉතින්, ඔව්. XPath භාවිතා කරන පරීක්ෂණයක ඕනෑම මූලද්රව්යයකට විය හැකි මාර්ග බොහොමයක් තිබේ. XSLT 1.0 ක්ෂය වීම බ්රවුසරයෙන් XSLT 1.0 සහය ඉවත් කිරීමට ක්රෝම් කණ්ඩායම සැලසුම් කරන බව මම කලින් සඳහන් කළෙමි. XSLT 1.0 ලේඛන පරිවර්තනය සඳහා XML කේන්ද්ර කරගත් ක්රමලේඛනය භාවිතා කරන නිසා එය වැදගත් වේ, එය බොහෝ බ්රව්සර්වල දක්නට ලැබෙන XPath 1.0 මත රඳා පවතී. එය සිදු වූ විට, අපට XPath හි ප්රධාන අංගයක් අහිමි වනු ඇත. නමුත් පරීක්ෂණ ලිවීම සඳහා XPath ඇත්තෙන්ම විශිෂ්ටයි යන කාරණය සැලකිල්ලට ගෙන, XPath සමස්ථයක් ලෙස ඕනෑම වේලාවක ඉක්මනින් අතුරුදහන් වනු ඇතැයි සිතිය නොහැක. එනම්, විශේෂාංගයක් ඉවත් කළ විට මිනිසුන් ඒ ගැන උනන්දු වන බව මම දැක ඇත්තෙමි. XSLT 1.0 අත් හරින ලද අවස්ථාවක එය නිසැකවම සත්ය වේ. තහනම් කිරීමට එරෙහි තර්ක වලින් පිරුණු Hacker News හි සම්පූර්ණ සාකච්ඡාවක් සිදුවෙමින් පවතී. XSLT සමඟ බ්ලොග්කරණ රාමුවක් නිර්මාණය කිරීම සඳහා මෙම පෝස්ටුවම කදිම උදාහරණයකි. ඔබඔබටම සාකච්ඡාව කියවිය හැක, නමුත් එය එවැනි අවස්ථාවන් හැසිරවීමට XLST සඳහා ෂිම් එකක් ලෙස JavaScript භාවිතා කළ හැකි ආකාරය සම්බන්ධ වේ. ජාවාස්ක්රිප්ට් හි සැක්සන් XSLT, XQUERY, සහ XPath එන්ජින් සඳහා තොටක් වන බ්රව්සර් SaxonJS භාවිතා කළ යුතු බවට යෝජනා ද මම දැක ඇත්තෙමි. එය සිත්ගන්නා අදහසකි, විශේෂයෙන්ම Saxon-JS මෙම පිරිවිතරවල වත්මන් අනුවාදය ක්රියාත්මක කරන අතර, XPath හෝ XSLT හි 1.0 න් ඔබ්බට ක්රියාත්මක කරන බ්රවුසරයක් නොමැති අතර XQuery ක්රියාත්මක කරන කිසිවක් නොමැත. මම SaxonJS සහ Saxon එන්ජිමේ අනෙකුත් අනුවාද පිටුපස සිටින සමාගම වන Saxonica හි Norm Tovey-Walsh වෙත ළඟා විය. ඔහු මෙසේ පැවසීය. "ඕනෑම බ්රවුසර වෙළෙන්දෙකු නවීන XML තාක්ෂණයන් බ්රවුසරයට ඒකාබද්ධ කිරීමේ ආරම්භක ලක්ෂ්යයක් ලෙස SaxonJS ගැනීමට කැමති නම්, අපි ඔවුන් සමඟ එය සාකච්ඡා කිරීමට සතුටු වන්නෙමු." - Norm Tovey-Walsh
නමුත් එකතු කළේ: "සැක්සන්ජේඑස් වර්තමාන ස්වරූපයෙන් ගෙන එය බ්රවුසර ගොඩනැගීමට නොවෙනස්ව තැබීම පරමාදර්ශී ප්රවේශය වනු ඇතැයි යමෙක් සිතන්නේ නම් මම ඉතා පුදුම වෙමි. බ්රවුසර වෙළෙන්දෙකුට, ඔවුන් බ්රව්සරය ගොඩනඟන ස්වභාවය අනුව, අපට 'පිටත සිට' කළ හැකි මට්ටමට වඩා ගැඹුරු මට්ටමකින් ඒකාබද්ධතාවයට ප්රවේශ විය හැකිය." - Norm Tovey-Walsh
Tovey-Walsh ගේ අදහස් XSLT අවප්රමාණය නිවේදනයට සතියකට පමණ පෙර පැමිණි බව සඳහන් කිරීම වටී. නිගමනය මට දිගටම යන්න පුළුවන්. නමුත් මෙය XPath හි බලය පෙන්නුම් කර ඇති අතර විශිෂ්ට දේවල් සාක්ෂාත් කර ගැනීම සඳහා එය භාවිතා කරන්නේ කෙසේද යන්න පෙන්නුම් කරන බොහෝ උදාහරණ ඔබට ලබා දී ඇතැයි මම බලාපොරොත්තු වෙමි. එය බ්රවුසර තොගයේ පැරණි තාක්ෂණයට කදිම නිදසුනකි, එය ඔබ කිසි දිනක එය පවතින බව නොදැන හෝ කිසි විටෙකත් ඒ සඳහා ළඟා වීමට නොසිතුවද, අදටත් බොහෝ උපයෝගිතා ඇත. වැඩිදුර කියවීම
Maroun Ayli, Youssef Bakouny, Nader Jalloul සහ Rima Kilany විසින් "ස්වභාවික භාෂාව සමඟින් ස්වයංක්රීය වෙබ් පරීක්ෂණ වල ප්රත්යස්ථතාව වැඩි දියුණු කිරීම" (ACM ඩිජිටල් පුස්තකාලය) මෙම ලිපිය ප්රත්යස්ථ පරීක්ෂණ ලිවීම සඳහා බොහෝ XPath උදාහරණ සපයයි. XPath (MDN) ඔබට XPath ක්රියා කරන ආකාරය විස්තර කරන තාක්ෂණික පැහැදිලි කිරීමක් අවශ්ය නම් මෙය ආරම්භ කිරීමට කදිම ස්ථානයකි. XPath Tutorial (ZVON)මෙම නිබන්ධනය මගේම ඉගෙනීමේදී වඩාත් ප්රයෝජනවත් වන බව මම සොයා ගත්තෙමි, උදාහරණ රාශියක් සහ පැහැදිලි පැහැදිලි කිරීම් වලට ස්තුති වන්න. XPatherThis අන්තර්ක්රියාකාරී මෙවලම ඔබට කේතය සමඟ කෙලින්ම වැඩ කිරීමට ඉඩ දෙයි.
