I am stuck with automation. I am using SeleniumLibrary for robot framework. We need this on Chrome browser.
I am unable to drag and drop an element from parent to iframe/canvas using robot framework. The backend in on grapesjs. I guess this is not trivial.
Demo site
This is the demo page
I would like to drag and drop blocks from the right into the canvas.
For eg., I would like to drag and drop "Slider" into the canvas. Anywhere on this section
I searched for SO for most of the answers, but could not find any suitable solutions.
Here is what I have tried:
First approach
Robot framework's drap and drop by offset.
Open Browser https://grapesjs.com/demo.html Chrome
Maximize Browser Window
${src}= Set Variable xpath=//div[contains(text(),'Slider')]
Drag And Drop By Offset ${src} -300 -100
Close Browser
I am trying to drag and drop the slider into the canvas. Here are the co-ordinates.
The Slider's coordinates: 1360, 125
The canvas' coordinates: 568, 153
As I am trying to drag the element from right to left, the x offset is negative.
Observation
I see that the element is dragged on the canvas but not dropped. However, if I do a click whilst the framework is trying to drop, I see the block inserted on the canvas. I am unable to take screen shots, as I need to click.
The most important observation is that the cursor needs to be on the canvas for the drop to happen. I am unable to move the cursor on the canvas with robotframework.
Second approach
Robot framework's drap and drop by offset with a mouse down.
Open Browser https://grapesjs.com/demo.html Chrome
Maximize Browser Window
${src}= Set Variable xpath=//div[contains(text(),'Slider')]
Drag And Drop By Offset ${src} -300 -100
Mouse Down xpath://iframe
Close Browser
This did not work either and has the same observations as the first approach.
Then I decided to switch to the iframe and try to click on the canvas.
Third approach
Robot framework's drap and drop by offset with a mouse down and switch to iframe.
Open Browser https://grapesjs.com/demo.html CHrome
Maximize Browser Window
${src}= Set Variable xpath=//div[contains(text(),'Slider')]
# Click on the canvas
Click Element xpath=//iframe[contains(#class,"gjs-frame")]
Log To Console Clicked on canvas...
# Ensure that the blocks are displayed on the right side, as the click on canvas opens "Style Manager"
${present}= Run Keyword And Return Status Element Should Be Visible xpath=//span[#class='gjs-pn-btn fa fa-th-large gjs-pn-active gjs-four-color']
Log To Console Preset:${present}
IF "${present}"=="False"
Click Element xpath=//span[#title='Open Blocks']
Log To Console Click on Open Blocks...
END
Drag And Drop By Offset ${src} -300 -100
Sleep 5
Select Frame xpath=//iframe[contains(#class,"gjs-frame")]
Sleep 1s
${tgt}= Set Variable xpath=/html/body/div[1]
Wait Until Element Is Visible ${tgt}
Mouse Down ${tgt}
Click Element ${tgt}
Unselect Frame
That did not work either. Same observations as first approach
Fourth approach
Robot framework's mouse panning
Open Browser https://grapesjs.com/demo.html Chrome
Maximize Browser Window
${ATTEMPTS}= Set Variable 5
${LARGER_TIMEOUT}= Set Variable 10
${src}= Set Variable xpath=//div[contains(text(),'Slider')]
${tgt}= Set Variable xpath=/html/body/div[1]
# Hover the mouse on the Slider
Wait Until Keyword Succeeds ${ATTEMPTS} ${LARGER_TIMEOUT} Mouse Over ${src}
Sleep 1s
# Click and Hold the Slider
Wait Until Keyword Succeeds ${ATTEMPTS} ${LARGER_TIMEOUT} Mouse Down ${src}
Sleep 1s
# Move the mouse away from the Slider
Wait Until Keyword Succeeds ${ATTEMPTS} ${LARGER_TIMEOUT} Mouse Out ${src}
Sleep 1s
Capture Page Screenshot
# Switch to iframe
Select Frame xpath=//iframe[contains(#class,"gjs-frame")]
Sleep 1s
Wait Until Element Is Visible ${tgt}
# Hover over the canvas/iframe
Wait Until Keyword Succeeds ${ATTEMPTS} ${LARGER_TIMEOUT} Mouse Over ${tgt}
Sleep 1s
# Drop the element on the iframe
Wait Until Keyword Succeeds ${ATTEMPTS} ${LARGER_TIMEOUT} Mouse Up ${tgt}
Sleep 1s
In this approach, all the steps work but the last step. The element is not getting dropped on the iframe/canvas.
Fifth approach
I followed this SO post RobotFramework: Drag And Drop Selenium2 Keyword seems not to work to try the javascript version. This does not work due to the canvas/iframe. It works on pages where there is NO iframe.
The entire automation is dependent on this step.
Here are a few links that I want to reference:
RobotFramework: Drag And Drop Selenium2 Keyword seems not to work
Web browser hangs upon Drag And Drop Keyword for robot framework
https://github.com/hmalphettes/robotframework-selenium2library-extensions/issues/1
https://github.com/robotframework/SeleniumLibrary/issues/120
If there is a way to intercept drag and drop and do a mouse click, I am guessing it might work. However, I am not sure if the parent to iframe drop is that trivial, as suggested in this link https://github.com/James-E-Adams/iframe-drag-n-drop
Related
I´m working on a tool only for tablets (Android, iPad) based on Cordova and jQuery Mobile (1.4.5). In the first phase of this tool, many of the users who have to work with it were asking for some more comfort regarding the behavior of the form popups.
The problem was:
As a user came to one section, I provided him with a collapsible-set, consisting of sub-sections. In this sub-sections, the user gets data-grids with Add, Edit and Delete buttons next to each data-set.
So, as the user tapped on Edit button (or Add), I opened up a popup with the necessary form and form-elements to edit this data-set or add new data to the database. But in many of the upcoming popups the amount of the form-elements is as high, so the popup appears higher or even much higher then the collapsible-set (including the data grid) behind the modal popup is.
The popup of jQuery Mobile is centered by default and even if I positionTo origin and pass x and y coordinates to it, the library/widget wants to position the popup to this coordinates by the center point, rather then the upper left corner.
Users always had to scroll around to come to the start point of the form and after submitting the form, they had to scroll up again to where they tapped on the button to open the popup.
Now I tried to do everything I could imagine, to force the popups top position to 20 pixels below the top position of the visible area on the tablet, regardless of where I am, when tapping on any Edit or Add button.
I was playing around with offset() (window.pageYOffset), etc. and set the position of the popup by:
popup2open.popup('open').css({'top':popupTopValue+'px','left':popupLeftValue+'px'});
In fact, the popup is positioned to exactly where I want it, if the top offset is between 0 and 100. On all values above 100, the top position of the popup increases by absolutely incomprehensible value. The only consistent fact is, that the more I scroll down before I tap on a button, the more this value increases - so it does not in/decrease by random.
(BTW: I found out that I have to set "popupLeftValue" to 0, so the popup is positioned in the center horizontally.)
I just can´t see any regularity on increasing value...
Can anybody give me a hint or a punch to the right direction?
Thank you in advance!
PS: I experimented also with .css({'position':'[fixed|absolute]','top':popupTopValue+'px','left':popupLeftValue+'px'}); and that worked well. Only to find out one show-stopper: If I set the focus to an input-field inside the form and than closing the virtual keyboard on the tablet, a reposition-event is triggered and by this, the popup is re-positioned massively below the former position (in fact around 300 pixels below and just marginalized to the right border of visual area). The Cancel and Save buttons are even out of scroll-able area.
(some more funny fact, btw.: if I set the focus to the same input-field, than not closing the virtual-keyboard but directly setting the focus to a select element and after this pressing the back button of the tablet to escape the select menu, no reposition-event is triggered...!?)
On 18th of July 2013 Gabriel Schulhof added this line to a feature-request from one user, who asked exactly for what I´m struggling around with:
"We are indeed considering adding such a feature..."
With the following rules:
.container[data-direction="reverse"] .pane[style*="display: none"]{
animation:SlideOutToRight 1s ease;
}
.container[data-direction="forward"] .pane[style*="display: none"]{
animation:SlideOutToLeft 1s ease;
}
The animation runs whenever (a) the data-direction attribute changes and (b) whenever the style becomes display:none. How can I change this code so that the animation only runs when the style becomes display:none but not when the data-direction attribute changes?
Right now, when the direction changes, all of the containers go flying across the screen to the other side because the animation gets applied to all of them when the data attribute changes value.
The data-direction attribute should only control which animation plays, but changes to it's value should not trigger the animation. Is this possible?
Update:
Here is a fiddle of the problem: https://jsfiddle.net/j6ytzbh6/
Expected behavior: The forward button should cause the next sequential box to enter from the right hand side while the current box exists left. The backward button should cause the previous sequential box to enter from the left while the current box exits right. No other box should move or cross the view-port when its not it's turn to move.
Reminder: This is a CSS question, so doing the animation in javascript is cheating. The idea is that Javascript controls functionality (ie a box should be shown or hidden) while css controls presentation (ie. do we make it disappear, fade out or fly to the side). You shouldn't have to re-write your plugin to change the visual way things get shown or hidden.
There is a bootstrap modal which appears on button click.
There are also several tabs opened in Edge browser.
I am doing the following:
Click the button - the modal starts to appear
Switch to another tab - the modal is not fully visible yet and some transitions are in progress
Switch back to the original tab with modal which is semitransparent now
Transitions seem to be unfinished and modal becomes semitransparent
If I type the next code in console it gives me:
var m = angular.element('.modal.fade.in');
m.css('opacity') -> 0.2666
m.css('opacity') -> 0.2333
m.css('opacity') -> 0.33
//and so on..
I assume there is some optimization process that suspends not focused pages and resumes only focused pages and maybe for some reason transitions remain unfinished - styles are not fully applied.
How can I handle this situation?
Simply resizing window fixes the problem but that is not acceptable in my case.
As a temporary solution I used the folowing code:
window.onfocus = function() {
//manually check css opacity
//if is is less than 1 - set it 1
}
I have:
Keyboard "chords", e.g. Ctrl + typing
Copy and pasting (e.g. Ctrl+A, Ctrl+C, Ctrl+V)
Drag and drop
Drag by N pixels
Mouse hovering
Right mouse click
Drawing on a canvas
What else can you do with it?
Why do not you take a look into the methods here? As far as I can see you already have mentioned important ones. You also can do pause, release, move to the middle and offset of element, keyup, keydown and context click etc.
I have a component called X. I'm trying to make a menu come down from it when I put my mouse over it.
I have a mouseOver handler which changes the component's state to another state which shows an extra child component (the menu) on the lower part. This of course makes the X component grow.
I also have mouseOut event handler which makes the menu disappear by returning component X to its original state.
When I move the mouse over the component the menu appears as expected. But when I move the mouse down to the menu that is now visible, as soon as I touch it, it disappears. This way it's impossible to reach the menu.
I guess the mouseOut event is triggered as soon as I move out of the old boundaries. Is this so? And how can I avoid it? The new boundaries should now consider the extra child with the menu.
Thanks in advance,
Nuno
When you move over the child element you are mousing out of compo0nent "X".
Without seeing code I can't really help you. However you might want to try a few things.
Make a function that tests hit area
of the mouse and component and only
dispatch the event if it passes a
mouse out only if it isn't over your
component. Your component shouldn't dispatch a mouse out event just because the mouse moved out of the component
Change your listeners as needed
Event propagation
But really there is no way I can help more without code.