I can't seem to get Watir to locate a link on a page, which reveals another two fields. But, the link isn't a link, but a li that is a legend:
<li>
<legend role="button" tabindex="1" id="alpha-trigger" class="trigger legend shown " aria-label="alpha Search"" for="alpha">
Alpha Search
</legend>
</li>
I've tried using .exists? and looking for that dom object, but I've always come up empty. I see that it isn't a timing issue, as I'm not using headless for chrome.
Can anybody recommend how I can see this link to .click it? Cheers
The problem is that the element is in a shadow DOM, which does not yet have support in Selenium/Watir. At this point, the fastest solution seems to be executing everything by JavaScript.
For example, clicking the Marriage link:
browser.execute_script('return document
.querySelector("fs-search-form")
.shadowRoot
.querySelector("[group-id=event]")
.shadowRoot
.querySelector("#marriage-trigger")
.click();')
Note that you need to explicitly navigate to the element containing the shadow DOM and call shadowRoot to go inside.
Related
I have a simple pagination that looks like
<ul class="pagination justify-content-end" th:field="*{page}">
<li class="page-item page-item disabled">
<a class="page-link" href="action">1</a>
</li>
</ul>
I would get the following behaviour with Thymeleaf. Clicking on the page and before submitting the action, the value of the th:field associated with the pagination should be changed by setting it to the th:value of the selected page. In other words, clicking on the page number should change the value of "*{page}" and then call the method. Is there any way to do that, for example, combining th:onclick with th:action?
Thymeleaf is a rendering engine, as such it can do nothing once the page is served to the end user. At best u can fill variables into javascript when rendering to achieve the desired result.
As for your described functionality the given code is far to limited or faulty to give a suggestion for a javascript solution, for one th:field on a non-input element doesn't do much. Also the shown href is just a simple href that doesnt interact in any way with the encapsulating th:field.
I have a jquery UI dialog on my page thusly:
$(function() {
$("#dialogDone").dialog({
closeOnEscape: true,
modal: true,
width: 350,
autoResize:true,
show: "drop",
hide: "drop",
autoOpen: false
});
});
<div id="dialogDone" title="Activity Done?" class="RNDDialog">
<div style="text-align: left;">
You are about to stamp this activity as DONE. Notifications may be sent out, and only Project Admins can reverse this.
<br><br>
<input type="checkbox" id="chkKeepShowingDoneWarning" class="RNDCheckbox" checked>Keep showing me this
</div>
<br><br>
<center>
<button class="GreenButton" onclick="stampActivityDone()">Yes, it is DONE</button>
<button class="GrayButton" style="margin-left: 10px" onclick="cancelDone()">Cancel</button>
</center>
</div>
After launching the dialog, nothing inside it is clickable. The grayish layer that normally covers the whole screen (but not the dialog normally) and makes everything in the background disabled, is also for some reason covering the dialog itself. I cannot click either button, nor check/uncheck the checkbox.
You can see it for yourself here.
I created the test page in the link above as a bare-bones reproducible minimal example. I have used jquery dialogs many times in this web app and others, but for some reason on this particular page, I get this strange behavior and cannot figure it out.
After launching the dialog, even though everything on the page including the dialog contents is disabled, you can still hit ESC, which dismisses the dialog and makes the page accessible again. This tells me that the fundamental jquery UI dialog wiring and event model is still working.
I read this other post that suggested setting the z-index of the dialog, so I experimented with that but it did nothing.
Any ideas?
I ran an HTML formatter on your test page source code and it looks like you have a lot of unclosed tags. Some of those unclosed tags are likely causing elements to have parents that you don't expect. I would recommend very carefully reading your code and making sure that every opening tag has a matching closing tag at the position you expect.
I found the problem. I was referencing an older jquery UI css file (1.9.1) instead of the newer one that goes with jquery 1.12.1. This is an edge case admittedly, but maybe it will help someone in the future who references an incorrect jquery UI css file.
I've been trying to get a Dojo (1.6) dijit.Tooltip to work when defined in a wijit template.
So, if I have wijit template that includes the following:
<a data-dojo-attach-point="tooltipMe" href="" onclick="return false;">
Show a Tooltip
</a>
<div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'tooltipMe'">
Got to love hovering over links. Sometimes you a get a free tooltip
</div>
I can see the link of course, but nothing happens when I hover. Scouting round the newsgroups it seems there might be a problem with defining tooltips in wijit templates, but it's not mentioned in the Dojo docs.
Is it possible to define tooltips inline like this? Or am I just doing something wrong, it seems like the obvious place to do it.
If not, is there an accepted approach for creating and linking tooltips to DOM nodes defined in wijit templates?
Tooltips connectId property has to be the id of a DOM node. data-dojo-attach-point is not an id, it just creates a reference in the instantiated widget.
So in your case you need to assign an id to the a-node and use the same id in connectId. To avoid id clashes when creating multiple instances of your widget you can use the ${id} variable substitution to ensure that all ids are unique:
Your code should look something like this:
<a id="${id}_link" data-dojo-attach-point="tooltipMe" href="" onclick="return false;">
Show a Tooltip
</a>
<div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'${id}_link'">
Got to love hovering over links. Sometimes you a get a free tooltip
</div>
I've had problems doing it this way before. I used script to create them on my page after I had done some other work, maybe something like this will help you out if you use it in the template postCreate method.
var span = dojo.query('.hasEntry span').forEach(function(node, index, nodelist)
{
new dijit.Tooltip({
connectId:node,
position:"above",
label: toolTipLabel
});
});
Responding to an old thread here, but just wanted to share a solution for people looking to use tooltips without IDs on their custom widget elements. It's not as pretty as just using tooltip, but it works. It uses the "dijit/popup" and "dijit/TooltipDialog" modules.
this.editTooltipDialog = new TooltipDialog({
content: "<p>I love tooltips</p>",
onMouseLeave: function(){
popup.close(this.editTooltipDialog);
}
});
on(this.targetDiv, 'mouseover', lang.hitch(this, function(){
popup.open({
popup: this.editTooltipDialog,
around: this.targetDiv
});
}));
I tried to replicate the issue in jsFiddle: http://jsfiddle.net/phusick/EcLLb/.
I found out that dijit.Tooltip widget from the template is instantized, but it does not connect mouse events, presumably because DOM node it attempts to connect to does not exist yet (i.e. has not been added to document DOM tree).
To prove the aforementioned I tried to connect the tooltip in widget's postCreate method, when all DOM building is done and it worked:
postCreate: function() {
this.inherited(arguments);
this.tooltip1.set("connectId", this.tooltipMe); // w/o this the tooltip won't show
}
So you can instantize tooltips via a template markup and then just connect then to DOM nodes in postCreate method.
Trying to add scrollbars to a listview within a dialog in JQueryMobile with no joy.
I'm using the following code:
<div class="content-primary">
<ul id="lvPages" data-role="listview" data-filter="true" data-inset="true" data-scroll="true"></ul>
</div>
Which works perfect on desktop browsers yet when I test this on an iPad the scrollbars don't appear.
Is there something obvious I'm missing?
Sorry, should actually add:
I'm adding the items via Javascript and am calling a " $("#lvPages").listview('refresh');" upon the end of these additions.
According to this forum article, you have to include the jquery.mobile.scrollview.js script (and its associated CSS file) for the data-scroll attribute to be recognized and acted upon.
I don't know what this is called hence having a hard time finding any reference on the net for this. On hotmail when you enter an email it boxes the email into a rectange block one by one on the same line with options to edit and delete the email. What is this and are there any sample code/frameworks to implement something similar?
Thanks.
It's normally a UL, and inside it you have LI which are either elements styled to have a box around them (emails, in your case), or a borderless INPUT box which blends into the surrounding UL of the same background. JavaScript code handles deletion and insertion of box LIs according to keyboard input. I am not aware of framework support for it, but it may exist.
EDIT: It exists. http://plugins.jquery.com/plugin-tags/tags for jQuery options.
I was looking for the same thing, and upon looking at the source code for it. It seems that they are using a UL like Amadan said, but its set up like this:
<div id="container">
<ul id="email_list">
<li class="email_token valid" id="a#a.com" email="a#a.com">
<p>a#a.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_token valid" id="b#b.com" email="b#b.com">
<p>b#b.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_input_container">
<textarea class="email_input_field"></textarea>
</li>
</ul>
</div>
EDIT: I ended up implementing it and it runs wonderfully!
Try to use Firefox+Firebug to inspect the elements in hotmail. It'll help you to find out yourself.