this is the code for button Next/save button
enter image description here
Next / Save
I used below code to click on next/save button using Protractor
browser.actions().mouseMove(await element(by.id('formNext')).perform();
await element(by.id('formNext)).click();
Your sequence of performing operations is not correct. Try this
let nextbtn = $('#formNext');
await browser.actions().mouseMove(nextbtn).click().perform();
In actions , you first perform whatever action you need to perform on the element (click, doublclick etc.) and then append it with perform()
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.
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?
In my winfom program I have a function that change the tabpage when I hit a key.
On tabcontrol indexchanged I check for some parametre and if they are not correct I change the tabpage to the first tab.
If I click on the page with the mouse the tabpage changed to the first tab with the correct content.
If I click a key and run this code "tcOrdre.SelectedTab = tpOrdre;" it changes the tab back to the first but still showing the content of the selected one.
In SelectedIndexChanged is use this code:
MessageBox.Show("Der skal vælges en ordre først"); // Show a messagebox
tcOrdre.SelectedTab = tpOrdreListe; // change tap to first
If I use the mouse then SelectIndexChanged get called when I run:
tcOrdre.SelectedTab = tpOrdreListe; // change tap to first
the SelectedIndexChanged function is called again and the content is okay.
But if I use the key to change index the SelectedIndexChanged does not get called Again and the content never change. Only the tab in the top change to the first one.
I hope someone can help me.
I found the solution.
All I have to do is call this line.
this.BeginInvoke(new Action(() => tcOrdre.SelectTab(0)));
and not tcOrdre.SelectedTab = tpOrdreListe;
And everything Works fine.
is it possible in TinyMCE to know which button was clicked? so I could place specific action on specific event of a specific button.
the buttons here are default control-buttons like bold/italic/select-font not a custom button one.
probably in the init, but I have no idea what to call. I could capture the editor's events but not the button's.
For example, let's say I want a messagebox popped-up everytime bold button is clicked. How to capture the click event of bold button? is creating custom button the only way?
No, you can define an own command and call this command (+ the defualt action) on buttonklick. I do not know if you want a generic way for all buttons. But it is easy to do it just for one or two buttons.
Example: We want to put an action on the bold button.
First we define an own command in one of our own plugins (in the "init : function(ed, url)" -section):
ed.addCommand('my_bold', this.my_bold, this); //calls the function my_bold
Then we overwrite the default action with an the command:
if (ed.controlManager.get('bold')){
ed.controlManager.get('bold').settings.cmd='my_bold_action';
};
Now, we only need to define the function my bold
my_bold: function() {
// exectution of regular command
this.editor.execCommand('Bold');
// now do whatever you like here
...
},
ed.controlManager must be called in "onInit" methode :
ed.onInit.add(function(editor) {
.......
........
if (editor.controlManager.get('bold')){
editor.controlManager.get('bold').settings.cmd='my_bold_action';
};
});
how can i get the action (what button was clicked) when a button is clicked in the pager?(edit, del, add...)
You probably means button of the navigation bar or navigator (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator).
You can implement what you want with at least three different ways:
You define your custom buttons which look like the original add/edit/del buttons (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons) and use {add:false, edit: false, del: off} parameter of navGrid to switch off standard buttons.
You can use addfunc, editfunc and delfunc if you want replace the default add/edit/del functions.
You can use onclickSubmit or afterSubmit or some another supported events (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#events) of add/edit/del button to do some additional action on click the buttont or on submit.
You can chose the way which is the best for your requirements.
You can use the grid onPaging event:
This event fires after click on [page
button] and before populating the
data. Also works when the user enters
a new page number in the page input
box (and presses [Enter]) and when the
number of requested records is changed
via the select box. To this event we
pass only one parameter pgButton
(string) which can be -
first,last,prev,next in case of button
click, records in case when a number
of requested rows is changed and user
when the user change the number of the
requested page.requested page.
Also there are beforeRequest and LoadComplete events. Examples that worked for me are as follows:
beforeRequest: function () {
$.blockUI();
//alert("before request");
},
loadComplete: function () {
//alert("load complete");
$.unblockUI();
}