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
}
Related
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
For my project I wrote a pure CSS hover menu. When the page loads the menu (#drop) waits for a few seconds before moving up, out of view. You can get the menu back by hovering over a different element (#hover) at the top of the page.
It works perfectly for me, but there is one issue. When you load the page, and you remain hovered over #hover, #drop moves up for a moment after it has finished waiting and moves back down in a glitchy manner.
You can experience it yourself here: https://jsfiddle.net/27mbnpwk/
Just run the script and put your cursor on the text, wait a couple of seconds and see it jump.
Is there a way to make the menu only go up if you're not hovering over #drop with pure CSS? Or, otherwise, with js?
I could not find a way with pure CSS, but there is an easy solution with jquery (thanks to #LinkinTED):
Two CSS classes, one for the menu being down, one for the menu being up:
.down{
transform: translate(0,00%);
}
.up{
transform: translate(0,-175%);
}
Then in javascript you create a function that initiates after the page is loaded. This function waits 3 seconds and subsequently adds the up class to the element, pushing it up, out of view. And a function that changes the class each time #hover is hovered over:
window.onload = function() {
setTimeout(
function(){
$('#drop').removeClass('down').addClass('up');},
3000);
};
$('#hover').hover(
function() {
// mouse in
$('#drop').removeClass('up').addClass('down');
},
function() {
// mouse out
$('#drop').removeClass('down').addClass('up');
}
);
Test it here:
https://jsfiddle.net/g9oq0124/1/
I would love to hear it if anyone does find a pure css, or cleaner way to do this!
I'm trying to use CSS transforms to make the center object in a carousel have more focus/attention. (Carousel is Slick.js)
Everything works great, except when I go from the last item back to the first item, there is a pause and a jump before the change appears.
What is causing this? How do I fix it?
https://jsfiddle.net/6d91cqoq/1/
//pseudo code
EDIT: It also happens going from the first to the last.
EDIT 2:
It's worth noting I took the idea from the Slick.js website: http://kenwheeler.github.io/slick/
On the page with the 'Center Mode' example, it is using transforms to do this exact thing. I cannot for the life of me figure out what is different, other than the target element.
EDIT 3: I did attempt to change my elements to H3 elements, as is in the sample. No change.
The cause for this is that Slick changes the DOM order of the slide elements when switching from "first to last". The transition doesn't kick in when dom elements are removed and added back... You can work around this by playing around with javascript and Slicks beforeChange and afterChange events instead of a pure CSS solution. I have made an example, although the example I made also slightly changes the effect (the center slide won't widen until it is in the center, e.g. afterChange). Maybe with Slicks, next and previous slide parameters you can make it work like your example, didn't have time to investigate it more.
https://jsfiddle.net/6d91cqoq/2/
Changes made to your example:
//Added my own "active" class, so it does not to interfere with slicks active class
.slick-slide.active {
opacity: 1;
transform: scale(1.50);
}
JS
//make current center active after initialization
$('.slick-center').addClass('active');
//before slide change, make all "inactive"
$('.center').on('beforeChange', function(event, slick, index){
$('.slick-slide').removeClass('active');
});
//after change make the center one "active"
$('.center').on('afterChange', function(event, slick, index){
$(slick.$slides[index]).addClass('active');
});
I may be trying to get too fancy on this one.
I have a pair of radio-like buttons in a row with a divider between them with background images. When one of the 'buttons' is clicked, I change its class. The CSS for the divider is keyed to the classes of the buttons on either side to select a background image. I am doing this with CSS 'sibling' selectors.
I have jQuery .click events tied to the 'buttons'. the first thing they do is clear the 'selected' class from the other button and set it on the button that was clicked.
For example, if the LEFT button class='selected' and the RIGHT button is not, the divider between them will get a blue background. Click on the RIGHT button and it gets class='selected' while the LEFT button's class is cleared. The divider turns red.
This works in IE, FF, Safari, etc. But IE is odd (IE7) - it will only reflect the divider background change when I mouse OFF the button I clicked! That is, in the example, the RIGHT button gets class='selected' and changes immediately on the click. But the divider stays blue until I mouse off the button, then it turns red.
The class itself IS changing and the button's appearance changes as a result. It's only the neighboring stuff that doesn't!?
It reminds me of my old VB6 days when you had to periodically call 'DoEvents' to get Windows to make UI changes. Could there be something similar here for IE?
I have no idea why this helps, but adding .hide().show() to a selector that includes the stuff that changed class seems to make it update.
I've read that using setAttribute to change the class will force IE7 to re-render the styles. Try that, and if it still fails, I've solved a similar IE7 problem by rewriting the html, which forced IE7 to re-render (using jquery):
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}
Does anyone know how the various screen readers interact with a modal window, ie: Thickbox? Do the contents of the modal gain the reader's focus after they click on it?
This depends on the modal solution you're using. Many do not do a decent job of focus management:
putting keyboard focus onto the first element in the modal.
looping focus back to the first element when the end of the modal is reached (rather than letting focus cycle to the browser chrome or the page behind the modal).
returning keyboard focus to the original position (e.g. the opening button or link) when the modal is closed.
If the solution you're using doesn't do some of this, you can do this kind of thing in your own JavaScript. For example, if you know the first focusable element:
var focusMe = document.getElementById("#modal-focus-start");
if (focusMe) {
focusMe.focus();
}
Or if you want to focus the first link in the modal.
var modal = document.getElementById("#modal"),
focusMe;
if (modal) {
focusMe = modal.getElementsByTagName("a")[0];
if (focusMe) {
focusMe.focus();
}
}
If you don't have a convenient focusable element to move focus to, some modern browsers (Firefox seemed buggy last time I checked) allow you to set tabindex to -1 on any HTML element, making that element focusable by JavaScript.
If you wanted to go further, you can use JavaScript to find the first focusable element (uses jQuery) within the modal.