量角器 - 当DOM元素改变页面对象没有更新 [英] Protractor - Page Object is not updating when the DOM elements are changed

问题描述

我测试用angular.js和IM的Page对象的模式来写我的测试建立了一个SPA。在应用程序中，我们有一个数字，将被更新列表。比如有附件时曾经附件添加/删除，将更新的列表。要添加，我们有一个模式窗口的附件，当我们上传一个文件，然后单击确定。文件上传和列表更新。

I am testing a SPA built with angular.js and im using Page Objects pattern to write my tests. In the app we have a number of lists that will be updated. For example there is a list of attachments that will update when ever attachments are added/removed. To add an attachment we have a modal window and when we upload a file and click ok. The file uploads and the lists update.

我已经写了2页的对象，一个用于上传模态窗口，另一个为附件列表的preVIEW。在我的测试我第一次拿到附件的当前计数然后我点击一个按钮来激活模式窗口和附加的文件。然后我去在preVIEW页的附件另算和比较它由1递增，试验失败。 Page对象不更新，它仍然显示连接数为2。

I have written 2 page objects, one for the upload modal window and the other one for the preview of the attachment list. In my tests i first get the current count of the attachments then i click on a button to activate the modal window and attach the file. Then i take another count of the attachments in the preview page and compare it to be incremented by 1. But the tests fails. The page object is not updated and it still shows attachment count as 2.

测试

it('Should attach a file when a file is selected and OK button is pressed.', function () {
            var currentFileCount = viewMeetingTabPage.getMeetingAttachmentCount();

            viewMeetingPage.clickAddAttachmentButton();
            addAttchmentPage.attachFile();
            addAttchmentPage.clickConfimAttachFileButton();

            currentFileCount.then(function (curCount) {
                viewMeetingTabPage.getMeetingAttachmentCount().then(function (newCount) {
                    expect(newCount).toBe(curCount + 1);
                    //expect(viewMeetingTabPage.getMeetingAttachmentName()).toBe('test-file.pdf');
                });
            });
        });

ViewMeetingTabPage

this.getMeetingAttchments = function () {
        return element.all(by.repeater('attachment in meeting.AttachmentViewModelList track by $index'));
    };

this.getMeetingAttachmentCount = function () {
        return this.getMeetingAttchments().count();
    };

我需要的是后，我上传的文件以某种方式更新页面对象。我怎样才能做到这一点。

What i need to have is to somehow update the page object after i upload the file. How can i do that.

推荐答案

这是怎么的控制流工作。执行code为测试队列一堆承诺。他们得到解决在它们加入到流动，同时他们每个人的等待previous以完成订单。

This is how the control-flow works. Executing the code for the test queues a bunch of promises. They get resolved in the order they were added to the flow while each of them waits for the previous to finish.

it('Should attach a file when a file is selected and OK button is pressed.', function () {
        # Queues the count promise
        var currentFileCount = viewMeetingTabPage.getMeetingAttachmentCount();

        # Queues some other promises that would start
        # to get executed once the one above finishes
        viewMeetingPage.clickAddAttachmentButton();
        addAttchmentPage.attachFile();
        addAttchmentPage.clickConfimAttachFileButton();

        # This piece of code branches-off the control-flow
        # and gets executed immediately after currentFileCount is resolved
        # i.e. before the clickAddAttachmentButton
        currentFileCount.then(function (curCount) {
            # That's why newCount equals curCount,
            # they are counting the same number of elements
            # since nothing changed in the meantime
            viewMeetingTabPage.getMeetingAttachmentCount().then(function (newCount) {
                expect(newCount).toBe(curCount + 1);
                //expect(viewMeetingTabPage.getMeetingAttachmentName()).toBe('test-file.pdf');
            });
        });
    });

currentFileCount 可以考虑考验的安装阶段，因此您可以将其解压缩到一个 beforeEach 块：

currentFileCount could be considered a setup phase for the test so you can extract it to a beforeEach block:

var initialFileCount;
beforeEach(function() {
    viewMeetingTabPage.getMeetingAttachmentCount().then(function(count) {
        initialFileCount = count;
    });
});

it('Should attach a file when a file is selected and OK button is pressed.', function () {
    viewMeetingPage.clickAddAttachmentButton();
    addAttchmentPage.attachFile();
    addAttchmentPage.clickConfimAttachFileButton();
    expect(viewMeetingTabPage.getMeetingAttachmentCount()).toBe(initialFileCount + 1);
});

由于量角器补丁茉莉的测试块之间等待的控制流为空，这可能会工作。

Since protractor patches jasmine to wait between the test-blocks for the control-flow to empty, this would probably work.

请记住期望也修补处理的承诺，所以你并不需要把它放在一个然后。

Keep in mind expect is also patched to handle promises so you don't need to place it in a then.

更新：

其实，你不应该需要的 beforeEach 上面，它应该像工作太：

Actually, you shouldn't need the beforeEach above, it is supposed to work like that too:

var initialFileCount;

it('Should attach a file when a file is selected and OK button is pressed.', function () {
    viewMeetingTabPage.getMeetingAttachmentCount().then(function(count) {
        initialFileCount = count;
    });
    viewMeetingPage.clickAddAttachmentButton();
    addAttchmentPage.attachFile();
    addAttchmentPage.clickConfimAttachFileButton();
    expect(viewMeetingTabPage.getMeetingAttachmentCount()).toBe(initialFileCount + 1);
});

这就是所谓的 WebDriverJS用户指南。

这篇关于量角器 - 当DOM元素改变页面对象没有更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！