Selenium WebDriver Python reload html without refreshing the page - javascript

I have a page with self-refreshing content (via WebSocket) like this one. While the content is constantly changing my firefox webdriver can only see the initial content. I could get the fresh one by refreshing the page by
driver.navigate.refresh()
but this causes unnecessary traffic besides in the Firefox window the new content already appear.
My question is: Can I get the fresh html as I can observe in the Firefox window without reloading the whole page?

If the page contents change over a period of time, one option you could do is check the page source every n seconds. A simple way to do this would be to import time then use time.sleep(5) to wait for 5 seconds, then get the page source. You can also put it in a loop, and if the page contents have changed within the succeeding 5 second periods, then selenium should be able to get the updated page contents when you check. I haven't tested this, but feel free to check if it works for you.
EDIT: Added sample code. Make sure that you have marionette properly installed and configured. You can check my answer here if you are an ubuntu user (https://stackoverflow.com/a/39536091/6284629)
# this code would print the source of a page every second
from selenium import webdriver
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
import time
# side note, how to get marionette working for firefox:
# https://stackoverflow.com/a/39536091/6284629
capabilities = DesiredCapabilities.FIREFOX
capabilities["marionette"] = True
browser = webdriver.Firefox(capabilities=capabilities)
# load the page
browser.get("http://url-to-the-site.xyz")
while True:
# print the page source
print(browser.page_source)
# wait for one second before looping to print the source again
time.sleep(1)

Related

How made sw-precache with network first?

I have PWA web site with sw-precache with this sequence:
Reload the page
The service worker should update the cache in the background When its
done, you should see New or updated content is available. in the
console The actual visible changes should not be visible until the
next reload
Reload the page again
The browser will use the new cache this time around The changes
should be visible now! There shouldn't be any messages in the console
I need similar for this, but if file was updated - will be need visible in first load pages. Not after second load. Another (not updated) files - from cache.
This is possible?
Because double reload for see new changes uncomfortable.
you try use the runtimeCaching option to set up an appropriate URL pattern and strategy (networkFirst, cacheFirst, etc.) to match those requests.
"runtimeCaching": [{
"urlPattern": "",
"handler": "networkFirst"
}]
global.toolbox.router.default = global.toolbox.networkFirst; // for all routes
or
global.toolbox.router.get('/assets/(.*)', global.toolbox.networkFirst); // for some particular routes

Multiple screenshot with Firefox Developer Tools

I am trying take screenshots of a page that loads a series of content (slideshow) via Javascript. I can take screenshots of individual items with Firefox Devtools just fine. However it's tedious to do so by hand.
I can think of a few options-
Run the 'screenshot' command in a loop and call a JS function in each loop to load the next content. However I can't find any documentation to script the developer tools or call JS functions from within it.
Run a JS script on the page to load the contents at an interval and call the devtools to take a screenshot each time. But I can't find any documentation on calling devtools from JS in webpage.
Have Devtools take screenshots in response to a page event. But I can't find any documentation on this either.
How do I do this?
Your first questions is, how to take screenshots with javascript in a programmed way:
use selenium Webdriver to steer the browser instead of trying to script the developer tools of a specific browser.
Using WebdriverJS as framework you can script anything you need around the Webdriver itself.
Your second question is, how to script the FF dev tools:
- no answer from my side -
I will second Ralf R's recommendation to use webdriver instead of trying to wrangle the firefox devtools.
Here's a webdriverjs script that goes to a webpage with a slow loading carousel, and takes a screenshot as soon as the image I request is fully loaded (with this carousel, I tell it to wait until the css opacity is 1). You can just loop this through however many slide images you have.
var webdriver = require('selenium-webdriver');
var By = webdriver.By;
var until = webdriver.until;
var fs = require("fs");
var driver = new webdriver.Builder().forBrowser("chrome").build();
//Go to website
driver.get("http://output.jsbin.com/cerutusihe");
//Tell webdriver to wait until the opacity is 1
driver.wait(function(){
//first store the element you want to find in a variable.
var theEl = driver.findElement(By.css(".mySlides:nth-child(1)"));
//return the css value (it can be any value you like), then return a boolean (that the 'result' of the getCssValue request equals 1)
return theEl.getCssValue('opacity').then(function(result){
return result == 1;
})
}, 60000) //specify a wait of 60 seconds.
//call webdriver's takeScreenshot method.
driver.takeScreenshot().then(function(data) {
//use the node file system module 'fs' to write the file to your disk. In this case, it writes it to the root directory of my webdriver project.
fs.writeFileSync("pic2.png", data, 'base64');
});

Is $window.location.reload(true) the equivalent of CTRL+F5?

I am attempting to build a "version updated" component that will show a banner when the website has been updated and prompt a user to reload. Unfortunately when some users reload their page is cached so it does not update properly. Previously we have told them to press CTRL+F5 but I am looking for a way to do this programatically.
I am using the following code
this.$window.location.reload(true);
Whose function signature is declared like so:
reload(forcedReload?: boolean): void;
Does this mean that it will skip the cache? When I try it out a CTRL+F5 the index.html shows a 200 in the Network tab of Chrome but using $window.location.reload(true) shows a 304 [Not Modified]
According to MDN the forcedReload parameter in window.location.reload, when set to true:
... causes the page to always be reloaded from the server. If it is
false or not specified, the browser may reload the page from its cache.
No it's not (proven by testing)
The main difference: Ctrl-F5 will cause all the attached resources also to reload (scripts, images ...) while the reload(true) will not, the main page (html) will be requested but resources can still be loaded from cache
Did you try something like:
$window.location.href = currentUrl + '?' + new Date().getTime();
That should force a cold refresh.

Force browser to refresh javascript code while developing an MVC View?

Pretty straight-forward, I'm developing an MVC5 application and have noticed (lately) that my Browser appears to be caching the JavaScript code I have on the view within #section Scripts { }.
Currently I am developing with Chrome and I have tried CTRL+F5 & CTRL+SHFT+R which reloads the page, but the alert() I uncommented within the javascript code is still rendering as commented. I also tried going to my localhost through Incognito Mode as well as other Browsers (Firefox, IE) and am getting the same behavior. This is my /Home/Index.cshtml View, which is the default View which loads when the application starts. I have also tried adding some extra HTML text into the page and again the new code is not taking effect/showing.
My current Chrome version is Version 41.0.2272.118 m if anyone has any ideas what might be going on?
UPDATE:
I have gone under the Developer Tools => General Settings in Chrome and checked [X] Disable cache (while DevTools is open) and then repeatedly (with DevTools still open) tried CTRL+SHFT+R and CTRL+F5 with the same results of before where my changes are not taking effect.
UPDATE 2:
With DevTools open I have also held the Refresh button down and tried Normal/Hard/and Empty Cache & Hard Reload options all with the same result. For simplicity of testing I added an alert in the below to dispaly as soon as the page loads (and currently no alert comes up):
$(document).ready(function () {
alert("Test");
// Other Code/Functions -- No Error showing in Console
});
If you are using Bundling from MVC, you have two options to disable caching:
Use BundleTable.EnableOptimizations. This instructs the bundling to minify and optimize your bundle even while debugging. It generates a hash in the process, based on the content of the script, so your customers browsers can cache this file for a long time. It will generate a whole different hash the next time your file changes, so your customers can see your changes. The downside is that your script will become unreadable and you won't be able to debug it, so this might not be your best option.
Use System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("url", true) to resolve your script's URL, the second parameter (true) is requiring a hash to be generated with the URL, thus, preventing caching from your browser when you change the file. This is exactly the same hash generated in the first option, but without minifying.
I created a small demo showing that the second option prevents caching from happening, the trick is getting the hash generated from your script's content without minifying your script.
I created a script file called myscript.js with this content:
$(document).ready(function () {
alert('a');
});
Then I added this to my BundleConfig.cs:
// PLEASE NOTE this is **NOT** a ScriptBundle
bundles.Add(new Bundle("~/bundles/myscripts").Include(
"~/Scripts/myscript*"));
If you add a ScriptBundle, you will get a minified response again, since ScriptBundle is just a Bundle using JsMinify transformation (source). That's why we just use Bundle.
Now you can just add your script using this method to resolve the script URL with the hash appendend. You can use the Script.Render
#Scripts.Render(System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/myscripts", true))
Or the script tag:
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/myscripts", true)"></script>
Either way will generate a URL with a hash to prevent caching:
After editing my file:
You might want to add a no_cache variable after your script url like:
<script src="js/stg/Stg.js?nocache=#random_number"></script>
If you manage to put a random number to the place i indicated, the browser will automatically download the latest version of the script after an F5
A quick trick that solves this problem consists of opening the script file in a new tab, then refresh it on this page.
If you happen to have Chrome dev tools open it will even refresh it there.
From dev tool you can even easily right click-open in new tab the script.

django 1.6.1 raw_id_fields open a 'change' popup instead of 'select' popup

After updating to 1.6.1, using the magnifying glass provided by the default implementation of raw_id_fields in the admin panel shows a popup containing a change list, rather than a select list. Clicking on an item shows a change form rather than selecting the item, closing the window and returning the pk for the box in the admin page.
RelatedObjectLookup.js seems to have two versions of this line:
href = triggeringLink.href + '&_popup=1';
This one works, and shows up in firefox, and in my local environment.
href = triggeringLink.href + '&_pop=1';
This one shows up in Chrome, and shows the change form (assuming because it's looking for 'popup')
Is this a caching problem? If so, how do I clear whatever cache this is in? I've already set the cache version in the django settings up, which seemed to refresh other pieces of the cache.
Time for a break. It was just the browser cache.
Another situation in which you may face this problem is if you recently updated Django and forgot to perform the recollection of static files.
python manage.py collectstatic
This will copy again all your static admin files (and your own application static files) in your STATIC_ROOT directory and thus update the admin javascripts that are used in this case.
A browser cache refresh is then also required.

Categories