1

Trying to get this to work for one day now.

I want to click on an element that is visible in browser while e2e testing, however I get the error ElementNotVisibleError: element not visible

The element IS visible in the test browser!

I want to click on the first

line

element which is a child of

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

which is a distant child of

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>

Test

``` var chart = element(by.id('stackedBar')); var series = chart.element(by.css('.ct-series-a')); var bars = series.all(by.css('.ct-bar')); var bar = series.all(by.css('.ct-bar')).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('bars count', 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>

Console output:

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 ...

Shlomo
  • 3,880
  • 8
  • 50
  • 82

1 Answers1

1

You can make a click with javascript:

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

See WebDriver click() vs JavaScript click() for more information about this solution.

Or, you can try moving to element before making a click:

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

Or, scrolling into element's view:

browser.executeScript("arguments[0].scrollIntoView();", bar.getWebElement());
bar.click();
Community
  • 1
  • 1
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195