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

Question

我正在编写一个 Selenium 测试来测试一个 CRUD 应用程序，您可以在其中添加、更新或删除用户。我有一个动态显示所有字段的表。当我添加新用户时，还会添加一个新的编辑按钮，单击后会编辑该特定用户。当尝试用 Selenium 测试这个时，我不确定如何编辑特定用户。我想编辑列表中的第四个用户，即索引 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><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dddcd5dccddcdde689e6cbc9dccddccbcad6d7f9d8d6d597dad6d4" rel="noreferrer noopener nofollow">[email protected]</a></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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44202128213021201b741b363421302136372b2a04252b286a272b29" rel="noreferrer noopener nofollow">[email protected]</a>">
                        <use xlink:href="#trash"></use>
                    </svg>
                </div>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>Fredo Corleone</td>
    <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0878f84868194888592d8d8a0878d81898cce838f8d" rel="noreferrer noopener nofollow">[email protected]</a></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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cfc7cccec9dcc0cdda9090e8cfc5c9c1c486cbc7c5" rel="noreferrer noopener nofollow">[email protected]</a>">
                        <use xlink:href="#trash"></use>
                    </svg>
                </div>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>Try Again</td>
    <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cebabcb7afa9afa7a08ea9a3afa7a2e0ada1a3" rel="noreferrer noopener nofollow">[email protected]</a></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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e397919a8284828a8da3848e828a8fcd808c8e" rel="noreferrer noopener nofollow">[email protected]</a>">
                        <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][.='<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e7e2e2f4e3f5f5c6e3ebe7efeaa8e5e9eb" rel="noreferrer noopener nofollow">[email protected]</a>']]//*[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("<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aedec7c0c1cdcdc6c7c1eecfc1c280cdc1c3" rel="noreferrer noopener nofollow">[email protected]</a>");