Hot to find in dojo element when I know id of parent and I know type and style class of element which I looking for ?
For example, I want find and change (span style=tabLabel) ALARMS into Mga alarma
<div dojoattachpoint="focusNode" role="tab" style="-moz-user-select: none;" id="tab_div_tablist_dijit_layout_ContentPane_1" tabindex="-1" title="" aria-selected="false">
<img dojoattachpoint="iconNode" class="dijitIcon dijitTabButtonIcon dijitNoIcon" alt="" src="dojoroot/dojo/resources/blank.gif">
<span class="tabLabel" dojoattachpoint="containerNode" style="-moz-user-select: none;">Alarms</span>
<span role="presentation" dojoattachevent="onclick: onClickCloseButton" dojoattachpoint="closeNode" class="dijitInline dijitTabCloseButton dijitTabCloseIcon" style="display: none;">
<span class="dijitTabCloseText" dojoattachpoint="closeText">[x]</span></span>
</div>
In this case it is pretty easy. If you look at the span element you refer to it has a dojoattachpoint attribute specified. That means that the node can be accessed from the widget directly with that name.
Now I assume that the widget is called "tab_div_tablist_dijit_layout_ContentPane_1" from the id in your code so to get the widget:
var widget = dijit.byId("tab_div_tablist_dijit_layout_ContentPane_1");
And the dojoattachpoint on the span has the value containerNode so:
widget.containerNode.innerHTML = "Mga alarma";
I think that should work.
If you're creating a custom widget template and wish to localize a string, there is a mechanism to do this. Simply use a substitution pattern like ${alarm} and define a javascript property on your widget with that name. That property can then be populated with a localization bundle using dojo.i18n. You can look at some of the dijits like dijit.Dialog.postMixInProperties to see how this is done.
Related
I'm using a UIKit library for a tab component that listens to a uk-tab property that targets an id. The problem with this, is that it creates the same ID for every tabbed component. I like the UI, but whoever thought of this, didn't think too far into it. I could fix it by making the id dynamic but I am having trouble calling it in the uk-tab property because it is rendering a string. Coming from a react background, I would do a string literal and some JSX, something like #item-${_id}to show #item-12, #item-13....and so on. But That's not working. How can I do this in Vue?
Here is an example of how it works
<div class="mytrigger">
<ul uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
<ul id="component-tab-left" class="uk-switcher">
</div>
Here is an example of how what I need
<div class="mytrigger">
<ul uk-tab="connect: #_uid+'switcher'; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
<ul :id="_uid+'switcher'" class="uk-switcher">
</div>
Check out the dev tools. It should be 810switcher, but instead is taking it as a string
Any ideas? Thanks
I believe what you need is:
<ul :uk-tab="`connect: #${_uid}switcher; animation: uk-animation-fade`">
Or if you prefer not to use backticks:
<ul :uk-tab="'connect: #' + _uid + 'switcher; animation: uk-animation-fade'">
The output will be:
<ul uk-tab="connect: #22switcher; animation: uk-animation-fade">
A few notes:
Using a : is short for v-bind: but don't let the name confuse you. v-bind doesn't necessarily bind anything, it just makes the attribute value a JavaScript expression.
I'd avoid using numbers at the start of element ids, I've seen that cause problems in the past. It'd be better to put the numbers at the end.
The underscore at the start of _uid indicates that it's private to Vue. There are no guarantees about what form it will take or whether it will even exist going forward.
Use data-uk-tab instead of uk-tab like below.
<div class="mytrigger">
<ul data-uk-tab="{connect: `#${_uid}switcher`, animation: 'uk-animation-fade'}">
</div>
<div class="mytargetedtab">
<ul :id="_uid+'switcher'" class="uk-switcher">
</div>
For more information => Switcher with tabs
You can use any javascript expression in a data binding in vue. So, if you bind a string template to the attribute, it'll populate what you expect.
<ul :uk-tab="`connect: #${uid}switcher`'; animation: uk-animation-fade">
Looking for a generic way to find text before an input field to know what to fill in the field. Using xpath, css selector or any other way possible.
<div>
<span>Full Name</span>
<input name="xddadN">
</div>
<div>
<span>Email</span>
<input name="xedadN">
</div>
Or
<div>
<div><label>Full Name</label></div>
<div><input name="xddadN"></div>
<div><label>Email</label></div>
<div><input name="xedadN"></
</div>
Or
<div>
<label>Full Name<br>
<span><input name="xddadN"></span>
</label>
</div>
<div>
<label>Full Name<br>
<span><input name="xddadN"></span>
</label>
</div>
You can try below XPath expression to get preceding text node:
//input/preceding::*[1]
or more specific for Full Name
//input[#name="xddadN"]/preceding::*[1]
and Email:
//input[#name="xedadN"]/preceding::*[1]
For full name use this Xpath : //input[#name='xddadN']/preceding-sibling::span
code :
String fullName = driver.findElement(By.Xpath(//input[#name='xddadN']/preceding-sibling::span)).getText();
String Email = driver.findElement(By.Xpath(//input[#name='xedadN']/preceding-sibling::span)).getText();
You haven't mentioned any Selenium Language Binding Art so I will be using Java for the example.
First the Answer
Yes, you can use a generic way to find text before an input field as follows :
As per the HTML :
<div>
<span>Full Name</span>
<input name="xddadN">
</div>
<div>
<span>Email</span>
<input name="xedadN">
</div>
To retrieve the text Full Name from the <span> tag with respect to the <input> tag you can use :
String myText = driver.findElement(By.xpath("//input[#name='xddadN']//preceding::*[1]")).getAttribute("innerHTML");
Now the Pitfall
Without any visibility to your usecase in my opinion the generic way would be a pitfall which will induce much chaos and uncertanity for the following reasons :
As per the xpath we are straightway jumping into the previous element, a small change in the HTML DOM (e.g. inclusion of a <span> tag) will make your Testcases to Fail.
In general, while constructing a Locator Strategy through css-selectors or xpath it will be benificial to include the <tagName> to optimize the element search process. If <tagName> are not included your Tests will require more time to locate the elements and perform action on them. In this process you are compromising some of the advantages of Test Automation.
Conclusion
Hence as a conclusion as per the Best Practices always include the <tagName> while constructing a Locator Strategy through css-selectors or xpath.
I have following html element.
using selenium i need to find the existence of the span class my-icon .
Also findout the first div class is 'active'.Since the class contains multiple classes i was not able to find element by class.
<div class="inner my active">
<div class="left-side">
<span class="icon my-icon"></span></div>
<div class="right-side">
<span class="icon-connected"></span>
<button class="button manage">Manage Connection</button>
</div>
</div>
1)Code used to find the existence of span class <span class="icon my-icon"></span> it is not working and getting element is not visible.
WebElement ispresnet = driver.findElement(By.xpath("//span[contains(#class, 'my-icon')]"));
boolean os = ispresnet.isDisplayed();
You should probably wait for element to become visible:
WebDriverWait wait = new WebDriverWait(webDriver, 5);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div.active span.icon")));
Note that I'm using div.active span.icon CSS selector here which would match the span element having icon class inside a div element having active class. Either the way I wrote the selector, or the explicit wait should help here.
Example HTML below. I want to locate the elements which contains the text Person Attributes and Age.
<div id="ext-gen210" class="x-tool x-tool-toggle"></div>
<span id="ext-gen214" class="x-panel-header-text">Person Attributes</span>
</div>
<div id="ext-comp-1071" class=" DDView ListView" style="height: auto;">
<p class="dragItem "><i class="icon-Gen"></i>Age</p>
</div>
Note: I am looking for a solution without using xpath or id or className as they might change with every new release of my website.
I tried to locate them using
'name' --> By.name("Person Attributes") and By.name("Age") but both failed.
By.name would check for the name attribute. What you need is to check the text of an element using By.xpath:
By.xpath('//div[span/text() = "Person Attributes"]')
Or, you can also check that an id element starts with ext-gen:
By.xpath('//div[starts-with(#id, "ext-gen")]')
The following html is not working for me.
<div id="weightListViewTemplate" data-win-control="WinJS.Binding.Template">
<span data-win-bind="innerText: name; id: id"></span>
</div>
<div id="basicListView" style="width:420px;height:600px" data-win-options="{ itemTemplate: select('#weightListViewTemplate') }"
data-win-control="WinJS.UI.ListView">
</div>
The list appears but the ID property is not set on the span objects.
How to a set the id of the span dynamically in the template based on the corresponding value in the datasource/array?
I wouldn't recommend using the actual ID property. I believe you can't set it through data binding -- I believe WinJS uses ID's on elements under the covers to allow for weak-references to the DOM elements. Because of this it doesn't let you set the ID.
I would suggest using another property or attribute instead.