I want to show {{Brand.BrandDetails.Text}} only one time outside the ng-repeat.. how can i do this (repeat also want).
<li ng-repeat="Brand in Brands">
<a href="#">
<img src="~/Images/{{Brand.BrandDetails.Image}}" class="topBrandsBrandContentImage">
<p class="darkGray fontsize13 fontWeightLight">{{Brand.BrandDetails.Presentage}}% {{Brand.BrandDetails.Text}}</p>
</a>
</li>
{{ Brands[0].BrandDetails.Text }}
<li ng-repeat="Brand in Brands">
<a href="#">
<img src="~/Images/{{Brand.BrandDetails.Image}}" class="topBrandsBrandContentImage">
<p class="darkGray fontsize13 fontWeightLight">{{Brand.BrandDetails.Presentage}}% {{Brand.BrandDetails.Text}}</p>
</a>
</li>
Related
This might be a simple question to some of you.
<div class="component"
ng-class="{'small': small, 'medium': medium, 'large': large, 'xlarge': xlarge}"
ng-if="component.title == 'Heading'"
ng-init="editing = false; small = false; medium = false; large = false; xlarge = false">
<input class="heading" ng-blur="editing = false" ng-hide="!editing" type="text" placeholder="Heading" ng-model="component.element" />
<h2 ng-click="editing = true" ng-hide="editing">{{component.element}}</h2>
<div ng-hide="!editing" class="textEditor">
<ul>
<li>
<a href="" ng-click="small = true">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="medium = true">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="large = true">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="xlarge = true">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>
</div>
</div>
I need to add class to .component based on clicked a tag from Unordered list. I need to add class small to .component if first item is clicked, then if another item is clicked I need to remove small class and add respective class from that A tag.
Currently it adds them classes but not removing the ones that were added previously.
Basically I need to create a sort of toggle between them 4 classes
Try:
ng-class="small ? 'small' : medium ? 'medium' : large: 'large : xlarge ? 'xlarge' : ''"
I'd say use separate variable for it customClass
ng-class="customClass"
Then markup
<ul>
<li>
<a href="" ng-click="customClass = 'small'">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'medium'">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'large'">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'xlarge'">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>
Somebody please suggest me how can i click on menu in selenium web driver. I am trying to find out by css selector and directly by id,link text but its not work:
driver.findElement(By.cssSelector("nav > ul a#user")).click();
Help is highly appreciated. Below is the code:
<nav>
<ul style="">
<li class="">
<a id="dashboard" title="Dashboard" href="ajax/dashboard.html">
</li>
<li>
<a id="controlpanel" href="ajax/controlpanel.html">
</li>
<li class="active">
<a id="user" href="ajax/user.html">
</li>
<li class="open">
<a id="audcon" title="client" href="#">
<b class="collapse-sign">
</a>
<ul style="display: block;">
<li>
<a id="client" href="ajax/client.html">
</li>
<li>
<a id="stores" href="ajax/location.html">
</li>
<li>
<a id="sub_category" href="ajax/auditgroup.html">
</li>
<li>
<li>
</ul>
</li>
<li>
<a id="quescon" href="#">
<ul>
</li>
<li>
<li>
<a id="help" href="guidelines.html">
</li>
</ul>
</nav>
Try Following
driver.findElement(By.id("user")).click();
OR
driver.findElement(By.xpath("//li[#class='active']")).click();
I have a HTML code as mentioned below with UL tag, and I wanted to click the UL tag Manage -> Channel using Selenium Webdriver. To do that I have written the below code in java but it is not working, infact no error is throwing but page is getting opened. Please help.
HTML
<ul class="adb-primary_nav--items adb-layout-default">
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link en" href="../">
<img class="adb-primary_nav--image" src="https://d33na3ni6eqf5j.cloudfront.net/marketplace_logo/img1474715110198223685.png?7ef040694410736c21450bea763bb661" alt="Vodafone Group">
</a>
</li>
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link" id="myapps" href="../myapps">
MyApps
</a>
</li>
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link" id="shop" href="../home">
Marketplace
</a>
</li>
<li class="adb-primary_nav--item"><a class="adb-primary_nav--link" id="developer" href="../cms/home">Developer</a></li>
<li class="adb-primary_nav--item js-drainable-menu">
<div class="adb-context_menu adb-js-context_menu">
<a id="manage" class="adb-context_menu--trigger adb-js-context_menu--trigger adb-primary_nav--link admin-item selected" role="button" tabindex="0">Manage</a>
<div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
<ul class="adb-stack">
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content" href="../corporate/home">Corporate</a></li>
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content selected" href="./marketplace">Channel</a></li>
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content" id="account" href="../account/home">Account</a></li>
</ul>
</div>
</div>
</li>
<li class="adb-primary_nav--item adb-primary_nav--item__right">
<div class="adb-context_menu adb-js-context_menu" data-placement="right">
<a class="adb-context_menu--trigger adb-js-context_menu--trigger adb-primary_nav--link" role="button" tabindex="0">testchannel user</a>
<div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
<ul class="adb-stack">
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="myProfile" href="../profiles/5944276">My Profile</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="myCompany" href="../companies/219288">My Company</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="mySettings" href="../settings">My Settings</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="logout" href="../logout">Logout</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
Java Code
Configuration_file var = new Configuration_file();
System.setProperty("webdriver.chrome.driver", "C:\\Users\\gur29175\\workspace\\SAAS\\jars\\chromedriver.exe");
WebDriver firefox_dri = new ChromeDriver();
firefox_dri.get(var.env_URL + "/home");
firefox_dri.manage().timeouts().implicitlyWait(30,TimeUnit.SECONDS);
firefox_dri.findElement(By.cssSelector("a:(*'Manage'*)")).click();
firefox_dri.findElement(By.cssSelector("a:(*'Channel'*)")).click();
driver.findElement(By.xpath("//a[#id='manage']")).click()
driver.findElement(By.xpath("//ul[#class='adb-stack']/li[2]")).click()
In case of a listbox, you need to get the list of elements and iterate over it to choose the required element.
Please share the screenshot of the page with dropdowns. Will be able to guide you with the code.
You can replace
firefox_dri.findElement(By.cssSelector("a:(*'Manage'*)")).click();
firefox_dri.findElement(By.cssSelector("a:(*'Channel'*)")).click();
with
firefox_dri.findElement(By.linkText("Channel")).click();
Try it
//ul[#class='adb-stack']/li[#class='adb-stack--item']/a[contains(text(),'Corporate')].click();
The CSS selector I'm using is
#menu-container > div.navbar-collapse.collapse.bs-navbar-collapse > ul:nth-child(1) > li.dropdown.open > ul > li:nth-child(1) > a > span.menu-label
Is there a way to make it shorter?
HTML
<div id="menu-container" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">SmartStudio</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">File</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Save</span>
<span class="pull-right">⌘ S</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Fonts</span>
</a>
</li>
<li class="divider"><span></span></li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Publish</span>
</a>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Edit</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Undo</span>
<span class="pull-right">⌘ Z</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Redo</span>
<span class="pull-right">⇧ ⌘ Z</span>
</a>
</li>
<li class="divider"><span></span></li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Cut</span>
<span class="pull-right">⌘ X</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Copy</span>
<span class="pull-right">⌘ C</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Paste</span>
<span class="pull-right">⌘ V</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span> its too long to use in code. Is there a way to make it shorter in selenium web driver?
<span class="menu-label">Paste in Place</span>
<span class="pull-right">⇧ ⌘ V</span>
</a>
</li>
<li class="divider"><span></span></li>
<li class="dropdown-submenu">
<a>
<span class="pull-left"></span>
<span class="menu-label">Arrange</span>
</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Bring to Front</span>
<span class="pull-right">⇧ ⌘ ↑</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Bring Forward</span>
<span class="pull-right">⌘ ↑</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Send Backward</span>
<span class="pull-right">⌘ ↓</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Send to Back</span>
<span class="pull-right">⇧ ⌘ ↓</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">View</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Hide Panels</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Hide Off Page Dimming</span>
</a>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Panel</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Project</span>
</a>
</li>
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Properties</span>
</a>
</li>
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Design</span>
</a>
</li>
</ul>
</li>
<li class="dropdown open"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Help</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Support Resources</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Rate Us</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Suggest a Feature</span>
</a>
I think you've got several options... I'll list a couple that you can try and see if they work for you.
The super simplest way is to use the link text of the menu and then the submenu items. It may or may not work... one issue may be the uniqueness of the "Help" link on the page, there may be more than one. It looks like you will have to click the Help menu to expose the submenu that contains the "Support Resources" link.
String menuName = "Help";
String submenuName = "Support Resources";
driver.findElement(By.linkText(menuName)).click();
driver.findElement(By.linkText(submenuName)).click();
If that doesn't work, this should... or at least point you in the right direction. You will need to loop through the menus looking for the correct link text, click on it exposing the submenu, loop through the submenus looking for the correct link text, and then click on it.
String menuName = "Help";
String submenuName = "Support Resources";
List<WebElement> menus = driver.findElements(By.cssSelector("#menu-container > div > ul.nav.navbar-nav > li.dropdown"));
// List<WebElement> menus = driver.findElements(By.cssSelector("#menu-container li.dropdown")); // possible shorter alternative
for (WebElement menu : menus)
{
if (menu.getText().equals(menuName))
{
menu.click();
List<WebElement> submenus = menu.findElements(By.cssSelector("span.menu-label"));
for (WebElement submenu : submenus)
{
if (submenu.getText().equals(submenuName))
{
submenu.click();
break;
}
}
break;
}
}
This is impossible to figure out for sure without seeing the HTML you're referring to. However, it looks like you may be able to get away with this:
#menu-container span.menu-label
It looks like you're acquainted with the > operator, which selects a direct child of an element. The operator (a space) selects any descendant of an element.
This only works if there are no other spans with a class of menu-label inside of the element with the ID of menu-container. I'm assuming this is the case.
If you want a more certain answer, you'll need to provide a complete HTML file.
EDIT: Okay, now that you've provided your HTML, it's very clear what the problem is: your HTML is using styling classes, but no descriptive classes. You have two choices: adding more specific classes to your HTML elements, or just dealing with your very long selector. There are no other options.
Of course, if you choose the second option, you should store that CSS selector in a variable to give it a useful name, make it reusable, and make it easy to change when needed.
i'm trying to create a carousel that inside of it will be scrollable div with images.
The problem is that the swipe events conflict with eachother.
Plunker (the images are on slide 2)
My code:
<div class="carousel-demo">
<ul rn-carousel rn-carousel-index="carouselIndex" rn-carousel-buffered class="carousel1">
<li ng-swipe-left="left($event)">slide #1</li>
<li ng-swipe-right="right($event)">slide #2
<div class="horizontal-slide">
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
</div>
</li>
<li>slide #3</li>
</ul>
Thank's alot
Avi