Мен жылдар бою тенденцияны көрүүгө жетишерлик узак убакыт бою алдыңкы өнүгүүдө болдум: жаш иштеп чыгуучулар программалоонун жаңы парадигмасы менен анын тарыхый контекстти түшүнбөстөн иштешет. Албетте, бир нерсени билбөө толук түшүнүктүү. Желе - бул ар түрдүү көндүмдөрдүн жана адистиктердин топтому бар абдан чоң жер, жана биз билбеген нерселерибизди дайыма эле биле бербейбиз. Бул тармакта билим алуу - бул бир жолу болуп, бүтө турган нерсе эмес. Мисалы: Менин командамдагы бирөө колдонуучулар UIдеги белгилүү бир өтмөктөн алыстап кеткенин билүүгө болобу деп сурады. Мен JavaScriptтин жүктөөдөн мурун болгон окуясын белгиледим. Бирок буга чейин муну менен күрөшкөндөр бул мүмкүн экенин билишет, анткени алар башка сайттарда сакталбаган маалыматтар жөнүндө эскертүүлөргө дуушар болушат, алар үчүн жүктөөдөн мурун жүктөө кадимки колдонуу учуру. Мен ошондой эле жакшы өлчөө үчүн кесиптешиме pageHide жана visibilityChange окуяларын белгиледим. Мен бул тууралуу кайдан билдим? Себеби ал JavaScriptти алгач үйрөнүп жатканда изилдегеним үчүн эмес, башка долбоордо пайда болгон. Чындыгында заманбап алдыңкы алкактар алардан мурунку технология гиганттарынын ийиндеринде турат. Алар көбүнчө иштеп чыгуучунун жакшы тажрыйбасы үчүн абстракттуу иштеп чыгуу практикасын, адатта, ар бир адам билиши керек болгон салттуу алдыңкы концепцияларды билүү же тийүү зарылдыгын азайтат, ал тургай жок кылат. CSS объектинин моделин (CSSOM) карап көрөлү. Сиз CSS жана JavaScript менен иштеген ар бир адам CSSOM боюнча практикалык тажрыйбага ээ деп күтүшүңүз мүмкүн, бирок бул дайыма эле боло бербейт. Учурда тандалган төлөм провайдери үчүн стилдер жадыбалын жүктөшүбүз керек болгон мен иштеген электрондук коммерция сайты үчүн React долбоору бар болчу. Көйгөй стилдер жадыбалы белгилүү бир бетке гана керек болгондо ар бир баракка жүктөлүп жатканында болгон. Муну ишке ашыруу милдети жүктөлгөн иштеп чыгуучу эч качан стилдер жадыбалын динамикалык түрдө жүктөгөн эмес. Кайрадан, React сиз жеткен салттуу ыкманы жокко чыгарганда, бул толугу менен түшүнүктүү. CSSOM, балким, сиздин күнүмдүк ишиңизге керектүү нерсе эмес. Бирок, балким, сиз аны менен кандайдыр бир учурда, атүгүл бир жолку учурда өз ара аракеттенишиңиз керек болот. Бул окуялар мени бул макаланы жазууга шыктандырды. Табиятта көптөгөн веб-функциялар жана технологиялар бар, аларга сиз күнүмдүк жумушуңузда эч качан тикелей албайсыз. Мүмкүн, сиз веб-иштеп чыгууга жаңыдан болуп жаткандырсыз жана алардан кабарсызсыз, анткени сиз аны терең, же такыр эле билүүнү талап кылбаган белгилүү бир алкактын абстракциясына батып калгансыз. Мен XML жөнүндө атайын айтып жатам, ал HTMLден таптакыр окшошпогон байыркы тил экенин билебиз. Мен муну XSLT программалоо деп аталган XML стекинин олуттуу бөлүгүн браузерлерден алып салуу керек деген акыркы WHATWG талкууларынан улам айтып жатам. Бул менин командамда болгон CSSOM кырдаалындай практикалык нерсе үчүн колдонулушу мүмкүн болгон бир нече жылдар бою бизде бар болгон эски технология. Сиз мурун XSLT менен иштеген белеңиз? Келгиле, биз бул эски технологияга катуу таянып, анын өзгөчөлүктөрүн XML контекстинен тышкаркы учурдагы реалдуу көйгөйлөрдү чечүү үчүн колдонорубузду карап көрөлү. XPath: Борбордук API Түз XML көз карашынан тышкары эң пайдалуу болгон эң маанилүү XML технологиясы бул XPath, бир тамыр элементи бар белгилөө дарагынан каалаган түйүн же атрибуттарды табууга мүмкүндүк берген суроо тили. Менде XSLTге болгон жеке сүйүүм бар, бирок бул XPathка да таянат жана рейтингдик мааниде жеке сүйүүмдү четке кагуу керек. XSLTди алып салуу аргументи XPath жөнүндө эч кандай сөз кылбайт, андыктан ага дагы эле уруксат берилген деп ойлойм. Бул жакшы, анткени XPath бул технологиялар топтомундагы борбордук жана эң маанилүү API, айрыкча кадимки XML колдонуудан тышкары колдонууга бир нерсе табууга аракет кылганда. Бул маанилүү, анткени CSS селекторлору сиздин баракчаңыздагы элементтердин көбүн табуу үчүн колдонулса да, алардын баарын таба албайт. Андан тышкары, CSS селекторлору DOMдагы учурдагы абалына негизделген элементти табуу үчүн колдонулушу мүмкүн эмес. XPath болот. Эми муну окуп жаткан кээ бириңиздер XPath билиши мүмкүн, ал эми кээ бирлери билбеши мүмкүн. XPath - бул технологиянын абдан чоң чөйрөсү, мен чындыгында бардык негиздерди үйрөтө албайм, ошондой эле ушул сыяктуу бир макалада аны менен кандай сонун нерселерди көрсөтө албайм. Мен чындыгында ал макаланы жазууга аракет кылдым, бирок Smashing Magazine басылмасынын орточо саны 5000 сөздөн ашпайт. Мен буга чейин эле ашык болчумун2000 сөз, ал эми негиздердин жарымы гана. Ошентип, мен XPath менен сонун нерселерди жасай баштайм жана сизге бул нерсени кызыктуу деп тапсаңыз, негиздер үчүн колдоно турган шилтемелерди берем. XPath жана CSS айкалыштыруу XPath элементтерди сураганда CSS селекторлору кыла албаган көп нерселерди жасай алат. Бирок CSS селекторлору XPath аткара албаган бир нече нерселерди жасай алышат, тактап айтканда, элементтерди класстын аталышы боюнча сурай алышат.
CSS XPath .myClass /*[камтыйт(@класс, "менинClass")]
Бул мисалда, CSS .myClass класс атын камтыган элементтерди сурайт. Ошол эле учурда, XPath мисалы "myClass" сабы менен атрибут классын камтыган элементтерди сурайт. Башкача айтканда, ал каалаган атрибуттагы myClass менен элементтерди, анын ичинде .myClass класс аты бар элементтерди, ошондой эле .myClass2 сыяктуу сапта "myClass" менен элементтерди тандайт. XPath бул жагынан кененирээк. Демек, жок. Мен CSSти ыргытып, XPath аркылуу бардык элементтерди тандап баштоону сунуш кылбайм. Кеп анда эмес. Кептин баары XPath CSS жасай албаган нерселерди жасай алат жана дагы деле абдан пайдалуу болушу мүмкүн, бирок ал браузер стекиндеги эски технология жана бир караганда ачык көрүнбөшү мүмкүн. Келгиле, эки технологияны бирге колдонолу, анткени биз колубуздан келгендиктен, бирок XPath жөнүндө бир нерсе үйрөнүп, аны стекиңиздеги дагы бир куралга айландырабыз - балким, сиз билбеген бир нерсе! Көйгөй JavaScript'тин document.evaluate ыкмасы жана биз JavaScript үчүн CSS API'лери менен колдонгон ар кандай суроо тандоо ыкмалары шайкеш келбегенинде. Бизди баштоо үчүн мен шайкеш суроо API түздүм, бирок мойнуна алам, мен бул жөнүндө көп ойлонгон жокмун, анткени бул биз бул жерде кылып жаткан ишибизден алыстап кеткендиктен. Бул жерде көп жолу колдонулуучу суроо конструкторунун жөнөкөй жумушчу мисалы: Брайан Расмуссендин Pen queryXPath [айрыкчасын] караңыз. Мен документ объектисине эки ыкманы коштум: queryCSSSelectors (бул негизинен querySelectorAll) жана queryXPaths. Экөө тең queryResults объектисин кайтарат:
{ queryType: түйүндөр | string | саны | логикалык, натыйжалар: any[] // html элементтери, xml элементтери, саптар, сандар, логикалык, queryCSSSelectors: (суроо: сап, өзгөртүү: логикалык) => queryResults, queryXpaths: (суроо: сап, өзгөртүү: логикалык) => queryResults }
QueryCSSSelectors жана queryXpaths функциялары сиз аларга берген суроону натыйжалар массивиндеги элементтердин үстүнөн иштетет, эгерде натыйжалар массиви, албетте, түйүндөр тибинде болсо. Болбосо, ал бош массив жана түйүндөрдүн түрү менен queryResult кайтарат. Эгерде өзгөртүү касиети "true" деп коюлса, функциялар өздөрүнүн queryResults натыйжаларын өзгөртүшөт. Бул эч кандай шартта өндүрүш чөйрөсүндө колдонулбашы керек. Мен муну эки суроо API'син чогуу колдонуунун ар кандай эффекттерин көрсөтүү үчүн жасап жатам. Example Query Мен алар жасай ала турган кээ бир күчтүү нерселерди жана башка ыкмалардын ордуна кантип колдонсо болорун көрсөткөн ар кандай XPath сурамдарынын бир нече мисалдарын көрсөткүм келет. Биринчи мисал //li/text(). Бул бардык li элементтерин сурайт жана алардын текст түйүндөрүн кайтарат. Ошентип, эгерде биз төмөнкү HTMLди сурай турган болсок:
- бир
- эки
- үч
... бул кайтарылган нерсе:
{"queryType":"xpathEvaluate","results":["бир","эки","үч"],"resultType":"string"}
Башкача айтканда, биз төмөнкү массивди алабыз: ["бир", "эки", "үч"]. Адатта, сиз аны алуу үчүн li элементтерин сурайсыз, ал сурамдын натыйжасын массивге айландырасыз, массивдин картасын түзүңүз жана ар бир элементтин текст түйүнүн кайтарасыз. Бирок биз XPath менен кыскараак кыла алабыз: document.queryXPaths("//li/text()").натыйжалар.
Тексттик түйүндү алуунун жолу функциянын кол тамгасына окшош текстти () колдонуу экенине көңүл буруңуз - жана ошондой. Бул элементтин текст түйүнүн кайтарат. Биздин мисалда белгилөөдө үч li элементи бар, алардын ар бири текстти камтыйт («бир», «эки», «үч»).
Текст() суроосунун дагы бир мисалын карап көрөлү. Бул биздин белгилөө деп ойлойлу:
href атрибутунун маанисин кайтарган суроо жазалы: document.queryXPaths("//a[text() = 'Кирүү']/@href").натыйжалары.
Бул акыркы мисалдагыдай эле учурдагы документтеги XPath сурамы, бирок бул жолу биз "Кирүү" текстин камтыган шилтеменин (элементтин) href атрибутун кайтарабыз. Чыныгы кайтып келдинатыйжасы ["/login.html"] болуп саналат. XPath функцияларын карап чыгуу Бир нече XPath функциялары бар жана сиз алар менен тааныш эмессиз. Менин оюмча, бир нечеси бар, алар жөнүндө билүү керек, анын ичинде төмөнкүлөр:
starts-withЭгер текст башка тексттин мисалы менен башталса, href атрибуту http: менен башталса, starts-with(@href, 'http:') чындыкты кайтарат. Эгер текстте башка тексттин мисалы камтылса, анда (text(), "Smashing Magazine") чындыкты кайтарат, эгерде текст түйүнүндө "Smashing Magazine" деген сөздөр бар болсо. count Сурамга канча дал келүү бар экендигинин эсебин кайтарат. Мисалы, count(//*[starts-with(@href, 'http:']) контексттик түйүндөгү http: менен башталган текстти камтыган href атрибуту бар элементтердин канча шилтемеси бар экендигинин эсебин кайтарат. substring JavaScript substring сыяктуу иштейт, бирок сиз сапты аргумент катары өткөрөсүз. Мисалы, substring("my text", 2, 4) "y t" кайтарат. substring-before Саптын башка саптын алдындагы бөлүгүн кайтарат. Мисалы, substing-befor("my text", " ") "менин" кайтарып берет. Ошо сыяктуу эле, 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 сап узундугуна окшош эмес, тескерисинче, аргумент катары берилген саптын узундугун кайтарат. 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 [айрыкчасын] караңыз. Которуу функциясынын таң калыштуу аспектине көңүл бурушуңуз керек, эгерде сизде экинчи аргументте символ бар болсо (б.а., сиз которууну каалаган символдордун тизмеси) жана которууга дал келген символ жок болсо, ал белги чыгаруудан алынып салынат. Ошентип, бул:
translate('Салам, менин атым Иниго Монтоя, сен атамды өлтүрдүң, өлүүгө даярдан','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…саптын натыйжалары, анын ичинде боштуктар: [" * * ** "]
Бул "а" тамгасы жылдызчага (*) которулуп жатканын билдирет, бирок максаттуу сапта котормосу жок бардык башка символдор толугу менен алынып салынат. Ак боштук бизде калган нерсекоторулган "а" символдорунун ортосунда. Анан дагы, бул суроо:
translate('Саламатсызбы, менин атым Иниго Монтоя, сен атамды өлтүрдүң, өлүүгө даярдан','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','************************************************************)")
... көйгөй жок жана төмөнкүдөй натыйжа берет:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"
Сизге JavaScript'те XPath которуу функциясынын так аткара турган оңой жолу жок экени таң калтырышы мүмкүн, бирок көп колдонуу учурларында аны кадимки туюнтмалар менен алмаштырыңыз. Сиз мен көрсөткөн ыкманы колдонсоңуз болот, бирок саптарды которууну кааласаңыз, бул оптималдуу эмес. Төмөнкү демо JavaScript версиясын камсыз кылуу үчүн XPathтин которуу функциясын камтыйт: Брайан Расмуссендин Калемди которуу функциясын караңыз. Мындай нерсени кайда колдонсоңуз болот? Цезарь шифринин үч орундуу офсеттик шифрлөөсүн карап көрөлү (мисалы, б.з.ч. 48-жылдагы эң мыкты шифрлөө):
translate("Цезарь Рубикондон өтүүнү пландаштырууда!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
Киргизилген текст "Цезарь Рубикондон өтүүнү пландаштырууда!" натыйжасы "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" Ар кандай мүмкүнчүлүктөрдүн дагы бир кыска мисалын келтириш үчүн, мен сап киргизүүнү алып, текстти, анын ичинде umlauts алган бардык символдорду кайтаруу үчүн которуу функциясын колдонгон металл функциясын жасадым. Брайан Расмуссендин Калем металл функциясын караңыз [айрылуу].
const metal = (str) => { return translate(str, "AOUaou","ÄÖÜäöü"); }
Ал эми, эгерде “Motley Crue rule, rock on dudes!” деген текст берилсе, “Мотли Крю рулес, рок он дудес!” деп кайтарат. Албетте, бул функцияны пародия колдонуунун бардык түрлөрү болушу мүмкүн. Эгер бул сиз болсоңуз, анда бул TVTropes макаласы сизге көп шыктандыруусу керек. XPath менен CSS колдонуу XPath менен бирге CSS селекторлорун колдонуунун негизги себебин эсиңизден чыгарбаңыз: CSS класс деген эмне экенин жакшы түшүнөт, ал эми XPath менен эң жакшы нерсе класс атрибутунун саптарын салыштыруу. Бул көпчүлүк учурларда иштейт. Бирок, эгер сиз, мисалы, кимдир бирөө .primaryLinks жана .primaryLinks2 деп аталган класстарды түзүп, .primaryLinks классын алуу үчүн XPath колдонуп жаткан кырдаалга туш болуп калсаңыз, анда көйгөйлөргө туш болушуңуз мүмкүн. Мындай акылсыз эч нерсе жок болсо, сиз XPath колдоносуз. Бирок мен мындай акылсыз иштерди жасаган жерлерде иштегенимди билдиргим келет. Бул жерде CSS жана XPath чогуу колдонгон дагы бир демо. Ал документтин түйүнү болбогон контексттик түйүндө XPath иштетүү үчүн кодду колдонгондо эмне болорун көрсөтөт. Брайан Расмуссендин CSS жана xpath калемин чогуу караңыз. CSS суроосу .relatedarticles a болуп саналат, ал .relatedarticles классы ыйгарылган div ичиндеги эки a элементин алып келет. Андан кийин үч "жаман" суроо, башкача айтканда, контексттик түйүн катары бул элементтер менен иштегенде биз каалаган нерсени аткарбаган суроо. Мен алар эмне үчүн сиз күткөндөн башкача мамиле кылып жатканын түшүндүрө алам. Каралып жаткан үч жаман суроо:
//text(): Документтеги бардык текстти кайтарат. //a/text(): Документтеги шилтемелердин ичиндеги бардык текстти кайтарат. ./a/text(): Эч кандай натыйжа бербейт.
Бул натыйжалардын себеби, сиздин контекстиңиз CSS сурамынан кайтарылган элементтер болсо да, // бүт документке каршы келет. Бул XPath күчү болуп саналат; CSS түйүндөн ата-бабага, андан кийин ошол ата-бабанын бир тууганына бара албайт жана ошол бир туугандын тукумуна бара албайт. Бирок XPath болот. Ошол эле учурда, ./ учурдагы түйүндүн балдарын сурайт, мында чекит (.) учурдагы түйүндү, ал эми алдыга сызык (/) кандайдыр бир бала түйүнгө өтүүнү билдирет — ал атрибут, элемент же текстпи, жолдун кийинки бөлүгү менен аныкталат. Бирок CSS суроосу менен тандалган бир да бала элемент жок, андыктан ал суроо эч нерсе кайтарбайт. Акыркы демодо үч жакшы суроо бар:
.//text(), ./text(), normalize-space(./text()).
Нормалдаштыруу-мейкиндик суроосу XPath функциясын колдонууну көрсөтөт, бирок башка сурамдарга камтылган көйгөйдү да оңдойт. HTML төмөнкүдөй структураланган:
Selenium WebDriver менен Функцияңызды сыноону автоматташтыруу
Сурам текст түйүнүнүн башында жана аягында сызык каналын кайтарат,жана нормалдаштыруу-мейкиндик муну жок кылат. XPath кириши менен логикалыктан башка нерсени кайтарган кандайдыр бир XPath функциясын колдонуу башка функцияларга тиешелүү. Төмөнкү демо бир нече мисалдарды көрсөтөт: Брайан Расмуссен тарабынан [айрыкталган] Pen xpath функцияларынын мисалдарын караңыз. Биринчи мисал сиз сак болушуңуз керек болгон көйгөйдү көрсөтөт. Тактап айтканда, төмөнкү код:
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'теги функциялар сыяктуу уя салса болот. Ошентип, эгер биз Smashing Magazine URL түзүмүн билсек, анда биз төмөнкүлөрдү жасай алабыз (шаблон литералдарын колдонуу сунушталат): `которуу( субсап( substring-after(./@href, 'www.smashingmagazine.com/') ,9), '/','')`
Бул бир аз татаал болуп баратат, анткени ал эмне кылып жатканын сүрөттөгөн комментарийлерге муктаж: www.smashingmagazine.com/ кийин href атрибутунан URL'дин баарын алып, биринчи тогуз символду алып салыңыз, андан соң алдыга сызыктан арылуу үчүн алдыга сызык (/) белгисин эч нерсеге которуңуз. Натыйжада массив:
["feature-testing-selenium-webdriver","автоматташтырылган-тестирлөө-натыйжалары-жеткиликтүүлүктү жакшыртуу"]
Көбүрөөк XPath колдонуу учурлары XPath чындыгында тестирлөөдө жаркырайт. Мунун себебин көрүү кыйын эмес, анткени XPath DOMдагы ар бир элементти DOMдагы каалаган позициядан алуу үчүн колдонулушу мүмкүн, ал эми CSS мүмкүн эмес. Көптөгөн заманбап куруу системаларында ырааттуу калган CSS класстарына ишене албайсыз, бирок XPath менен DOM түзүмүнүн өзгөргөнүнө карабастан, биз элементтин тексттик мазмунуна көбүрөөк шайкеш келүүгө жөндөмдүүбүз. Туруктуу XPath тесттерин жасоого мүмкүндүк берген техникалар боюнча изилдөөлөр бар. Бир нерсенин аталышы өзгөртүлгөн же өчүрүлгөндүктөн CSS селектору иштебей калгандыктан, тесттер үзүлүп, ишке ашпай калгандан жаман эч нерсе жок. XPath, ошондой эле бир нече локаторду казып алууда абдан жакшы. Элементке дал келүү үчүн XPath сурамдарын колдонуунун бир нече жолу бар. CSS менен да ушундай. Бирок XPath сурамдары кайтарылган нерсени чектеп, бир нече мүмкүн болгон дал келүүчү конкреттүү дал келүүнү табууга мүмкүндүк берүүчү нерселерди максаттуу түрдө бурушу мүмкүн. Мисалы, div ичинде камтылган, өз кезегинде data-testID="leader" атрибуту бар бала сүрөт элементин камтыган бир тууган divди ээрчиген div ичинде камтылган белгилүү бир h2 элементин кайтаруу үчүн XPath колдоно алабыз:
бул аталышты албаңыз
Бул баш макаланы да албаңыз
Лидер сүрөтүнүн баш аты
Бул суроо: document.queryXPaths(` //div[ төмөнкү бир тууган ::div[1] /img[@data-testID='leader'] ] /h2/ text() `);
Мунун баары кантип чогулуп турганын көрүү үчүн демонстрацияны карап көрөлү: Брайан Расмуссендин Калем комплексинин H2 суроосун караңыз. Демек, ооба. 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 үчүн шим катары колдонулушу мүмкүн. Мен ошондой эле браузерлер JavaScriptтин Saxon XSLT, XQUERY жана XPath кыймылдаткычтарынын порту болгон SaxonJSти колдонушу керек деген сунуштарды көрдүм. Бул кызыктуу идея, айрыкча Saxon-JS бул спецификациялардын учурдагы версиясын ишке ашырат, ал эми XPath же XSLTтин 1.0ден жогору версиясын ишке ашырган бир дагы браузер жок жана XQueryди ишке ашырган эч ким жок. Мен SaxonJS жана Saxon кыймылдаткычынын башка версияларынын артында турган Саксоникадагы Norm Tovey-Walsh компаниясына кайрылдым. Ал мындай деди: "Эгерде кайсы бир браузер сатуучу SaxonJSти браузерге заманбап XML технологияларын интеграциялоонун башталгыч чекити катары кабыл алууга кызыкдар болсо, биз аны алар менен талкуулоого кубанычта болобуз." - Норм Товей-Уолш
Бирок ошондой эле кошумчалады: "Эгерде кимдир бирөө SaxonJSди азыркы түрүндө алып, аны браузердин түзүлүшүнө өзгөртүүсүз калтыруу идеалдуу ыкма деп ойлосо, мен абдан таң калам. Браузердин сатуучусу, табияты боюнча, браузерди кургандыктан, интеграцияга биз "сырттан" караганда бир топ тереңирээк жакындай алат. "- Норм Товей-Вальш.
Белгилей кетсек, Товей-Уолштун комментарийлери XSLT эскирүү жарыясынан бир жума мурун келген. Корутунду Мен уланта алмакмын. Бирок бул XPathтин күчүн көрсөттү жана чоң нерселерге жетүү үчүн аны кантип колдонуу керектигин көрсөткөн көптөгөн мисалдарды берди деп үмүттөнөм. Бул браузер стекиндеги эски технологиянын эң сонун үлгүсү, анын бар экенин билбесеңиз же ага жетүүнү эч качан ойлобосоңуз да, бүгүнкү күндө дагы көптөгөн пайдалуу нерселер бар. Андан ары окуу
"Табигый тил менен автоматташтырылган желе тесттеринин туруктуулугун жогорулатуу" (ACM Digital Library) Марун Айли, Юсеф Бакуни, Надер Жаллоул жана Рима КиланиБул макалада ийкемдүү тесттерди жазуу үчүн XPath мисалдары келтирилген. XPath (MDN) Бул XPath кантип иштээрин түшүндүргөн техникалык түшүндүрмөнү кааласаңыз, баштоо үчүн эң сонун жер. XPath Tutorial (ZVON) Мен бул окуу куралын көптөгөн мисалдардын жана так түшүндүрмөлөрдүн аркасында өзүмдүн үйрөнүүмдө эң пайдалуу деп таптым. XPatherThis интерактивдүү курал код менен түздөн-түз иштөөгө мүмкүндүк берет.
