量角器在构建服务器上失败 - ElementNotVisibleError

Question

我所有的 angular 使用量角器和黄瓜的 e2e 测试在我的机器上都运行顺利且良好。但是一旦我运行在构建服务器上进行测试，我就会收到一个错误

ElementNotVisibleError: element not visible

Session info: chrome=51.0.2704.84

Driver info: chromedriver=2.21.371459

platform=Windows NT 6.1 SP1 x86_64

一开始，我认为这与时间有关，一些异步的事情正在发生，但经过数小时的调试，我终于可以在我的本地机器上重现错误。

最小化 window 是不够的，但如果我快速拖动鼠标以使 window 尽可能小，我会收到此错误。所以这只是 "window size" 的问题。

Thus the error message is quite ok, but how are protractor meant to run on a build server?

为什么有些测试通过了？量角器似乎 "see" 构建服务器上的东西，因此

我试过了

browser.driver.manage().window().maximize();

我试过了

browser.manage().window().setSize(1920, 1200);

我尝试按照建议更改我的代码，我尝试了很多（无望的）事情。没有任何效果。

我现在的大问题：当我想在某个页面上单击最右边的按钮时，我如何运行在构建服务器（在我的例子中是 TFS）上以稳定的方式进行量角器测试？

短代码示例：

browser.get(browser.baseUrl + '#/somePage').then...
element(by.id(buttonId)).click();

谢谢！

更新：

我遇到问题的主要原因是运行在构建服务器上进行测试时屏幕分辨率的宽度为 1024，因此 setSize(1920, 1200) 失败了。出于这个原因，我现在在 onPrepare 函数中添加了当前分辨率的输出，以便将来得到提示：

onPrepare: function () {
        browser.executeScript('return { height: screen.availHeight, width: screen.availWidth, top: screen.availTop, left: screen.availLeft};').then(function (result) {
            console.log("Screen resolution: ");
            console.log(result);
        });

        browser.manage().window().setSize(1920, 1200);

当然这可以稍微扩展以抛出异常或类似的东西。

Answer 1

有时，我们需要将所需元素显示在视图中以避免"Element not visible"错误。我们可以通过两种通用方式做到这一点：

使用"browser actions":

var elm = element(by.id("buttonid"));
browser.actions().mouseMove(elm).click().perform()

scroll into view:

var elm = element(by.id("buttonid"));
browser.executeScript("arguments[0].scrollIntoView();", elm.getWebElement());

同时链接有一组很好的东西你可以尝试解决这个问题。

量角器在构建服务器上失败 - ElementNotVisibleError

Protractor Fails on Build Server - ElementNotVisibleError

angularjs

protractor

cucumberjs