html页面中多个ng-view的css选择器答案

【问题标题】：css selector for multiple ng-view in a html pagehtml页面中多个ng-view的css选择器
【发布时间】：2017-05-31 15:40:46
【问题描述】：

我正在尝试获取具有多个 <ng-view> 标签和具有相同名称的类的网页中的文本框的 css 路径，如下所示：

<body class="learn-bar ng-scope" ng-app="todomvc">
  <aside class="learn">
    <ng-view class="ng-scope">
      <section id="todoapp" class="ng-scope">
         <header id="header">
            <h1>todos</h1>
            <form id="todo-form" class="ng-pristine ng-valid" ng-submit="addTodo()">
                 <input id="new-todo" class="ng-pristine ng-valid ng-touched" placeholder="Intended web element for which css path is needed" ng-model="newTodo" ng-disabled="saving" autofocus=""/>
           </form>
        </header >

Mozilla 上的 Firebug 扩展提供的 CSSselector 为：

html body.learn-bar.ng-scope ng-view.ng-scope section#todoapp.ng-scope header#header form#todo-form.ng-pristine.ng-valid input#new-todo.ng-pristine.ng-valid.ng-touched

当我这样做时似乎不起作用：

// node.js + selenium webdriver bindings
driver.findElement(By.css("<above css path>")).sendKeys("value");

报错：

NoSuchElementError：没有这样的元素：无法找到元素： {"方法":"css 选择器","选择器": }

如何绕过这些ng-view 标签并找到合适的网页元素？

【问题讨论】：

标签： html css node.js selenium mocha.js

【解决方案1】：

您必须使用relative 路径而不是absolute 路径。

如果你有元素 id 那么更好的方法是使用元素 ID 来定位元素。

在您的 HTML 中，您拥有 ID new-todo 您的元素，因此您可以像这样使用：

driver.findElement(By.id("new-todo")).sendKeys("value");

您仍在寻找要使用 CSSSelector 定位的元素，然后使用：

driver.findElement(By.cssSelector("input#new-todo")).sendKeys("ABC");

或使用该标签的类名：

driver.findElement(By.cssSelector("input.ng-pristine.ng-valid.ng-touched")).sendKeys("ABC");

如何绕过这些 ng-view 标签

您可以考虑父标签，无需在您的路径中包含该标签（您想跳过）：

aside.learn input#new-todo

这里我考虑了父标签，即aside，并在其中找到input

【讨论】：

我已经尝试过使用无效的 id 选择器。在节点中，webdriver.by seleniumhq.github.io/selenium/docs/api/javascript/module/…> 没有方法'cssSelector' 尝试了您在答案中提到的所有css路径，但不幸的是，没有任何效果。跟踪：NoSuchElementError：没有这样的元素：无法找到元素：{"method":"css selector","selector":"*[id="new-todo"]"} 版本信息：chrome 58.0 chrome 驱动程序：2.24
不，网页中没有 iframe 标签。
在节点中有driver.findElement(By.css('.autocomplete')) css 而不是cssSelector
让我们continue this discussion in chat。
在 sendKeys 之前添加了一个等待，它与 By.css 方法一起使用！ driver.wait(until.elementLocated(By.css("")));

【解决方案2】：

在这种情况下，您可以使用动态 Xpath

对于您的情况，您可以使用以下 xpath：

//input[@placeholder='Intended web element for which css path is needed']

希望对你有帮助。

【讨论】：

需要在 findElement 方法之前放置等待，否则会失败。有效的答案。