I'm using material-ui as my css framework and I want to select button that contains a specific text.
My current code:
cy.get('button').contains('Edit Claim').should('be.disabled');
It fails because the button component of material ui outputs the text inside a div so cypress is asserting the disabled attr to the div. I want it to assert to the button.
Edit:
I solved it using cy.contains('button', 'Edit Claim').should('be.disabled');
On the Material-UI demo page the label is in a child <span> (not <div>),
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained Mui-disabled Mui-disabled" tabindex="-1" type="button" disabled="">
<span class="MuiButton-label">Disabled</span>
</button>
but there may be variations - in any case, you can reference the button by adding .parent() to the test
cy.visit('https://material-ui.com/components/buttons/');
cy.get('button')
.contains('Disabled') // span is the subject
.parent() // move up to the button
.should('be.disabled');
Related
Hello :) I'm using Bootstrap to make an offcanvas component that can render a modal for each item in an array passed to it. However, when clicking open my modals, they each display omly the first items props. Why? And, how can I fix it? I recreated it here in codesandbox codesandbox recreation
If i can improve my question let me know in a kind way, please.
The way you have done is not the correct way of building Modal in React .
However just to give you clarity about the mistake you have done:
The prop letter is passed correctly. The problem is the way you're calling the modal.
If you see your code in Example.js , you have used data-bs-target="#exampleModal". And id="exampleModal" for the modal to show up.
So all the handlers are pointing to exampleModal id . Hence After you click on the buttons only the first modal shows up.
To solve this , you need to assign the data-bs-target and id dynamically. Something like below :
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target={`#exampleModal${props.letter}`}
>
click to view prop
</button>
and then in Modal set id as :
<div
class="modal fade"
id={`exampleModal${props.letter}`}
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
It should work as expected.
here is the working example : Demo
I have a bootstrap popover which has 2 buttons Yes or No. Based on the response from the user i need to call AngularJS service function. How do i do that??
Popover is created only if it meets a certain criteria (like existence of duplicate records)
HTML code looks something like below, but currently doesn't have 2 buttons & still need to work on it
$(document).ready(function () {
if (DuplicateRecord) {
$('[data-toggle="popover"]').popover();
}
});
<button href="#" data-toggle="popover" title="Popover Header"
data-content="Some content inside the popover" data-trigger="click"
data-html="false" data-placement="left">
Toggle popover
</button>
Looks like you are mixin concepts (or maybe I'm not getting your question), you can have a popover but the data-trigger="click" makes showing the popover on the click event and you wanna use that event to call the service method. Change the popover trigger to hover and then use the click event to call your service. Something like this just as an idea, the snippet is not tested.
<button
type="button"
data-toggle="popover"
title="Popover Header"
data-content="Some content inside the popover"
data-trigger="hover"
data-html="false"
data-placement="left"
ng-click="$ctrl.callSomeMethod()"
>
Toggle popover
</button>
You can take a look to UI Bootstrap lib which has a directives for the Bootstrap's components equivalents.
I am trying to implement segmented control button instead of normal radio button in Angular
Although If i remove CSS class, normal radio button is working fine and remain selected on navigating to another page os clicking anywhere on the same page, but after adding CSS, radio button selection do not remain intact and deselects.
Please help with this
HTML Code :
<div class ="segmented-control">
<div ng-repeat="p in LP">
<a href="#" class="list-group-item">
<label> {{p.label}}
<input type ="radio" ng-model="test" name="test" value="{{p.value}}" ng-click="getElement($event)"></label>
</a>
</div>
</div>
CSS :
.segmented-control input[type="radio"] {
visibility:hidden;
}
.segmented-control .list-group-item {
display: inline-block;
}
In controller.js
calling below function to get the value of radio button
$scope.getElement= function(obj){
$scope.test = obj.target.value;
}
There are 2 issues with your code:
You have nested elements <div><a tag><label><radio></label> but the ng-model will be set only when you click exactly on the label. If you click little outside the label the ng-model will not be updated.
The gray color change that you see when you click on the segmented button does not mean that the radio button is selected. It is applying the following bootstrap class a.list-group-item:focus which means the button is in focus. That is why when you click outside the button the color changes back to white.
To solve this you have to add extra class to highlight the selected button and make sure your ng-model is updated no matter where the user clicks inside the div.
I have created a sample jsfiddle to demonstrate both the issues. Good luck and welcome to Stackoverflow!
I have a submit button on my UI page but I am not able to click on that button even if I take the XPath of that. Below is the UI code for button
<input type="submit" class="btn btn-primary btn-lg col-sm-2" value="Submit">
but the XPath i am getting is
//*[#id="form"]/div[5]/input
So please provide me some inputs to select the button. I also need to scroll down the page a bit as the button is also not visible on the page.
u may try by using cssSelector like below:
driver.findElement(By.cssSelector(".btn.btn-primary.btn-lg.col-sm-2"));
for this, class "btn.btn-primary.btn-lg.col-sm-2" must be unique.
if the element is not visible in the screen, than use like below:
JavascriptExecutor js = (JavascriptExecutor)driver;
WebElement elem = driver.findElement(By.cssSelector(".btn.btn-primary.btn-lg.col-sm-2"));
//this line will scroll down to make element visible
js.executeScript("window.scrollTo(" + elem.getLocation().x + "," +(elem.getLocation().y- 100) + ");");
than click on that element:
elem.click();
Hi please use this xpath it will work
//*[#id='form']/div[5]/input // if nodes are correct then
if yor page has got only on tag with attribute value value="Submit" then
//*[#value='Submit']
You can try following xpath
//input[#class='btn btn-primary btn-lg col-sm-2']
this should work
I am using the Popover AngularStrap using the trigger focus on a . The problem is that this trigger just works in a button element, however, the rest of the triggers can be used in a , Is there a way to make it works in a image?
Is this what you are looking for?
<a href="javascript:" title="{{popover.title}}" data-content="{{popover.content}}" data-template="popover/docs/popover.tpl.demo.html" data-animation="am-flip-x" bs-popover>
<img src="/my/image/path" />
</a>