The situation is that I have a page that uses some AJAX calls to retrieve content from the server, then puts those results into a chunk of html generated by another script. The problem is, I can't select with watin any of the elements of this new piece of html. It can be viewed in the browser, and comes up when I hit F12 and scan through the code, but still WatiN can't see it.
Is this because WatiN only scans through the html source of the page, and not the current version of the HTML? I think a similar situation would be:
html -
<script type="text/javascript">
$('#foo').html("gak");
</script>
...
<div id="foo">bar</div>
then when I try and assert -
Assert.IsTrue(browser.Div("foo")).ContainsText("gak"));
it will return false.
Any ideas on this? or is my best option to just write a bunch of jQuery, and browser.Eval() it?
I test AJAX pages quite a bit. The key is to wait until the asnyc postback has completed. If you have
Assert.IsFalse(browser.Div("foo")).ContainsText("gak");
browser_action_that_changes_bar_to_gak
>> Here you need to wait <<
Assert.IsTrue(browser.Div("foo")).ContainsText("gak");
In the "wait" section you can do a System.Threading.Thread.Sleep(numberOfMilliseconds) <- this is not the best way, but it is really simple. Once you determine that waiting is what you need to do, a better way to wait is to poll the status rather than way numberOfMilliseconds each time. I believe different AJAX libraries do things differently, but what works for me is really similar to this: http://pushpontech.blogspot.com/2008/04/ajax-issues-with-watin.html
I put the JavaScript into an Eval() in a helper function in the my base Page class rather than having to inject it into every page like the article did.
.
my Base Page class contains:
public bool IsInAsyncPostBack()
{
const string isAsyncPostBackScript = "Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()";
return bool.Parse(this.Document.Eval(isAsyncPostBackScript));
}
And then my WaitForAsyncPostback is basically the same as in the linked post, but I added a max wait time. Before going to Page classes (awesome; do it!) I made these static functions somewhere else and it worked too.
This is almost surely a timing issue. The jQuery has not updated when you test. Rather than introducing any artificial pause or wait it's best to wait for something to show that your AJAX has worked as expected.
In this case a WaitUntil should do the job nicely:
Assert.IsTrue(browser.Div("foo")).WaitUntil(c => c.Text.Contains("gak")));
This works for most updates and the like. Another common waiting pattern is on data loading say, where you'd have a spinning wheel displayed. Then you could wait until this wheel is gone with a something like:
WaitUntil(c => c.Style.Display == "none");
Related
I am writing selenium test scripts using the industry standard of webdriver waits before interacting with elements, but I still frequently find my tests are failing, and it seems to be due to a race condition.
Here's the example I have been running into lately:
Go to the product catalog page
Apply a filter
Wait for the filter to be applied
Click the save button on the product which loads after the filter is applied
Step number 4 only works if I place a Thread.Sleep() in front of the step - using webdriverwait is not enough. I'm guessing this is because the webdriverwait only waits until the element is attached to the DOM, even though the relevant JavaScript click event has not been added to the element.
How do you get around this issue? Is there an industry standard for dealing with this race condition?
EDIT This was resolved by upgrading to the latest version firefox. Thanks everyone!
As we discovered in comments, updating Firefox to the latest version did the trick.
The code looks really good to me and makes total sense.
What I would try is to move to the element before making a click:
Actions builder = new Actions(WebDriver);
IWebElement saveButton = wait.Until(ExpectedConditions.ElementIsVisible(By.CssSelector(".button-wishlist")));
Actions hoverClick = builder.MoveToElement(saveButton).Click();
hoverClick.Build().Perform();
As we've discovered in comments, the issue is related to the size of the window (the test passed without a Thread.sleep() if the browser window is maximized). This makes me think that if you scroll to the element before making a click it could be enough to make it work:
IWebElement saveButton = wait.Until(ExpectedConditions.ElementIsVisible(By.CssSelector(".button-wishlist")));
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].scrollIntoView(true);", saveButton);
Actions hoverClick = builder.MoveToElement(saveButton).Click();
hoverClick.Build().Perform();
Take a look at this SO post for custom wait method. Sounds like element presence is not enough of a check in your case because the button may be present at all times in the DOM. What you need is something along the lines of ExpectedConditions.elementToBeClickable().
I am not familiar with the C# API but it looks like there is no built in method to do the same thing as in Java. So you could write a custom wait function that will have checks according to your needs.
I have been doing some research on feasible and faster web page loading test with Selenium. A general idea of smoke testing is to click and navigate through the whole site to make sure the pages load properly. I was initially thinking to use some kind of ways to capture the http status code through some kind of http libraries since Selenium does not have any native support for that. But, I found it is not what I want since it will simply return Each and Every links of the site and most of them will be the ones I do not want. So the best way will be to perform actual click and take pages in return. The problem there is the execution time it will take. However, that’s what I am doing currently. Splitting the whole application into different modules and click through all VISIBLE links and take page objects in return with known selector. I am using FindElements() method to grab all the links of a page and click back and forth to test page load. I am doing something like the following:
Is there a better way to improve the performance?
WebElement deliveredChartDailyFocus = driver.findElement(By.id("delivered-chart-daily"));
deliveredChartDailyFocus.click();
// Get a list of all the <rect> elements under the #delivered-chart-daily element
List<WebElement> children = deliveredChartDailyFocus.findElements(By.tagName("rect"));
WebElement elementToClick = null; // variable for the element we want to click on
for (WebElement we : children) // loop through all our <rect> elements
{
if (we.isDisplayed())
{
elementToClick = we; // save the <rect> element to our variable
break; // stop iterating
}
}
if (elementToClick != null) // check we have a visible <rect> element
{
elementToClick.click();
}
else
{
// Handle case if no displayed rect elements were found
}
I would never call process of verification of every single link 'smoke testing'. For example how ISTQB defines this "A subset of all defined/planned test cases that cover the main functionality of a component or system, to ascertaining that the most crucial functions of a program work, but not bothering with finer details". And ths actually mean to exacute some meaningful scenarios and check some small flow/piece of functionality. Only clicking every link will check correctness of links but not computations or logic performed by server side. As for improving speed of passing tests you can consider running tests in parallel.
Using PhantomJS, I'd like to inject some JS as if there was an extra <script> tag before any other <script> tags. This is because the scripts on the page use some functions that PhantomJS does not have, namely Function.prototype.bind and window.webkitRequestAnimationFrame. I have a JS file with custom implementations of the two and I'd like PhantomJS to use them when running the scripts on the page.
The difficulty is that if I do page.injectJs before page.open, the script is injected into an empty page and is not carried over to the page being opened.
Alternatively, if I do page.injectJs after page.open, it's too late as the JavaScript errors (undefined functions) have already occurred.
I've found a way that appears to work, but is obviously a hack:
page.onResourceReceived = function() {
page.injectJs('phantom-hacks.js')
};
This injects it many times (twice for each resource, apparently), but that's okay because my script is idempotent. However, I'd like to know the proper way to do this: inject it only once and before any scripts on the page are run.
Thanks :)
I don't think there's a "proper" way to inject such script other than hooking to events.
I've spent half a year working massively with PhantomJs and found no way to inject before all the errors start happening but after the page finished loading.
I would try to go through onInitialized, onLoadStarted, onLoadFinished. Inside the hooks I would call to page.evaluate() which would just modify DOM to have this extra whatever place you like.
I think one of them (the hooks) should give you the right timing you want.
Cheers
I am getting the following error when trying to interact with some items:
Element cannot be scrolled into view:javascript:void(0); (Selenium::WebDriver::Error::MoveTargetOutOfBoundsError)
This comes when interacting with a modal (Bootstrap) just after an AJAX call even though the element is in the browser and is visible.
One workaround I found was I just manually went to the page again (this did not mess up the test scenarios).
Is there any better method for such errors?
Testing ajax is tricky. That's because it is asynchronous ;)
So you have to wait for certain objects to occur on your page.
And then depending on your framework some transitions or animations are done, you have to wait for them as well.
For what exactly you have to wait, depends on your application and the JS Framework you are using.
It could be a css class an id or something else.
For example with jQuery mobile you have to wait for the css class ui-mobile-viewport-transitioning to be removed, then your transition is finished and you can continue testing.
Here is a Java code example for waiting:
webdriverWaiter.waitUntil(ExpectedConditions.invisibilityOfElementLocated(By.cssClass("ui-mobile-viewport-transitioning")));
Hope that helps
I have a number of ajax calls with content being inserted by dojo.place. I have dojo widgets in the new content so I have to execute dojo.parser.parse() after the content is "placed".
The trouble is I cannot find away of executing this. If I put the code on next line I gets executed too soon. I have had to put it in a setInterval command but that is a rubbish solution.
oncomplete event on dojo.place anyone. Help really appreciated.
dojo.place() is synchronous, so calling the parser right after the place call shouldn't be an issue. It sounds like the problem is that you are calling the parser before your XHR completes.
Unfortunately, you need that setTimeout, because the browsers don't render DOM changes synchronously. As explained in Opera blog: Timing and Synchronization in JavaScript:
Here is an example in pseudo-code:
headlineElement.innerHTML = "Please wait...";
performLongRunningCalculation();
headlineElement.innerHTML = "Finished!";
In Internet Explorer and Mozilla, the
text "Please wait..." will never be
shown to the user, as the changes are
rendered only after the whole script
has finished. In Opera, on the other
hand, the "Please wait..." text is
displayed while the calculation is
running.
There are few similar questions in SO:
Ways to increase performance when set big value to innerHTML
Is it normal to have a short delay after .innerHTML = xmlhttp.responseText; ?
If you create a DOM node from your xhrGotten html, say
var d = document.createElement("div");
d.innerHTML = returned_html;
Then you can parse the new div, creating the widgets before using dojo.place to add the new node to the document.
dojo.parser.parse(d);
dojo.place(d, ref_node, "last");