如何处理量角器中的模态对话框？答案

【问题标题】：How to handle modal-dialog box in Protractor?如何处理量角器中的模态对话框？
【发布时间】：2015-03-28 23:12:30
【问题描述】：

我正在尝试在this 网站的模态对话框中使用sendKeys()。单击登录按钮后会出现此对话框。我似乎找不到任何方法来将焦点转移到盒子上。见gist

我尝试在

中使用browser.driver.switchTo().activeElement();

InvalidLogInUnSuccess: {
        get: function () {
            this.loginButton.click();
            browser.driver.switchTo().activeElement();
            this.email.sendKeys("Test");
        }
    }

没有运气并抛出ElementNotVisibleError

消息： ElementNotVisibleError：元素不可见（会话信息：chrome=41.0.2272.101）（驱动程序信息：chromedriver=2.14.313457（3d645c400edf2e2c500566c9aa096063e707c9cf），平台=Windows NT 6.3 x86_64）堆栈跟踪： ElementNotVisibleError: 元素不可见

【问题讨论】：

browser.switchTo().alert() 有帮助吗？ (reference)
@alecxe 感谢您的快速回答。它没有帮助只是尝试。获取 `NoSuchAlertError: no alert open` 和我，还在点击后添加了 2 秒的硬编码延迟，以确保这是加载问题。但没有运气
是的，抱歉，刚刚检查了一下，让我调试一下。谢谢。

标签： angularjs selenium modal-dialog protractor

【解决方案1】：

我在测试内部应用程序时遇到了类似的问题，当时我用 动画效果打开了一个弹出窗口（我认为这是罪魁祸首），这让我想到了等待一个元素在弹出窗口内变得可见。

visibilityOf expected condition 在这种情况下为我工作：

var email = element(by.css('.container.login.ng-scope #email'));
browser.wait(EC.visibilityOf(email), 5000);

email.sendKeys('test');

EC 是我通常在 onPrepare() 中全局定义的东西：

onPrepare: function () {
    ...

    global.EC = protractor.ExpectedConditions;
},

顺便说一句，我认为定位器可以在这里改进：

ng-scope 不是我会依赖的东西
email 字段上定义了一个model，怎么样：
```
element(by.model('email'));
```

仅供参考，我执行的完整规范：

"use strict";

describe("gifteng test", function () {
    var scope = {};

    beforeEach(function () {
        browser.get("http://www.gifteng.com/?login");
        browser.waitForAngular();
    });

    describe("Logging in", function () {
        it("should send keys to email", function () {
            var email = element(by.css('.container.login.ng-scope #email'));
            browser.wait(EC.visibilityOf(email), 5000);

            email.sendKeys('test');
        });

    });
});

【讨论】：

webstorm为什么抱怨ExpectedConditions
@Saifur 预期条件已在量角器1.7.0 中引入。您使用的是1.7.0 或更高版本吗？
@Saifur 还有，您是否在设置中启用了angular-protractor-DefinitelyTyped 和selenium-webdriver-DefinitelyTyped 库？
不确定我要检查版本。我通过 webstorm libraries 拉了它
@Saifur 你也可以运行npm list protractor 来检查你当前安装的版本。

【解决方案2】：

Protractor 使用你应该编写的 Promise ：

  InvalidLogInUnSuccess: {
            get:  async() => {
                await this.loginButton.click();
                await browser.driver.switchTo().activeElement();
                await this.email.sendKeys("Test");

只需在量角器代码之前应用 Promises。我删除了函数并写了异步。所以我应用了 async/await。

参考：Link

【讨论】：