使用 Protractor 获取 ng-repeat 中的元素

Question

我正在为我正在开发的应用程序编写端到端测试，我正在尝试为警报指令 (Angular UI Bootstrap) 生成的警报编写测试在包装器指令中。这是我到目前为止编写的代码：

首先我们有用于生成警报的包装器指令

// Grab our directive controller
// The controller just contains the alert functions for the Angular UI     
// Bootstrap alerts directive
import InfoAlertController from './info-alert.controller.js';

let moduleName = 'infoAlert';

// ## Directive Definition
class InfoAlert {

    constructor() {

        this.template =
        `
            <div>

                <alert
                    ng-repeat="alert in vm.alerts"
                    type="{{ alert.type }}"
                    close="vm.closeAlert($index)" >

                        {{ alert.msg }}

                </alert>

            </div>
        `;
        this.restrict = 'E';
        this.scope = {};
        this.bindToController = {

            name : '@?'
        };
        this.transclude = true;
        this.controller = InfoAlertController;
        this.controllerAs = 'vm';
    }

    // ### Optional Link Function
    link (scope, elem, attrs, vm, transclude) {

    }
}

export default [moduleName, directiveFactory(InfoAlert)];

这是在 user login 组件视图中实现的指令

<info-alert
     name="loginAlerts">
</info-alert>

user login 组件是另一个指令，它包含一个带有 Angular 验证的表单，该验证与身份验证服务交互。

这是我正在尝试编写的测试

describe('login component', () => {

    it('should display an error after failedauthentication', () => {

            browser.get('/login');

            element(by.model('vm.user.username')).sendKeys('nerfherder');

            element(by.model('vm.user.password')).sendKeys('badpassword');

            element(by.css('.btn-custom')).click();

            let e = element(by.repeater('alert in vm.alerts').row(0));

            // This is always fails no matter what I try
            expect(e.isDisplayed()).toBe(true);
    });
});

我得到的错误是 Expected 0 to be greater than 0，我认为这意味着它没有找到使用我正在使用的方法的警报。我还尝试通过 class element(by.css('.alert-danger')); 和 element(by.css('.alert'));分别。它也不适用于 browser.waitForAngular();.

我也尝试过量角器预期条件的实现，但无济于事。

所有功能都适用于手动测试，并且在测试执行期间会弹出警报。任何帮助将不胜感激，因为这个开发人员被难住了。

解决方案

此解决方案基于以下 alecxe 的回答：

describe('login component', () => {

    it('should display an error after failed authentication', () => {

        let EC = protractor.ExpectedConditions;

        browser.get('/login');

        element(by.model('vm.user.username')).sendKeys('nerfherder');

        element(by.model('vm.user.password')).sendKeys('badpassword');

        let alert = element(by.repeater('alert in vm.alerts').row(0));

        let alertLoaded = EC.visibilityOf(alert);

        element(by.css('.btn-custom')).click();

        // UI Bootstrap alert class
        let e = element(by.css('.alert-danger'));

        browser.wait(alertLoaded, 5000);

        expect(e.isDisplayed()).toBe(true);
    });
});

测试现在顺利通过。

Answer 1

试试这个::

let e = element.all(by.repeater('alert in vm.alerts').row(0));

Answer 2

您可能需要明确等待警报出现：

var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(element(by.repeater('alert in vm.alerts'))), 5000);

使用 Protractor 获取 ng-repeat 中的元素

Getting an Element Inside ng-repeat with Protractor

javascript

angularjs

angular-ui-bootstrap

protractor