Question

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

<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：没有这样的元素：无法找到元素： {＆＃34;方法＆＃34;：＆＃34; css选择器＆＃34;，＆＃34;选择器＆＃34;：}

如何绕过这些ng-view代码并找到合适的webelement？

Answer 1

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

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

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

希望它会对你有所帮助。

Answer 2

您必须使用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

用于html页面中多个ng-view的css选择器

2 个答案: