Unit testing loading images/pages - javascript

I am writing unit tests for a web application using Python/Selenium and JS/jQuery. The test in question involves ensuring that a message with animated icon displays after the user submits a payment before the confirmation screen loads.
The payment is handled via a third-party iframe. The loading message and image do not display on a different URL -- it's the same URL as where the iframe itself is.
I've tried using JavaScript to stop the page load with self.driver.execute_script("return window.stop;"), but this isn't working.
I've also tried using Selenium to send the escape key with self.driver.find_element_by_tag("body").send_keys(Keys.ESCAPE) but this is also failing to stop the page load before the confirmation page loads.
I've also tried just assert "Loading Text" in self.driver.page_source without stopping the loading of the confirmation screen, but this also didn't work.
If I manually click the stop button, it does stop the page load. I tried using this function to simulate a click on the stop button, but no avail. A stop button never appears during the automated test -- it remains a reload button even though the page is processing a request.
def stop_page_load():
def click_based_on_coordinates(x,y):
win32api.SetCursorPos((x,y))
win32api.mouse_event(win32con.MOUSEEVENTF_LEFTDOWN,x,y,0,0)
win32api.mouse_event(win32con.MOUSEEVENTF_LEFTUP,x,y,0,0)
click_based_on_coordinates(78, 50)
Not at all sure how to test this item. Thoughts?

Related

Userscript only works if I interact with the page first

I'm trying to automatically click a Login button in Chromium after a particular URL loads.
(function() {
'use strict';
// Your code here...
setTimeout(function() {
document.getElementsByTagName('button')[0].click()
}, 4000);
})();
If I run document.getElementsByTagName('button')[0].click() in the browser's javascript console, it works.
If I click somewhere on the page in between the page loading and the userscript's click event firing, it works.
But if the browser opens to the page and the script fires without any other interaction, I get a "Login failed" error from the page, which is the same error it would show if the password or username were wrong. But the password and username were filled in by the browser already.
Initially I tried the https://getautoclicker.com extension and tried all kinds of things like having it fill in the text fields rather than letting the browser do it, but it has exactly the same problem.
How do I simulate whatever happens when the mouse clicks somewhere on the page?
Even if I use xdotool to press Ctrl+F between the browser loading the page and the script firing, the script works.

How to make history.back() without getting a warning on the browser to reload the page?

I need to create a "Back" button, so for that I used:
history.back();
It works fine when I run it locally, but when I deploy it to the server when I click on the button I get a message on the browser:
Confirm Form Resubmission
This webpage requires data that you entered earlier in order to be properly displayed. You can send this data again, but by doing so you will repeat any action this page previously performed.
Press the reload button to resubmit the data needed to load the page.
ERR_CACHE_MISS
There is no problem resubmitting the form. I just want to avoid this message for the user. Is there any way to do that?
The simplest solution (and a general best practice) is that a POST submission be followed by a redirect on success which takes user to a page which can be accessed through a direct URL.

How do I keep toastr.js notifications open when I load the next page?

I'm working with asp.net ASPX pages. I've put toastr.js on my MasterPage. It works properly. I'm using it on a page with a Save button that stays on the same page like so:
ScriptManager.RegisterStartupScript(this, this.GetType(), "toastr", "toastr.info("Save successful.");", true);
and a Save&Continue button that saves and loads the next page like so:
ScriptManager.RegisterStartupScript(this, this.GetType(), "toastr", "toastr.info("Save successful.");window.location='NextPage.aspx';", true);
But, when I click the Save&Continue button it flashes the notification but then the next page loads and it's gone. No persistence across changing pages.
Maybe I'm fuzzy on javascript specifics but is there some asynchronous way to load the toast notifications so they aren't specific to a page?
I don't know much about ASP.NET WebForms, but here are some things to consider:
The issue is that when you submit and process a form using server side code (C# in this case), the entire page reloads, including your javascript files. This is why the toastr disappears when you click Save&Continue.
The only thing that I can think of would be this:
The method that runs when you click Save&Continue, would need to pass the necessary information to the next page, so that page two would know to display the toastr instead of page1.
If you truly want to submit a record to the database, navigate away and have a toastr displaying the entire time, you may want to look into Single page applications (Allowing you to make asynchronous requests, with routing, while staying on the same page, allowing the JS to keep running without full page refreshes). Although this could mean rewriting your application, which might not be an option.

WebdriverIO - how to determine if a page load or refresh happened

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.

How to hide a transient web page once it's been used?

I have the following situation
Home Page -- User clicks a link, which directs them to a JS-generated page, which may be time intensive
JS-page does some work and may display a "timer" saying work will be done in X seconds, and redirects user to a PDF
PDF page is shown to the user
Problem:
Once the user is done with PDF, they click "Back" button on the browser, hoping to go back to Home Page, but instead they go to JS page, as that's how browsers work -- they step back once. Naturally that displays the timer again and redirects users right back to PDF.
How do I structure my software so that when users are done with PDF, clicking Back (or some other simple way) takes them back to the Home Page?
Simple work-around is for users to click back twice in quick succession, but that's kind of inconvenient - breaks usability of this particular piece for the users and I don't want to do that.
EDIT For Code:
PHP side:
case "export-to-pdf":
$printpdf->generateCanvasInBrowser();
break;
HTML/JS side:
public function generateCanvasInBrowser()
{
//generate form with data
//submit form to PHP script
document.forms['form'].submit();
}
PHP-side:
//Takes and processes POST-ed data from form, and generates PDF
<?
echo printPDF();
EDIT For solution try:
I did a modal dialog with Java Script (https://stackoverflow.com/a/15582060/2883328), and now JS page shows up in an overlay div, but then also does the PDF. It shows up in the dialog box, not in the main browser. It looks fair enough, but still breaks expected functionality for the user as they are used to clicking back from PDF to home page. With this one I'll need to find a way to submit the form AND get out of the modal box.
(moving over from my comment, which seemed to fix the problem mostly)
The best way to fix this is to display the countdown on the home page itself. That would avoid the problem altogether, because then you wouldn't load any page in between. If you use a modal, for example, which contains the js-generated page, then you will need to make sure to submit the form to the top page. You can do that by adding target="_top" to your <form> tag.
I hope this works for you.
Generate the JS Page INSIDE A DIV in the Home page and work widh "visibility: collapse" to show or hide .if you use JQuery use ("#div").hide() and .show()
That should be a lot easier and solve your problem

Categories

Resources