java - XPath:根据以下元素中的文本选择元素？

Question

我有以下 HTML 片段

    <div class="a-expander-content a-spacing-base a-expander-inline-content a-expander-inner a-expander-content-expanded" style="" aria-expanded="true">
    <form id="pp-yT-23" class="pmts-add-credit-card-form pmts-portal-component pmts-portal-components-pp-yT-8 a-spacing-none" data-pmts-component-id="pp-yT-8" data-pmts-ajax-continuation="true" action="https://www.bbc.com/gp/w/ref=w?w=UTF8&_encoding=UTF8&<input class="a-button-input" type="submit" aria-labelledby="pp-yT-32-announce" name="ppw-widgetEvent:AddCreditCardEvent"/>
<span id="pp-yT-32-announce" class="a-button-text" aria-hidden="true">Add your card</span>=1&startingView=VIEW_INSTRUMENT_LIST" method="post">
    <input type="hidden" value="4|MXzCdjmqmSKRqcnRhGeW4iH0AQ-hnQ-2gnP1pGe3ibFlVEzK2Jwpm6KcMxCyOiJRtzKNCVbR1QBo2mfUL8Jbc5DnErF8cuPgQP15-EhnY_vDCMIm1igDBGrOR1-G_664V7rgc5fmYMvW5bguQ8NOEHJkM2t2JA2no4zG6ALkPg2hCUOnUyhTkAk3CWOP5c2HI_ml4criD9lV4VYbVWqpkGNtXQHT6GusM9rYxALSwjNdV9EuUtMbXhNdQrNNeIoELCjMHsrvFL2Qs70Bu0nh6SnpQ9bCS6r9rBBSKDWCezCRJZZqyQFDk8pvtZqUgyriWBS9uBwNKvqRO6P6jTRJYX5H0dGqkclvjL2R_J7HOuirDH6fwxplisgG48bZXCCSDICIXOKUF18PctRw74G-2e1-ZKD2IqZ-Efsjyel2SLSvBrEqV_d8dp7Sm7p_DNFtty7hhcinmB5Ej4VHFk4HCkAlx64Yex0hFV3yc3B3m4moPryyy75m9Fe4oa1KiZnORWF8EKbjAI7gFjhuTfpVdRZDiS-rtC7uahA4ZnR8ZMyEX223dvW1xF6RKSmwAtpES-9kk_PVy9fr7uvWyzzoGwNYFXtunYeo59bqDEGvomW6djTUMJAi2Xpn-06Sf45qhZytKe66ooTvy6l7yI_fpwhofaFvSj_hcFBkDXfDScsShk0EksXZi4YZynZbCBDocj61XslqJcj0NzY8nNi5AnD_UbOV5WS2PotxdzTMdFFABj-xtW72-aO_vEdoJ0LH0OOdOp8uwFm4sIHRoatIO5ced_v9_iceOt-j6uYlWxJsrf653X9s_rwdkF4z5u4e6UZ2askDGXEPI9wBReQhU8DafQM4JVsYfW-V1TXjkZipZIiEL-R5gxCBiRzi_tLY0YO_nlgXKxPPUytxXL_321837OfvmkbqY67uFvHemgSbxP2Y_4PzMatJ3uOpOiNHcC7vHMImbd8MzFTZDhdAlsfcCmEaeIRYudEh3L2b339J5yFxiWyeGosuY7deRUHeUOFSF9HkRBg2uXQMN8BlsbcYgWXdC5fjUbAoKXMTYYg_cxtTNViU-FgWw1fXvCyfot0idPpxOEweLLUIBfher25SwP6LMcipWIyFJlo4RPWqcIk4LbLJ4xAuuaX8b9Bwmo4yc9cFWGd1wuM3IJbWWTyPuJwHamgn3pDYkvimctFBHi3voq1xi6pxBXBSm75ara_t-cK1KVGYBz69fct3lQVVJTfYfCKu9JlYQz4GooylMcNIt5CqDEZK7i4cwwPDKtH9-yqLcodolmdFnbMamyK4cHNoRub_WbfHeXqw28pVeKE045ptD-xLMJOHAzMhdfH37SAUQ8eiOhug4jcymETMtlzHTVD1gQ-CyQ1bQWvUhWhW8gtvaGv5Wd6VUicmEBZ4mhLcc68MW_DQ9k2oyNkAvEb0HZgO9wB20hXGPpXSeBCElHjVBV3LDthYyDz829Vva-6iXkd3C5BQmEOaqjY8D0Key77bEL8cc-Dr35eMGv0oewGAjEnh_dBiuQ3jcw0q_yH8zDkRwz2x86Le8QC267W3R-b0zIqUqo_XdN2U2JZiVSmwXNH17Nz9RMgZRxYOzNXLEcmLkA1zR0b3z91L1XLGJ2LR8wq6HQLnx-17J_yxHRyMEiDa62rxITvsIqqAt4jXxLTtwvKOhtwVnyONrInjkWgaMUVtmlgIOCbLJi_rIW2rn7A4JO7qg" name="ppw-widgetState"/>
    <div id="pp-yT-24" class="a-row a-spacing-base a-hidden aok-hidden">
    <div class="a-row a-spacing-base">Enter your card information:</div>
    <div class="a-row a-spacing-base">
    <div class="a-section a-spacing-none pmts-inline-field-block">
    <div class="a-section a-spacing-none pmts-inline-field-block">
    <div class="a-section a-spacing-none a-spacing-top-large pmts-inline-field-block">
    <div class="a-section a-spacing-none pmts-inline-field-block">
    <div class="a-section a-spacing-none pmts-inline-field-block pmts-inline-add-button-spacing-top">
    <span id="pp-yT-32" class="a-button a-button-primary pmts-button-input">
    <span class="a-button-inner">
    <input class="a-button-input" type="submit" aria-labelledby="pp-yT-32-announce" name="ppw-widgetEvent:AddCreditCardEvent"/>
    <span id="pp-yT-32-announce" class="a-button-text" aria-hidden="true">Add your card</span>
    </span>
    </span>
    </div>
    </div>
    <div class="a-checkbox pmts-update-everywhere-checkbox a-spacing-base" data-a-input-name="ppw-updateEverywhereAddCreditCard">
    </form>
    </div>
    </div>
    </div>
    <hr class="a-divider-normal"/>
    <div class="a-row a-spacing-base pmts-portal-component pmts-portal-components-pp-yT-13" data-pmts-component-id="pp-yT-13">
    <hr class="a-divider-normal"/>
    <div id="pp-yT-34" class="a-section pmts-portal-component pmts-portal-components-pp-yT-14" data-pmts-component-id="pp-yT-14">
    </div>
    </div>
    </div>

基于上面的 HTML 片段:

<input class="a-button-input" type="submit" aria-labelledby="pp-yT-32-announce" name="ppw-widgetEvent:AddCreditCardEvent"/>
<span id="pp-yT-32-announce" class="a-button-text" aria-hidden="true">Add your card</span>

我要使用以下 XPath 选择按钮/输入元素:

    //span[@type='submit' and contains ( ., 'Add your card')]

但我无法选择任何内容。我假设这可能是因为文本“添加您的卡”实际上不是输入元素的一部分，而是 span 元素的一部分。所以我的问题是 - 我可以根据以下元素中的文本选择按钮/输入元素吗？

请注意，我了解如何根据元素中的文本选择元素，但这里的文本实际上并不在元素本身中(尽管它看起来嵌入在屏幕上的元素中)，而是在下一个元素中。我也明白我可以根据名称属性选择元素，但这不是我想要的。

谢谢

Answer 1

can I select a button/input element based on the text in the following element?

是的，你可以找到locate desire <input>元素 wrt 作为 Add your card如下:-

.//span[@class='a-button-inner' and span[text()='Add your card']]/input[@type='submit']

您还可以找到这个 <input>元素使用 cssSelector如下:-

input.a-button-input[type='submit'][name*='AddCreditCardEvent']

如果<span class="a-button-inner">元素也是可点击的，我建议尝试使用 normalize-space() xpath 的功能它从字符串中去除前导和尾随空白，用单个空格替换空白字符序列，并返回结果字符串而不是 contains()如下:-

.//span[normalize-space(.)='Add your card' and @class='a-button-inner']

或为 parent <span> :-

.//span[normalize-space(.)='Add your card']