Question

我有一个使用'div'元素创建的表，它具有基于选择的动态内容以及要显示的数据。

我想找到一种方法来点击表格最后一行的一些图标。无法使用getElementID执行此操作，就好像有多行一样，所有图标都具有相同的ID。有没有其他方法可以做到这一点？

<div class="cv-layout">
    <div class="row cv-layout-body">
        <div class="mobile-col-12 tablet-col-12 desktop-col-12 settlement-container cv-panel">
            <div class="row header">
                <div class="tablet-col-1">Ref</div>
                <div class="tablet-col-2">Rec</div>
                <div class="tablet-col-2">Amt</div>
                <div class="tablet-col-3">Say</div>
                <div class="tablet-col-3 text-right">Pay</div>
                <div class="tablet-col-1 center-text">Age</div>
            </div>
            <div class="settlement-item">
                <div class="row settlement-read-item bordered">
                    <div class="tablet-col-1">Col1Row1</div>
                    <div class="tablet-col-2">Col2Row1</div>
                    <div class="tablet-col-2"><span>Col2aRow1</span>
                    </div>
                    <div class="tablet-col-3">
                        <div>
                            <div>
                                <p><span class="item-header prevent-break">Value: 356 €</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="tablet-col-3 text-right">
                        <div>
                            <p><span class="item-header prevent-break"><span>XZS $34</span>
                                <!-- react-text: 1647 -->&nbsp;
                                <!-- /react-text --><span>BAS $321</span></span>
                            </p>
                        </div>
                    </div>
                    <div class="tablet-col-1">
                        <div class="center-text"><span class="icon-unconfirmed confirm link-icon "></span><span class="icon-edit link-icon edit"></span><span class="icon-delete link-icon remove"></span>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

想法是首先找到要对其执行操作的表，然后导航到特定行并执行操作。

下面的代码将在我们知道行的内容时起作用，在这种情况下我们将执行getText并比较值，如果找到值将点击并退出循环，这将有助于保持动态

List<WebElement> tableElement = driver.findElements(By.xpath("//div[contains(@class,'settlement-item')]")); // findElements will return a list of table elements
for (WebElement webElement : tableElement) {
 if (webElement.getText().contains(rowData)) { //rowData is the data value which we are looking for to perform operation on
          webElement.click();
          break;
}

如果想要获取最后一行并执行操作，因为我们有

列表我们可以获得长度并对其执行某些操作。

List<WebElement> tableElement = 
        driver.findElements(By.xpath("//div[contains(@class,'settlement-item')]")); // findElements will return a list of table elements
        int index = tableElement.size();
        tableElement.get(index-1).click();
     }

Answer 2

你可以找到最后一行（我使用Python）：

all_rows = driver.find_elements_by_css_selector("div.settlement-item div.row")
last_row = all_rows[-1]

然后点击行中的图标：

unconfirmed_icon = last_row.find_element_by_css_selector("span.icon-unconfirmed")
unconfirmed_icon.click()

使用Selenium导航通过DIV元素创建的HTML表

2 个答案: