javascript - 在 Protractor JS 中访问 Angular JS 指令内的元素

Question

所以我有一个将用户添加到数据库的程序。单击“添加用户”时，它会调用 Angular 中的自定义指令，将 HTML 呈现到页面。在 Protractor 中，我试图编写一个测试来通过查找并填写必填字段来添加用户。

到目前为止，这有效:

it('should click the add user button', function(){
    browser.waitForAngular();
    var addUser = element(by.id('addUserDesktop'));
    browser.wait(EC.elementToBeClickable(addUser), 10000);
    addUser.click().then(function(){
        setTimeout(function(){
            expect(element(by.id('useradd')).isPresent()).toBe(true);
        },2000);
    });
});

我在其中放置了一个 setTimeout ，认为该元素对于 Protractor 来说可能加载速度不够快。

通过后我进行了这个测试:

it('should find and enter data into the required fields to add a user', function(){
    browser.driver.findElement(by.id('username')).sendKeys(username);
});

但是我收到了这个错误:

ElementNotVisibleError: element not visible

任何知道如何解决这个问题的人都已经尝试了一段时间，但它只是让我头疼!

Answer 1

在protractor中，有一个内置机制来等待页面上满足特定条件。在这种情况下visibilityOf Expected Condition与 browser.wait() 一起使用应该可以解决问题:

var EC = protractor.ExpectedConditions;

addUser.click().then(function() {
    browser.wait(EC.visbilityOf(element(by.id('useradd'))), 5000);
});