ElementNotVisibleError虽然在测试浏览器中可见

时间:2016-01-20 11:51:06

标签: angularjs protractor angularjs-e2e e2e-testing

现在试着让它工作一天。

我想在e2e测试时单击浏览器中可见的元素,但是我收到错误 ElementNotVisibleError: element not visible

元素在测试浏览器中可见!

我想点击第一个

line

元素是

的孩子

<g class="ct-series ct-series-a">

的遥远的孩子

stackedBar

HTML

<chartist id="stackedBar" class="ct-chart ct-golden-section" chartist-data="stackedBar.data" chartist-chart-type="{{stackedBar.type}}" chartist-chart-options="stackedBar.options" chartist-events="stackedBar.events"> </chartist>

测试

``` var chart = element(by.id(&#39; stackedBar&#39;));     var series = chart.element(by.css(&#39; .ct-series-a&#39;));     var bars = series.all(by.css(&#39; .ct-bar&#39;));     var bar = series.all(by.css(&#39; .ct-bar&#39;))。first();

chart.isDisplayed().then(function (a) {
      browser.debugger();

  console.log("chart isDisplayed", a)
});

chart.isPresent().then(function (a) {
  browser.debugger(); // element is visible in browser!

  console.log("chart isPresent", a)
});

series.isDisplayed().then(function (a) {
  browser.debugger(); // element is visible in browser!

  console.log("series isDisplayed", a)
});

series.isPresent().then(function (a) {
      browser.debugger();

  console.log("series isPresent", a)
});

bars.count()。then(function(a){       console.log(&#39; bar count&#39;,a);     });

bar.isDisplayed()。then(function(a){           browser.debugger();

  console.log("bar isDisplayed", a)
});

bar.isPresent().then(function (a) {
      browser.debugger();

  console.log("bar isPresent", a)
});

bar.getAttribute('class').then( function(a) {
  console.log( "class", a)
});

bar.getAttribute('ct:meta').then( function(a) {
  console.log( "meta", a)
});

bar.click(); //  ElementNotVisibleError: element not visible

setTimeout( function() {
      done();
},20000);

```

Html live(npm run protractor-debug)

<chartist id="stackedBar" class="ct-chart ct-golden-section ng-isolate-scope" chartist-data="stackedBar.data" chartist-chart-type="Bar" chartist-chart-options="stackedBar.options" chartist-events="stackedBar.events"> <div class="ct-tooltip" style="display: none; left: 634px; top: 287px;"><p>Tag: <b>20. Januar 2016</b></p><p class="spacer-20"><b>Angenommen (G)</b></p><p>Anzahl absolut: <b>5</b></p><p>Anzahl prozentual: <b>100%</b></p></div><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-bar" style="width: 100%; height: 100%;"><g class="ct-grids"></g><g><g class="ct-series ct-series-a"><line x1="90.57142857142857" x2="90.57142857142857" y1="450" y2="106" class="ct-bar" value="4" meta="G|2016-01-14|0|0|4"></line><line x1="191.71428571428572" x2="191.71428571428572" y1="450" y2="192" class="ct-bar" value="3" meta="G|2016-01-15|0|0|3"></line><line x1="292.85714285714283" x2="292.85714285714283" y1="450" y2="20" class="ct-bar" value="5" meta="G|2016-01-16|0|0|5"></line><line x1="394" x2="394" y1="450" y2="20" class="ct-bar" value="5" meta="G|2016-01-17|0|0|5"></line><line x1="495.1428571428571" x2="495.1428571428571" y1="450" y2="20" class="ct-bar" value="5" meta="G|2016-01-18|0|0|5"></line><line x1="596.2857142857142" x2="596.2857142857142" y1="450" y2="20" class="ct-bar" value="5" meta="G|2016-01-19|0|0|5"></line><line x1="697.4285714285714" x2="697.4285714285714" y1="450" y2="20" class="ct-bar" value="5" meta="G|2016-01-20|0|0|5"></line></g><g class="ct-series ct-series-b"><line x1="90.57142857142857" x2="90.57142857142857" y1="106" y2="106" class="ct-bar" value="" meta="Y|2016-01-14|0|0|4"></line><line x1="191.71428571428572" x2="191.71428571428572" y1="192" y2="192" class="ct-bar" value="" meta="Y|2016-01-15|0|0|3"></line><line x1="292.85714285714283" x2="292.85714285714283" y1="20" y2="20" class="ct-bar" value="" meta="Y|2016-01-16|0|0|5"></line><line x1="394" x2="394" y1="20" y2="20" class="ct-bar" value="" meta="Y|2016-01-17|0|0|5"></line><line x1="495.1428571428571" x2="495.1428571428571" y1="20" y2="20" class="ct-bar" value="" meta="Y|2016-01-18|0|0|5"></line><line x1="596.2857142857142" x2="596.2857142857142" y1="20" y2="20" class="ct-bar" value="" meta="Y|2016-01-19|0|0|5"></line><line x1="697.4285714285714" x2="697.4285714285714" y1="20" y2="20" class="ct-bar" value="" meta="Y|2016-01-20|0|0|5"></line></g><g class="ct-series ct-series-c"><line x1="90.57142857142857" x2="90.57142857142857" y1="106" y2="106" class="ct-bar" value="" meta="R|2016-01-14|0|0|4"></line><text x="90.57142857142857" y="96" style="" class="ct-bar-label">4</text><line x1="191.71428571428572" x2="191.71428571428572" y1="192" y2="192" class="ct-bar" value="" meta="R|2016-01-15|0|0|3"></line><text x="191.71428571428572" y="182" style="" class="ct-bar-label">3</text><line x1="292.85714285714283" x2="292.85714285714283" y1="20" y2="20" class="ct-bar" value="" meta="R|2016-01-16|0|0|5"></line><text x="292.85714285714283" y="10" style="" class="ct-bar-label">5</text><line x1="394" x2="394" y1="20" y2="20" class="ct-bar" value="" meta="R|2016-01-17|0|0|5"></line><text x="394" y="10" style="" class="ct-bar-label">5</text><line x1="495.1428571428571" x2="495.1428571428571" y1="20" y2="20" class="ct-bar" value="" meta="R|2016-01-18|0|0|5"></line><text x="495.1428571428571" y="10" style="" class="ct-bar-label">5</text><line x1="596.2857142857142" x2="596.2857142857142" y1="20" y2="20" class="ct-bar" value="" meta="R|2016-01-19|0|0|5"></line><text x="596.2857142857142" y="10" style="" class="ct-bar-label">5</text><line x1="697.4285714285714" x2="697.4285714285714" y1="20" y2="20" class="ct-bar" value="" meta="R|2016-01-20|0|0|5"></line><text x="697.4285714285714" y="10" style="" class="ct-bar-label">5</text></g></g><g class="ct-labels"><foreignObject style="overflow: visible;" x="40" y="455" width="101.14285714285714" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 101px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">14. Januar 2016</span></foreignObject><foreignObject style="overflow: visible;" x="141.14285714285714" y="455" width="101.14285714285714" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 101px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">15. Januar 2016</span></foreignObject><foreignObject style="overflow: visible;" x="242.28571428571428" y="455" width="101.14285714285717" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 101px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">16. Januar 2016</span></foreignObject><foreignObject style="overflow: visible;" x="343.42857142857144" y="455" width="101.14285714285711" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 101px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">17. Januar 2016</span></foreignObject><foreignObject style="overflow: visible;" x="444.57142857142856" y="455" width="101.14285714285711" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 101px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">18. Januar 2016</span></foreignObject><foreignObject style="overflow: visible;" x="545.7142857142857" y="455" width="101.14285714285722" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 101px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">19. Januar 2016</span></foreignObject><foreignObject style="overflow: visible;" x="646.8571428571429" y="455" width="101.14285714285711" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 101px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">20. Januar 2016</span></foreignObject></g></svg></chartist>

控制台输出:

chart isDisplayed true chart isPresent true series isDisplayed true series isPresent true bars count 7 bar isDisplayed false bar isPresent true class ct-bar meta null ... ElementNotVisibleError: element not visible ...

1 个答案:

答案 0 :(得分:1)

您可以点击点击

browser.executeScript("arguments[0].click();", bar.getWebElement());

有关此解决方案的详情,请参阅WebDriver click() vs JavaScript click()

或者,您可以在点击前尝试移动到元素

browser.actions().mouseMove(bar).click().perform();

或者,scrolling into element's view

browser.executeScript("arguments[0].scrollIntoView();", bar.getWebElement());
bar.click();