c# - 如果所有 id 都相同，Selenium C# 有没有办法在表上找到特定的更新按钮？

Question

我正在编写一个 selenium 测试来测试一个 crud 应用程序，您可以在其中添加、更新或删除用户。我有一个动态显示所有字段的表格。当我添加新用户时，还会添加一个新的编辑按钮，并在单击时编辑该特定用户。尝试使用 selenium 进行测试时，我不确定如何编辑特定用户。我想编辑列表中的第 4 个用户，即索引 3。我试过这个，

var edit = wait.Until((d) => d.FindElements(By.Id("edit")));
edit[3].Click();

但得到一个索引超出范围错误。如果我这样做:

var edit = wait.Until((d) => d.FindElement(By.Id("edit")));
edit.Click();

它允许我编辑表格中的第一个人。

<tr>
    <td>Ray Peterson</td>
    <td>deleted_0_rpeterson@aol.com</td>
    <td>Developer</td>
    <td>
        <div class="pointer">
            <div class="sprk-o-Stack sprk-o-Stack--split@xs" data-id="">
                <div class="sprk-o-Stack__item sprk-o-Stack__item--half@xs sprk-o-Box" data-id="">
                    <div class="updateUser">
                        <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 64 64" data-id="" id="edit">
                            <use xlink:href="#editable"></use>
                        </svg>
                    </div>
                </div>
                <div class="sprk-o-Stack__item sprk-o-Stack__item--half@xs sprk-o-Box" data-id="">
                    <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 64 64" data-id="" id="deleted_0_rpeterson@aol.com">
                        <use xlink:href="#trash"></use>
                    </svg>
                </div>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>Fredo Corleone</td>
    <td>godfather88@gmail.com</td>
    <td>Developer</td>
    <td>
        <div class="pointer">
            <div class="sprk-o-Stack sprk-o-Stack--split@xs" data-id="">
                <div class="sprk-o-Stack__item sprk-o-Stack__item--half@xs sprk-o-Box" data-id="">
                    <div class="updateUser">
                        <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 64 64" data-id="" id="edit">
                            <use xlink:href="#editable"></use>
                        </svg>
                    </div>
                </div>
                <div class="sprk-o-Stack__item sprk-o-Stack__item--half@xs sprk-o-Box" data-id="">
                    <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 64 64" data-id="" id="godfather88@gmail.com">
                        <use xlink:href="#trash"></use>
                    </svg>
                </div>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>Try Again</td>
    <td>tryagain@gmail.com</td>
    <td>Developer</td>
    <td>
        <div class="pointer">
            <div class="sprk-o-Stack sprk-o-Stack--split@xs" data-id="">
                <div class="sprk-o-Stack__item sprk-o-Stack__item--half@xs sprk-o-Box" data-id="">
                    <div class="updateUser">
                        <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 64 64" data-id="" id="edit">
                            <use xlink:href="#editable"></use>
                        </svg>
                    </div>
                </div>
                <div class="sprk-o-Stack__item sprk-o-Stack__item--half@xs sprk-o-Box" data-id="">
                    <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 64 64" data-id="" id="tryagain@gmail.com">
                        <use xlink:href="#trash"></use>
                    </svg>
                </div>
            </div>
        </div>
    </td>
</tr>

Answer 1

如果您想编辑特定用户，我发现最好的方法是创建一个定位器，该定位器使用表中的数据来查找特定的表行，然后单击该行中的“编辑”按钮。由于我们正在搜索表格以根据包含的文本查找元素，因此我们唯一的定位器选项是 XPath。
我无法使用包含渲染代码的当前 HTML 对此进行测试，但我根据您发布的内容模拟了一些内容，这些内容应该有效或至少接近。
如果要按名字姓氏搜索，可以使用

//tr[./td[1][.='John Smith']]//*[name()='svg'][@id='edit']

如果您想通过电子邮件搜索，您可以使用

//tr[./td[2][.='address@email.com']]//*[name()='svg'][@id='edit']

理想情况下，您会将这些放入方法中并传入搜索条件，然后让它为您单击“编辑”按钮，以便它们可重用。

/// <summary>
/// Finds the user by the supplied email and clicks Edit
/// </summary>
/// <param name="email">The email address of the user to be edited</param>
public void EditUserByEmail(string email)
{
    By locator = By.XPath($"//tr[./td[2][.='{email}']]//*[name()='svg'][@id='edit']");
    WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
    wait.Until(ExpectedConditions.ElementToBeClickable(locator)).Click();
}

/// <summary>
/// Finds the user by the supplied full name and clicks Edit
/// </summary>
/// <param name="fullName">The full name of the user to be edited in the format "firstName lastName"</param>
public void EditUserByName(string fullName)
{
    By locator = By.XPath($"//tr[./td[1][.='{fullName}']]//*[name()='svg'][@id='edit']");
    WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
    wait.Until(ExpectedConditions.ElementToBeClickable(locator)).Click();
}

你可以这样称呼它

EditUserByEmail("pinocchio@aol.com");