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?
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.
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);
});
});
});
Related
I have a page that presents a test, where javascript sets a timeOut to abandon the page if the user waits too much (180") before giving an answer and pressing submit.
It has to be done for various reasons, and I cannot modify the committment.
After 180" on the page, so, currently the code goes back to a beginningpage.php where the user will have to re-enter its unique ID to continue the test.
This is the simple javascript code:
setTimeout(function () {
window.location.href= "beginningpage.php";
}, 180000);
Everything runs smooth. Now I need to modify the code to better manage the case. We assume that if the user has gone away, it will not be able to answer to an alert box. So let's say we push a confirm() after those 180".
How to write code so that - when the confirm() windows is displayed - if nobody clicks a confirm button (for let's say 30") the code automatically close the confirm window and leaves the page going back to beginningpage.php?
Otherwise, if the user is still at his desk and is simply wondering about the answer to give, he must be given the possibility to click "ok, I hurry up" to remain on the page for say another 60". That means that after the first displaying of the confirm window, the timeout must be set to a different deadline, not 180000 as before but 60000.
Maybe the idea of using different window.locations.href is not the right one.
How could be the code to accomplish everything I need as above explained?
Just don't use a confirm box... Show a div with two buttons after 180 seconds and then start counting your 30 seconds.
So let's say we push a confirm() after those 180".
How to write code so that - when the confirm() windows is displayed - if nobody clicks a confirm button (for let's say 30") the code automatically close the confirm window and leaves the page going back to beginningpage.php?
You can't. confirm, alert, and promopt are 1990s holdovers with stop-the-world behavior. (Mostly. Browsers are eroding that slowly over time.) That means none of your JavaScript code can run while the archaic window is showing.
Instead, switch to using modern alerting techniques (showing a "modal" div, etc.) so that your JavaScript code can use setTimeout to give up after the relevant amount of time.
You can never achieve this with alert or confirm because they block further js execution till the popup is active.
You need a custom modal with html element and a js function
All you have to do is call clearTimer for auto-page reload based on the response from custom confirm modal.
var x = document.getElementById("stopReloadBtn")
var reloadTimer
setTimeout(function() {
x.style.display = "block"
reloadTimer = setTimeout(function() {
window.location.href = "beginningpage.php"
}, 5000)
}, 5000);
function stopReload(){
clearTimeout(reloadTimer)
x.style.display = "none"
}
<button id="stopReloadBtn" style="display: none" onclick="stopReload()">Still Here?</button>
I have reduced the timers to 5 sec in this code. A button will appear after 5 sec. After which you will have 5 sec to click this button else the page will reload.
How exactly do I open one modal from another modal in meteor? I'm using bootstrap-3-modal package
When I try clicking on the confirm button of one modal, it must close that modal and open a new modal. Somehow,it doesn't seem to work. Here's what I have:
Template.addMoreTemplateConfirmationModal.events({
'click #confirmMorePGInstance'(event){ // this is the confirm button on addMoreTemplateConfirmationModal modal
Modal.show('createTemplateModal'); // this does not work.
// Modal.hide('addMoreTemplateConfirmationModal');
},
Have you tried closing the modal before showing the next one?
Otherwise you could maybe trigger the second modal on the onDestroyed event, although there might be a better way.
Template.addMoreTemplateConfirmationModal.onDestroyed(function() {
Modal.show('createTemplateModal');
});
Simply use setTimeout which runs only once after given miliseconds (300 is the miliseconds in the example below).
'click #confirmMorePGInstance': function(){
// close modal here
Meteor.setTimeout(function () {
//open the next modal here
}, 300);
},
PS: I suggest using 50-100 miliseconds more than the closing effect speed.
Protractor is failing when trying to click a button. Initially the button will be in disabled status (after sometime it will be enabled) and protractor thinks that the button is ready and clicking on the button and failing.
So i want the protractor script to wait till the button is enabled. I have tried below, but it didn't work. Can someone please post the complete code to wait for the element to be enabled?
expect(browser.wait(function(){return browser.driver.isElementPresent(by.id('paynow-info-btn'))}, 10000));
There is a very much suitable Expected Condition - elementToBeClickable - it would wait for an element to be both visible and enabled:
var elm = element(by.id('paynow-info-btn'));
var EC = protractor.ExpectedConditions;
browser.wait(EC.elementToBeClickable(elm), 5000);
elm.click();
I want to make a popup box, that when a user accesses this site: http://www.isicar.net/ it pops up after 2 seconds. So, no clicking of any buttons invoiced to make the popup box appear
The popup box would act as a n advertisement, for users to sign up via this website: http://isicar.mine.nu/ so it would have to contain a button that redirects them to that URL and one that closes the popup box so they can return to the original page.
Thanks in advance.
Use this in ready or DOMContentLoaded or load callback:
Use setTimeout:
Calls a function or executes a code snippet after a specified delay.
setTimeout(function () {
// Open the popup
}, 2000); // 2 seconds
I have an odd issue in protractor.
All I need to do is test form thats in a modal. I can confirm that the modal is open, but then I want to sendKeys to the input(s).
element(by.id('modal')).click().then(function () {
var modal = $('.modal');
browser.wait(EC.visibilityOf(modal), 5000);
expect(modal.isDisplayed()).toBeTruthy();
element(by.model('userInput.firstName')).sendKeys('HELLO'); // <- this fails
})
This test will fail with ElementNotVisibleError. But when I set the modal to auto open once the page is hit (rather than via a button click), I make sure the modal is displayed and send the keys. This passes fine.
Any advice is appreciated.
Wait for the visibility of the input element instead:
var modal = $('.modal');
var modalInput = modal.element(by.model('userInput.firstName'));
browser.wait(EC.visibilityOf(modalInput), 5000);
modalInput.sendKeys('HELLO');