ElementNotVisibleError 尽管在测试浏览器中可见
ElementNotVisibleError although visible in test browser
现在尝试让它工作一天。
我想在端到端测试时单击在浏览器中可见的元素，但是出现错误
ElementNotVisibleError: element not visible
该元素在测试浏览器中可见！
我要点击第一个
line
元素是
的 child
<g class="ct-series ct-series-a">
与
相差 child
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('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(函数(a){
console.log('bars count', 一个);
});
bar.isDisplayed().then(函数(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 直播（npm 运行 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
...
您可以点击 javascript:
browser.executeScript("arguments[0].click();", bar.getWebElement());
有关此解决方案的详细信息，请参阅 。
或者，您可以尝试在点击之前移动到元素：
browser.actions().mouseMove(bar).click().perform();
或者，scrolling into element's view：
browser.executeScript("arguments[0].scrollIntoView();", bar.getWebElement());
bar.click();
现在尝试让它工作一天。
我想在端到端测试时单击在浏览器中可见的元素，但是出现错误
ElementNotVisibleError: element not visible
该元素在测试浏览器中可见！
我要点击第一个
line
元素是
的 child
<g class="ct-series ct-series-a">
与
相差 child
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('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(函数(a){ console.log('bars count', 一个); });
bar.isDisplayed().then(函数(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 直播（npm 运行 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
...
您可以点击 javascript:
browser.executeScript("arguments[0].click();", bar.getWebElement());
有关此解决方案的详细信息，请参阅
或者，您可以尝试在点击之前移动到元素：
browser.actions().mouseMove(bar).click().perform();
或者，scrolling into element's view：
browser.executeScript("arguments[0].scrollIntoView();", bar.getWebElement());
bar.click();