<div id="joblist-panel">
<ul class="list-job-box">
<li id="row" class="row bt-gray-border job white-bg list-arrow">
<div class="circle-outline">
<div class="circle-job circle-color" style="background-color: transparent; border: 1px solid rgb(183, 183, 183);">
<div class="circle-inner">
<div class="score-text"><i class="fa fa-file-text-o"></i></div>
</div>
</div>
</div>
title
<div class="row list-job">
<ul>
<li>
<div><i class="icon-glyph-111"></i></div>
3-6 Years
</li>
<li>
<div><i class=" icon-glyph-83"></i></div>
1 Opening
</li>
<li class="location-text"><i class=" icon-glyph-14"></i>
Bengaluru
</li>
</ul>
</div>
</li>
</ul>
Have content like this and I want to loop all 'li' tag and get href of 'a' tag and innertext of list-job class .. How can we achieve this by casperjs, phantomjs
Related
I've been trying to fix the issue with the navbar dropdown menu when using viewport smaller than 768px (mobile/touchscreen).
When tested on touchscreen, one click is supposed to open the dropdown (this works fine), the second click is supposed to close it (closing of the dropdown works, but on touchscreen it still shows the dropdown menu on the side like it is ul.dropdown-menu:hover ).
I am trying to have it hidden after the dropdown toggle is clicked to close, and the cursor is still hovers on the toggle (touchscreen).
Here is the code:
ul.dropdown-menu {
background-color: #4474a8;
}
ul.dropdown-menu li a {
background-color: #4474a8
}
ul.dropdown-menu li a:hover {
background-color: #4474a8;
color: #111111!important;
}
.dropdown:hover .dropdown-menu {
display: block;
}
a.dropdown-toggle:focus {
color: #2f1b09;
}
.dropdown-link {
text-align: center;
background-color: #4474a8;
color: #FFFFFF !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<img src="#" class="img-responsive center-block" id="logo-top">
</div>
<div class="col-md-1"></div>
</div>
</div>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="fa fa-anchor"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active" id="active-nav">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">MENU 1<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-ship" aria-hidden="true"></i> SUBMENU 1</li>
<li> SUBMENU 2</li>
<li> SUBMENU 3<b>$</b></li>
<li> SUBMENU 4</li>
</ul>
</li>
<li>MENU 2</li>
<li>MENU 3</li>
<li>MENU 4</li>
<li class="dropdown">
<i class="fa fa-camera" aria-hidden="true"></i> MENU 5<span class="caret"></span>
<ul class="dropdown-menu">
<li>Photos</li>
<li>Video</li>
<li><i class="fa fa-youtube" aria-hidden="true"></i>YouTube</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- # #banner-->
<div class="container-fluid" id="banner">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" id="bannerCol1L">
</div>
<!-- / #bannerCol1L -->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" id="bannerCol2R">
<a class="orange pillboxLarge" id="getstarted">BUTTON</a>
</div>
</div>
<!-- / .row -->
</div>
<!-- / .container-fluid #banner -->
</body>
In your CSS, delete the following:
.dropdown:hover .dropdown-menu {
display: block;
}
I have searched high and low for the answer but to no avail. I have a sandbox website www.bluestackbrewing.com
When you resize it to mobile, the first two lists in the menu item are showing. Does anyone know how to fix this? Thank you for any response.
<div class="row nav-menu">
<div class="col-sm-3 col-md-2 columns">
</div>
<div class="col-sm-9 col-md-10 columns">
<ul class="menu navbar-collapse">
<li>Home
</li>
<li class="has-dropdown">Pronorm German Kitchens
<ul class="subnav">
<li>Y-LINE</li>
<li>X-LINE</li>
<li>PROLINE</li>
<li>CLASSICLINE</li>
</ul>
</li>
<li>BESPOKE KITCHENS
</li>
<li>STORAGE SOLUTIONS & ACCESSORIES
</li>
<li>Contact
</li>
</ul>
<ul class="social-icons text-right">
<li>
<a href="#">
<i class="icon social_twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon social_facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon social_instagram"></i>
</a>
</li>
</ul>
</div>
I have 3 menu items in my navbar. I want the entire nav to be divided into 3 parts for my 3 menus. I tried with the following code but the last menu item takes bit extra space than others. How do i fix it?
.navbar {
border : 1px solid #ffffff;
}
#intr1, #intr2 {
border-right: 1px solid #ffffff;
}
.menuLabel {
text-align: center;
font-size: 17px;
font-weight: bold;
color: #ffffff;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-header ">
<ul class="nav navbar-nav container">
<li class="col-md-4" id="intr1"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
<li class="col-md-4" id="intr2"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
<li class="col-md-4" id="intr3"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Try with something like this:
<body>
<div class="container-fluid">
<div class="navbar navbar-inverse">
<div class="container-fluid">
<ul>
<li class="col-md-4" id="intr1">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
<li class="col-md-4" id="intr2">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
<li class="col-md-4" id="intr3">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
I hope this will help you a lot:
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav customnavbarnav">
<li class="customlist">Link
</li>
<li class="customlist">Link
</li>
<li class="customlist">Link
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- /.navbar navbar-default -->
CSS:
.customnavbarnav{
width: 100%;
text-align: center;
}
.customlist{
width: 33.33333333333333%
}
Just remove the .container class on the .navbar-nav because that is causing you to have 15px right padding which throws off the evenness.
I have a complex HTML like the below.There are at least two elements with data-automation-id='promptIcon' attribute. In Selenium IDE //*[#data-automation-id='promptIcon']/ selected the first occurrence (i.e. next to the label Category). Now I would like to click/select the second element with data-automation-id='promptIcon' attribute (next to the label Owner). How best to accomplish this?
<div class="GB-VO1SBAIJ">
<div class="GB-VO1SBNHJ" style="left: 0%;">
<div id="wd-EditPage-1$4296" class="GB-VO1SBOXH GB-VO1SBHXH GB-VO1SBJXH GB-VO1SBJN">
<div class="GB-VO1SBBYH">
<div class="GB-VO1SBJN" id="wd-PageContent-6$8263">
<div class="GB-VO1SBAJH">
<div class="GB-VO1SBIIH">
<div id="wd-Panel-6$8269" data-automation-id="panel" class="GB-VO1SBF1J GB-VO1SBJN">
<div class="gwt-Label GB-VO1SBJ1J GB-VO1SBI1J">
</div>
<div class="GB-VO1SBH1J">
<div class="GB-VO1SBAJH GB-VO1SBG1J">
<ul role="presentation" class="GB-VO1SBNHH GB-VO1SBGIH">
<li role="presentation" class="GB-VO1SBDHH GB-VO1SBJIH">
<div class="GB-VO1SBFHH">
<label data-automation-id="formLabel" id="15$20858--uid318-formLabel">Category<span class="gwt-InlineLabel GB-VO1SBDIH"> Required</span>
</label>
<div aria-hidden="true" class="GB-VO1SBGHH wd-5b94a643-7d98-473f-b3a4-be58aaf8d4f5">Category</div>
</div>
<div class="GB-VO1SBHHH">
<div aria-labelledby="15$20858--uid318-formLabel" aria-invalid="false" tabindex="-2" id="15$20858--uid318" data-automation-id="responsiveMonikerInput" class="GB-VO1SBCFL GB-VO1SBJN GB-VO1SBIEL GB-VO1SBPFL GB-VO1SBNFL">
<div class="GB-VO1SBHFL">
<ul data-automation-id="selectedItemList" role="list" class="GB-VO1SBJUI GB-VO1SBOUI GB-VO1SBGFL" tabindex="-2">
<li class="GB-VO1SBNUI">
<div id="-uid331" role="menuitem" tabindex="-2" class="GB-VO1SBFUI GB-VO1SBMUI">
<div data-automation-id="selectedItem_2200$2" class="GB-VO1SBDVH">
<ul role="presentation" class="GB-VO1SBFUH GB-VO1SBLUH">
<li class="GB-VO1SBCVH">
<i title="Clear Value" class="GB-VO1SBCIF GB-VO1SBJ1I GB-VO1SBB1I GB-VO1SBHUH" data-automation-id="DELETE_charm" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</li>
</ul>
<div title="Common" data-automation-label="Common" data-automation-id="promptOption" class="gwt-Label GB-VO1SBEVH">Common</div>
<ul class="GB-VO1SBFUH">
</ul>
</div>
</div>
</li>
<li class="GB-VO1SBNUI">
<div id="-uid332" role="menuitem" tabindex="-2" class="GB-VO1SBFUI GB-VO1SBMUI">
<div data-automation-id="selectedItem_2200$3" class="GB-VO1SBDVH">
<ul role="presentation" class="GB-VO1SBFUH GB-VO1SBLUH">
<li class="GB-VO1SBCVH">
<i title="Clear Value" class="GB-VO1SBCIF GB-VO1SBJ1I GB-VO1SBB1I GB-VO1SBHUH" data-automation-id="DELETE_charm" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</li>
</ul>
<div title="Absence" data-automation-label="Absence" data-automation-id="promptOption" class="gwt-Label GB-VO1SBEVH">Absence</div>
<ul class="GB-VO1SBFUH">
</ul>
</div>
</div>
</li>
</ul>
</div>
<span tabindex="0" data-automation-id="promptIcon" title="Prompt" class="GB-VO1SBBGL">
<i class="GB-VO1SBCIF GB-VO1SBCGL" data-automation-id="icon" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</span>
<div aria-hidden="true" tabindex="0" style="display: none;" class="GB-VO1SBP3I" role="button" data-automation-morelinkexpanded="false" data-automation-id="wd-MoreLink">
<img alt="" draggable="false" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="gwt-Image GB-VO1SBPII GB-VO1SBB4I">
<span title="More (-3)" class="GB-VO1SBC4I">More (-3)</span>
</div>
</div>
</div>
</li>
<li role="presentation" class="GB-VO1SBDHH">
<div class="GB-VO1SBFHH">
<label data-automation-id="formLabel" id="15$26787--uid319-formLabel">Owner</label>
<div aria-hidden="true" class="GB-VO1SBGHH wd-5b94a643-7d98-473f-b3a4-be58aaf8d4f5">Owner</div>
</div>
<div class="GB-VO1SBHHH">
<div aria-labelledby="15$26787--uid319-formLabel" aria-invalid="false" tabindex="-2" id="15$26787--uid319" data-automation-id="responsiveMonikerInput" class="GB-VO1SBCFL GB-VO1SBJEL GB-VO1SBJN GB-VO1SBIEL">
<div class="GB-VO1SBHFL">
<ul data-automation-id="selectedItemList" role="menu" class="GB-VO1SBJUI GB-VO1SBGFL GB-VO1SBOUI" tabindex="-2">
</ul>
</div>
<span tabindex="0" data-automation-id="promptIcon" title="Prompt" class="GB-VO1SBBGL">
<i class="GB-VO1SBCIF GB-VO1SBCGL" data-automation-id="icon" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="GB-VO1SBIYH">
</div>
<footer class="GB-VO1SBCYH">
<div>
<div data-automation-id="toolbarSupportingWidgetsContainer" class="GB-VO1SBOOE GB-VO1SBAOE">
<div class="GB-VO1SBLNE">
<div class="GB-VO1SBMNE">
<div class="GB-VO1SBCOE">
</div>
<div class="GB-VO1SBPOE">
</div>
</div>
</div>
<div>
<div class="gwt-Label GB-VO1SBDNE">
</div>
</div>
</div>
<div class="GB-VO1SBCPE GB-VO1SBEPE">
</div>
</div>
</footer>
</div>
</div>
</div>
If you are using XPath, there is a easy way to do it:
//*[#data-automation-id='promptIcon'][2]
Explaining:
//*[#data-automation-id='promptIcon']
It is your actual xpath, will select any html tag that has a attr named "data-automation-id" with the exactly value "promptIcon".
[2]
The element node that you want to select. if you put [5], XPath will try to select the 5° result in this html, based in what note you're calling it.
<div id="mainBody" class="body main-content" aria-label="(N002B) Customer overview" role="complementary" style="padding-top: 50px;">
<div id="Tabs2" class="Tabs topLevel CoachView tab-content CoachView_show" data-eventid="" data-viewid="Tabs2" data-config="config61" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_a30ea40f_cb24_4729_a02e_25dc8e12dcab.Tabs">
<div class="s-tabs with-drop sticky">
<div class="p-tabs-container tabable">
<ul class="p-tabs-ul nav-tabs">
<li class="p-tab-li turq-style active">
<li class="p-tab-li turq-style">
<a class="p-tab" data-toggle="tab" href="#Tabs2-tab1">
<i class="icon-remove"></i>
<span>Items (USD)</span>
<i class="icon-caret-down"></i>
</a>
in above html how can i select "
I have tried the following :
By .cssSelector(".icon-caret-down")
Xpath value = //*[#id='Tabs2']/div[1]/div/ul/li[2]/a/i[2]
it is not working..
you can give Explicit wait a try,
new WebDriverWait(driver,60).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#Tabs2 .p-tab > .icon-caret-down"))).click();
The above code will wait 60 secs for the visibility of .icon-caret-down element.