Protractor wait for modal-dialog

Question

How do I get Protractor to wait for a modal-dialog pop up?

Background: After clicking a button protractor should wait for a modal dialog to pop up (and get the time right when the button is clicked and when the dialog pops up). How can I do that? With browser.wait()?

The reason is, I have to do End-to-End tests and measure the time the user experiences between clicking the button and getting a feedback from the website.

When I do the test manually, it can take between 5 and 30 seconds for the website to give a feedback. How do I get protractor to wait and then read out the dialog that shows up at the top of the page?

score 2 · Answer 1 · answered Jun 26 '17 at 09:31

So, you need to measure the time difference between the clicking of button and the time the modal-dialogue window comes up.

Get the Time after button click

 //you can use any selector for clicking the button
 element(by.buttonText("button_text_for_thebutton").click();


//getting the time
var buttonClickTime = new date();

Use the expected conditions inside of your browser.wait() to wait for the modal-dialog to pop up

//you can use any other locator for modal window
browser.wait(EC.presenceOf(element(by.css('css_locator_formodal'))), 1000, 'Unable to find the modal-popup');

//get the time post Modal dialog appearance
var ModalDialogTime = new date();

Then get the difference between buttonClickTime and ModalDialogTime using

var timeDifference = ModalDialogTime.getTime() - buttonClickTime.getTime();

Note : Expected conditions code is taken from @alexce answer in this SO post.

I thought about using this solution as well. The problem with this solution is that the time it takes for the modal dialog to pop up can take 5 seconds up to 30 seconds. I don't know how much it'll be, that's why I want to write this test to measure the time and get an average time over several tests. — dave, Jun 26 '17 at 09:42
Problem is that the `console.log()` already prints out a time of 2 seconds, without waiting for the `browser.wait()`. Also the it prints out, that it's unable to find the `modal-dialog` but it doesn't even wait for the set 30 seconds. — dave, Jun 26 '17 at 09:54

score 1 · Accepted Answer · answered Jun 28 '17 at 13:47

After hours of research, I found a very useful script: waitReady.js. This is my working solution now. I also added functionality that the script also prints out the text of the modal-dialog.

it('Should wait until modal-dialog pops up', function() {
        var dialog = element(by.className('modal-dialog'));
        expect(dialog.waitReady()).toBeTruthy();
        var dialogtext = element(by.className('modal-body-content'));
        expect(dialogtext.waitReady()).toBeTruthy().then(function () {
            dialogtext.getText().then(function (text) {
            console.log('Button Text: ' + text);
        });
    });
});

Protractor wait for modal-dialog

2 Answers2