I am using WebdriverIO with Javascript and Mocha to create a UI test framework. For that, I am trying to capture screenshots every time a page loads or a page refreshes. Could someone please tell me if this is possible to do it using WebdriverIO or otherwise?
Relevant details: The pages are NOT loaded using driver.url() all the time. The launching URL is arrived at using driver.url(), and then on all navigation happen by clicking on a link on a page or performing an action that leads to another page load. Please also note that page load happens on other conditions as well, for example, when a "Save" button is clicked the same page loads again (refreshes). I am trying to capture a screenshot every time a page loads or refreshes irrespective of whatever action that might cause it. And that's why I want to abstract out the process at a global level than calling driver.saveScreenShot() in multiple places all over the codebase.
Related
I am building some JS to install on people's websites. I am trying to detect if browser going away from page my script installed on. It would be easy to listen beforeunload event, but what if my script was loaded after user click on some link?
The events order is:
browser loads page A with my script installed
my script started to load
user clicks on link to page B
browser started to load page B
my script is loaded to page A ← How can I detect browser location is changing right now?
You can't detect this in this specific situation. The act of navigating from page A will stop your script from loading, even before page B has loaded.
The relevant parts of the spec are 7.8.1 Navigating across documents which details what happens when the browser is asked to navigate (the link to page B being clicked in your example). Step 11 says:
Abort the active document of browsingContext.
The abort steps make it clear that any still-in-progress fetching or parsing of the active document are simply discarded.
I am working on a web application and have pages which gets data asynchronously using ajax call during the page load. These calls does not block the user. When we inspect the page using developer tools (IE and Chrome) it seems that the timing to load the entire page takes more than 26s. Please see the image attached which shows the details of default.aspx. But even before loading the entire page, the user can interact with page.
I need to find a way to identify at which point, the user can interact with page, using some java script event api like DOMContentLoaded. But I am not sure which event is the right one which ensures the user can start interacting with the page even if it is loading data in background using ajax call. Any guidance is appreciated
.
When accessing an external page from a Cordova app, then coming back to app with back-button, the app page is empty, or more precisely, everything that was dynamically added to the page is gone.
This seems to be the case whether the link is a native <a href="..."> or is accessed via window.open(), or via cordova.InAppBrowser.open(). The only way it does not happen is when the actual browser is specified via "_system" parameter.
Is there a way to prevent this, or is it normal behaviour ? Should I simply rebuild the dynamic page upon returning ? I could do that, but no event seems to be fired on return, not even a pageshow.
Navigating back refreshes (reloads) the page...so anything dynamically added to the page will correctly be gone. You could use hash tags on the URL for simple information or localStorage for more complex information about the page state and re-populate the page based on it when it reloads.
pageshow most like isn't firing because of some assumption being made in the JS code. Try listening to the $(document).ready for debugging purposes. It could also be caused by the issue described here (because of caching): 'pageshow' is not received when pressing "back" button on Safari on *IPad"
Specifying system causes the page to open in a new window...so that's
To reload/refresh a page from another page using JavaScript. (A page, which is already opened in the browser. I need to refresh it (not open again) from another page.)
I refer a lot, but i can't get the exact answer i want.
How to refresh another page using javascript without opening the same page in a new tab
I referred this page. But it has a parent and child page. But i need to refresh a unrelated page from another page.
Is this possible?
If so, give me some suggestion.
Explanation of my actual project:
There is a pageA from that using Ajax i called some other page(inside a div of pageA). Then by clicking a link in that div (present in page called from Ajax), it will open a pageB in new tab in the same browser. in that page, when user clicks a button, It will call another page, in that page i do a table update. After that update, pageA should be refreshed. This is the actual project what i have to do.
Assuming this is in the same browser and the same domain a simple way is as follows (pseudo code)
Page A -> controller
Page B -> page to be refreshed.
The steps are:-
Page A Calls a Javascript function (via button press for example) that writes a value of 'update: true' to local storage.
Page B has a loop of 500ms that checks this value in local storage - when it sees 'update: true' it sets it back to false and then refreshes itself.
These are all simple things to look-up how to do but if you get stuck just let me know.
Oh and same principle applies on different browsers (i.e. if Page A opened in chrome, Page B opened in Firefox) - just that instead of local storage you use a server and store the state to DB / a file.
Below is a quick example - open the two pages in different tabs then click 'refresh' in the controller apge - you will notice the 'page to be refreshed' page refreshes.
CONTROLLER
PAGE TO BE REFRESHED
first of find frames(or div) which you want to reload
for example
enter code here
var myframe=parent.frames['frameName'];
then
myframe.location.href=myframe.location.href;
i hope it will work well.
in my case it work fine.
thakns &BR
I have an HTML5 application that manipulates the browser history to show the proper URL for Ajax calls. This works great, but a problem occurs when my application has hyperlink to an external site, say http://www.google.com. When this happens, the history looks like this:
My App Page A -> My App Page B -> Google
When the user hits the back button once, everything is fine. My App Page B is shown.
But when the user hits the back button a second time, the URL changes, but the page doesn't change. My app can't make the proper Ajax call to show the state for My App Page A, because the onpopstate handler never got called. This is because the handler wasn't initialized when the browser went back to My App Page B (no events fire on that back event, so I can't reinitialize the handler.)
This experience is with Chrome, but I have no reason to believe it is Chrome-specific. Is there a way around this problem?
I know that applications like Gmail open all external hyperlinks in a new window. But the requirements for my application don't allow me to do that.
The link provided by #Pumbaa80 put me on track to the right answer.
If you put <body onunload=""> on your page, then is breaks the bfcache on Chrome and other browsers. This means that when you click the back button to return to My App Page B from Google, all page state JavaScript events will fire.
There is no way to get onpopstate to get called on My App Page B after coming back from Google. (This woud be illogical, as that event only fires on the page where you hit the back button.)
The alternative is to execute the logic when My App Page B loads. By breaking the bfcache as described above, jQuery dom ready will fire. By running similar code from onpopstate in a jQuery dom ready callback, I can access the data stored in the History object reset the state of my HTML5 web app after returning from an external page.
I think you'll need to use hash tags to save the state of your page, I don't see a way around this. I've done it in the past with great success using this jQuery plugin, with the very fashionable name BBQ (Back Button & Query library). This will allow your page to perform actions based on the hash tags in the URL.