Handling jQuery Tabs with Our Own Indexes - jquery-ui-tabs

I have created tabs dynamically with my own indexes, but when I try to add the tab, jQuery is giving it's own index.
How do I tell it not to use the default indexing?
Example :
<ul>
<li> <a href="#dummy-0" > </a></li>
</ul>
<div id="dummy-0"></div>
When I try to create it dynamically with my own index '0' it works, but at the same time it generates its own index .
How do I avoid this? Please help me.

Related

How to create dynamic html element base on array vuejs

I would like to create input element base on some condition please help me to do in best practice to resolve it.
<div v-for="(item, index) in sections">
<input :type="item.type" placeholder="item.type">
</div>
https://jsfiddle.net/170zvw2L/1/
if we have dropdown value takes in it automatically.
Thanks
Html should create automatically if possible to change json please guide need best solutions for this

VueJS in-line template and v-for in it

I'm trying to use in-line template that I have for dropdown menus but it's messing up the things upon switching between states.
This is the code I use in the main template:
<div>
<article v-for="(game, index) in games">
<dropdown ref="dropdown" inline-template>
<a v-for="(branch, index) in game.branches" :key="'branch' + index" :href="branch.link">{{ branch.name }}</a>
</dropdown>
</article>
</div>
It's working fine on load, but when I switch between categories the links are messing up, and the same links from the load stay for the other renders.
Am I doing something wrong?
You are missing to set an unique :key on the a tag.
The key, needs to be a unique identifier for the looped element. In the example below I'm using the index of the current looped element, but thats just for the sake of the example. Usually is not considered good practice to use the index because it can change forcing elements to re - render.
You will note that the name of the var holding the indexes in the v-for are different:
the indexes var needs to have unique names too, or the index in the inner loop will "steal" the index from the outer loop.
<article v-for="(game, gIndex) in games" :key="gIndex">
<dropdown ref="dropdown" inline-template>
<a v-for="(branch, bIndex) in branches"
:key="gIndex+bIndex"
:href="branch.link">
{{ branch.name }}
</a>
</dropdown>
</article>
Have a look here.
In 2.2.0+, when using v-for with a component, a key is now required.
For that reason you should be using :key in v-for.
You can assign your key to index or make it even more unique like:
:key="'branch'+index"
in case if you used similar keys before in your component (key should be unique).

Robot & Selenium Tree Element Expansion

My supervisor has recently switched us from HP-UFT to Robot with the Selenium Webdriver and I'm finding it extremely difficult to figure out how to use the driver and/or keyword framework to expand a folding tree ul/li webelement.
Below is a stripped out example of the code on the page:
<ul>
<li class="node-class open" id="i1454430045821320">
<a class="" style="" href="">
<ins> </ins>Location Header 1</a>
<ul>
<li class="node-instance leaf" id="i1454430058247421">
<a class="" style="" href="">
<ins> </ins>Location 1</a>
</li>
<li class="node-instance last leaf" id="i14545337159411690">
<a class="" style="" href="">
<ins> </ins>Location 2</a>
</li>
</ul>
</li>
<li class="node-class closed " id="i14544407827351156">
<a class="" style="" href="">
<ins> </ins>Location Header 2</a>
</li>
What I'm trying to do should be extremely simple: I want to expand a specifed closed tree structure if it's classed as closed. Beneath each branch is an optional nested branch, or a selection checkbox. My end goal is to be able to drill down to a location in the tree that the tester specifies and click the end leaf.
Using "Click Element|xpath=/ul/li[a[contains(text(),'Location Header 2')]" does expand the branch but it also selects all of the child node checkboxes.
In UFT, if I hit this kind of problem I'd simply change the parent <li> class to force it open (if I couldn't click or use any of the other methods to drill down and select).
In Robot, I can use the keyword "Get Element Attribute" to READ the class, but I don't see a keyword to CHANGE it so that idea is out. What I'm looking for is a way to expand the tree branches without inadvertently selecting all of the child nodes.
The drilling down through the tree portion I can deal with once I figure out how to open the nodes correctly but opening up the branch without potentially selecting all of the sub-items is making me pound my head into my desk.
I keep thinking that maybe I'm missing something simple. Any assistance on something that I could try would be greatly appreciated.
Figured it out! Thank you all so much for the ideas.
Click Element At Coordinates | xpath=//ul/li[a[contains(text(),'Location Header 2')] | -100 | 0
Luckily all of the ul element columns on the page have the same css style which sets them at 200px width. I figured through trial and error that the "At Coordinates" option clicks from the center of the object (and not the top left as I originally thought). I figured I'd share this in case anyone else ever has a similar problem.

Need Xpath expression for selecting Create Task option please help me with this

Need Xpath expression for selecting Create Task option please help me with this:
<ul class="container" style="padding-left:5%;padding-top:0.5%;padding-bottom:0.5%;">
<li id="createTask">
<a onclick="createTask();">
Create Task
</a>
</li>
If you really want to solve this using xpath, you may rely on the li tag and it's id:
//li[#id="createTask"]/a
Note that more explicit and reliable way would be to find the link by Partial Link Text. Example in java:
WebElement createLink = driver.findElement(By.partialLinkText("Create Task"));
createLink.click();

Get xpath under particular tag

Am newbie to selenium (java).
I have to click on the menu item which is under <ul> tag as <li> items. I can able to get it with //*[#id='MainMenu']/li[5]/span xpath.
I do not want to hard code [5] of the list item, because item's position may change. It may not at 5th position all the time.
I wanted to get xpath for the particular item under particular tag with an id.
Edit:
This is how my html looks like. List item text will be loading dynamically.
<ul id="sfMainMenu" class="sf-menu ui-selectable">
<li class="ui-selected ui-selectee">
<span subnav="0" param="cmd=desk" filesrc="/Dashboard/Index"></span>
</li>
<li class="ui-selectee"></li>
<li class="ui-selectee"></li>
<li class="ui-selectee"></li>
<li class="ui-selectee">
<span subnav="18" param="cmd=desk" filesrc="../myFile.aspx"></span>
</li>
</ul>
Kindly suggest the approach with an example.
I suggest trying this:
//*[#id='MainMenu']/li[normalize-space() = 'The text you want']/span
Though if you could show us what the HTML in question actually looks like, we can provide a more reliable answer. XPath doesn't have any concept of "visual text", so if you have some text that's hidden within the li you're trying to retrieve, that could be considerably trickier.
I have solved by using filesrc attibute of span tag in the list item.
Xpath is:
//span[contains(#filesrc, 'myFile.aspx')]
As my .aspx file will be the same for any page, so I used filesrc attribute which contains the actual file name and is the only file name in that html page.
You can use the following
driver.FindElement(By.XPath("//li[contains(Text(),'Expected Text']")).Click();
Or you can avoid xpath all together by running a foreach loop on the relevant Class tag
foreach (IWebElement e in driver.FindElements(By.ClassName("ui-selectee")))
{
if (e.Displayed && e.Text == "Expected Text")
e.Click();
}