fairly new to xpaths.
I have the below element and I need an xpath to identify it using its ID/xpath and that it has the disabled node in it.
<button class="mr-2 st-crudactionbar__button ng-star-inserted waves-effect waves-float" id="crudactionbar_remove_button" disabled="">
<i class="fa fa-trash fa-2x"></i>
</button>
So tried:
//*[#id="crudactionbar_remove_button"] and #disabled =''
or
(//*[contains(#class,'crudactionbar__button')])[4] and #disabled =''
Hopefully you get the idea of what I am trying to do. look for that element and that it also contains the disabled node. Any help is appreciated.
All the conditions related to the element (button) must go to the same square brackets:
//button[contains(#class, 'crudactionbar__button') and #disabled='']
Related
I am new to Thymeleaf. Recently I stumbled in the following situation. Here is a piece of my Thymeleaf html page:
<!-- an delete button link -->
<a th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:onclick="if(!(confirm('Are you sure you want to delete this employee ?') )) return false" >
Delete
</a>
This code works fine as intended. However I want to add employee name as part of the confirmation. Here is the code:
<!-- an delete button link -->
<a th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:onclick="if(!(confirm('Are you sure you want to delete this employee ' + '\'+${tempEmployee.firstName}+\'' +'?' ) )) return false" >
Delete
</a>
Unfortunately the result is:
Are you sure you want to delete this employee
'+${tempEmployee.firstName}+'.
Looks like Thymeleaf does not recognize ${tempEmployee.firstName}. It has no problem with it in th:href tag but does not like it in th:onclick.
I would appreciate if somebody can turn me into the right direction.
Not sure exactly what the problem is (though it may be related to onclick vs th:onclick. Regardless, I think a format more like this will work (with some added benefits like no JavaScript injection).
<!-- an delete button link -->
<a
th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:data-confirm-delete="|Are you sure you want to delete this employee ${tempEmployee.firstName}?|"
onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false"
>
Delete
</a>
(Notice I'm using onlick and not th:onclick.
Instead of this line in above code ---onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false">
You can write as:
onclick="return confirm(this.getAttribute('data-confirm-delete'))"
There ought to be a better way of doing this, but I can't find it.
There are a number of elements with the same selector on the page. Only the value property differs. Controls are created dynamically, so I can't pin them down any more precisely.
I am searching for an element with a specific value, using Cypress . HTML looks like this:
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
When I find it I want to click it & jump out of the loop.
This is what I have:
const buttonButton = '[data-cy-component=button-button]';
cy.get(buttonButton).each(($el, index, $list) => {
cy.log(`index: ` + index);
if (index === 5) {
cy.wrap($el)
.should('have.value', 'Save')
// Click Save button.
.click();
}
});
This method works, but seems vulnerable. If my Save button is no longer the 5th (or 6th) element, the test will fail. Is there a way I can test it with an IF rather than a SHOULD?
I might not understand what you are doing, please correct me in comments if I have this wrong. What I believe you are trying to do is find a element by it's value. I wrote this and it worked. Please correct me If what you are trying to do is different..
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
cy.get('[value="Save"]').should('exist');
cy.get('[value="Save"]').click();
cy.get('input[value="Save"]').should('exist');
cy.get('input[value="Save"]').click();
This also worked
cy.get('[data-cy-component=button-button][value=Save]').should('exist');
cy.get('[data-cy-component=button-button][value=Save]').click();
Per your comment below you said there were 2 on the screen
I created this HTML to test it. Notice one is hidden. I WOULD NEED TO KNOW WHAT IS MAKING YOURS HIDDEN or not visible. Also are they in different divs that perhaps have unique ids?
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
<input style="visibility:hidden" type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
cy.get('[value="Save"][style!="visibility:hidden"]').should('length', 1);
cy.get('[value="Save"][style!="visibility:hidden"]').click();
I want to create XPath as //a[class='btn btn-invisible btn-link routeLink'] and //a[data-route='#Leads'].
Other example: //div[#class='btn-group'] and //a[#text()='Leads']
HTML:
<div class="btn-group" style="display: none;">
<a class="btn btn-invisible btn-link routeLink" data-route="#Leads" href="#Leads">Leads</a>
//a[#class='btn btn-invisble' and data-route='#Leads']
In the second example: Do you want a div or do you want an anchor? Shouldn't those be different locators?
You can or them as such using a pipe: //div[#class='x']|//a[#text='aa'].
I think below is what you need:
1) //a[#class='btn btn-invisible btn-link routeLink'][#data-route='#Leads']
2) //div[#class='btn-group'][text()='Leads']
and if you really need to use 'and' then niharika_neo's suggestion should work too.
I'm trying to use Xpath to get the text of the parent anchor without also getting the text from the span of the example below:
<a id="readingListBtn" class="btn btn-transparent" title="Reading List" href="javascript:void(0);">
<span class="icon icon_headerBookmark">Header Bookmark</span>
0
</a>
The Xpath I'm using (//a[#id = 'readingListBtn']) returns "Header Bookmark0", but I'm just interested in the "0" part.
Just get the direct text child:
//a[#id = 'readingListBtn']/text()
This is the code:
<li>
<a>
<h1>Quorn Stukjes</h1>
<p class="price">
</a>
<form>
<button type="submit">+</button>
</form>
</li>
I want to create a locator that finds the first <h1> that has an sibling element <p> with an attribute "price". Easy so far. But now I also want that <h1> to share its grandparent with a <button> class with the attribute type "submit".
What I created was the following:
//a/p[#class="price"]/preceding-sibling::p/preceding-sibling::h1
I'm wondering if this is the most sensible solution (it does work), or if there is something more elegant and robust.
(//*[form/button[#type = 'submit']]/*[p[#class = 'price']]/h1)[1] should do (assuming a submit button only makes sense in a form parent element).