I have page to test
<div class="activity-container">
<!--fragment#54705578f9#head-->
<div fragment="54705578f9" class="activity-action">
<span class="icon-arrow_drop_down"></span>
<span class="actions-description">
<b>Login</b>
</span>
<span>Date: 28/02/2019</span>
<span>Time: 12:20</span></div>
<div class="activity-description" fragment="54705578f9" style="display: none;">
<span></span>
<span class="actions-no-info">No additional information</span>
</div>
<!--fragment#54705578f9#tail-->
<!--fragment#26552421c5#head--></div>
When i try to click on //*[#class="activity-action"][1] with webdriver i get 'Element not visible exception'.
Next step, check why element not visible for selenium:
document.getElementsByClassName('activity-action')[0].getBoundingClientRect()
response:
DOMRect {x: 359.3125, y: 343, width: 900, height: 59, top: 343, …}
Element visible, now check parent:
document.getElementsByClassName('activity-action')[0].parentNode.getBoundingClientRect() and get DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}
Parent element not visible so child is not visible too. But parent element is something weird:
document.getElementsByClassName('activity-action')[0].parentNode
returns: <div fragment="54705578f9"></div> and i dont understand how it could be. I cant see this element in chrome inspector. What is this?
document.getElementsByClassName('activity-action')[0].parentNode.parentNode
returns <div class="activity-container">...</div> this element must be returned in previous step.
Could i make element //*[#class="activity-action"][1] visible by modify it with JavascriptExecutor?
based on provided Exception:
Completed command waitForElementVisible (15235 ms) and Timed out while waiting for element <//div[#class="activity-container"]/div[1]> to be visible for 15000 milliseconds. - Expected "visible" but got: "not visible
your xpath given to Selenium is wrong. Selenium try click child div of activity-container div which is activity-description div having style="display: none;
Please verify your xpath, for example in Chrome dev tools before passing it to Selenium test
Related
Jeopardy: "a gimmick to separate it from other quiz and game shows. Because the prompt is the answer!"
This weaselly question appears to be OK, .. But what a terrible coding (Hole) I've dug for myself in the process.
I have a problem, in that I want to create several sets of:-
-- [ div text popup rollovers ]
-- [ that appear and disappear again ], but only when a mouse goes into, and then out of an <a href link, as in:-
<a href="#"
onmouseover=show('popup1')
onmouseout=hide('popup1')>Help Text One</a>
<br /><br /><br />
<a href="#"
onmouseover=show('popup2')
onmouseout=hide('popup2')>Help Text Two</a>
This weasel is an insidious creature to track down, being as all the other weasels are far too clever by half, and for the life of me I couldn't see what was really happening as the other weasels were running: nor even where the Ron Weaselly code went in my Harried Pottering Code.
This website has helped me so many times in the past, that I wanted to give a [ pop-goes-the-weasel ] back to future generations.
The answer to my rollover weasels is found here, that also has a rider attached:-
"It’s also perfectly fine to ask and answer your own question, as long as you pretend you’re on Jeopardy! — phrase it in the form of a question."
Here's the [ text rollover popup solution ] that I end up with, and this was after a day and a half of mumbling to myself and re-editing on codepen.io, then mumbling some more to get the simple coded weasel to popup on command.
Note: the resulting rollover code doesn't look that impressive, but it works. My issue now is whether it could made to work even better, and be made even simpler without me getting lost in the Triwizard Maze, populated by popping weasels of course.
Not sure if codebase.io examples are allowed here, being as all of the demonstrations I've seen thus far are in (fiddle.)
So I've created a fiddle account for you knowledgeable folks to give it the once over.
** Note: I've also magicked up a rather helpful line of helpful text: that actually gets changed by JS, to then reflect the state of the variables going (on) in the JavaScript section, the (alert) popup kept stopping the code from working.
The weaselly fiddly link is as follows:-
https://jsfiddle.net/terrymcb/4gL0ntvs/
Here's the HTML code, three blind rollover links that correspond to three divs, that are individually nested.
<p>DIV BOX ROLLOVERS</p>
<a href="#"
onmouseover=javascript:show('gcinfo')
onmouseout=javascript:hide('gcinfo')>TEXT-1</a> JS-1
<br /><br /><br />
<a href="#"
onmouseover=javascript:show('ucinfo')
onmouseout=javascript:hide('ucinfo')>TEXT-2</a> JS-2
<br /><br /><br />
<a href="#"
onmouseover=javascript:show('uainfo')
onmouseout=javascript:hide('uainfo')>TEXT-3</a> JS-3
<br /><br />
<p id="tValue"> Show in-out OBJ value. </p>
Here's the DIVS laid out.
<div id="ucinfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is the ucinfo included text.</p>
</div>
</div>
<div id="uainfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is the uainfo included text.</p>
</div>
</div>
<div id="gcinfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is gcinfo included text.</p>
</div>
</div>
The CSS, dialog box followed by three outer classes: (visible & display?) Over kill perhaps.
.dialog {
position: fixed;
top: 50px;
right: 50px;
bottom: 50px;
left: 150px;
z-index: 10;
display: flex;
padding: 1em;
background-color: rgba(0,0,0,.100);
/* opacity: 1; */
pointer-events: pointer;
transition: .25s ease-out;
}
#uainfo {
visibility: hidden;
display: none;
}
#ucinfo {
visibility: hidden;
display: none;
}
#gcinfo {
visibility: hidden;
display: none;
}
The all important JavaScript, note: I've cleaned the variables on every call, it seems to keep the function functioning, but I might well be paranoid at this point where JS is concerned. What I do know for a fact, is that calling the document.getElementById( direct keeps failing with the second call to JS, and I've no idea why! - Which is why the variables disp and vist have been used.
function hide(obj) {
disp0 = '0';
visp0 = '0';
disp0 = document.getElementById(obj);
visp0 = document.getElementById(obj);
disp0.style.display="none";
visp0.style.visibility="hidden";
document.getElementById("tValue").innerText='hide ' + obj;
}
function show(obj) {
disp1 = '0';
visp1 = '0';
disp1 = document.getElementById(obj);
visp1 = document.getElementById(obj);
disp1.style.display="block";
visp1.style.visibility="visible";
document.getElementById("tValue").innerText='show ' + obj;
}
That's all folks ..
I'm using WebdriverIO to test some basic functionality on an Ionic (+ Angular) application. The framework setup works all right, but I can't find a way to click on certain HTML elements. For instance, this is some HTML sample:
<div class="tabbar show-tabbar" role="tablist" style="top: 166px; display: flex;">
<a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-0" aria-controls="tabpanel-t0-0"
aria-selected="true">
<span class="tab-button-text">Blah</span>
<div class="button-effect"></div>
</a>
<a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-1" aria-controls="tabpanel-t0-1"
aria-selected="false">
<span class="tab-button-text">Foo</span>
<div class="button-effect"
style="transform: translate3d(83px, -103px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 395ms ease 0s, opacity 277ms ease 118ms;"></div>
</a>
<a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-2" aria-controls="tabpanel-t0-2"
aria-selected="false">
<span class="tab-button-text">Bar</span>
<div class="button-effect"
style="transform: translate3d(3px, -99px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 395ms ease 0s, opacity 277ms ease 118ms;"></div>
</a>
<div class="tab-highlight animate" style="transform: translate3d(570px, 0px, 0px) scaleX(285);"></div>
</div>
And this is a super-simple test case that I'm doing to test the functionality:
import { expect } from "chai";
describe("Some Test", () => {
const logingUrl: string = "url0";
const appUrl: string = "url1";
it("Some Test Again", () => {
browser.url(logingUrl);
browser.url(appUrl);
const tab = $("#tab-t0-2");
tab.click();
expect(tab.getAttribute("aria-selected")).to.equal("true");
});
});
..but every time I run it, I get some weird error message that the element is no clickable at some point. Any clues?
[0-0] element click intercepted in "Some Test Again"
element click intercepted: Element <a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-2" aria-controls="tabpanel-t0-2" aria-selected="false">...</a> is not clickable at point (666, 170). Other element would receive the click: <ion-backdrop disable-activated="" role="presentation" tappable="" class="backdrop-no-tappable" style="opacity: 0.5;"></ion-backdrop>
(Session info: headless chrome=75.0.3770.100)
This is one of those classic Angular/Ionic backdrop gotcha's.
Let's start with the error message: element #tab-t0-2 is not clickable at point (coordinates), another element would receive the click: ion-backdrop.
This tells us that your targeted element cannot be clicked as the ion-backdrop tag is rendered on top of it. The ion-backdrop component is a short animation (usually used for modals), in this case, the semi dimming of the background (opacity: 0.5).
✖ Solution 1: Easy way to counter it? Explicitly expect for it to disappear, then click the targeted element.
it("Some Test Again", () => {
browser.url(logingUrl);
browser.url(appUrl);
// Explicitly wait for the backdrop animation to disappear:
const backdrop = $('.backdrop-no-tappable');
backdrop.waitForExist(5000, true, 'Backdrop still present');
const tab = $("#tab-t0-2");
tab.click();
expect(tab.getAttribute("aria-selected")).to.equal("true");
});
✖ Solution 2: Another thing you can try is only click on the tab element, once it is fully visible and intractable in the DOM (this is kind of a best-practice):
const tab = $("#tab-t0-2");
tab.waitForDisplayed(5000);
// For 'wdio-v4' users:
// tab.waitForVisible(5000);
tab.click();
expect(tab.getAttribute("aria-selected")).to.equal("true");
I am facing a problem while dragging the elements from different iframe to the fancy TREE node?
function test(){
$("#tetsingDIV1").draggable({ revert: true, cursor: "move", cursorAt: { top: -5, left: -5 }, connectToFancytree: true });
}
HTML part
<body onload="test()">
<a id="tetsingDIV1" style="cursor:move;text-decoration: none !important;" href="_param=dfasdfdsadasdasdasdasdasdas"> <img src='../common/images/iconDragDrop.png'</a> </body>
I want to drag the above HTML element on the fancy tree node
Any solution for this? I have tried this: ON the external iframe for a DIV; I have added draggable event too.so that fancytree can accept it.
Good evening everyone,
I have a 3 tab window where I want each tab to display a different Facebook album when the user clicks the corresponding tab. The first(and default) tab works perfectly. However when I click the second tab and it just shows a black screen. It also seems whatever FB album ID I put in tab2 overrides the content of tab1. Any help is welcome. Thanks in advance.
Here's the HTML:
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div id="galleria">
<script>
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
facebook: 'album:303814463041408',
width: 458,
height: 250,
wait:true,
lightbox: true});
</script>
</div>
</div>
<div class="tab-pane" id="tab2">
<div id="galleria">
<script>
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
facebook: 'album:323687541054100',
width: 458,
height: 250,
wait:true,
lightbox: true});
</script>
</div>
</div>
<div class="tab-pane" id="tab3">
<p>tab3 tab3 tab3</p>
</div>
</div>
This might be because both tabs' content are using the same ID galleria. Try changing them to id="galleria1" and id="galleria2", then update each script to target the appropriate divs: #galleria1 and #galleria2.
I have the following code:
<img style="background: url(./image/data/logo.png) no-repeat top right" src="./image/data/picture.jpg" />
As it is now, it shows the logo.png under the picture.jpg image. How can I make it to be shown above the .jpg image?
Thanks.
You must use 2 images to do that. The img must be with position absolute (The one that you want to be over the other). Don't forget that the container must have position:relative in order to contain the absoluted png.
Here is the example:
http://jsfiddle.net/jNpaH/
The html tags:
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png"
class="png-over" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png"
/> </div>
The styles:
.image{position:relative}
.png-over{position:absolute; top:0; left:0}
The problem with that technique is that your code becomes spammed with the image tags.
One way of solving it with jQuery is to find each div container with the class 'images' and prepend to each one the image tag.
Here is the example:
http://jsfiddle.net/jNpaH/2/
According to your code I assume that you prefer to have a short html code. But it is impossible to have an image_tag with a background covering it.
The cleanest way is to use jQuery:
This is the final code:
http://jsfiddle.net/QyMkh/
First put a div that will contain all your images. The div must have a class, the images don't require it necessarily.
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
</div>
Then add this jQuery block in the html before the closing </body>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// store in a variable the url of the image that will be used as background
var url = 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png';
// select every image_tag that is children of the div with the class 'image'
jQuery('.image img').each(function() {
// every child image will be wrapped inside generated divs with a class 'img-wrap'
$(this).wrap('<div class="img-wrap"></div>');
});
// After the images are wrapped, insert the image tag that will work as background, note that instead of using the source I'm using the variable that stores it.
$('<img src="' + url + '" class="logo" />').prependTo('.img-wrap');
</script>
Finally add those style declarations to get the desired effect.
<style type="text/css">
.img-wrap{position:relative}
.img-wrap img.logo{position:absolute; top:0; left:0}
</style>
This code will keep your html documents with no unnecesary markup when you try to edit next time.
An advantage of using an image_tag as a background, is that with css you can resize its width and height. Try adding this new rule of stylesheet:
.img-wrap img.logo { height: 170px; left: 75px; position: absolute; top: 50px; width: 170px}
To end this, if you want more flexibility, for example you don't want the image_tags be container in a div, do this actions: replace this line of the jQuery block:
jQuery('.image img').each(function() {
with this
jQuery('.image').each(function() {
and add a class="image" to each
<img class="image">