自动化测试：如何定位动态评论表格中的最后一个textarea元素？

API 探路者

2026-8-18

问题描述

我需要为动态扩展的评论表格编写XPath，定位表格中最后一条评论对应的textarea元素（每个页面评论数量不固定）。尝试了以下XPath但未生效：

"//div[@id='commentsTable']//textarea[position()=last()]"

附示例HTML结构：

<div class="content" style="max-height: 100000px;">
        <div id="commentsTable" style="padding-top: 10px;">
    <div class="row">
        <div class="col-3">
            <div>20/09/2022 10:20 AM</div>
        </div>
        <div class="col-7">
            <div>test</div>
        </div>
        <div class="col-2">
            <div>User1</div>
                <em class="fas fa-clipboard-list"></em>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-3">
            <div>20/09/2022 10:20 AM</div>
        </div>
        <div class="col-7">
            <div>test</div>
        </div>
        <div class="col-2">
            <div>User1</div>
                <em class="fas fa-clipboard-list"></em>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-3">
            <div>20/09/2022 10:20 AM</div>
        </div>
        <div class="col-7">
            <div>test</div>
        </div>
        <div class="col-2">
            <div>User1</div>
                <em class="fas fa-clipboard-list"></em>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-3">
            <div>20/09/2022 12:06 PM</div>
        </div>
        <div class="col-7">
            <div>
                <textarea class="editableComment" id="comments-1982" data-id="1982" rows="4" maxlength="995" style="width: 100%; height: 80px; border-color: rgb(233, 236, 239); color: rgb(51, 51, 51);">User2test</textarea>
            </div>
        </div>
        <div class="col-2">
            <div>User2 blank</div>
                <em class="fas fa-clipboard-list"></em>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-3">
            <div>20/09/2022 12:06 PM</div>
        </div>
        <div class="col-7">
            <div>
                <textarea class="editableComment" id="comments-1983" data-id="1983" rows="4" maxlength="995" style="width: 100%; height: 80px; border-color: rgb(233, 236, 239); color: rgb(51, 51, 51);">User2test2</textarea>
            </div>
        </div>
        <div class="col-2">
            <div>User2 blank</div>
                <em class="fas fa-clipboard-list"></em>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-3">
            <div>20/09/2022 12:07 PM</div>
        </div>
        <div class="col-7">
            <div>
                <textarea class="editableComment" id="comments-1984" data-id="1984" rows="4" maxlength="995" style="width: 100%; height: 80px; border-color: rgb(233, 236, 239); color: rgb(51, 51, 51);">User2test3</textarea>
            </div>
        </div>
        <div class="col-2">
            <div>User2 blank</div>
                <em class="fas fa-clipboard-list"></em>
        </div>
    </div>
    <hr>
</div>
            <p><strong>Add a comment to the ched:</strong></p>
            <label class="form-label"><strong>Comment Templates:</strong></label>
<span title="" class="k-widget k-dropdown" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="CommentTemplates_listbox" aria-live="polite" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="fa26f791-6c6f-4a46-8ee8-0b7b651a7c57" style="width: 100%; margin-bottom: 10px;"><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">- Select template -</span><span unselectable="on" class="k-select" aria-label="select"><span class="k-icon k-i-arrow-60-down"></span></span></span><input id="CommentTemplates" name="CommentTemplates" style="width: 100%; margin-bottom: 10px; display: none;" type="text" value="" data-role="dropdownlist"></span><script>kendo.syncReady(function(){jQuery("#CommentTemplates").kendoDropDownList({"change":chedInspection_selectCommentTemplate,"dataTextField":"Description","dataValueField":"Comment","optionLabel":"- Select template -","dataSource":{"transport":{"read":{"url":"/chip/ChedInspection/GetChedCommentTemplates"},"prefix":""},"schema":{"errors":"Errors"}}});});</script>            <br>
            <textarea style="width:100%;height:80px" placeholder="Add a comment and press Enter to save" maxlength="995" id="addInspectionComment" data-chedid="4154"></textarea>
            <label id="inspectionLblCount">Characters entered <b>0</b> out of 995.</label>
    </div>

解决方案

原XPath失效是因为//textarea[position()=last()]的position()计算范围不是全局所有textarea，而是当前上下文节点的子节点集合。可以用以下几种方式精准定位：

通过类筛选后取最后一个
利用评论区textarea的editableComment类，排除底部新增评论的输入框，直接取最后一个：

//div[@id='commentsTable']//textarea[contains(@class, 'editableComment')][last()]

通过最后一行row定位
先找到commentsTable下最后一个.row元素，再定位其中的textarea：

//div[@id='commentsTable']//div[contains(@class, 'row')][last()]//textarea

无后续同类型元素定位
匹配没有后续同类型textarea的元素，即最后一个：

//div[@id='commentsTable']//textarea[contains(@class, 'editableComment') and not(following::textarea[contains(@class, 'editableComment')])]

这些XPath都能稳定定位到评论区的最后一条textarea元素。

内容的提问来源于stack exchange，提问作者AlpineF30