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/
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 need to click on one of the dropdown options in order to expand page entries from 10 to 50. HTML looks like this:
<button id="page-size-dropdown-toggle" class="btn btn-white btn-sm dropdown-toggle ng-binding" data-toggle="dropdown" role="menuitem" aria-label="Change page size">
10
<i class="fa fa-chevron-down" role="presentation"></i>
<span class="sr-only ng-binding">Shown</span>
</button>
<ul id="page-size-dropdown-toggle-menu" class="dropdown-menu" role="menu" aria-labelledby="page-size-dropdown-toggle">
<!-- ngRepeat: size in pageSizeCtrl.getPageSizes() --><li ng-repeat="size in pageSizeCtrl.getPageSizes()" role="presentation" class="ng-scope">
<a href="" ng-click="pageSizeCtrl.changePageSize(size)" class="menuitem" role="menuitem" aria-label="Show 10">
<span aria-hidden="true" class="ng-binding">10</span>
</a>
</li><!-- end ngRepeat: size in pageSizeCtrl.getPageSizes() --><li ng-repeat="size in pageSizeCtrl.getPageSizes()" role="presentation" class="ng-scope">
<a href="" ng-click="pageSizeCtrl.changePageSize(size)" class="menuitem" role="menuitem" aria-label="Show 25">
<span aria-hidden="true" class="ng-binding">25</span>
</a>
</li><!-- end ngRepeat: size in pageSizeCtrl.getPageSizes() --><li ng-repeat="size in pageSizeCtrl.getPageSizes()" role="presentation" class="ng-scope">
<a href="" ng-click="pageSizeCtrl.changePageSize(size)" class="menuitem" role="menuitem" aria-label="Show 50">
<span aria-hidden="true" class="ng-binding">50</span>
</a>
</li><!-- end ngRepeat: size in pageSizeCtrl.getPageSizes() -->
</ul>
</div>
As you can see there are 3 options 10, 25 and 50. Here what I have tried so far:
clicking of the drop down and using LinText - Cant find this element
var dropDown = driverIpass.FindElement(By.Id("page-size-dropdown-toggle"));
dropDown.Click();
driverIpass.FindElement(By.LinkText("Show 50")).Click();
using XPath (unclickable element) tried different paths as well, no avail
IWebElement element = driverIpass.FindElement(By.XPath("//*[#class='dropdown-menu']/li[3]/a"));
element.Click();
As well as XPath using #id
Also tried digging around within classes hoping to find the correct link - nothing. There is something I don't see/realize.
It's my second day using C# and selenium so if anyone could put me on the right path I would really appreciate it.
I cant provide the actual web page as this is internal (company)
Try with WebDriverWait() and following css selector.
WebDriverWait wait = new WebDriverWait(driverIpass, TimeSpan.FromSeconds(10));
wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.CssSelector("#page-size-dropdown-toggle"))).Click();
wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.CssSelector("#page-size-dropdown-toggle-menu li a[aria-label='Show 50']"))).Click();
Found an answer after posting my question. In case someone else might have a similar problem:
//click to open drop down menu
var dropDown = driverIpass.FindElement(By.Id("page-size-dropdown-toggle"));
dropDown.Click();
//select the 3rd option within menu
IWebElement element = driverIpass.FindElement(By.XPath("//*[#id='page-size-dropdown-toggle-menu']/li[3]/a"));
element.Click();
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 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();
I am creating a website that looks like eBay and I got some HTML template which I think I can use to integrate into the ASPX
However, I needed some help with this part,
If you look at the picture, you can see there are four boxes that include item
This is the html code
<div class="ltabs-item product-layout">
<div class="product-item-container">
<div class="left-block">
<div class="product-image-container second_img ">
<img src="image/demo/shop/resize/J5-270x270.jpg" alt="Apple Cinema 30"" class="img-responsive" />
<img src="image/demo/shop/resize/J9-270x270.jpg" alt="Apple Cinema 30"" class="img_0 img-responsive" />
</div>
<!--Sale Label-->
<span class="label label-sale">-15%</span>
<!--full quick view block-->
<a class="quickview iframe-link visible-lg" data-fancybox-type="iframe" href="quickview.html">Quickview</a>
<!--end full quick view block-->
</div>
<div class="right-block">
<div class="caption">
<h4>Cupim Bris</h4>
<div class="ratings">
<div class="rating-box">
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
</div>
</div>
<div class="price">
<span class="price-new">$50.00</span>
<span class="price-old">$62.00</span>
</div>
</div>
<div class="button-group">
<button class="addToCart" type="button" data-toggle="tooltip" title="Add to Cart" onclick="cart.add('42', '1');"><i class="fa fa-shopping-cart"></i><span class="">Add to Cart</span></button>
<button class="wishlist" type="button" data-toggle="tooltip" title="Add to Wish List" onclick="wishlist.add('42');"><i class="fa fa-heart"></i></button>
<button class="compare" type="button" data-toggle="tooltip" title="Compare this Product" onclick="compare.add('42');"><i class="fa fa-exchange"></i></button>
</div>
</div>
<!-- right block -->
</div>
</div>
Basically when you look at the code, everything is hard coded, what I wanted to do is that every time the page loads, the item info will be taken from the DB and code-behind will supply the information then parse into that field.
How should I do that?
Take a look into this tutorial. https://www.tutorialspoint.com/asp.net/
To show your c# page with dynamic content,you should update your static HTML page with scripting language to get data from database and update UI
AngularJS is one of the Java script framework to create page with dynamic content
I assume you are developing with ASP.NET Web Forms as you mention ASPX files. If that is the case then you can use the runat = "server' attribute for the desired HTML elements. This way you can interact with them from your backend code. More on ASP.NET Web Forms and on HTML Server Controls and runat = "server" attribute