aray bhai 2 dinn pehlay yeh video mill jati tu maza ajata. I had a technical test in my second round of interview. anywayz superb tutorial. keep it up.
Hi Naveen ! Each video contains great info which I am not able to find any where else ...Seems u have done good research before presenting each one .apreciate ur efforts.... Thank you a lot....
This method is only applicable if an attribute in date element is capturing date value, in some cases or webpages it doesn't happen. So this can only be implemented in some places not all.
This method of entering dates directly into fields can't be used during UAT or regression as its not an valid user scenario. However this method seems to be not working in the latest spice jet site. But good to know. Thanks.
Hi naveen thanks for the video but some times date picker pop is not closing so failing to enter value for remaining feilds can you please suggest how to handle datepicker .hide
@Naveen how to use the same logic to select the to date, should it be argument [1].setAttribute() ,coz when i tried same logic for the todate field it does not work
what do I have to do for the second calendar date selection, please let me know and if there is any third calendar is there than what to do actually I am asking for a check-in & check-out date and also to update the stay please reply to me ASAP as I am in the middle of the script
Hi Naveen, Thank you for this piece as the other ones too. I keep running in to an error using this method. Is there something I am doing wrong? org.openqa.selenium.json.JsonException: java.lang.reflect.InvocationTargetException
Hi Naveen, I was trying to change the value of calendar using javascript setAttribute function but it is not reflecting on UI. I checked on www.spicejet.com/ and when I checked the same on console then it is showing the updated value through JS but it is not reflecting on UI. Could you please tell how to do it?
Hi Naveen, i am getting error as "the left-hand side of an assignment must be a variable" in this line js.executeScript("arguments[0].setAttribute("value",'"+dateval+"');", element); can you please help me to sort out.Thanks
Hi Naveen, Thanks for videos. I am trying this code in Spicejet.com, but now codes are changed on this website due to this reason dates are not getting selected. Dates values are getting changed in source file but it's not presenting in UI. Can you please have a look on updated website. Thanks for your support.
But I don't want to give date value as hardcoded... I want to select the date 3 months from the current date.... Each time u run scripts it has to select random date after 3 months from current date... Can you help me on this?
this method does not work with React apps where there is a virtual dom and the real dom , when you set with javascript the value of the input , it is temporarliy stored in the virtual dom , tried many things such as self.driver.execute_script( """ var input = arguments[0]; var value = arguments[1]; input.focus(); input.value = value; var eventNames = ['input', 'change', 'blur']; eventNames.forEach(function(eventName) { var event = new Event(eventName, { bubbles: true }); input.dispatchEvent(event); }); """, input_element, value . Yes , I am using Python btw )
Hi Naveen, I am trying to automate makemytrip website and the calender here accepts value in:( 29 Sep, Sat) format, how to handle this day of the week thing?
Hi Naveen, I have tried this one in redbus website and i am able to see the date is changing ,but the search results on that date is not displaying. It shows the results of the current date.... help me with this issue
This method does not impact the UI at all. Although if we do a getAttribute after setting the same, we can see it reflected in console. Hence, this is not a good option to use.
But why do you want to use getattribute method? This is just an enforcement of putting the text using javascript executor. I dint get what do you mean by it will be reflected in the console.
@@naveenautomationlabs I did the same thing, because the dateValue is not being reflected in the UI, it shows the default value in the UI even after setAttribute(). So checked using getAttribute() on the element and print it on console. The change is reflected there.
I believe we need to change the textcontent of span class using JS. Try this: public class CalendarSelectTest { public static void main(String[] args) throws InterruptedException { System.setProperty("webdriver.chrome.driver", "C:\\Users\\CK\\Desktop\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.get("www.spicejet.com/"); driver.manage().window().maximize(); String date="Fri, Dec 29 2017"; //WebElement date1=driver.findElement(By.xpath("//input[@id='hp-widget__depart']")); //input[@id='ctl00_mainContent_txt_Fromdate']//following-sibling::button[@class='ui-datepicker-trigger'] //ctl00_mainContent_view_date1 //WebElement date1=driver.findElement(By.xpath("//span[@id='view_fulldate_id_1']")); String id="view_fulldate_id_1"; selectCalenderDateJS(driver, id, date); } public static void selectCalenderDateJS(WebDriver driver, String id, String date) { JavascriptExecutor js=(JavascriptExecutor)driver; js.executeScript("document.getElementById('"+id+"').textContent='"+date+"';"); } }
Hi Naveen, Thanks for selenium Webdriver sessions. while running the script using javascript .the date field is not changing but the calendar icon is pointing to the date which i mentioned in the script. Below is the code: package Selenium; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; public class CalendarHandleByJs { public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", "E:/Selenium Softwares/chromedriver.exe");
Those two input tags are read-only so we cannot change their attribute. I tried changing the text content of the sibling span tag public class CalendarSelectTest { public static void main(String[] args) throws InterruptedException { System.setProperty("webdriver.chrome.driver", "C:\\Users\\CK\\Desktop\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.get("www.spicejet.com/"); driver.manage().window().maximize(); String date="Fri, Dec 29 2017"; //WebElement date1=driver.findElement(By.xpath("//input[@id='hp-widget__depart']")); //input[@id='ctl00_mainContent_txt_Fromdate']//following-sibling::button[@class='ui-datepicker-trigger'] //ctl00_mainContent_view_date1 //WebElement date1=driver.findElement(By.xpath("//span[@id='view_fulldate_id_1']")); String id="view_fulldate_id_1"; selectCalenderDateJS(driver, id, date); } public static void selectCalenderDateJS(WebDriver driver, String id, String date) { JavascriptExecutor js=(JavascriptExecutor)driver; js.executeScript("document.getElementById('"+id+"').textContent='"+date+"';"); } }
aray bhai 2 dinn pehlay yeh video mill jati tu maza ajata. I had a technical test in my second round of interview. anywayz superb tutorial. keep it up.
Hi Naveen ! Each video contains great info which I am not able to find any where else ...Seems u have done good research before presenting each one .apreciate ur efforts.... Thank you a lot....
Thank you so very much Naveen for providing us a very easy and useful solution for Calender. Keep it up Naveen.
thank you very much... i really learn a lot from you. it is very detailed and well explain
This method is only applicable if an attribute in date element is capturing date value, in some cases or webpages it doesn't happen. So this can only be implemented in some places not all.
Thank you Naveen for beautifully explained and make me clear on calendar. Only one query is that JavaScriptExecutor works for any kind of calendar?
This method of entering dates directly into fields can't be used during UAT or regression as its not an valid user scenario. However this method seems to be not working in the latest spice jet site. But good to know. Thanks.
Thank you for sharing video.. It's very useful..
Appreciate. 🤠
It is an Input Tag so we can directly do Send keys? Isnot it?
Can I use this technique if there is no Value attribute for that date in DOM.
awesome tutorial.
hii naveen this is nice tutorial
but I want know to select the date one by one means (1 and than 2 and than 3 bye selenium or javascript)
Hi ,using java executor we can handle dynamically change web elements for date and time
Hi naveen thanks for the video but some times date picker pop is not closing so failing to enter value for remaining feilds can you please suggest how to handle datepicker .hide
@Naveen how to use the same logic to select the to date, should it be argument [1].setAttribute() ,coz when i tried same logic for the todate field it does not work
what do I have to do for the second calendar date selection, please let me know and if there is any third calendar is there than what to do actually I am asking for a check-in & check-out date and also to update the stay please reply to me ASAP as I am in the middle of the script
Hi Naveen,
Thank you for this piece as the other ones too.
I keep running in to an error using this method. Is there something I am doing wrong?
org.openqa.selenium.json.JsonException: java.lang.reflect.InvocationTargetException
nice video keep uploading
Hi Naveen can we use ds for Select class ?\
thanks for providing Excellent videos
Hi Naveen, why do we pass driver as a parameter in selectCalendarJS() method?
Hi Naveen, I was trying to change the value of calendar using javascript setAttribute function but it is not reflecting on UI. I checked on www.spicejet.com/ and when I checked the same on console then it is showing the updated value through JS but it is not reflecting on UI. Could you please tell how to do it?
@Manikandan Rudra What do you mean removerAttribute?
Thank you Naveen...
Naveen i have one question ,, How to select tomorrow date dynamically
Hi Naveen, i am getting error as "the left-hand side of an assignment must be a variable" in this line
js.executeScript("arguments[0].setAttribute("value",'"+dateval+"');", element);
can you please help me to sort out.Thanks
Hi Naveen, is it possible to select random dates without entering the value in JavaScriptExecutor. If so please tell me how to do it!!!!
Hey do you have any code where past date cannot be selected only current and future date is allowed??
Hi Naveen, can you take a example of ixigo.com......i am unable to select date using this method
Hi Naveen,
Thanks for videos. I am trying this code in Spicejet.com, but now codes are changed on this website due to this reason dates are not getting selected. Dates values are getting changed in source file but it's not presenting in UI. Can you please have a look on updated website. Thanks for your support.
@@lakshmip950 What do you mea, Can you tell me once?
hi naveen pls provide new video for date pickker bcoz its not working in spicejet .com
I tried this one, but when clicking the next field, all the dates in date picker fields are all disappeared.
But I don't want to give date value as hardcoded... I want to select the date 3 months from the current date.... Each time u run scripts it has to select random date after 3 months from current date... Can you help me on this?
thanks for sharing
Hi sir...Can you please help me out. Can you help me how to fix this error. javascript error: Cannot read property 'clientWidth' of null
Hi Naveen, Can you please upload a video for selecting dates from bootstrap datepicker. Thanks.
Try this
th-cam.com/video/P4hQI-0X3w0/w-d-xo.html
How can we automate the calender using c#?
this method does not work with React apps where there is a virtual dom and the real dom , when you set with javascript the value of the input , it is temporarliy stored in the virtual dom , tried many things such as self.driver.execute_script(
"""
var input = arguments[0];
var value = arguments[1];
input.focus();
input.value = value;
var eventNames = ['input', 'change', 'blur'];
eventNames.forEach(function(eventName) {
var event = new Event(eventName, { bubbles: true });
input.dispatchEvent(event);
});
""",
input_element, value . Yes , I am using Python btw
)
how can we do the same thing in puppeteer framework
Hi Naveen, I am trying to automate makemytrip website and the calender here accepts value in:( 29 Sep, Sat) format, how to handle this day of the week thing?
Please suggest a solution for this
We can perform with the test ng
Hi Naveen,
I have tried this one in redbus website and i am able to see the date is changing ,but the search results on that date is not displaying.
It shows the results of the current date.... help me with this issue
Sometimes it won't work better go with calendar selection
How to handle date picker is type of date ? And sendkeys is not working
Why we are passing element in to javascript method
Thank you,
removeAttribute('readonly',0);") ---------> Might also help if there is no value property
The date is not getting set for spicejet .com 2019 website using JavaScriptExecutor....Please help me to implement this in 2019 website
Check this
th-cam.com/video/P4hQI-0X3w0/w-d-xo.html
how can I handle chrome print dialog box using selenium
This method does not impact the UI at all. Although if we do a getAttribute after setting the same, we can see it reflected in console. Hence, this is not a good option to use.
But why do you want to use getattribute method? This is just an enforcement of putting the text using javascript executor. I dint get what do you mean by it will be reflected in the console.
@@naveenautomationlabs I did the same thing, because the dateValue is not being reflected in the UI, it shows the default value in the UI even after setAttribute(). So checked using getAttribute() on the element and print it on console. The change is reflected there.
Can i get all of your JavaScriptExecutor code text file collection link
new date value is not getting updating in textbox(seems its readonly) but dom its getting changed ... how to update the field???kindly help
js.executeScript("document.getElementById('ctl00_mainContent_view_date1').value='"+dateval+"';");
this is working fine
can u post the snippet of ur code im unable to do with this method
super
this also seems like we have pushing the value and once we are clicking on another fields, value gets vanished in date field
Hi Naveen, Now the spicejet.com webpage is changed and im not able to use the JS code and inject the date. Can you help me on the same.
I believe we need to change the textcontent of span class using JS.
Try this:
public class CalendarSelectTest {
public static void main(String[] args) throws InterruptedException {
System.setProperty("webdriver.chrome.driver", "C:\\Users\\CK\\Desktop\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("www.spicejet.com/");
driver.manage().window().maximize();
String date="Fri, Dec 29 2017";
//WebElement date1=driver.findElement(By.xpath("//input[@id='hp-widget__depart']"));
//input[@id='ctl00_mainContent_txt_Fromdate']//following-sibling::button[@class='ui-datepicker-trigger']
//ctl00_mainContent_view_date1
//WebElement date1=driver.findElement(By.xpath("//span[@id='view_fulldate_id_1']"));
String id="view_fulldate_id_1";
selectCalenderDateJS(driver, id, date);
}
public static void selectCalenderDateJS(WebDriver driver, String id, String date) {
JavascriptExecutor js=(JavascriptExecutor)driver;
js.executeScript("document.getElementById('"+id+"').textContent='"+date+"';");
}
}
it worked. thank you@@@ckumar89
Earlier you used JavascriptExecutor js=(JavaScriptExecutor)driver ; instead of JavascriptExecutor js=(JavascriptExecutor)driver;
if id is not there ??
What if "value" attribute is not present in DOM. Like for this calendar, demos.telerik.com/kendo-ui/datetimepicker/index, it is not present.
how to do in .NET Core?
Hi Naveen,
Thanks for selenium Webdriver sessions.
while running the script using javascript .the date field is not changing but the calendar icon is pointing to the date which i mentioned in the script.
Below is the code:
package Selenium;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class CalendarHandleByJs {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "E:/Selenium Softwares/chromedriver.exe");
//firefox driver
WebDriver driver=new ChromeDriver();
driver.get("spicejet.com");
driver.manage().window().maximize();
WebElement date=driver.findElement(By.id("ctl00_mainContent_txt_Fromdate"));
String dateVal= "02-02-2018";
selectDateByJs(driver, date, dateVal);
}
public static void selectDateByJs(WebDriver driver, WebElement element, String dateVal){
JavascriptExecutor js=((JavascriptExecutor)driver);
js.executeScript("arguments[0].setAttribute('value','"+dateVal+"');",element);
// System.out.println("Date entered");
}
}
please provide your comments.firebug and firepath. so how we can inspect an element by xpath.
Note: in Firefox 57.0 there is no
Thanks
Those two input tags are read-only so we cannot change their attribute.
I tried changing the text content of the sibling span tag
public class CalendarSelectTest {
public static void main(String[] args) throws InterruptedException {
System.setProperty("webdriver.chrome.driver", "C:\\Users\\CK\\Desktop\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("www.spicejet.com/");
driver.manage().window().maximize();
String date="Fri, Dec 29 2017";
//WebElement date1=driver.findElement(By.xpath("//input[@id='hp-widget__depart']"));
//input[@id='ctl00_mainContent_txt_Fromdate']//following-sibling::button[@class='ui-datepicker-trigger']
//ctl00_mainContent_view_date1
//WebElement date1=driver.findElement(By.xpath("//span[@id='view_fulldate_id_1']"));
String id="view_fulldate_id_1";
selectCalenderDateJS(driver, id, date);
}
public static void selectCalenderDateJS(WebDriver driver, String id, String date) {
JavascriptExecutor js=(JavascriptExecutor)driver;
js.executeScript("document.getElementById('"+id+"').textContent='"+date+"';");
}
}
Chandan Kumar why do we pass driver as a parameter in selectCalendarDateJS() method?
@@ckumar89 ok thank you for this , its working.
This is no longer working... i cannot pull up js.executeScript it doesn't exist
Check this
th-cam.com/video/P4hQI-0X3w0/w-d-xo.html
Question pucha to reply bhi nahi dete sir ji aap.......
its not working sir
Can you please share the code?
WebDriver driver= new ChromeDriver();
driver.manage().deleteAllCookies();
driver.manage().window().maximize();
driver.manage().timeouts().pageLoadTimeout(49, TimeUnit.SECONDS);
driver.manage().timeouts().implicitlyWait(43, TimeUnit.SECONDS);
driver.get("www.spicejet.com/");
Thread.sleep(4000);
JavascriptExecutor js=(JavascriptExecutor) driver;
js.executeScript("document.getElementById('ctl00_mainContent_view_date1').value='04/30/2019'");
How to do it in TestNG