angular - 如何构造 XPath 以包含 HTML 中的特定元素？

问题描述

我有一张桌子，我只想选择那张桌子上的按钮。我们可以看到，这张桌子上只有 4 个按钮：

我创建了以下Xpath来过滤掉这4 个按钮，并且页面上没有其他按钮：

//*[@id="studentListTable"]/thead/tr/th[contains(., "Actions")]//following::button  | //*[@id="studentListTable_info"]//preceding::button

@id="studentListTable_info" 指的是文本“显示 1 到 3 个条目，共 3 个条目”。

但这不起作用。
此 XPath 实际上定位页面上的所有按钮，而与按钮的位置无关。

这里有什么问题？

如何修复它，以便此表达式仅定位四个按钮？

HTML 片段：

<div _ngcontent-c7="" appcard="" class="card">
    <div _ngcontent-c7="" class="card-header">
        <h5 _ngcontent-c7="">Student list <!----></h5></div>
    <ul _ngcontent-c7="" class="card-actions">
        <li _ngcontent-c7="">
            <button _ngcontent-c7="" appcardfullscreen="" class="card-action">
                <i _ngcontent-c7="" class="fa fa-arrows-alt"></i></button></li>
        <li _ngcontent-c7="">
            <button _ngcontent-c7="" appcardcollapse="" class="card-action icon-collapse"><i _ngcontent-c7="" class="material-icons">expand_more</i></button></li></ul>
    <!---->
    <div _ngcontent-c7="" class="card-body">
        <div id="studentListTable_wrapper" class="dataTables_wrapper no-footer">
            <div class="dataTables_length" id="studentListTable_length">
                <label>Show <select name="studentListTable_length" aria-controls="studentListTable" class="">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option><option value="100">100</option>
                </select> entries</label></div>
            <div id="studentListTable_filter" class="dataTables_filter">
                <label>Search:<input type="search" class="" placeholder="" aria-controls="studentListTable"></label>
            </div>
            <table _ngcontent-c7="" class="table table-striped dataTable no-footer" datatable="" id="studentListTable" role="grid" aria-describedby="studentListTable_info">
            <thead _ngcontent-c7="">
            <tr _ngcontent-c7="" role="row">
                <th _ngcontent-c7="" class="sorting_asc" tabindex="0" aria-controls="studentListTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Student ID: activate to sort column descending" style="width: 101px;">Student ID</th>
                 <th _ngcontent-c7="" class="sorting_disabled" rowspan="1" colspan="1" aria-label="Actions" style="width: 106px;">Actions</th></tr>
            </thead><!----><tbody _ngcontent-c7=""><!---->
            <tr _ngcontent-c7="" role="row" class="odd">
                <td _ngcontent-c7="" class="sorting_1">123456</td>
                 <td _ngcontent-c7="">
                    <a href="unsafe:javascript:void(0)">
                        <i class="material-icons text-warning">info</i> Not Started</a></td>
                <td _ngcontent-c7="">Null</td>
                <td _ngcontent-c7="" class="text-left"><!----><div _ngcontent-c7="">
                    <button _ngcontent-c7="" class="btn btn-sm btn-sm-action mr-2 btn-outline-info" container="body" placement="left" popoverclass="btn-popover" triggers="mouseenter:mouseleave" type="button" tabindex="0">
                        <i _ngcontent-c7="" class="fa fa-arrow-right"></i></button></div><!----><!----><!----></td></tr>
            <tr _ngcontent-c7="" role="row" class="even">
                <td _ngcontent-c7="" class="sorting_1">153246</td>
                 <td _ngcontent-c7=""><a href="unsafe:javascript:void(0)"><i class="fa fa-unlock mr-2"></i>In Progress</a></td>
                <td _ngcontent-c7="">Herndon MS</td>
                <td _ngcontent-c7="" class="text-left"><!----><!----><div _ngcontent-c7=""><!----><div _ngcontent-c7="" class="d-flex align-items-center">
                    <button _ngcontent-c7="" class="btn btn-sm btn-sm-action mr-2 btn-outline-info col" container="body" placement="left" popoverclass="btn-popover" triggers="mouseenter:mouseleave" type="button" tabindex="0">
                        <i _ngcontent-c7="" class="fa fa-pencil"></i></button>
                    <button _ngcontent-c7="" class="btn btn-sm btn-sm-action mr-2 btn-outline-danger col" container="body" placement="left" popoverclass="btn-popover" triggers="mouseenter:mouseleave" type="button">
                        <i _ngcontent-c7="" class="fa fa-trash-o"></i></button></div><!----></div><!----><!----></td></tr>
            <tr _ngcontent-c7="" role="row" class="odd">
                <td _ngcontent-c7="" class="sorting_1">234135</td>
                 <td _ngcontent-c7="" class="text-left"><!----><!----><!---->
                    <div _ngcontent-c7="">
                        <button _ngcontent-c7="" class="btn btn-sm btn-sm-action mr-2 btn-outline-info" container="body" placement="left" popoverclass="btn-popover" triggers="mouseenter:mouseleave" type="button" tabindex="0">
                            <i _ngcontent-c7="" class="fa fa-eye"></i></button></div><!----></td></tr></tbody><!----><!----><!----></table>
            <div class="dataTables_info" id="studentListTable_info" role="status" aria-live="polite">Showing 1 to 3 of 3 entries</div>
            <div class="dataTables_paginate paging_simple_numbers" id="studentListTable_paginate">
                <a class="paginate_button previous disabled" aria-controls="studentListTable" data-dt-idx="0" tabindex="0" id="studentListTable_previous">Previous</a>
                <span>
                    <a class="paginate_button current" aria-controls="studentListTable" data-dt-idx="1" tabindex="0">1</a>
                </span>
                <a class="paginate_button next disabled" aria-controls="studentListTable" data-dt-idx="2" tabindex="0" id="studentListTable_next">Next</a></div></div></div></div>

标签： angularseleniumxpathwebdriverwaitxpath-1.0

很难回答你的第一个问题那里有什么问题。
您正在使用一些|和两个不同id的 s，也许它并不完全正确。
你thead在 Xpath 中使用了元素。尽管所有按钮都位于tbody. 无论如何，您的定位器会从该页面获取所有 HTML 按钮。
我尝试将 Xpath 修改为以下内容：

//表格//按钮

它运作良好：

但是，它不是很好Xpath。
所以尝试将它绑定到一些最近的id. 更新后可能是这样的：

//div[@id='studentListTable_wrapper']//表格//按钮

评估的结果是一样的。

更多冗余版本将是（不推荐使用，仅出于示例原因）：

//div[@id='studentListTable_wrapper']//table/tbody/tr/td/div//按钮

顺便说一句，我认为更好的是使用如下定位器：

//div[@id='...']

代替：

//*[...]

很难看出是不是选择错误的原因。当然，在未来的支持中
它更具可读性和更容易理解。

angular - 如何构造 XPath 以包含 HTML 中的特定元素？

问题描述

解决方案

推荐阅读