How to use wait for element to be clickable and wait for element to be present in protractor? I know this will help only with 1 element. Not for all.
For Example:-
Here is the website link, I am trying to automate using protractor and I do not want to use sleep in any case.
Steps to reproduce:-
Navigate to https://www.celebritycruises.com.
Click on Find A Cruise at top left corner and click on Find Cruise button.
It will be navigated to this link - celebritycruises.com/spa/#/itinerary-search.
Now here is the thing, This page takes time to load. So, I am trying to wait for the element or wait for element to be clickable. But it is getting failed.
browser.get('https://www.celebritycruises.com');
var pop = element(by.css('a.popover-find-cruise'));
pop.click().then(function() {
element.all(by.css('.cta.find-cruise-button button')).last().click();
});
var dta = element(by.css('.itinerary-search.spa #nav-departure-date'));
var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(dta), 30000);
dta.click();
Can you please help me on this?
Related
I'm new to working with Protractor and I was wondering in what circumstances would you need to use ExpectedConditions (example below) when using Protractor. I thought that Protractor automatically determine when an AngularJS page is fully loaded.
let EC = ExpectedConditions;
let condition = EC.presenceOf(element(by.id("something")));
browser.wait(condition, 10000);
Thanks, Eric
From my experience working with Protractor, the use of ExpectedConditions depends on the behavior of the page you are automating. It's mostly used due to failing if the condition doesn't comply in the specified time.
These conditions will also return a promise that you can handle to your liking.
I'll give you a few scenarios so you can understand where to use them.
alertIsPresent(): This condition will wait till an alert appears.
e.g.: After clicking a button, there will be an alert appearance; however, there's an API call which makes the pop-up take longer and also a small animation, so we want to wait a few seconds and no more than that.
// will click on a button
element(by.id('button')).click();
// will wait for the condition
let EC = ExpectedConditions;
browser.wait(EC.alertIsPresent(), 5000);
The following code will wait for 5 seconds after clicking the button, to see if the alert is present, else it will throw an error.
invisibilityOf(): This condition will wait till the specified element is not being displayed.
e.g.: There's a loader that appears for every single action that is triggered in the page. For this we want to wait till this loader disappears so we can continue with the automation process. By business requirements, this loader shouldn't take longer than 10 seconds.
This loader locks the whole page, so other elements are not interactable while it is up.
// trigger random action on page so loader appears
element(by.id('button2')).click();
// will wait for the condition
let EC = ExpectedConditions;
browser.wait(EC.invisibilityOf(element(by.id('loader'))), 10000);
After clicking a button, we will give a 10 seconds grace for the loader to disappear, else the condition will throw an error.
elementToBeClickable(): This condition will wait till the specified element can be clicked.
e.g.: The button to the login form is disabled by default, so it can't be clicked unless we complete the username and password textfields. The button being enabled after filling the textfields has a fast animation, either way we want to give it 1 second to complete and check if we are able to click it.
// complete both textfields required for the button to be enabled
element(by.id('username')).sendKeys('User1234');
element(by.id('password')).sendKeys('Protractor');
// will wait for the condition and then will click the button
let EC = ExpectedConditions;
browser.wait(EC.elementToBeClickable(element(by.id('loginButton'))), 1000);
element(by.id('loginButton')).click();
After completing both textfields, the condition will wait for 1 second for the element to be clickable, if it is, it will procede with the next line and click it. On the other hand, if it doesn't, an error will be thrown.
presenceOf(): In this case, the condition will check if the element is present in the DOM (Document Object Model) but it won't check if the element is visible or not.
e.g.: On a page with a radio button group containing 3 flavors: chocolate, vanilla and strawberry. Depending on which you choose, you will be shown different questions. Developers mentioned that the questions are in the page at all moments, but are hidden due to which radio button is selected at the moment. In this situation, we just want to check that all questions exist in the DOM, whether or not they will be shown by a radio button being selected.
// check all questions directly, without selecting any radio buttons
let EC = ExpectedConditions;
browser.wait(EC.presenceOf(element(by.id('question-1'))), 1000);
browser.wait(EC.presenceOf(element(by.id('question-2'))), 1000);
browser.wait(EC.presenceOf(element(by.id('question-3'))), 1000);
The time is pretty irrelevant here; nonetheless, using this conditions we will be able to check that the questions, even though hidden, exist in the DOM. If one is missing, an error will cut the test immediately.
These were a few examples I've had to deal with in the past. The use of the conditions is situational and mostly they are useful when you want to use the existing conditions since they save you the time of building them yourself.
PD: More information can be found in the Protractor API.
I am trying to add static "Training"-events using a button located in a modal.
So what should happen: Clicking on a day or a range of days in fullcalendar opens a modal. In this modal a button is available to "add a training event".
I am using this modal because it shall be possible to add other events in future. Not just trainings.
The modal opens fine and clicking the button adds a new entry in fullcalendar. Clicking on a further day opens the modal again. If now the "add a training button" is clicked again, the new event is rendered twice. One event is rendered on the day i have clicked in the first step, the second is rendered at the day i have clicked now.
Step1:
clicking a day opens the modal
Step2:
clicking the button in the modal adds a new entry
Step3: repeating step1 on another day
Step4:
clicking the button again renders the event twice
Image: Step1-4
This is my js-code. What i am doing wrong?
var calendar = $(calendar).fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: new Date(),
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
select: function (start, end) {
$('#fc_create').click(); // opens modal
$('.addTraining').on("click", function () { // clicking "add training button"
var eventData;
eventData = {
title: "Training",
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData);
$('.close').click();
})
},
editable: true,
eventLimit: true
});
Every time your "select" callback runs, you are adding another new "click" event handler to the "addTraining" element(s). So if "select" runs 3 times, then the "click" event will be declared 3 times, and when "addTraining" is clicked, 3 versions of the same code will run. Javascript allows multiple handlers for the same event to be attached to an element at once, so you are just building them up each time the "select" callback runs, without ever removing them.
To fix this you can either:
1) Declare the handler once - do it page load, outside your fullCalendar declaration. This will give you a problem in that you won't have direct access to the "start"/"end" values from the select callback. You can get round this by using global variables (yuck) or perhaps putting the values in hidden fields or data- attributes somewhere suitable, and then the click handler can find them each time it runs.
2) Using jQuery's "on" and "off" syntax to first remove the previous handler, and then add a new one, so only one handler is ever active at any one time. See http://api.jquery.com/off/ and http://api.jquery.com/on/ for more details and examples. I can provide a sample if necessary.
I am calling a function twice to execute a piece of code in my protractor script. A snapshot of the code of my function that is failing when called the second time is below. sessionNo is an argument passed to this function. It could be either 0 or 1. Depending on the value of this argument, either the radio button with index 0 will be selected or the radio button with index 1 will be selected.
function sessionBegin(sessionNo)
{
element.all(by.repeater('type in types')).all(by.css ("input[type='radio']")).isPresent(). then(function()
{
var sessionType = element.all(by.repeater('type in types')).all(by.css ("input[type='radio']")).get(sessionNo);
sessionType.click();
});
}
This code works great when this function is called for the first time. But when it is called the second time with a different value for sessionNo, it fails with "Failed: element not visible" error. I can't figure out why is the above code unable to locate the same element for the second time as it did for the first time with the exact same code.
It depends on your application code, may be your element becomes invisible between it's found and click action, or it's not visible yet. For the first case you should investigate what happens in application side, for second case (if it's not visible yet), you can wait until it became visible, for example: browser.wait(EC.visibilityOf(element), 5000, Element not visible: ${element.locator()});
it will wait for for element 5 seconds.
Can anyone please help me to clear a field as I am unable to do it in a pop-up window. If I am passing clear as
var input = element(by.css(".md-input-infix"));
browser.actions().mouseDown(input).clear().sendKeys("andndn").perform();'
Then it is saying that clear is not a function and 2nd i tried to do as:
var input = element(by.css(".md-input-infix")).clear();
In this case, also I am unable to clear my field.
what is the element of the pop-up. since you are opening a popup it would be a good idea to wait for it to load completely. The sample code bellow show give you some perspective.
var popup = element(locator for popup);
var input = element(by.css(".md-input-infix"));
popup.click().then(function(){
browser.wait(until.presenceOf(input), 5000, 'Element taking too long to appear in the DOM');
});
input.clear().sendKeys("andndn");
I've been through the Dojo docs as well as the API and tried Google but can't find a solution to my problem, I hope anybody here can help me out.
I'm trying to create a dijit.form.select programmatically (using Dojo 1.4) and connect to the "onClick"-event of the widget.
Here's a part of my code:
var dataSelect = new dijit.form.Select({
id : "myselect",
name : "myselect",
labelAttr: "label",
labelType: "html"
},
"selectid");
dataSelect.addOption({value: "value", label: "first item label"});
dojo.connect(dataSelect, "onClick", function() {
alert("clicked!");
});
What it does: A select-box is created replacing an input-field with the ID "selectid", an option "first item label" is created. Everythings all right until here.
Then I connect to the "onClick"-event of the select, which is supposed to load more options via AJAX (but will just display an alert for testing purposes in this example).
The problem: When I click on the little arrow next to the dropdown, the event is fired (OK). But when I click on the select box itself (the area containing the option), the event is NOT fired the first time I click it (unless I clicked on the arrow before).
When I click the select box a second time (and every time after that), the event will fire!
I've tried to use "onFocus" instead of "onClick" which does work, but then the dropdown will not open when first clicked, even if I use the "openDropDown"-function (which does work when connecting to "onClick"!).
Is it me, did I run into a Dojo bug or is it a strange feature I just don't get?
Any help is appreciated.
Greetings,
Select0r
Here is a cross-browser solution:
var sizeSelect = new dijit.form.Select({
id: "sizeSelect",
name: "state",
options: size,
onChange: function(val) {
dojo.style(dojo.byId("textInput"), {"fontSize":val});
}
}, "sizeSelect");
Try to connect not to the widget itself but to it's dom node:
dojo.connect(dataSelect.domNode, "onclick", function() {
alert("clicked!");
});
Select (which extends _HasDropDown) has fancy code to handle:
mouse down on select widget
mouse move to one of the options
mouse up
Maybe that's canceling the click event.
Maybe you can connect to _loadChildren() instead.
The root cause for this issue is that the _onDropDownMouseDown method of dijit._HasDropDown will manipulate the dom node, which cause the e.target of onmousedown and onmouseup changes for the first initialization.
As we know, the onclick event will be triggered only when the target of onmousedown and onmouseup are the same target.
So in this case, the onclick event is not triggered.
It seems that in Dojo 1.5, the problem still remains.