I can't make ValidationTextBox to lose focus and I can't see the method blur() either.
How can I make it lose focus?
The blur() method works on dom nodes. A widget is often backed by an html template. If you look at dijit/form/templates/ValidationTextBox.html, you will see that there is a dom node which has a dojoAttachPoint containing "focusNode". Here is the code of the template on dojo 1.7, for reference :
<div class="dijit dijitReset dijitInlineTable dijitLeft"
id="widget_${id}" role="presentation"
><div class='dijitReset dijitValidationContainer'
><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " type="text" tabIndex="-1" readonly="readonly" role="presentation"
/></div
><div class="dijitReset dijitInputField dijitInputContainer"
><input class="dijitReset dijitInputInner" dojoAttachPoint='textbox,focusNode' autocomplete="off"
${!nameAttrSetting} type='${type}'
/></div
You can achieve your blur trigger through a direct reference of the node referenced in the template as "focusNode" by doing something like :
dijit.byId("myValidationTextBoxId").focusNode.blur();
You have to override the functionality of the class ValidationtextBox.js. By default its is always invoked on the onkeypress event.
Related
I'm trying to autoclick this button with greasemonkey. I tried to find a reference to this button with document.getElementsBy[ClassName/Name/TagName] with ClassName i find buttons but not the one i need. Any ideas how i can automate his click-event?
<button type="button" class="ml-2 mt-2 v-btn v-btn--depressed theme--light v-size--default amber darken-1 white--text ">
::before
<span class="v-btn__content">
<!---->
Überspringen
<i aria-hidden="true" class="v-icon notranslate v-icon--right material-icons theme--light">
redo
::after
</i>
<!---->
</span>
</button>
Screenshot from Firefox Inspector with Click Function
Thanks in Advance!
Just use xpath for element searching:
document.evaluate(XPATH, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
You can use class parameter instead id or name:
xpath: //button[#class='ml-2 mt-2 v-btn v-btn--depressed theme....']
If you do not need to use all value, you can use contains keyword:
xpath:
//button[contains(#class, 'ml-2 m2-2')]
css:
button[class*='ml-2 m2-2']
Of course, this value must be unique.
You can search child element and return back to the parent:
//button/span[#class='v-btn__content']/i/../..
You can use text for searching (bad practics if location possible to change)
//button/span[text()='Überspringen']/..
I am getting issue while display another component on click event, here is my code:
<div (click)="showThis = true"></div>
<div class="" [ngClass]="{'hide': showThis}"></div>
<div class="" [ngClass]="{'show': showThis}">
<another-screen></another-screen>
</div>
its displaying both, first should display without any click, if click event then this hide first and another component will display
means hide and show class will apply
any help
Thanks
Why you don't use hidden:
<div (click)="showThis = true"></div>
<div class="" [hidden]="!showThis"></div>
<div class="" [hidden]="showThis">
<another-screen></another-screen>
</div>
*ngIf removes the html element from DOM but [hidden] is use for display none or block html element same as hide and show
Why not use *ngIf
<div (click)="showThis = true"></div>
<div *ngIf="!showThis "></div>
<div *ngIf="showThis ">
<another-screen></another-screen>
</div>
I'm trying to get the webdriver to click on the text "Breaking Things" through xpath/css selectors to no avail. Here is the HTML
<div class="org-option" ng-repeat="Org in Organizations" aria-label="Select Breaking Things Organization" ng-click="Org.SelectOrg()" role="button" tabindex="0">
<div class="data">
<div class="data-relative">
<!---->
<div class="image-wrapper" ng-show="Org.HasImage" ng-if="Org.HasImage" aria-hidden="false">
<img class="onboard-logo" ng-src="/apiimage/organizations/f1544944fac34442998a05890c400338-0" src="/apiimage/organizations/f1544944fac34442998a05890c400338-0">
</div>
<!---->
<div class="image-wrapper ng-hide" ng-show="!Org.HasImage" aria-hidden="true">
<div class="image-placeholder">
<div class="center-icon gicon-panorama"></div>
</div>
</div>
<div class="name-wrapper">
<div>Breaking Things</div>
Here is what I'm doing with the driver:
chromeDriver.findElement(By.xpath("//div[#class='name wrapper']//[text()='Breaking Things']")).click();
However it never clicks, what am I missing? I've also tried implicit waits etc with no results.
You should specify exact node name div or wild-card for "any node" - * in this part
//[text()='Breaking Things']
like below:
"//div[#class='name-wrapper']//div[text()='Breaking Things']"
or
"//div[#class='name-wrapper']//*[text()='Breaking Things']"
The class name is name-wrapper. The - is important
chromeDriver.findElement(By.xpath("//div[#class='name-wrapper']//[text()='Breaking Things']")).click();
In #class='name wrapper' you are actually telling the driver to look for an WebElement with two classes, name and wrapper.
I'm using Bootstrap 3.3.4. I have a panel with a heading and footer, and a glyphicon to indicate the open/closed state of the panel.
If I use the id of the panel body as the selector for collapse then Bootstrap correctly applies the .collapsed class to the heading and the glyphicon changes. However, I want to also collapse the footer so I changed to using a class selector for collapse. The good news is the footer now also collapses; the bad news is that .collapsed is no longer applied to the heading and thus the glyphicon doesn't change.
CSS
.collapsible {
cursor: pointer;
}
.panel-heading.collapsible:after {
font-family:"Glyphicons Halflings";
content:"\e114";
float: right;
color: darkslategary;
}
.panel-heading.collapsible.collapsed:after {
content:"\e080";
}
HTML
<div class="panel">
<div id="theHeader2" class="panel-heading collapsible" data-target=".shrinkme" data-toggle="collapse">Collapse</div>
<div id="theBody2" class="panel-body shrinkme collapse in">
nim pariatur cliche reprehenderit, enim eiusmod high life
</div>
<div id="theFooter2" class="panel-footer shrinkme collapse in">
<button class="btn btn-default">
<span class="glyphicon glyphicon-tree-deciduous"></span>
</button>
</div>
</div>
jsFiddle demonstrating both selectors
Am I doing something that's keeping .collapsed from being applied? How can I collapse the body and footer when the heading is clicked?
bootstrap only adds the class to there is #id or href and not class.
according to the docs you are suppose to target the collapse using two options
data-toggle="collapse" href="#collapseExample"
or
data-toggle="collapse" data-target="theBody2"
this way you do not have to add a cursor:pointer manually as well
Actually, the there is an workaround, the data-target works with class selector but really doesn't change the parent class.
On the parent element you can handle onClick event, like:
onClick="(e) => { e.currentTarget.classList.contains("collaspsed") ? e.currentTarget.classList.remove("collaspsed") : e.currentTarget.classList.add("collaspsed"); }"
Here's the answer:
Make the footer panel a child of the body panel.
Use class panel-collapse on the body panel instead of panel
The first item is the key; the second one is for proper styling. I stumbled upon the solution by reading this issue.
Here is the revised jsFiddle with the updated HTML.
Updated HTML
<div class="panel">
<div id="theHeader" class="panel-heading collapsible" data-target="#theBody" data-toggle="collapse">Collapse using id as the selector</div>
<div id="theBody" class="panel-collapse collapse in">nim pariatur cliche reprehenderit, enim eiusmod high life.
<div id="theFooter" class="panel-footer collapse in">
<button class="btn btn-default"> <span class="glyphicon glyphicon-grain"></span>
</button>
</div>
</div>
</div>
How click button in webdriver without any id, values. Class of button is changing dynamically.
Sample:
<div class="d-k-l d-y-r-c g-h-f-Ck b-Qb" role="button" style="-moz-user-select: none;" tabindex="0" aria-haspopup="true">
<div class="d-k-l d-y-r-c-ha">
Мои круги
</div>
<div class="d-k-l d-y-r-c-Qa"></div>
</div>
Thx.
Show more HTML please. So that we can find something useful in the context.
Currently the only possible way is to use XPath' text()
.//*[#role='button']/*[contains(text(), 'Мои круги')]
If you are sure relevant elements are div, you can use
.//div[#role='button']/div[contains(text(), 'Мои круги')]