I'm trying to select a HTML drop-down option through c# however Im not sure where to start. Could someone give a basic example.
Thanks in advance
Edited: This drop down I'm selecting is on someone's web page off the internet.
Edited: Below is the html on the webpage:
The drop down menu that contain "Ratings Data Upload" is what I am after to select.
<li class="dropdown ">
<a class="dropdown-toggle" role="button" aria-expanded="false" aria-haspopup="true" href="#" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="">
Ratings Data Upload
</li>
There is a great browser automation framework called Selenium. Your next step should be using tutorials or online training content to learn Selenium (or another tool).
Selecting a drop down value with Selnium is as easy as:
Select objSelect =new Select(driver.findElement(By.id("search-box-id")));
objSelect.selectByVisibleText("Name of option shown to user");
Related
i have a blazor page where i load table data depending on the data passed from the other page through the link.
the page route is defined as this #Page/approvals{tablename}
from the other page i have the links
<li class="nav-item">
<a href="approvals/customer_visitation" class="nav-link" >
<i class="far fa-circle nav-icon"></i>
<p>Customer Visitation</p>
</a>
</li>
<li class="nav-item">
<a href="approvals/mapping" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Mapping</p>
</a>
</li>
when i run the app and click anyone first it works well. but Navigating to the second one from the first on does not work. it shows an empty page.
my question is how do i use one page and have multiple links to that page with passed parameter?
Working on a blazor server application and trying to make the multi level Navigation menu
Under Shared Component Navmenu.razor file, i added the code which is copied from bootstrap
https://getbootstrap.com/docs/4.0/components/navbar/
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
After running this changes the menu item seems to be added to layout , but dropdown behaviour is not working
After further search and adding jquery library to the _Host.cshtml , head section like below
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
the menu managed to show the behaviour of dropdown
Is this is recommended to use jquery inside the blazor but colors or styles seems to be overridden as in picture
Is really no easy-way to make a multi level Nav Menu in Blazor ?
The answer to your problem is you should make a component out of it.
For example,
Start by creating a component with a boolean and a string.
Then create an element and give it the #onclick attribute. When the user clicks on the element, it fires the onclick event and it switches the boolean value to the opposite of what it was.
Finally, a string property tracks the boolean value and outputs the appropriate string that contains the style needed to show or hide a particular element.
CollapsableMenuItem.razor
<button #onclick="ToggleVisibility" class="btn btn-link" style="cursor:pointer;">Click me</button>
<br />
<span class="nav-item" style="#_style">
I'm invisible until you click on the button
</span>
#code {
private bool _collapsed;
private string _style
=> _collapsed ? "visibility:visible;" : "visibility:hidden;";
public Task ToggleVisibility() {
_collapsed = !_collapsed;
return Task.CompletedTask;
}
}
I created this .NET Fiddle to see it in action:
https://blazorfiddle.com/s/229e32g4
As Dennis mentioned, you can build a component out of it.
However, if you are fine with the basic functionality offered by bootstrap, just go with it. I have used it extensively without any issues. Also,
There is no harm in using JavaScript with Blazor. A lot of libraries use it all the time. For some browser interactions (page refresh, getting viewport size etc) you have to use JavaScript.
If you use bootstrap 5, there is no jQuery. It's pure JavaScript
Most importantly, it's painful to get animation right in blazor. While you will get the core collapse/expand functionality very easily in blazor, the animation is tricky.
Finally, your styles are wonky because there is a conflict in styling between nav-link that comes bundled with the visual studio template and nav-link as described in bootstrap. Keep one of your choice. You will find the template css under the razor file of the menu component. Delete or mark !important depending on style that you want to keep.
I would like links on the navigation bar to appear or disappear depending upon the data in the database. All the nav bar links are in _Layout.cshtml which is being used by all pages.
<ul>
#if (User.Identity.IsAuthenticated)
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Bookings</a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("All Bookings", "GetAllBookings", "Booking")</li>
<li>#Html.ActionLink("Member's Dashboard", "GetBookingsByStatus", "Booking")</li>
</ul>
</li>
</ul>
I would like member's dashboard to only appear if they are a member and have certain attributes in their profile. What is the best way to dynamically changing the nav bar links depending upon the data in database?
even in your sample code, you can just leave out the list items by wrapping them in an #if conditional and checking their permissions in whatever method you see fit.
However, I hope I'm pointing out the obvious, but this method only hides the link. It doesn't prevent the user from typing it in or using a bookmark. You will also need to duplicate the security check in your controller.
I've got a MVC core 2 project that works fine on my development server. Once I publish it to the production server, I can't get any of my buttons to work. I can navigate to all of the pages, my Javascript and JQuery seem to work fine, but if there is a button, it will not fire upon being clicked. To be clear, navigation buttons, input buttons (or buttons used for navigation, input, etc.) will not work.
I'm thinking I'm missing some sort of library (bootstrap?), but not sure. Any ideas of what or how to go about finding what?
UPDATE
I deleted and uploaded everything again and that took care of my input buttons not working (must have had some old files left in the root); however, I still can't get my navigation buttons to work. I don't get any errors when I click on them that I can see and below is my nav code:
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">
DropDownTest<span class="caret" style="background-color:transparent;"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a asp-area="" asp-controller="Home" asp-action="Something1">Something1</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Something2">Something2</a></li>
..etc
</ul>
</div>
I have been trying to figure this out and could use some help from Selenium experts here. I have a dropdown on my page that I am trying to select an option for from the test and I cant seem to get this right.
I have tried the following example I see commonly for select Item. The options always show text as an empty string "" even though I can see in the HTML markup the option text is there.
wait.Until(d => ExpectedConditions.ElementExists(By.Id("Cars")));
var carStatusDropDown = new SelectElement(_driver.FindElement(By.Id("Cars")));
carStatusDropDown.SelectByText(filter.CarStatus);
I figured its because maybe the options are not visible to the browser, so then I tried to click on the button next to dropdown (Bootstrap) so it would be open before it selects the text
wait.Until(ElementIsClickable(By.XPath("/html/body/div[2]/div[2]/div/div[2]/div[1]/div/form/fieldset/div[3]/div/div[1]/span[2]/div/div/span")));
IWebElement ddlButton = _driver.FindElement(By.XPath("/html/body/div[2]/div[2]/div/div[2]/div[1]/div/form/fieldset/div[3]/div/div[1]/span[2]/div/div/span"));
ddlButton.Click();
wait.Until(d => ExpectedConditions.ElementExists(By.Id("Cars")));
var carStatusDropDown = new SelectElement(_driver.FindElement(By.Id("Cars")));
carStatusDropDown.SelectByText(filter.CarStatus);
I can see the ddlButton opens the dropdown but am still getting >OpenQA.Selenium.ElementNotVisibleException
when it tries to SelectByText. In VS I can see the the options text still shows "" and the Displayed property is false for them. How can I find the options, Any feedback would be appreciated, I am posting the HTML below whats weird is that there are two drop downs one as a <ul> and a <select> one the appears below, I am trying to access the <select> one in the test code. The select one in firebug shows up as faded in the markup?!?
HTML:
<div class="combobox-container">
<input type="hidden" name="Estimate.EstimateStatus" value=" ">
<input type="text" autocomplete="off"
placeholder="All"class="combobox">
<ul class="typeahead typeahead-long dropdown-menu" style="top:
112px;left: 445.117px; display: none;">
<li data-value="Approved" class=""><a href="#"><strong>
</strong>A<strong></strong>p<strong></strong>p<strong>
</strong>r<strong></strong>o<strong></strong>v<strong>
</strong>e<strong></strong>d<strong></strong></a>
</li>
<li data-value="Hold" class=""><a href="#"><strong>
</strong>H<strong>
</strong>o<strong></strong>l<strong></strong>d<strong></strong>
</a>
</li>
<li data-value="In Progress"><a href="#"><strong></strong>I<strong>
</strong>n<strong></strong> <strong></strong>P<strong>
</strong>r<strong></strong>o<strong></strong>g<strong>
</strong>r<strong></strong>e<strong></strong>s<strong>
</strong>s<strong></strong></a>
</li>
<li data-value="Not Reviewed" class="active">
<a href="#"><strong></strong>N<strong>
</strong>o<strong></strong>t<strong></strong> <strong>
</strong>R<strong></strong>e<strong></strong>v<strong>
</strong>i<strong></strong>e<strong></strong>w<strong>
</strong>e<strong></strong>d<strong></strong></a>
</li>
<li data-value="Rejected"><a href="#"><strong></strong>R<strong>
</strong>e<strong></strong>j<strong></strong>e<strong>
</strong>c<strong></strong>t<strong></strong>e<strong>
</strong>d<strong></strong></a>
</li>
</ul>
<span class="add-on btn dropdown-toggle" data-dropdown="dropdown">
<span class="caret"></span>
<span class="combobox-clear">
</span>
</div>
<select id="Cars" class="combobox"
onchange="javascript:OnCarsStatusChanged();" style="display: none;">
<option value=" " selected="selected">All</option>
<option value="3ad8cf29-f0b7-441f-
81bc-c5cfe7c0d73d">Approved</option>
<option value="19b573c8-fc88-4abe-9c19-9ffc580a1ffe">Hold</option>
<option value="e3a8b2bd-c3eb-47c3-95e7-f15da2f3d25b">In
Progress
</option>
<option value="962e4bce-1ca5-404f-b7a0-6a3a42ad91a0">Not
Reviewed
</option>
<option value="c110e83a-5a93-4553-
a907-02a47ca97467">Rejected</option>
</select>
It does seems like there is another action depended on this dropdwon. By default this dropdown is NOT visible. So, best will be to see what previous action makes it visible.
However, another workaround can be to execute a simple javascript, make the dropdown list visible and select the intended element you need.
removeAttribute should remove the style attribute to make the list visible.
((IJavaScriptExecutor)Driver).ExecuteScript("document.getElementById('Cars').removeAttribute('style');");
By id = By.Id('Cars');
var carStatusDropDown = new SelectElement(_driver.FindElement(id));
carStatusDropDown.SelectByText(filter.CarStatus);