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

Question

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

我想找到一种方法来点击 table 最后一行的一些图标。无法使用 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 </span>
                                <!-- react-text: 1647 -->&nbsp;
                                <!-- /react-text --><span>BAS 1</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

您可以在最后一行找到类似的内容（我正在使用 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()

Answer 2

思路是先定位到你要操作的table，然后导航到特定行进行操作。

当我们知道行的内容时，下面的代码将起作用，在这种情况下，我们将执行 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我们可以得到长度并对其进行一定的操作

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();
     }

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

Using Selenium to navigate an HTML table created via DIV elements

html

selenium

getelementbyid