Drag and drop not working with vue.js in selenium java - java

I have tired everything Actions class, java script, move to element, click and hold etc. I have tried a lot of things. Seems like it don't work with vue.js or HTML 5 as our application is built using html5 and vue.js. What is does is it click and holds the element but don't drop it.

Related

Project: Create a java webapp in Vaadin (to-do-list)

To improve my programming skills I would like to set up a little project for my work. I would like to create a kind of to do list, with several columns (Note, PO Order, Shipping, Done (as a Checkbox), ect.).
At the end of a day, I want to be able to click on the checkbox for every row which is done and save them in a data file. Also I would like to create this as a web application, running on the server in the company.
Since I would like to improve especially my java skills I would like to do this (if possible) mostly in java and to get in touch with frameworks, so I started to read about Vaadin.
My question is, if you guys could give maybe some experience about a project like this and if it's in general possible to realise this with Vaadin.
To improve my programming skills
If you want to build web apps using pure Java on the server-side, Vaadin fits the bill.
You describe the layout and widgets you want to appear in the user interface using Java code. Then, at runtime, Vaadin automatically generates the necessary HTML, CSS, JavaScript, DOM, AJAX, WebSocket, and Push code needed to render that UI on the client-side in the user’s web browser.
The beautiful part is that you get all the benefits of using those web standards technologies without having to learn them or code them.
create a kind of to do list, with several columns (Note, PO Order, Shipping, Done (as a Checkbox), ect.).
Vaadin provides a powerful and well-designed data-grid widget, Vaadin Grid, that can display such columns including the checkbox.
I want to be able to click on the checkbox for every row
The Vaadin Grid tool has an interactive mode that allows the user to directly edit the row, including clicking on the checkbox.
You could alternatively let the user select several rows and click a button (that you programmed) than would mark them as done, checking the checkboxes of the group at once.
Also, Grid has a built-in feature where it displays a column of checkboxes to be clicked en masse as an alternative to selecting rows. This helps the many users who are not adept at maneuvering through a multi-row selection with mouse-and-keyboard gestures.
I would like to create this as a web application, running on the server in the company.
Your Vaadin-based web app is built on standard Java Servlet technology. So you can deploy to your choice of any of a dozen or more web containers such as Apache Tomcat, Eclipse Jetty, Glassfish, Wildfly, and many more.
I would like to do this (if possible) mostly in java
You can build your web app entirely with Java code by using Vaadin. All Java on the server-side, no Java on the client-side.
You may eventually want to learn a bit of CSS to tweak the fonts and colors and such. But this is optional.
if it's in general possible to realise this with Vaadin.
Indeed, this project sounds like an ideal match to Vaadin.
In contrast, where Vaadin is contraindicated would be:
For web sites with crazy complicated layouts such as slick magazine sites. Vaadin is aimed at business-oriented data-entry apps.
For programmers who want to grapple directly with the HTML, CSS, JavaScript, etc. rather than avoid it.

Elements on Upper part of WebPages goes behind the screen or Disappear from Screen while running Selenium Tests

I am using Selenium web driver with Java in test automation framework of WebApplication which is portlet based using Java.My workflow is...
On Wizard Page-1: a container available having 2-3 input/edit boxes, some dropdown list(using Select class) and few buttons. That is like Wizard. After entering all required data on wizard of page-1. then click to Next button to navigate to Wizard Page-2.
On Wizard Page-2: First option is dropdown list where we use Select class i.e. selectByValue/selectByIndex etc.But during of after this action,application showed like scrolling up. But when we observed, actually it hides the first line of all webelements on Page-2.
I am sharing the screenshots for problem. Shared two images are, one is before action or real screen and second one is which hides few web element after the action.
image can be accessed: https://drive.google.com/open?id=0By2IDRpIvYf7SnphOVB4R1N3aTg

How best should I interact with Flash from Selenium Java WebDriver

I am aware a bunch of similar questions such as (Interact flash elements using WebDriver) have been asked in the past however it is still not clear how best to interact with a Flash Element on a page in association with Selenium's Java WebDriver.
By default I know it doesnt support Flash, so I use it to log onto the site which is fine. Now I need to interact with a flash element as seen on this page :
http://store.nike.com/us/en_us/product/free-tr-4-id/?piid=34979&pbid=517639039
I want to be able to pick a shoe size from the Flash on the left hand side of the page, and then click the add to cart button.
Can anybody who has achieved this please offer their guidance and opinion on the best way. I have tried https://code.google.com/p/flash-selenium/ however this appears to be old, or not compatible with the new Java WebDriver.
The answer to your question is: No, there is no way you can interact with Flash from/using Selenium WebDriver. Full stop.
I know there are heaps of developers out there need to automated Flash. But this has never been a part of the Selenium project and it will never be added into. You might want to have a wander around Selenium Users group.
For projects like flash-selenium and flex-ui-selenium, they are not part of the Selenium project but created by third party, which means they can easily be discontinued due to various reasons. If you have decided to use them, you might end up developing the project itself instead of using it. Furthermore, I'm not aware of such projects compatible with Selenium WebDriver anyway.
One other possible solution might be using Sikuli, which is not a Flash automation tool though. It should support automating Flash with its unique image comparison technology. But once again, this has nothing to do with Selenium in any way.
There is a massive misconception that webdriver cannot interact with flash elements.The answer is YES you can interact with flash elements embedded inside html if you can locate the xy coordinates you can interact using selenium ACTION class like so..
Actions Action = new Actions(driver);
WebElement e = driver.findElements(By.cssSelector("button"));
Action.moveToElement(e).clickAndHold().perform();
Action.release().perform();

Selenium Webdriver mousedown command

I am writing tests for a Java application which has been developed using the Vaadin framework. For the tests I am using Robot Framework. At some steps I have to use robot framework commands like execute javascript.
For example, for finding a component I have to execute the following command:
execute javascript document.getElementById('button-create').click()
Which works without any problem. Primitives like Click Element are not working because Vaadin doesn't wait until the whole page is loaded and therefore some ids are not yet assigned at run time.
Unfortunately this application has been developed in such a way that some components are not reacting to the event click but to the event mousedown. That is, at the Java console of chrome I can perform the following command:
document.getElementsByClassName('table-cell-wrapper')[1].mousedown();
and the action is performed without any problem. So far so good.
Unfortunately when trying to do the same at robot framework
execute javascript document.getElementsByClassName('table-cell-wrapper')[1].mousedown();
I am getting te following error:
Executing JavaScript:
document.getElementsByClassName('table-cell-wrapper')[1].mousedown();
20131029 12:22:12.445 : INFO : </td></tr><tr><td colspan="3"><img src="selenium-screenshot-1.png" width="800px">20131029 12:22:12.453 : FAIL :
WebDriverException: Message: u'document.getElementsByClassName(...)[1].mousedown is not a function' ;
Then the question is... how can I trigger the event mousedown on a given element using Javascript and Webdriver.
My environment is:
RIDE 1.2.1 running on Python 2.7.5.
Robot Framework 2.8.1
Library Selenium2Library
Library Screenshot
Library Dialogs
Library Collections
Thanks in advance.
From Selenium2Library Execute Javascript keyword:
Note that, by default, the code will be executed in the context of the
Selenium object itself, so this will refer to the Selenium object. Use
window to refer to the window of your application, e.g.
window.document.getElementById('foo')
So you might want to put window. in there.
mousedown() is not a pure Javascript function. JQuery does have one and there is a event called mousedown in plain JS also.
If some element does not exists after the page is loaded causing
Click Element foobar
to fail, you can use Wait Until Page Contains Element and then click that element. You could write your own Press Element keyword to make it more usefull:
Press Element ${locator}
Wait Until Page Contains Element ${locator}
Click Element ${locator}

Using Drag and Drop In Websites?

As i would now like to develop better webapps then the basic php and javascript ones that i currently create, i would like to know how web devs create some of the amazing websites that i have used over the past few years.
For example, On some of the websites that i visit they have the ability to drag and drop items from a palette onto the webpage. I am thinking mostly about some of the online diagramming tools that i have seen. How do they do this because i am currently baffled.
I would like to start creating these types of websites and currently i have no idea how to proceed. I first want to create some small tester websites that allow just very basic drag and drop use.
If anyone could point me in the right directions in terms of links to tutorials or library's that have this feature then i would be most grateful.
Cheers.
Can be done using the jquery UI
Draggable
Droppable
The best, most future-proof (in terms of immunity to browser changes and updates) way to implement drag/drop functionality is to use true rich client (RIA) technology like Adobe Flex, Silverlight, or JavaFX.
I think you should consider development in GWT which is basically a Java based wrapper for Javascript. It has a lot of community support and a complete drag and drop support is available in the form of a library - http://code.google.com/p/gwt-dnd/
Since GWT is coding in Java, it is not really a new territory to venture into but knowledge of Javascript, css, html goes a long in way in building robust GWT application. Plus it allows you to debug your code in eclipse just like Java code.
jQuery is easy to learn (but I'm not 100% sure it does DnD). I personally like MochiKit, which has excellent Drag and Drop functionality, and Dojo is very good too (and has some fancy widgets).
As far as a simple drag and drop goes, you could do something like you said with a palette and a dialog that changes color based on the drop.
I would recommend the jQuery framework as it is very easy to use and has a great API.
The steps for the test itself are pretty simple:
Have a palette with the colors: [ ][ ][ ][ ][ ] These can be table cells (<td>) that you can click on and 'drag'.
You could do tables and when you click on one of the tables, you use jQuery to get the background color. When you actually click on the <td>, assign the color to a variable.
You could create a semi-transparent <div> that follows the mouse as you drag it.
Set a mouseup listener on the target <div> (the one that would change color) and have jQuery set the background of the <div> to the color in the variable.
Edit: There will be a slight problem with 'text selection' when you drag something. A fix can be found here: How to disable text selection highlighting using CSS?

Categories

Resources