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
Related
I need to write a test script to validate that a button is present on the page and the button becomes sticky and stays attached at the bottom of the screen for mobile breakpoint.
I have already written a script where it resizes the browser window. However, How do i prove that a button remains sticky to the footer no matter how much scrolling user does.
Button retains its id and place in the DOM when its styling changes for the mobile view.
I need solution for all major browsers but if someone can guide me for Chrome that should be good enough.
I have looked into getComputedStyle but i think its bit messy. i am looking for more elegant solution using some library.
This check is baked in selenium - there's a webelement method isDisplayed() returning a boolean. Here's a link to the Java bindings - https://seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/WebElement.html#isDisplayed--
And if you're wandering if this is a "real" check is the element in the viewport, here's the webdriver's explanation how it's done - https://w3c.github.io/webdriver/#element-displayedness (in summary: yes, as much as this can be done).
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 am trying to use selenium to automatically log in the following website:
here is the link https://www.theice.com/
After I click on the log in, a log in screen comes up - I don't know what this is: frame,panel ...
I have not been successful in detecting what elements,properties this screen has through selenium. Thus I am not able to fill in the necessary info through selenium.
Can anyone shed some light on this?
SiKing is correct, here. Nothing too fancy going on with the DOM. Use your favorite DOM inspector and examine the elements and you should be able to identify the locators.
In this case, it looks like the front end devs were thorough and gave major elements 'id' tags. Once you can establish a relationship from an element to it's id, you'll just need to code the selenium commands to interact with them.
While there are a number of good tools for this, I like to recommend FireBug and FirePath addons for Firefox. Similarly to Chrome's inspector, hovering over a DOM element in the inspector will highlight the element itself on the page. FirePath can assist with CSS selectors and XPath if need be.
Without knowing your method of development (code by hand or SeleniumIDE) or you chosen language, I'd simply recommend reading the Selenium docs over at http://docs.seleniumhq.org/docs/03_webdriver.jsp#selenium-webdriver-api-commands-and-operations to get a feel for the means by which elements can be identified and subsequently used.
Incidentally, this site is an example of a good front end design (at least from a cursory glance). Locating elements, once you're familiar with the concepts, should be relatively simple. Play around with it, the best way to learn is by doing (that's why I haven't just given you the solution), you'll get it.
Best of luck.
(Also, I've not meant this message as 'talking down' to you. I'm not familiar with your level of understanding here, so I'm just starting with the basics).
Edit:
It occurred to me, after writing my initial response, that you may encounter an issue with the modal being displayed. After clicking the 'log in' link, you may want to add a wait to your test to ensure enough time for the modal to appear before interacting with it's elements. A simple Thread.sleep() could work here, but I hate recommending that unless it's a last resort situation (we all know sleeps suck, but sometimes it just needs to be done)... Instead, read up on the WebDriverWait class (assuming java) and the ExpectedConditions class. You could pass a locator for the root modal element, or a child thereof into wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("yourLocator")); which will wait until the condition is satisfied (or a timeout occurs) rather than the Thread.sleep() making a hard pause and possibly waiting for a needlessly long amount of time.
The point is, since the modal display isn't instantaneous, WebDriver may choke if it tries to interact with an element that hasn't yet appeared. Using a wait will relieve this problem.
Could someone explain why the transitions (at least the default one - entrance) are not starting right away when a user clicks on a link (navigate) with Durandal?
In other words, do we need two mechanisms (loader animation + transition) to indicate that there is an action underway (ex. ajax call inside the activate method).
I'm sure there's a good reason, or maybe I just have to modify the entrance transition?
It seems like Durandal's transitions run once the activate function resolves. I asked a similar question where I enumerated some of the possible solutions that I found which worked for my situation specifically:
Manually animate away every view in its deactivate() and animate it back in via its viewAttached()
Bind the .page-host div's visibility to router.isNavigating (using a custom binding to handle the transition such as the fadeVisible example from the knockout site)
Manually subscribe to router.isNavigating and run custom logic when it changes
Hopefully this helps.
If you did not compress your entire application then the first process will be requirejs downloading the next amd module and then downloading the appropriate view.
The next step is durandal calling activate on your module. Activate if it returns a Deferred then it will wait for the deferred to complete.
Once activate is complete then the transition is called. The transition is responsible for swapping out the old view for the new one.
So, if its taking a while to kick off the transition its probably because its lagging in downloading your module and view.. or your activate method is taking a bit of time to finish.
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");