Hello I am new to selenium and trying to find an element on a dropdown that expands to a list. The xpath constantly changes so cannot use it. Also tried the full xpath and did not work either. Other drop downs that I have used I have been able to use the cssselector but really do not have much to work with in here. I have tried with 'Account Maintenance' text but it did not work or did not do it properly. If I need to provide any additional information or more html please let me know.
<li class="k-item" role="treeitem" data-uid="706aa3e9-cd95-45c3-9ad0-e990887f9484" aria- selected="true" aria-expanded="false">
<div class="k-mid">
<span class="k-icon k-i-expand">
::before
</span>
<span class="k-in k-state-selected">Account Maintenance</span>
</div>
<ul "THIS IS THE LIST THAT EXPANDS AFTER CLICKING ON THE 'Acount Maintenance' text above but not my issue </ul>
</li>
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
I am trying to reference a v-model in one of my html files.
I've gone ahead and created a jsbin with a small example of what I'm trying to achieve:
https://jsbin.com/saqirekasa/edit?html,js,output
Essentially, what seems to be happening is that Vue gives an error like this in my actual project:
[Vue warn]: Invalid expression. Generated function body: scope.lookForUser({{scope.input_field}})
The problem (I believe) appears to be when I introduced this line:
<input type="text" class="form-control input-lg" placeholder="email-address" id = "button_email_submit" v-model = "input_field"/>
And then tried to reference the v-model 'input field' as such:
<button class="btn btn-info btn-lg" type="button" v-on= "click: lookForUser(#{{input_field}})">
Any ideas why Vue doesn't like this statement?
I figured this out with a bit more fiddling around -- the issue was I was not supposed to use #{{input_field}} but rather simply pass input_field text into the arguments.
Thanks! Here's my example code in case it helps anyone.
<div v-repeat="company: companies">
<div class="col-xs-12 col-md-6 col-lg-6">
<a href="#" v-on="click: selected_company_id = company.id">
</div>
</div>
I kept wanting to wrap the company.id in mustache brackets:
<a href="#" v-on="click: selected_company_id = {{company.id}}">
but I'm assuming that since it is already part of an expression, you don't need to do that.
I'd like to target two divs for expand when clicking on a single trigger? Is that possible?
You can simply add all the ids separated by commas in data-target:
<button type="button" data-toggle="collapse" data-target="#demo,#demo1,#demo2">
Hide them all
</button>
Use the same class for both div's and set your data-target according this. Give your div's also the same parent (can also be a class) and set data-parent according this.
<button type="button" data-parent="#wrap" data-toggle="collapse" data-target=".demo">
simple collapsible
</button>
<div id="wrap">
<div class="demo collapse">
test1
</div>
<div class="demo collapse">
test1
</div>
</div>
From the Bootstrap 3 documentation:
The data-target attribute accepts a CSS selector to apply the collapse to.
Therefore you can use a comma-separated list of id's, class selector etc. for the data-target attribute value:
<button class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#target1,#target2,#target3"
aria-expanded="false"
aria-controls="target1,target2,target3">
You can see an extensive list of valid CSS selectors on the w3schools website.
If you want to hide one element and show another (like the bootstrap accordion but without a panel) you can add multiple targets but also add the class 'in' to have one element expanded on load!
<div class="collapse text-center clearfix in" id="section1">
<h1>This is section 1</h1>
<p>Are you excited about toggling?</p>
</div>
<div class="collapse text-center clearfix alert-warning" id="section2">
<h1>Boo!!</h1>
<p>This is a new sentence</p>
</div>
<button class="btn btn-block btn-primary" data-toggle="collapse" data-target="#section1,#section2">Toggle</button>
Live demo here
There is a solution in Bootstrap 4:
Bootstrap 4 documentation: Multiple targets
The least you need is:
data-toggle="collapse" data-target=".multi-collapse" for the toggle
button
class="collapse multi-collapse" for each element you need to
toggle
(While multiple ids in data-target indeed don't work).
The data-target answer did not work for me. However you can use JavaScript to do this.
Make your button call some JavaScript like:
$('.collapse-class').collapse('toggle')
See: https://getbootstrap.com/javascript/#via-javascript-3.
Bootstrap 4 uses document.querySelector instead of document.querySelectorAll. If this changes, then everything works.
In Bootstrap 4 using the same class for each respective div seemed to work over using id.
<button type="button" class="btn" data-toggle="collapse" data-target=".collapse-group">
Reveal Items</button>
<div class="row">
<h3>Visible Row div 1</h3>
<div class="collapse-group collapse">
<p>hidden item</p>
</div>
<h3>div 2</h3>
<div class="collapse-group collapse">
<p>hidden item 2</p>
</div>
</div>
I faced the same problem but bootstrap won't let data-toggle="tab" beside data-toggle="collapsed" so my problem was like this.
I have:
<a type="button" class="btn btn-default btn-lg btn-block " href="#ld-tab-pane-eye" aria-expanded="false" aria-controls="ld-tab-pane-eye" role="tab" data-toggle="tab" aria-haspopup="true" aria-expanded="false" style=" border: 0px ;"> </a>
and this was switching tabs:
<button type="button" class="navbar-toggle collapsed nav-trigger style-mobile" data-toggle="collapse" data-target="#main-header-collapse" aria-expanded="false" data-changeclassnames='{ "html": "mobile-nav-activated overflow-hidden" }'>
</button>
But this one closes the modal because the switch tab button was in the modal.
To solve the problem I add id="popout"(to first button) and id="popoutTrigger" (to secend button).
And this script (jQuery):
$( "#popout" ).click(function() {
$( "#popoutTrigger" ).trigger( "click" );
});
When the user clicked the switch button in the modal, after switching modal will close.
This a view of what I've done.
I hope my solution will help.
I am using selenium for testing my application.
In my application there are 5 buttons, each have a different image associated with it.
I want to click on button which have a specific image associated.
Currently i am using a while loop to get the node of image and then replacing this node into xpath of button to select it.
is there any way either with xpath or css to do this directly.
Providing more information-this is like submit button is there and then below this image is there. submit button and images are sibling element and need to click submit button when the next element is specific image
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking2" src="someimages"/>
</div>
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking1" src="someimages"/>
</div>
Could you include a snippet of your HTML? Below is an example of an image in a form and a few ways of locating it using Selenium, but these may not be relevant depending on your implementation:
<input id="submitForm" name="imgbtn" type="image" src="images/submit.png" />
id=submitForm
name=imgbtn
//input[#src='images/submit.png']
//input[contains(#src, 'submit.png')]
css=input[src='images/submit.png']
UPDATE:
Given the HTML:
<div class="select">
<span class="submit">
<div class="marking1"></div>
<div class="select">
<span class="submit">
<div class="marking2"></div>
You can locate the 'submit' span parent of the 'marking2' div using the following XPaths:
//div[#class='marking2']/..
//div[#class='marking2']/parent::*
//div[#class='marking2']/parent::span
UPDATE 2:
Based on the HTML now included in the question, you can locate the span with the class of submit related to the image many ways, a few examples follow:
//div[//img[#alt='Marking2']/span[contains(#class, 'select')]
//img[#alt='Marking2']/../../span
//div[img[#alt='Marking2']]/preceding-sibling::span
I hope this gives you some ideas. I'd certainly recommend XPath over CSS for locating these elements as it's much better at these sorts of relationships.