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).
Related
We have implemented checkbox in popover. There we are using checked.bind , but in the view model its not reflecting its value on change of the checkboxes.
Sample Gist Run Provided below:
Gist Run
Thanks in Advance
Programmatically injected HTML needs to be compiled manually
The integration with bootstrap I provided to you earlier cannot do this. The bootstrap plugin assigns the innerHTML property of the popover and it does this outside of aurelia's rendering pipeline. The HTML is therefore not compiled by aurelia, which is why bindings (and other aurelia behaviors) will not work.
The templating framework takes care of this for you automatically as long as you are following conventions (such as custom elements). In any other case you'll need to manually work with the ViewCompiler.
In case you're interested, you can see an example with programmatically generated HTML in this gist. Also see this question if you want to know more about it. I do not recommend it in this scenario however.
Use aurelia-dialog
A tooltip (or popover) is just that: a tip on how to use the tool. It should not need more than some plain markup, text and styling (of course this is subjective to some degree, and some people may disagree)
For collecting user input in-between pages or screens, I'd argue a modal dialog is a better fit because of its property to "pop out" more and to de-emphasize the rest of the screen until the user either proceeds or cancels.
More importantly, by using aurelia-dialog your bindings and behaviors will simply work because, well, it's an aurelia plugin :-)
I am unable to interact with an element using browser tests. It says the element is not interact-able, or not visible. This doesn't happen in Acceptance
Sometimes this solution doesn't work because the element is unavailable for some other cryptic reason.
We just had a situation where we couldn't use a <select> element to pick one of the options.
Further more, there was behaviour that was being triggered by the "change" event when the option was selected.
We were able to solve it like this.
$js = "jQuery('#chosen-option-quantity-2').val('2').trigger('change');";
$I->executeJS($js);
so the first command selects the option, and the second triggers the change event.
I hope that helps some one, even if it is me in the future.
The problem that is happening here is that the html element is being hidden by something, probably css somewhere. Because it is hidden (display:none), WebDriver can't see it, and therefore can't interact with it.
In order to fix this problem, you need to use JS to un-hide the element.
use this $I->executeJS('jQuery("#your-css-selector").show()');
This doesn't happen in Acceptance tests because PHP Browser looks at the Page Source, and so can see everything, while WebDriver see's what a user see's on the browser.
You may use PhpBrowser
It works only with HTML then how PhantomJs emulate the real browser
But, with PhpBrowser you can't see what see your browser (only HTML such I said)
Another way, try executeJs with PhantomJs as it said before
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.
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
Web page contain a button with some text for example "Test". This button actually is a toolbar element. ( class ="tbButton" id="id",text="Test") and redirects to a certain table when press on it.
When try to use the following click methods
selenium.click("id");
selenium.doubleClick("id");
selenium.click("//*[text()='Test'and contains(#class, 'tbButton')] ");
the button does not react
Could enybody show an alternative methods that is able to resolve a problem
It's hard to know exactly what the problem is without knowing more about the actual contents of the page you are testing. Is there an example of the toolbar online somewhere?
With modern interfaces, locating elements with Selenium is not always an exact science. Here are a few suggestions:
With modern interfaces you often find that the DOM is being manipulated, so it is possible that the identifier you are using is no longer valid by the time you get to your click(). Use Firebug to check that you have the correct element.
Often it helps to click on the parent of the element, such as a div or the parent table cell. Again, use FireBug, to try some other elements near your toolbar button. Alternatively, Firebug sometimes reveals that the element contains other elements. You might have more luck changing the target to a contained element instead.
Sometimes you have to play around with some of the alternative actions. For instance, some controls respond to a mouseDown() followed by a mouseUp(), but not to a click(). Again you can often get hints from looking at the source with Firebug.