I have code like this(it is not the exact code.)
<div class="Scroll">
<ul class="List">
<li class="Item">Option 1</li>
<li class="Item">Option 2</li>
<li class="Item">Option 3</li>
<li class="Item">Option 4</li>
<li class="Item">Option 5</li>
<li class="Item">Option 6</li>
<li class="Item">Option 7</li>
<li class="Item">Option 8</li>
<li class="Item">Option 9</li>
<li class="Item">Option 10</li>
</ul>
</div>
I was trying to catch all the list items (li). However, when i clicked to dropdown, it only shows 5 of them since rest of them are not in the view. So, if i try to get all items, webdriverio gives me only 5 options while there are 10 of them.
thus, i need to scroll down a little bit to get all of them. I know there is a "scrollIntoView" but i could not use it.
Related
I'm using the renderers to alter the indention of the levels however I needed to provide a custom function to identify the proper label.
Here's the payload returned from the API >>>>
<p>sample product</p>
<p><br></p>
<ol>
<li>sample</li>
<li class="ql-indent-1" id="a">sample</li>
<li class="ql-indent-1" id="a">sample</li>
<li class="ql-indent-2" id="i">sample</li>
<li class="ql-indent-2" id="i">sample</li>
<li class="ql-indent-2" id="i">sample</li>
<li class="ql-indent-1" id="a">sample</li>
<li class="ql-indent-1" id="a">sample </li>
<li class="ql-indent-2" id="i">sample</li>
<li class="ql-indent-3" id="1">sample</li>
<li class="ql-indent-4" id="a">sample</li>
</ol>
I'm building something like a "treeview" on bootstrap3. But I'm struggling with the collapse system. There is no problem when I expand the parent. But when I try to expand a child, it expands it, but also collapse the parent. And so on...
Here is the html
<div class="panel-collapse" role="tabpanel">
<div class="panel-body">
<ul class="treeview">
<li data-toggle="collapse" class="collapse1" href=".collapse1-1">Item 1
<ul class="collapse collapse1-1">
<li data-toggle="collapse" href=".collapse1-1-1">Item 1-1
<ul class="collapse collapse1-1-1">
<li>Item 1-1-1
<ul>
<li>Item 1-1-1-1</li>
<li>Item 1-1-1-2</li>
<li>Item 1-1-1-3</li>
</ul>
</li>
</ul>
</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And here is a jsFiddle: https://jsfiddle.net/yL71kopn/
Can anyone help me on this? I would wish a purely bootstrap solution rather than a custom JS here. Unlees it's completely impossible.
Cheers! :)
Use links inside li tags, because when you click to open Item 1-1 you are also clicking on Item 1 li.
<div class="panel-collapse" role="tabpanel">
<div class="panel-body">
<ul class="treeview">
<li>
<a data-toggle="collapse" class="collapse1" href=".collapse1-1">Item 1</a>
<ul class="collapse collapse1-1">
<li>
<a data-toggle="collapse" href=".collapse1-1-1">Item 1-1</a>
<ul class="collapse collapse1-1-1">
<li>Item 1-1-1
<ul>
<li>Item 1-1-1-1</li>
<li>Item 1-1-1-2</li>
<li>Item 1-1-1-3</li>
</ul>
</li>
</ul>
</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
JSFIDDLE
How to click on the element with the value "Policy Search", which has dynamic attributes for each users, so please help me to set the xpath for below code.
<div class="navbar-collapse collapse in">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">My Business <b class="caret"></b>
<ul class="dropdown-menu">
<li>Agent Hierarchy
</li>
<li>Pending New Business
</li>
<li>Book of Business
</li>
<li>Commissions
</li>
<li>License Renewals
</li>
<li>Trial Applications
</li>
</ul>
</li>
<li class="dropdown">Policy Search <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu"> <a tabindex="-1" href="#">Book of Business Search</a>
<ul class="dropdown-menu">
<li>Client Search
</li>
<li>Policy Search
</li>
<li>Advanced Search
</li>
</ul>
</li>
</ul>
By.xpath("//a[contains(#class="dropdown-toggle" and text()="Policy Search")]));
and if you have multiple items with same value, you can specify it like,
By.xpath("//a[contains(text()="Policy Search")][1]));
By.xpath("//a[contains(text()="Policy Search")][2]));
i want to get the list of element in a list, so the html page is:
<div class="list">
</h2>Select Item
<ul>
<li>
<h4>
Item
</h4>
<ul class="list">
<li class="component-panel-item" data-cpn="summary1"></li>
<li class="component-panel-item" data-cpn="summary2"></li>
<li class="component-panel-item" data-cpn="summary3"></li>
<li class="component-panel-item" data-cpn="summary4"></li>
</li>
<li>
<h4>
Chaine
</h4>
<ul class="list">
<li class="component-panel-item" data-cpn="graph1"></li>
<li class="component-panel-item" data-cpn="graph2"></li>
<li class="component-panel-item" data-cpn="graph3"></li>
<li class="component-panel-item" data-cpn="graph4"></li>
</ul>
</div>
So here i want to get the list of all Item and Chaine.
The list should be like : Item list is = summary1, summary2..
Chaine list is = graph1, graph2,..
How can do this using webdriver?
Thank you
You can do this using findElements():
List<WebElement> summaries = driver.findElements(By.cssSelector("[data-cpn^='summary']"));
List<WebElement> graphs = driver.findElemetns(By.cssSelector("[data-cpn^='graph']"));
I am converting my website to Bootstrap 3 and have a small 'language toggler' which I used to float on the right side. If you click on it the page 'magically' gets translated (it's just a redirect to another page)
The existing code, as shown below, is a bit annoying because the navbar-right element renders on two lines when there is not enough place. I haven't found any elegant solution for this, so I am considering moving the language toggler to another place on the page which won't be so affected by changes in size.
Is there a best practice for this?
Perhaps move it to another place, in the footer? I tried to see if there were any icons with flags, but no.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class=active><a id="tab-home1" href="Homepage.html"><span>HOME</span></a></li>
<li><span>BLOG</span></li>
<li><span>SERVICES</span></li>
<li><span>REFERENCES</span></li>
<li><span>PARTNERS</span></li>
<li><a href="ContactUs.html"><span>CONTACT
US</span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="navbar-text">
<small>en | de</small>
</div>
</li>
</ul>
</div>
Usually language changing put in the dropdown. Try like this:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a id="tab-home1" href="Homepage.html"><span>HOME</span></a></li>
<li><span>BLOG</span></li>
<li><span>SERVICES</span></li>
<li><span>REFERENCES</span></li>
<li><span>PARTNERS</span></li>
<li><a href="ContactUs.html"><span>CONTACT
US</span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Language <b class="caret"></b>
<ul class="dropdown-menu">
<li>English</li>
<li>Deutch</li>
</ul>
</li>
</ul>
</div>