在 selenium web 驱动程序中缩短长 css 路径

Question

我使用的 CSS 选择器是

#menu-container > div.navbar-collapse.collapse.bs-navbar-collapse > ul:nth-child(1) > li.dropdown.open > ul > li:nth-child(1) > a > span.menu-label

有没有办法让它变短？

HTML

<div id="menu-container" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand">SmartStudio</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse bs-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">File</a>
                <ul class="dropdown-menu">
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Save</span>
                            <span class="pull-right">⌘ S</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Fonts</span>
                        </a>
                    </li>
                    <li class="divider"><span></span></li>
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Publish</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Edit</a>
                <ul class="dropdown-menu">
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Undo</span>
                            <span class="pull-right">⌘ Z</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Redo</span>
                            <span class="pull-right">⇧ ⌘ Z</span>
                        </a>
                    </li>
                    <li class="divider"><span></span></li>
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Cut</span>
                            <span class="pull-right">⌘ X</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Copy</span>
                            <span class="pull-right">⌘ C</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Paste</span>
                            <span class="pull-right">⌘ V</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span class="pull-left"></span> its too long to use in code. Is there a way to make it shorter in selenium web driver?
                            <span class="menu-label">Paste in Place</span>
                            <span class="pull-right">⇧ ⌘ V</span>
                        </a>
                    </li>
                    <li class="divider"><span></span></li>
                    <li class="dropdown-submenu">
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Arrange</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a>
                                    <span class="pull-left"></span>
                                    <span class="menu-label">Bring to Front</span>
                                    <span class="pull-right">⇧ ⌘ ↑</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <span class="pull-left"></span>
                                    <span class="menu-label">Bring Forward</span>
                                    <span class="pull-right">⌘ ↑</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <span class="pull-left"></span>
                                    <span class="menu-label">Send Backward</span>
                                    <span class="pull-right">⌘ ↓</span>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <span class="pull-left"></span>
                                    <span class="menu-label">Send to Back</span>
                                    <span class="pull-right">⇧ ⌘ ↓</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">View</a>
                <ul class="dropdown-menu">
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Hide Panels</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Hide Off Page Dimming</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Panel</a>
                <ul class="dropdown-menu">
                    <li>
                        <a>
                            <span class="pull-left icon icon-check"></span>
                            <span class="menu-label">Project</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span class="pull-left icon icon-check"></span>
                            <span class="menu-label">Properties</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span class="pull-left icon icon-check"></span>
                            <span class="menu-label">Design</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="dropdown open"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Help</a>
                <ul class="dropdown-menu">
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Support Resources</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Rate Us</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span class="pull-left"></span>
                            <span class="menu-label">Suggest a Feature</span>
                        </a>

Answer 1

我认为您有多种选择...我将列出一些您可以尝试的方法，看看它们是否适合您。

最简单的方法是使用菜单的链接文本，然后是子菜单项。它可能有效，也可能无效......一个问题可能是页面上“帮助”链接的唯一性，可能不止一个。看来您必须单击“帮助”菜单才能显示包含“支持资源”链接的子菜单。

String menuName = "Help";
String submenuName = "Support Resources";
driver.findElement(By.linkText(menuName)).click();
driver.findElement(By.linkText(submenuName)).click();

如果这不起作用，这应该......或者至少为您指明正确的方向。您需要在菜单中循环查找正确的链接文本，单击它以显示子菜单，在子菜单中循环查找正确的链接文本，然后单击它。

String menuName = "Help";
String submenuName = "Support Resources";
List<WebElement> menus = driver.findElements(By.cssSelector("#menu-container > div > ul.nav.navbar-nav > li.dropdown"));
// List<WebElement> menus = driver.findElements(By.cssSelector("#menu-container li.dropdown")); // possible shorter alternative
for (WebElement menu : menus)
{
    if (menu.getText().equals(menuName))
    {
        menu.click();
        List<WebElement> submenus = menu.findElements(By.cssSelector("span.menu-label"));
        for (WebElement submenu : submenus)
        {
            if (submenu.getText().equals(submenuName))
            {
                submenu.click();
                break;
            }
        }
        break;
    }
}

Answer 2

如果不查看您所指的 HTML，这是不可能确定的。但是，看起来您可以摆脱这种情况：

#menu-container span.menu-label

您似乎熟悉> 运算符，它选择元素的直接子元素。 运算符（空格）选择元素的任何后代。

这仅适用于 ID 为 menu-container 的元素内没有其他 spans 且类为 menu-label 的情况。我假设是这种情况。

如果您想要更确定的答案，则需要提供完整的 HTML 文件。

编辑：好的，既然您已经提供了 HTML，那么问题就很清楚了：您的 HTML 使用了样式类，但没有使用描述性类。您有两个选择：为您的 HTML 元素添加更具体的类，或者只处理您的很长的选择器。没有其他选择。

当然，如果您选择第二个选项，您应该将该 CSS 选择器存储在一个变量中，以赋予它一个有用的名称，使其可重用，并在需要时易于更改。