I want to click on + icon, which state name is having attribute as data-stateid=1,
But when I try to find web element using firepath.
All + icon is having the same attribute as class so, I'm not able to click on specific + icon.
HTML Code:
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#lob1" data-stateid="1">
<span class="tag tag-default tag-pill pull-xs-right">0</span>
<i class="fa fa-plus pull-xs-right btn-country-list" onclick="GetLobPopUp('AL','Alabama')"/>
</h4>
</div>
<div id="lob1" class="panel-collapse collapse in" style="height: auto;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#lob3" data-stateid="3">
<span class="tag tag-default tag-pill pull-xs-right">0</span>
<i class="fa fa-plus pull-xs-right btn-country-list" onclick="GetLobPopUp('AZ','Arizona')"/>
</h4>
</div>
<div id="lob3" class="panel-collapse collapse in" style="height: auto;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#lob4" data-stateid="4">
<span class="tag tag-default tag-pill pull-xs-right">0</span>
<i class="fa fa-plus pull-xs-right btn-country-list" onclick="GetLobPopUp('AR','Arkansas')"/>
</h4>
</div>
Can anyone help me on this issue?
Best Regards.
All you need to do is identify the element first with using different attributes.. if you can't use class, then use data-stateid:
//a[#data-stateid='1']/following-sibling::i
You can try this query:
//h4[./a[#data-stateid=1]]/i
(tested on http://xpather.com/9pCZr2I0)
The pasted HTML seems a bit malformed so I corrected it.
Related
I have implemented an Offcanvas sidebar. It displays fine but none of the links in the sidebar actually work.
When I clicked on the links, nothing happens. I don't think I understand the mechanism well enough so any guidance here would be appreciated.
I'm using Laravel so this code is inside a view that is loaded for every page (like app.blade.php).
The sidebar works fine and can be properly toggled with the button but the links don't take me anywhere. What am I missing?
Here's the code. Link1 and Link2 are valid Laravel routes in my test app.
<body class="d-flex flex-column min-vh-100">
<a class="btn btn-primary float-end" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
Toggle Menu
</a>
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
<div class="offcanvas-header border-bottom">
<a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
<h4>
My site
</h4>
</a>
</div>
<div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded"
data-bs-toggle="collapse"
data-bs-target="#experience-collapse"
aria-expanded="true"
aria-controls="experience-collapse"
>
<i class="bi bi-list-ol"></i> Links
</button>
<div class="collapse show" id="experience-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><i class="bi bi-arrow-down-up"></i> Link 1</li>
<li><i class="bi bi-search"></i> Link2</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</body>
I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component
The dropdown is not showing, I won’t mind any assistance on what I’m doing wrong.
<div class=“boxOptions”>
<div data-toggle=“dropdown” arial-haspopup=“true” arial-expanded=“false”>
<i class=“fas fa-ellipsis-v”></i>
</div>
<div class=“dropdown-menu”>
<a class=“dropdown-item” href=“#”>Activate</a>
<a class=“dropdown-item” href=“#”>Delete</a>
</div>
</div>
Make it like this.
<div class="boxOptions dropdown">
<div data-toggle="dropdown">
<i class='fas fa-ellipsis-v'></i>
</div>
<div class='dropdown-menu'>
<a class='dropdown-item' href='#'>Activate</a>
<a class='dropdown-item' href='#'>Delete</a>
</div>
</div>
Try this one
Robot framework doesn't identify the element by xpath.
Following is the code
<div id="sticky-actions-sticky-wrapper" class="sticky-wrapper" style="height: 100px;"><section class="content-header" id="sticky-actions" style="">
<h1>Curriculum</h1>
<div class="breadcrumb save-message hidden">
<label class="text-success">
<i class="flaticon flaticon-circle-check"></i>
Saved <span>a few seconds ago</span>
</label>
</div>
<div class="row p-t-15">
<div class="col-xs-12">
<button type="button" class="btn btn-primary add-task-btn" disabled="">Create New Task</button>
<div class="btn-group m-r-15">
<button type="button" class="btn btn-primary dropdown-toggle add-statement-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="">
Create <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a tabindex="0" class="add-curriculum-btn">Curriculum</a></li>
<li><a tabindex="0" class="add-learning-area-btn hidden">Learning Area</a></li>
<li><a tabindex="0" class="add-topic-btn hidden">Topic</a></li>
<li><a tabindex="0" class="add-outcome-btn hidden">Outcome</a></li>
</ul>
</div>
<button type="button" class="btn btn-circle btn-xs blue link-statements-btn" disabled="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Link selected statements">
<i class="fa fa-link"></i>
</button>
</div>
</div>
</section></div>
Xpath I used to for find "Create" button:
xpath=//*[#id="sticky-actions-sticky-wrapper"]/div[2]/div/div/button
xpath=//*[#id="sticky-actions"]/div[2]/div/div/button[.//text() = 'Create']
Robot Framework step:
click element xpath=//*[#id="sticky-actions-sticky-wrapper"]/div[2]/div/div/button
Error:-
ValueError: Element locator 'xpath=//*[#id="sticky-actions-sticky-wrapper"]/div[2]/div/div/button' did not match any elements.
According to your XML, there is a section element inside the first div which you didn't include in your XPath. It should work if you add it:
//*[#id="sticky-actions-sticky-wrapper"]/section/div[2]/div/div/button
or
//*[#id="sticky-actions"]/div[2]/section/div/div/button[.//text() = 'Create']
I am trying to image and its relevant data in bootstrap. For that I am writing code like below
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" src="img/uthappizza.png" alt="Uthappiza">
</a>
<div class="media-body">
<h2 class="media-heading">Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
<p><a class="btn btn-primary btn-xs" href="#">More »</a></p>
</div>
</div>
</div>
</div>
I am getting output like this:
enter image description here
I want it to be side by side I don't know where I am going wrong.
Add pull-left to your image as a class. Bootply.