如何在`量角器'中定位动态元素 [英] how to locate dynamic elements in `protractor`

问题描述

失败：元素不可见

以下是我想要查找的元素的html代码：

 < a class =dropdown-toggle ng-binding ng-scopearia-expanded =false
 role =buttonhref =/data-toggle =dropdownng-if = tab.subtabs > 
 Content 
< span class =caret>< / span>< / a> 
< ul class =dropdown-menu ng-scoperole =menung-if =tab.subtabs> 
< li class =ng-scopeng-repeat =test in tab.subtabs> 
< a class =ng-bindingtarget =_ selfhref =/ custom / ui>自定义< / a> 
< / li> 
< li class =ng-scopeng-repeat =test in tab.subtabs> 
< a class =ng-bindingtarget =_ selfhref =/ patch / ui> Patch< / a>< / li> 
< li class =ng-scopeng-repeat =test in tab.subtabs> 
< a class =ng-bindingtarget =_ selfhref =/ swd / ui>软件< / a> 
  

我想点击标签中的元素：

 < a class =ng-bindingtarget =_ selfhref =/ custom / ui>自定义< / a> 
< a class =ng-bindingtarget =_ selfhref =/ patch / ui> Patch< / a> 
< a class =ng-bindingtarget =_ selfhref =/ swd / ui>软件< / a> 
  

我在量角器中尝试了以下代码，但它不起作用：

 它（应点击内容然后自定义，function（）{
元素（by.xpath（'/ html / body / bf-header / div / nav / div / div / div [2] / ul [1] 
 / li [2] / a'））。element by.xpath（'/ html / body / bf-header / div / nav / div / div 
 / div [2] / ul [1] / li [3] / ul / li [1]'）） .click（）; 
  

解决方案

元素（by.xpath（'/ html / body / bf-header / div / nav / div / div / div [2] / ul [1]

/ li [ 2] / a'））。element（by.xpath（'/ html / body / bf-header / div / nav / div / div

/ div [2] / ul [1] / li点击（）;

好吧，现在您可能会明白为什么量角器样式指南建议不要使用XPath定位技术：

永远不要使用xpath

为什么？

• 这是所有
• 中最慢和最脆弱的定位器策略标记是
  ，非常容易受到更改，因此xpath定位器需要
  很多维护


• xpath表达式不可读且非常困难
  debug

blockquote>

并非总是如此，如果您选择XPath，您创建的表达式必须至少非常简单易读。首先要解决的问题是，如果你要继续使用XPath，并不是要创建绝对的XPath表达式 - 你不必从 html 元素开始，并检查每一个元素在这种情况下，简单的通过链接文本或通过部分链接文本定位器应该完美：

 元素（by.linkText（Custom））。click（）; 
  

请注意， Failed：元素不可见错误可能会被抛出，因为在尝试点击子菜单（假设这些是您需要点击的子菜单链接）之前，您没有单击菜单打开它。

您可能还需要等待元素可点击：

  var EC =量角器.ExpectedConditions; 
 var custom = element（by.linkText（Custom））; 
 
 browser.wait（Ec.elementToBeClickable（custom），5000）; 
 custom.click（）; 
  

希望有所帮助。

I get this error when I try to run the code below:

Failed: element not visible

Following is the html code for the elements I want to locate:

<a class="dropdown-toggle ng-binding ng-scope" aria-expanded="false"    
role="button" href="/" data-toggle="dropdown" ng-if="tab.subtabs">
Content
<span class="caret"></span></a>
<ul class="dropdown-menu ng-scope" role="menu" ng-if="tab.subtabs">
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/custom/ui">Custom</a>
</li>
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/patch/ui">Patch</a></li>
<li class="ng-scope" ng-repeat="test in tab.subtabs">
<a class="ng-binding" target="_self" href="/swd/ui">Software</a>

I want to click on element within the tags:

<a class="ng-binding" target="_self" href="/custom/ui">Custom</a>
<a class="ng-binding" target="_self" href="/patch/ui">Patch</a>
<a class="ng-binding" target="_self" href="/swd/ui">Software</a>

I have tried following code in protractor, but it is not working:

it("should click on Content and then custom", function(){
    element(by.xpath('/html/body/bf-header/div/nav/div/div/div[2]/ul[1]  
   /li[2]/a')).element(by.xpath('/html/body/bf-header/div/nav/div/div   
   /div[2]/ul[1]/li[3]/ul/li[1]')).click();

解决方案

element(by.xpath('/html/body/bf-header/div/nav/div/div/div[2]/ul[1]
/li[2]/a')).element(by.xpath('/html/body/bf-header/div/nav/div/div
/div[2]/ul[1]/li[3]/ul/li[1]')).click();

Well, now you can probably see why the Protractor Style Guide recommends not to ever use XPath location technique:

NEVER use xpath

Why?

• It's the slowest and most brittle locator strategy of all
• Markup is very easily subject to change and therefore xpath locators require a lot of maintenance
• xpath expressions are unreadable and very hard to debug

It is not always true and, if you choose XPath, the expressions you make must at least really be simple and readable. The first thing to fix, if you are gonna stay with XPaths, is not to make absolute XPath expressions - you don't have to start with html element and check every single element going down the tree to the desired element.

---

In this case, simple "by link text" or "by partial link text" locators should work perfectly:

element(by.linkText("Custom")).click();

Note that the Failed: element not visible error might be thrown, because you don't click the menu to open it up, before trying to click the submenu (assuming these are the submenu links you need to click).

You might also need to wait for the element to be clickable:

var EC = protractor.ExpectedConditions;
var custom = element(by.linkText("Custom"));

browser.wait(Ec.elementToBeClickable(custom), 5000);
custom.click();

Hope that helps.

这篇关于如何在`量角器'中定位动态元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！