node.js - 如何使用 node.js 获取 nightwatch.js 中元素的位置

Question

我无法在侧菜单仪表板项目中找到该元素。请帮我解决这个问题。我提到了屏幕截图，以及查找位置的步骤。

下面是html代码:

<sidemenu id="sidebar-wrapper" layout="column" class="layout-column"><md-list role="list">
    <md-list-item layout="column" role="listitem" class="md-no-proxy _md layout-column">
        <a class="md-button md-ink-ripple layout-align-center-center layout-column" ng-transclude="" md-button="" aria-label="menu" href="#/dashboard" layout="column" layout-align="center center">
            <i class="material-icons silver ng-scope">view_module</i>
            <span class="ng-scope">
            Dashboard
            </span>
        </a>
    <div class="md-secondary-container"></div></md-list-item>
    <md-list-item layout="column" role="listitem" class="md-no-proxy _md layout-column">
        <a class="md-button md-ink-ripple layout-align-center-center layout-column" ng-transclude="" md-button="" aria-label="menu" href="#/projects" layout="column" layout-align="center center">
            <i class="material-icons silver ng-scope">perm_data_setting</i>
            <span class="ng-scope">
            Projects
            </span>
        <div class="md-ripple-container" style=""></div></a>
    <div class="md-secondary-container"></div></md-list-item>
    <md-list-item layout="column" role="listitem" class="md-no-proxy _md layout-column">
        <a class="md-button md-ink-ripple layout-align-center-center layout-column" ng-transclude="" md-button="" aria-label="menu" href="#/pipelines" layout="column" layout-align="center center">
            <i class="material-icons silver ng-scope">linear_scale</i>
            <span class="ng-scope">
            Pipelines
            </span>
        </a>
    <div class="md-secondary-container"></div></md-list-item>
</md-list></sidemenu>

我需要点击下面的标签a href="#/projects。

侧菜单 --> md-list --> md-lidt-item 1 --> a href="#/projects"

我尝试了不同的方法，但没有通过测试用例。

使用useXpath:

browser.useXpath()
browser.click('//*[@id="sidebar-wrapper"]/md-list/md-list-item[1]/a[href="#/projects"]')
browser.useCss()

并使用 getLocation:

browser.getLocation("#sidebar-wrapper md-list md-list-item.second a" ,function(result) {
          console.log('result', result)   // not getting anything.

        })

使用上面的代码时，出现这样的控制台错误。

result { status: -1,
  value: { message: 'no such element: Unable to locate element: {"method":"css selector","selector":"#sidebar-wrapper md-list md-
list-item.second a"}\n  (Session info: chrome=61.0.3163.100)\n  (Driver info: chromedriver=2.33.506120 (e3e53437346286c0bc2d2dc9a
a4915ba81d9023f),platform=Windows NT 10.0.15063 x86_64)' },
  errorStatus: 7,
  error: 'An element could not be located on the page using the given search parameters.' }
ERROR: Unable to locate element: "#sidebar-wrapper md-list md-list-item.second a" using: css selector

请帮我解决这个问题。谢谢

Answer 1

尝试#sidebar-wrapper md-list md-list-item:nth-child(2)

nth-child(n) 是获取第 n 个元素的更好方法。

:first-child 获取第一个

:last-child 获取最后一个

:nth-child(n) 获取第n个