如何单击引用不同元素的按钮？

Question

我是Selenium的新手，昨天遇到一个问题，找不到解决方案。因此，我有一个页面，其中需要单击一个按钮，但是此页面上还有其他具有相同名称的按钮。

请参见下图：

我正在尝试做类似的事情：

driver.findElement(By.Xpath(("//span[@class='slider round'] and //td[contains(.,'célula 1')]"));

这是HTML代码：

<div _ngcontent-c8="">

        <table _ngcontent-c8="" class="table w-100">
            <thead _ngcontent-c8="">
                <tr _ngcontent-c8="" align="center" height="50">
                    <th _ngcontent-c8="">Nome</th>
                    <th _ngcontent-c8="" colspan="7">Ações</th>
                </tr>
            </thead>
            <tbody _ngcontent-c8="">
                <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><tr _ngcontent-c8="" align="center">
                    <td _ngcontent-c8="">célula 1</td>
                    <td _ngcontent-c8="">
                        <label _ngcontent-c8="" class="switch" ng-reflect-ngb-tooltip="Desativar célula">
                            <input _ngcontent-c8="" type="checkbox" ng-reflect-model="1" class="ng-untouched ng-pristine ng-valid">
                            <span _ngcontent-c8="" class="slider round"></span>
                        </label>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-primary" ngbtooltip="Alterar célula" placement="top" type="button" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Alterar célula">
                            <span _ngcontent-c8="" class="oi oi-pencil"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-danger" ngbtooltip="Apagar célula" placement="top" type="button" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Apagar célula">
                            <span _ngcontent-c8="" class="oi oi-trash"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-info" ngbtooltip="Configuração de célula" placement="top" type="button" tabindex="0" ng-reflect-router-link="/configuracao-celula" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Configuração de célula">
                            <span _ngcontent-c8="" class="oi oi-wrench"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-secondary" ngbtooltip="Campos da célula" placement="top" type="button" tabindex="0" ng-reflect-router-link="/campos" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Campos da célula">
                            <span _ngcontent-c8="" class="oi oi-list"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-dark" ngbtooltip="Tabulações da célula" placement="top" type="button" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Tabulações da célula">
                            <span _ngcontent-c8="" class="oi oi-bookmark"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-warning" ngbtooltip="Configurar Pausa" placement="top" type="button" tabindex="0" ng-reflect-router-link="/motivos-pausa,1" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Configurar Pausa">
                            <span _ngcontent-c8="" class="oi oi-media-pause"></span>
                        </button>
                    </td>
                </tr><tr _ngcontent-c8="" align="center">
                    <td _ngcontent-c8="">célula 2</td>
                    <td _ngcontent-c8="">
                        <label _ngcontent-c8="" class="switch" ng-reflect-ngb-tooltip="Desativar célula">
                            <input _ngcontent-c8="" type="checkbox" ng-reflect-model="1" class="ng-untouched ng-pristine ng-valid">
                            <span _ngcontent-c8="" class="slider round"></span>
                        </label>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-primary" ngbtooltip="Alterar célula" placement="top" type="button" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Alterar célula">
                            <span _ngcontent-c8="" class="oi oi-pencil"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-danger" ngbtooltip="Apagar célula" placement="top" type="button" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Apagar célula">
                            <span _ngcontent-c8="" class="oi oi-trash"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-info" ngbtooltip="Configuração de célula" placement="top" type="button" tabindex="0" ng-reflect-router-link="/configuracao-celula" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Configuração de célula">
                            <span _ngcontent-c8="" class="oi oi-wrench"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-secondary" ngbtooltip="Campos da célula" placement="top" type="button" tabindex="0" ng-reflect-router-link="/campos" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Campos da célula">
                            <span _ngcontent-c8="" class="oi oi-list"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-dark" ngbtooltip="Tabulações da célula" placement="top" type="button" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Tabulações da célula">
                            <span _ngcontent-c8="" class="oi oi-bookmark"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-warning" ngbtooltip="Configurar Pausa" placement="top" type="button" tabindex="0" ng-reflect-router-link="/motivos-pausa,2" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Configurar Pausa">
                            <span _ngcontent-c8="" class="oi oi-media-pause"></span>
                        </button>
                    </td>
                </tr><tr _ngcontent-c8="" align="center">
                    <td _ngcontent-c8="">célula 3</td>
                    <td _ngcontent-c8="">
                        <label _ngcontent-c8="" class="switch" ng-reflect-ngb-tooltip="Ativar célula">
                            <input _ngcontent-c8="" type="checkbox" ng-reflect-model="0" class="ng-untouched ng-pristine ng-valid">
                            <span _ngcontent-c8="" class="slider round"></span>
                        </label>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-primary" ngbtooltip="Alterar célula" placement="top" type="button" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Alterar célula">
                            <span _ngcontent-c8="" class="oi oi-pencil"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-danger" ngbtooltip="Apagar célula" placement="top" type="button" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Apagar célula">
                            <span _ngcontent-c8="" class="oi oi-trash"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-info" ngbtooltip="Configuração de célula" placement="top" type="button" tabindex="0" ng-reflect-router-link="/configuracao-celula" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Configuração de célula">
                            <span _ngcontent-c8="" class="oi oi-wrench"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-secondary" ngbtooltip="Campos da célula" placement="top" type="button" tabindex="0" ng-reflect-router-link="/campos" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Campos da célula">
                            <span _ngcontent-c8="" class="oi oi-list"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-dark" ngbtooltip="Tabulações da célula" placement="top" type="button" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Tabulações da célula">
                            <span _ngcontent-c8="" class="oi oi-bookmark"></span>
                        </button>
                    </td>
                    <td _ngcontent-c8="">
                        <button _ngcontent-c8="" class="btn btn-warning" ngbtooltip="Configurar Pausa" placement="top" type="button" tabindex="0" ng-reflect-router-link="/motivos-pausa,57" ng-reflect-placement="top" ng-reflect-ngb-tooltip="Configurar Pausa">
                            <span _ngcontent-c8="" class="oi oi-media-pause"></span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

Answer 1

到目前为止，处理这些类型的控件的最简单方法是为自己创建一个地图。像这样：

private Map<String, WebElement> buttonsMap = new HashMap<String, WebElement>();

private void createButtonsMap() {
    // find your table - adjust the locator as needed!
    WebElement table = driver.findElement(By.className("w-100"));
    // find every row in the table
    List<WebElement> tableRows = table.findElements(By.tagName("tr"));
    for (WebElement tableRow : tableRows) {
        // find every data cell in each row
        List<WebElement> tableDatas = tableRow.findElements(By.tagName("td"));
        try {
            // find the "name" for each row; something like "célula 1"
            String name = tableDatas.get(0).getText();
            // find your button
            WebElement button = tableDatas.get(1).findElement(By.tagName("button"));
            // store both in the map
            buttonsMap.put(name, button);
        } catch (NoSuchElementException ignore) {
        }
    }
}

需要try..catch来解决第一行没有按钮的事实。

然后单击您只需要的任何按钮：

public void clickButton(String name) {
    buttonsMap.get(name).click();
}

如果使用的是PageObjects，则需要从构造函数中调用createButtonsMap()。

Answer 2

根据您共享的 HTML ，尚不清楚哪个元素类似于圆形滑块图标。要单击圆形滑块，因为该元素是Angular元素，您需要诱使 WebDriverWait 使元素可点击，您可以使用以下任一解决方案：

driver.findElement(By.Xpath(("//td[contains(.,'célula 1')]//following::td[1]/label//span[@class='slider round']")).click();
//or
driver.findElement(By.Xpath(("//td[contains(.,'célula 1')]//following::td[1]/label/input[@class='ng-untouched ng-pristine ng-valid' and @type='checkbox']")).click();