I have this HTML code and I want to click the button:
<div class="col-md-3 col-sm-5">
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#SignInModal" style="width:100%">
Sign in
</button>
</div>
this is what I tried:
driver.FindElement(By.ClassName("btn-success")).Click();
To invoke click() on the button with text as Sign in you can use either of the following solutions:
CssSelector:
driver.FindElement(By.CssSelector("button.btn.btn-success.btn-lg[data-toggle='modal'][data-target$='SignInModal']")).Click();
XPath:
driver.FindElement(By.XPath("//button[#class='btn btn-success btn-lg'][normalize-space()='Sign in']")).Click();
Related
I have a page that has the following code:
<div class="form-control">
<input type="submit" value="Save" class="btn btn-primary"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
and below the form:
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" >Save changes</button>
</div>
</div>
</div>
</div>
the input type submit " <input type="submit" value="Save" class="btn btn-primary"/> " works, however when I click on the modal button, and the modal opens, the button inside "Save Changes" does not work.
I have also changed the button inside the modal to the same code as the Save button, but it also doesn't work. it doesn't call the OnPost button.
I have also tried adding a handler " asp-page-handler="Save" " and renaming the OnPostAsync to OnPostSaveAsync but does not work.
The inspect does not execute anything on the browser also.
I'm using razor pages asp net6 and the modal code comes from the bootstrap5 docs.
Your <div class="modal"> is likely located as a direct child of <body> instead of being inside its <form>...
... but <button type="submit"> won't work unless the <button> itself is a descendant of the <form> element that should be submitted.
Fortunately, if the <button> is not a descendant of a <form>, then you can manually bind it using the <button form=""> attribute, which contains the id="" of the <form> you want to submit.
Note that the form="" attribute can also be used with all HTML form controls: on all <input> elements, <textarea>, and <select> - which allows you to work-around the fact we can't nest <form> elements.
I have two seperated buttons that have created, but they closely packed to another there is no space in between i have tried to use ml-auto. There is not much difference on the UI side and need some help around it.
<div class="form-group row">
<div class="col-xs-3 ml-auto">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<div class="form-group row">
<div class="col-xs-3 ml-auto">
<a class="btn btn-large btn-success" id="viewCourse" href="#Url.Action("ViewCourses", "Home")">View Grades</a>
<script type="text/javascript">
$('#ViewCourses').on('click', function (e) {});
</script>
</div>
</div>
First of all I think both of your buttons need to sit inside a .row element. Right now they are on different rows. Then you can apply a class like .mr-2 (margin right of 2 units, or increase the number if you want more) to the first button wrapper. Then you will have some spacing between your buttons.
<div class="row">
<div class="form-group">
<div class="col-xs-3 mr-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<a class="btn btn-large btn-success" id="viewCourse" href="#Url.Action("ViewCourses", "Home")">View Grades</a>
<script type="text/javascript">
$('#ViewCourses').on('click', function (e) {});
</script>
</div>
</div>
</div>
You can see a working solution here: https://codepen.io/razvan-tudosa/pen/YzqvQVm
More info about how to space stuff you can find in the twitter bootstrap docs: https://getbootstrap.com/docs/4.5/utilities/spacing/
I am trying to click this button through Selenium web driver but it whatever I try, it says cannot find element.
<a class="button" href="#" id="enrollForm">ENROLL NOW</a>
I tried
driver.FindElement(By.XPath("//*[#id='enrollForm']")).Click();
Update:
This is the whole snippet. I want to click on the button "Enroll Now":
<div class="buttonContainerLanding">
<div class="buttonDiv">
<a class="button" href="#" id="enrollForm">ENROLL NOW</a>
</div>
<div class="buttonDiv">
<!-- <b class="buttonTitle">Need to Activate Your Card?</b> -->
<a class="button" href="#" id="activate">ACTIVATE CARD</a>
</div>
<div class="buttonDiv">
<!-- <b class="buttonTitle">Need to Activate Your Card?</b> -->
<a class="button" href="#" id="replace">REPLACE CARD</a>
</div>
</div>
To click on the element with text as ENROLL NOW you can use either of the following solutions:
Using LinkText:
driver.FindElement(By.LinkText("ENROLL NOW"));
Using CssSelector:
driver.FindElement(By.CssSelector("div.buttonContainerLanding div.buttonDiv>a.button#enrollForm"));
Using XPath:
driver.FindElement(By.XPath("//div[#class='buttonContainerLanding']//div[#class='buttonDiv']/a[#id='enrollForm' and text()='ENROLL NOW']"));
I am trying to click a button using selenium webdriver. Working fine with the following XPath
driver.FindElement(By.XPath("html/body/div[36]/div[3]/div/button[1]")).click();
it clicks the button fine but if I try to find it using class then it wont click it
driver.FindElement(By.XPath("//div[#class='ui-dialog-buttonset']/button[1]")).click();
Any Idea what I am doing wrong. Actual source code is as follows:-
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
::before
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text"></span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text"></span>
</button>
</div>
::after
</div>
</div>
I see two buttons with the same class name. You could try this:
List<WebElement> list = driver.findElements(By.cssSelector("button[class=\"ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only\"]"));
//click on the first button
list.get(0).click();
you can try the contains operator "*" of css selector.
List<WebElement> mylist = driver.findElements(By.cssSelector("button[class*='ui-corner-all']"));
mylist[0].click();
you can visit this link for CSS Selector tutorial in Selenium with c#
http://binaryclips.com/2015/02/16/css-selectors-for-selenium-webdriver/
I have a few radio buttons
<p>#Html.RadioButton("selected", "img")img
#Html.RadioButton("selected", "input")input
#Html.RadioButton("selected", "script")script
#Html.RadioButton("selected", "link")link
#Html.RadioButton("selected", "form")form</p>
and I want to use twitter bootstrap's btn-group, buttons-radio as a style as a replacement for these radio buttons, the code i attempted to add was
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" name="selected" value="a">a</button>
<button type="button" class="btn" name="selected" value="img">img</button>
<button type="button" class="btn" name="selected" value="input">input</button>
<button type="button" class="btn" name="selected" value="script">script</button>
<button type="button" class="btn" name="selected" value="link">link</button>
<button type="button" class="btn" name="selected" value="form">form</button>
</div>
in my controller i'm using the I'm using the FormCollection as a way of getting the value from the checked radiobutton, but i would like to use the bootstrap css instead of having the plain #Html.radiobutton.
string selectedTechnology = form["selected"];
List.UrlType = selectedTechnology;
I have a feeling that this is not the correct way to do it, since the helper probably works with the formcollection and it has no idea what the bootstrap css buttons are but if there is a way to implement it, that'd be great.
UPDATE:
So... here is the solution I was looking for
radio buttons using bootstrap css
<div id="radios" class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" name="option-a" value="a">a</button>
<button type="button" class="btn" name="option-img" value="img">img</button>
<button type="button" class="btn" name="option-script" value="script">script</button>
<button type="button" class="btn" name="option-link" value="link">link</button>
<button type="button" class="btn" name="option-form" value="form">form</button>
<input type="hidden" name="option" value="0" />
</div>
i created a jscript click function
<script type="text/jscript">
$("body").find("#radios").children().each(function () {
$(this).bind('click', function () {
$("input[name=option]").val(this.value);
});
});
</script>
inside my controller I used the FormCollection to add the selected button to my model
string selectedTechnology = form["option"];
whiteList.UrlType = selectedTechnology;
hopefully this helps.
I haven't actually used the twitter bootstrap (only read up on it), and .NET isn't my strong point, but:
1) You need to use input with type="radio" to make a radio button, not the button tag.
2) The twitter bootstrap provides the .radio and .inline classes to be applied to the parent of the input element, like a label:
<label class="radio">
<input type="radio" name="selected" value="..." />
Text to come after the radio button
</label>
3) #Html.RadioButton takes a third argument, an object, for specifying attributes:
#Html.RadioButton("selected", "form", new { class = "class" });
Hope that helps.
So... here is the solution I was looking for
radio buttons using bootstrap css
<div id="radios" class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" name="option-a" value="a">a</button>
<button type="button" class="btn" name="option-img" value="img">img</button>
<button type="button" class="btn" name="option-script" value="script">script</button>
<button type="button" class="btn" name="option-link" value="link">link</button>
<button type="button" class="btn" name="option-form" value="form">form</button>
<input type="hidden" name="option" value="0" />
</div>
i created a jscript click function
<script type="text/jscript">
$("body").find("#radios").children().each(function () {
$(this).bind('click', function () {
$("input[name=option]").val(this.value);
});
});
</script>
inside my controller I used the FormCollection to add the selected button to my model
string selectedTechnology = form["option"];
whiteList.UrlType = selectedTechnology;
hopefully this helps.