Protractor - Page Object does not update when DOM elements change
I am testing a SPA built with angular.js and im using the Page Objects pattern to write my tests. In the attachment, we have a list of lists that will be updated. For example, there is a list of attachments that will update when attachments are added / removed. To add an attachment we have a modal and when we upload the file and click ok. Uploading files and updating lists.
I wrote 2 page objects, one for the loaded modal and the other for the attachment list preview. In my tests, I first get the current number of attachments, then click a button to activate the modal and attach the file. Then I'll take another attachment count from the preview page and compare it to increase by 1. But the tests failed. The page object is not refreshed and it still shows the number of connections as 2.
Test
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 is to somehow update the page object after the file has loaded. How can i do this.
source to share
This is how control-flow works . The code execution for test queues is a bunch of promises. They are resolved in the order in which they were added to the thread, while each one waits for the previous one to complete.
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 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
can be thought of as a setup pass for a test so you can extract it into a block beforeEach
:
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 the protractor closes the jasmine to wait between test blocks for the control flow to be empty, this will probably work.
Keep in mind that this is expect
also fixed to handle promises so you don't need to place it in then
.
UPDATE:
You don't actually need to use the beforeEach
above, it should work the same way:
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);
});
It called cropping in the WebDriverJS User Guide .
source to share