I need to extract the href where its descendant is: i/[#class="icon-right-open rotate180"]
I tried the following but it didn't work for me
//a[#class="arrowDot "]/#href /descendant::i[#class="icon-right-open rotate180"]
here is the HTML CODE:
<div class="paginationDots sMargTop centered">
<a href="https://www.mubawab.tn/fr/cc/immobilier-a-vendre-all:p:2:sc:apartments-for-sale,commercial-property-for-sale,farms-for-sale,houses-for-sale,land-for-sale,villas-and-luxury-homes-for-sale" class="arrowDot ">
<i class="icon-left-open rotate180"/>
</a>
<a href="https://www.mubawab.tn/fr/cc/immobilier-a-vendre-all:sc:apartments-for-sale,commercial-property-for-sale,farms-for-sale,houses-for-sale,land-for-sale,villas-and-luxury-homes-for-sale" class="Dots ">
1
</a>
<a href="https://www.mubawab.tn/fr/cc/immobilier-a-vendre-all:p:2:sc:apartments-for-sale,commercial-property-for-sale,farms-for-sale,houses-for-sale,land-for-sale,villas-and-luxury-homes-for-sale" class="Dots ">
2
</a>
<a class="Dots currentDot">
3
</a>
<a href="https://www.mubawab.tn/fr/cc/immobilier-a-vendre-all:p:4:sc:apartments-for-sale,commercial-property-for-sale,farms-for-sale,houses-for-sale,land-for-sale,villas-and-luxury-homes-for-sale" class="Dots ">
4
</a>
<a href="https://www.mubawab.tn/fr/cc/immobilier-a-vendre-all:p:5:sc:apartments-for-sale,commercial-property-for-sale,farms-for-sale,houses-for-sale,land-for-sale,villas-and-luxury-homes-for-sale" class="Dots ">
5
</a>
<a href="https://www.mubawab.tn/fr/cc/immobilier-a-vendre-all:p:6:sc:apartments-for-sale,commercial-property-for-sale,farms-for-sale,houses-for-sale,land-for-sale,villas-and-luxury-homes-for-sale" class="Dots ">
6
</a>
<a href="https://www.mubawab.tn/fr/cc/immobilier-a-vendre-all:p:7:sc:apartments-for-sale,commercial-property-for-sale,farms-for-sale,houses-for-sale,land-for-sale,villas-and-luxury-homes-for-sale" class="Dots ">
7
</a>
<a href="https://www.mubawab.tn/fr/cc/immobilier-a-vendre-all:p:4:sc:apartments-for-sale,commercial-property-for-sale,farms-for-sale,houses-for-sale,land-for-sale,villas-and-luxury-homes-for-sale" class="arrowDot ">
<i class="icon-right-open rotate180"/>
</a>
</div>
expected result is the following URL:
https://www.mubawab.tn/fr/cc/immobilier-a-vendre-all:p:4:sc:apartments-for-sale,commercial-property-for-sale,farms-for-sale,houses-for-sale,land-for-sale,villas-and-luxury-homes-for-sale
but actual output is empty
you almost got it correct. Here's the one you needed.
//a[#class="arrowDot "][descendant::i[#class="icon-right-open rotate180"]]/#href
Related
this is the application html with drag and drop content
<li>
<a class='place_video help_fields_controller_place_video' data-kind='stimuli' data-type='place_video' href='#'>
Place Video
<b></b>
</a>
</li>
<li>
<a class='place_photo help_fields_controller_place_photo' data-kind='stimuli' data-type='place_photo' href='#'>
Place Photo
<b></b>
</a>
</li>
<li>
<a class='place_file help_fields_controller_place_file' data-kind='stimuli' data-type='place_file' href='#'>
Place File
<b></b>
</a>
</li>
<li>
<a class='place_link help_fields_controller_place_link' data-kind='stimuli' data-type='place_link' href='#'>
Survey Link
<b></b>
</a>
</li>
</ul>
<br style='clear:left'>
</div>
</div>
<div id='follow'>
<div class='box collapsable activity_controls js_collectors' href='/fields/new'>
<h3 class='clearfix box_header'>
<div class='controls'>
</div>
<a action='collapse' class='collapse' href='#'></a>
<span class='help_activities_controller_collectors'>
Collectors
</span>
</h3>
<div class='content'>
<ul id='sortable_collectors'>
<li>
<a class='paragraph_text help_fields_controller_paragraph_text' data-kind='collector' data-type='paragraph_text' href='#'>
Paragraph Text
<b></b>
</a>
</li>
<li>
<a class='single_line_text help_fields_controller_single_line_text' data-kind='collector' data-type='single_line_text' href='#'>
Single Line Text
<b></b>
</a>
</li>
<li>
<a class='website help_fields_controller_website' data-kind='collector' data-type='website' href='#'>
Website
<b></b>
</a>
</li>
<li>
<a class='date help_fields_controller_date' data-kind='collector' data-type='date' href='#'>
Date
<b></b>
</a>
</li>
<li>
<a class='request_photo help_fields_controller_request_photo' data-kind='collector' data-type='request_photo' href='#'>
Request Photo
<b></b>
</a>
</li>
<li>
<a class='request_file help_fields_controller_request_file' data-kind='collector' data-type='request_file' href='#'>
Request File
<b></b>
</a>
</li>
<li>
<a class='request_video help_fields_controller_request_video' data-kind='collector' data-type='request_video' href='#'>
Request Video
<b></b>
</a>
</li>
<li>
<a class='single_choice help_fields_controller_single_choice' data-kind='collector' data-type='single_choice' href='#'>
Single Choice
<b></b>
</a>
</li>
<li>
<a class='multiple_choice help_fields_controller_multiple_choice' data-kind='collector' data-type='multiple_choice' href='#'>
Multiple Choice
<b></b>
</a>
</li>
<li>
<a class='drop_down help_fields_controller_drop_down' data-kind='collector' data-type='drop_down' href='#'>
Drop Down
<b></b>
</a>
</li>
<li>
<a class='time help_fields_controller_time' data-kind='collector' data-type='time' href='#'>
Time
<b></b>
</a>
</li>
<li>
<a class='number help_fields_controller_number' data-kind='collector' data-type='number' href='#'>
Number
<b></b>
</a>
</li>
<li id='location-collector'>
<a class='location help_fields_controller_location' data-kind='collector' data-type='location' href='#'>
Location
<b></b>
</a>
</li>
</ul>
<br style='clear: left'>
</div>
</div>
</div>
</div>
</td>
<td class='work_area'>
<div id='activity_fields'>
<input type="hidden" name="activity[form_attributes][id]" id="activity_form_attributes_id" />
<ul class='empty_sort_table' id='sortable'>
<li class='blank-slate'>
Build your activity by drag and dropping stimuli and collectors from the palette.
</li>
</ul>
</div>
</td>
</tr>
</table>
I would like to drag the instructional text and drop on the activity builder area and the cypress code for it
it('Activity Builder: Activity Library, Activity & Scheduling', () => {
const dataTransfer = new DataTransfer()
//Activity Scheduling
leftMenuNavigation.clickActivityScheduling()
cy.findByRole('heading', { name: /activities & scheduling/i }).should(
'be.visible'
)
//creating activity
cy.findByText(/^New Activity$/i)
.should('be.visible')
.parent()
.click()
cy.findByText(/activity/i, {
selector: '.goog-menuitem-content'
}).click({ force: true })
cy.findByRole('link', { name: /instructional text/i }).trigger(
'dragstart',
{
dataTransfer
}
)
cy.findByRole('cell', {
name: /build your activity by drag and dropping stimuli and collectors from the palette\.
/i
})
.findByRole('listitem')
.trigger('drop')
.trigger('dragend')
})
})
})
I want to create nav-bar under nested Dropdowns in Aurelia using Materialize.I tried very much.
<span repeat.for="item of menuItems">
<ul id="${item.target}" data-beloworigin="true" class='dropdown-content nested' if.bind="item.type==3" role="menu">
<li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class.bind="item.class"role="button" aria-haspopup="true" aria-expanded="false" href='#' data-target="${item.target}" data-hover="hover" data-alignment="left" > Secondary ${item.label}
<span class="caret"></span>
</a>
<a if.bind="item.type==0" href.bind="item.url"> ${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</li>
</ul>
<ul if.bind="item.type==3" id="${item.target}" class='dropdown-content' >
<li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" role="button" aria-haspopup="true" aria-expanded="false"> ${item.label}
<span class="caret"></span>
</a>
<a if.bind="item.type==0" href.bind="item.url" > Third ${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</li>
</ul>
</span>
<nav class="navbar-default d-flex align-items-center">
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down" >
<li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class='dropdown-button btn' beloworigin="true" data-target="${item.target}" role="button"
aria-haspopup="true" aria-expanded="false" >${item.label}
</a>
</li>
</ul>
</div>
</nav>
menuItems is getting menus from Menu.ts file.
Type 3 is using for Parents Menu
Type 0 is menus which will be executed to URL by click dropdown Menu
I want when this code run then menu bar should create in which I click on the dropdown then related sub-menu should be open.
After Some modification My code is working now.
<span repeat.for="item of menuItems">
<ul id="${item.target}" class='dropdown-content' if.bind="item.type==3" class.bind="item.class">
<li repeat.for="item of item.items" class.bind="item.class">
<a if.bind="item.type==3" href="#" class='dropdown-button' data-hover="hover" data-alignment="left"
data-target="${item.target}" href='#'> Secondary ${item.label}
<a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</a>
<ul id="${item.target}" class='dropdown-content' class.bind="item.class">
<li repeat.for="item of item.items" class.bind="item.class">
<a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</a>
</li>
</ul>
</li>
</ul>
</span>
<nav class="navbar-default row mb-0 d-flex align-items-center">
<div class="nav-wrapper col s12">
<i class="icon icon-propriete"></i>
<ul class="right hide-on-med-and-down">
<li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class="dropdown-trigger" data-target="${item.target}">${item.label}
</a>
</li>
</ul>
</div>
</nav>
I want to set m-menu__item--open class on parent menu <li> and m-menu__item--active class on sub-menu item <li> in my Laravel bade based on current page. Below is the HTML extracted from the bade template.
<li class="m-menu__item m-menu__item--open" aria-haspopup="true" m-menu-submenu-toggle="hover">
<a href="javascript:;" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-layers"></i>
<span class="m-menu__link-text">FAQ</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu " m-hidden-height="840">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--active" aria-haspopup="true">
<a href="{{ url('/') }}/admin/faq/list/1" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">English</span>
</a>
</li>
<li class="m-menu__item m-menu__item" aria-haspopup="true">
<a href="{{ url('/') }}/admin/faq/list/2" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">Korean</span>
</a>
</li>
<li class="m-menu__item m-menu__item" aria-haspopup="true">
<a href="{{ url('/') }}/admin/faq/list/3" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">Chinese</span>
</a>
</li>
</ul>
</div>
</li>
as I understand, you want to change your menu classes by the current url..
laravel has is() method in Request class. You may want to use it.
class="{{Request::is('category/products') ? 'm-menu__item--active' : 'm-menu__item--open'}}"
if your current url base-url/category/products then you're gonna get the 'm-menu__item--active' class
I'm trying to align the icon vertically centered to the text in the nav bar items.
I tried using align-middle to the nav-link since both text and image are there, but did not work.
Align-top to the img only moves the element to the top, but does not work when doing align-middle to the img.
Finally, I only achieved what I wanted adding margin-bottom to the img, but do not want to use that, What is wrong with align-middle?
<ul class="navbar-nav mx-auto w-100 ">
<li class="nav-item">
<a class="nav-link align-middle" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/tuerca/B Tuerca GRAY.svg" class="iconos" alt="tuerca">
<h4 class="d-inline">Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link align/middle" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4 class="d-inline">Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link align-middle" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="d-inline">test 3</h4>
</a>
</li>
</ul>
A part of the problem is that in Bootstrap 4 <h4> elements have a bottom margin defined by default. You can eliminate that by setting .my-0 on them.
Then to make the icon and the text vertically aligned, use .d-flex .align-items-center on the .nav-link elements. This way you can remove .d-inline from <h4> as well.
<ul class="navbar-nav mx-auto w-100 ">
<li class="nav-item">
<a class="nav-link d-flex align-items-center" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/tuerca/B Tuerca GRAY.svg" class="iconos" alt="tuerca">
<h4 class="my-0">Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4 class="my-0">Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="my-0">test 3</h4>
</a>
</li>
</ul>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
When i using #include in master page blade template for add header and sidebar page,this action makes clear login data.
i've tried.without using include in master page below code printing login data
{{Auth::User()->first_name . ' ' . Auth::User()->family}}
but after add include,with one refresh page all login data is cleared!
master page:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="{{URL::asset('asset/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/bootstrap-theme.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/font-awesome.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/style.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/style-responsive.css')}}">
<script src="{{URL::asset('asset/js/jquery.min.js')}}"></script>
#yield('css')
</head>
<body>
{{--Header Start--}}
#include('layouts.header')
{{--End Header--}}
{{--Sidebar Start--}}
#include('layouts.sidebar')
{{--End Sidebar--}}
{{--Content Start--}}
#yield('content')
{{--End Content--}}
<script type="text/javascript" src="{{URL::asset('asset/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/jquery.nicescroll.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/common-scripts.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/jquery.dcjqaccordion.2.7.js')}}"></script>
#yield('js')
</body>
</html>
UPDATE:
call view:
Route::get('/', function () {
return view('index');
});
and this is my header page:
<section id="container" class="">
<!--header start-->
<header class="header white-bg">
<div class="sidebar-toggle-box">
<div data-original-title="Toggle Navigation" data-placement="right" class="fa fa-reorder tooltips"></div>
</div>
<!--logo start-->
PTA<span>OIMS</span>
<!--logo end-->
<div class="nav notify-row" id="top_menu">
<!-- notification start -->
<ul class="nav top-menu">
<!-- settings start -->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-tasks"></i>
<span class="badge bg-success">6</span>
</a>
<ul class="dropdown-menu extended tasks-bar">
<div class="notify-arrow notify-arrow-green"></div>
<li>
<p class="green">You have 6 pending tasks</p>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">40%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Database Update</div>
<div class="percent">60%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Iphone Development</div>
<div class="percent">87%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
<span class="sr-only">87% Complete</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Mobile App</div>
<div class="percent">33%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 33%">
<span class="sr-only">33% Complete (danger)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">45%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</a>
</li>
<li class="external">
See All Tasks
</li>
</ul>
</li>
<!-- settings end -->
<!-- inbox dropdown start-->
<li id="header_inbox_bar" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-important">5</span>
</a>
<ul class="dropdown-menu extended inbox">
<div class="notify-arrow notify-arrow-red"></div>
<li>
<p class="red">You have 5 new messages</p>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini.jpg"></span>
<span class="subject">
<span class="from">Jonathan Smith</span>
<span class="time">Just now</span>
</span>
<span class="message">
Hello, this is an example msg.
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini2.jpg"></span>
<span class="subject">
<span class="from">Jhon Doe</span>
<span class="time">10 mins</span>
</span>
<span class="message">
Hi, Jhon Doe Bhai how are you ?
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini3.jpg"></span>
<span class="subject">
<span class="from">Jason Stathum</span>
<span class="time">3 hrs</span>
</span>
<span class="message">
This is awesome dashboard.
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini4.jpg"></span>
<span class="subject">
<span class="from">Jondi Rose</span>
<span class="time">Just now</span>
</span>
<span class="message">
Hello, this is metrolab
</span>
</a>
</li>
<li>
See all messages
</li>
</ul>
</li>
<!-- inbox dropdown end -->
<!-- notification dropdown start-->
<li id="header_notification_bar" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-bell-o"></i>
<span class="badge bg-warning">7</span>
</a>
<ul class="dropdown-menu extended notification">
<div class="notify-arrow notify-arrow-yellow"></div>
<li>
<p class="yellow">You have 7 new notifications</p>
</li>
<li>
<a href="#">
<span class="label label-danger"><i class="fa fa-bolt"></i></span>
Server #3 overloaded.
<span class="small italic">34 mins</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-warning"><i class="fa fa-bell"></i></span>
Server #10 not respoding.
<span class="small italic">1 Hours</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-danger"><i class="fa fa-bolt"></i></span>
Database overloaded 24%.
<span class="small italic">4 hrs</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-success"><i class="fa fa-plus"></i></span>
New user registered.
<span class="small italic">Just now</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-info"><i class="fa fa-bank"></i></span>
Application error.
<span class="small italic">10 mins</span>
</a>
</li>
<li>
See all notifications
</li>
</ul>
</li>
<!-- notification dropdown end -->
</ul>
<!-- notification end -->
</div>
<div class="top-nav ">
<!--search & user info start-->
<ul class="nav pull-right top-menu">
<li>
<input class="form-control search fa fa-bell-o" placeholder="Search" type="text">
</li>
<!-- user login dropdown start-->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<img alt="" src="img/avatar1_small.jpg">
<span class="username">
#if(Auth::check())
{{
Auth::User()->first_name . ' ' .
Auth::User()->family
}}</span>
#endif
<b class="caret"></b>
</a>
<ul class="dropdown-menu extended logout">
<div class="log-arrow-up"></div>
<li><i class=" fa fa-suitcase"></i>Profile</li>
<li><i class="fa fa-cog"></i> Settings</li>
<li><i class="fa fa-bell-o"></i> Notification</li>
<li><i class="fa fa-key"></i>Logout</li>
</ul>
</li>
<!-- user login dropdown end -->
</ul>
<!--search & user info end-->
</div>
</header>
<!--header end-->
I solved this problem
in header and sidebar blade, i used this:
<li><i class="fa fa-key"></i>Logout</li>
</ul>
and changed with this code in below:
<li><i class="fa fa-key"></i>Logout</li>
and create route:
Route::get('logout', 'Auth\LoginController#logout');