I am trying to select an element from a list that will update fields upon a clicking outside of the list. The below code works if I only have one event (see picture)
Actions action = new Actions(driver);
EventGrid.FindElement(By.XPath("//div[contains(.,'" + nameToBeClicked + "')]")).Click();
// Forces a click outside element to fire the triggers
EventGrid.FindElement(By.XPath("//html")).Click();
But will not work when I have two events (notice there are two events in the picture now, one new event and the other called buffet breakfast). I pass in the event name to the method which does click the buffet breakfast from the drop down however the click to html only works with the above picture but not the below. Any ideas how to get around this?
Html of the list:
<div id="boundlist-1193" class="x-boundlist x-boundlist-floating x-layer x-boundlist-default x-border-box" tabindex="-1" style="right: auto; left: 100px; top: 97px; height: auto; width: 150px; z-index: 29001;" data-selenium-id="EventGrid-EventClassificationName-list">
<div id="boundlist-1193-listEl" class="x-boundlist-list-ct x-unselectable" style="overflow: auto; height: auto;" role="presentation">
<ul class="x-list-plain">
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Buffet Breakfast</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>NotMarkedAsPosted</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Package Afternoon Break</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Package Dinner</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Package Lunch</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Package Morning Break</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Party Hard</div>
</li>
<li class="x-boundlist-item" unselectable="on" role="option">
<div>Unassigned</div>
</li>
</ul>
</div>
</div>
You can try to perform click by coordinates after you have selected your option.
action.MoveByOffset(x, y).Click().Perform();
I have achieved the click by using the following code. It seems when there are multiple events the html tag falls off and becomes remote. Please review the code below. I also removed the string parameter as when I type the name it only one member of the list returns.
EventGrid.FindElement(By.XPath("//li/div")).Click();
RemoteWebElement element = (RemoteWebElement)driver.FindElement(By.XPath("//html"));
var scrollIt = element.LocationOnScreenOnceScrolledIntoView;
element.Click();
From what I understand, Your objective is to get onfocusout event triggered. I had this issue and this solves my problem
driver.find_element_by_tag_name('body').send_keys(Keys.TAB)
what it does is sends tab key event to body,(you can use html as tag if you wish). I use this soution as it's the most prefered behaviour of the actual user.
I found the easiest way is just to click something that has no interaction i.e. body attribute...this will always be there.
If you were wanting to mimic user behaviour for your test then you would click or tab to the next fields or user actionable element - but for the sake of just validating a field the below method would suffice.
Class PageElements {
public static By body = By.XPath("//body");
}
driver method:
driver.FindElement(PageElements.body).Click();
Related
I am trying to make a simple dropdown menu in my Blazor app. It is declared in my Header.razor as shown below:
<div class="header-sign">
<div class="dropdown" id="toggleDropdown">
<button class="button-md" type="button">
<i data-feather="user"></i>
<span>Personal cab</span>
</button>
<ul class="dropdown-list">
<li class="dropdown-item">
<a class="dropdown-link" href="">
<p class="text-md">Cabinet</p>
</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="">
<p class="text-md">Sign out</p>
</a>
</li>
</ul>
</div>
</div>
The dropdown can be triggered via JS script like this:
$("#toggleDropdown").on("mouseenter", () => {
$(this).find(".dropdown-list").addClass("is-active");
});
I have my header declared in MainLayout.razor like shown below:
#inherits LayoutComponentBase
<Header></Header>
<main class="main">
#Body
</main>
<Footer></Footer>
And this approach doesn't work.
Everything changes if I replace the above-mentioned Header.razor with razor page Header.cshtml with exactly the same markup and render it in _Layout.cshtml in such a way:
#await Html.PartialAsync("Header")
Looks like the above markup can only work in *.cshtml files but cannot in *.razor and I don't quiet understand the reason. Why does it behave this way?
Huge thanks to Mohammed Alwedaei, I figured out how to solve my question. His remark that the dropdown should be activated on a click and not on a hover really solved it to me.
We should just keep state of a dropdown list and toggle classes of it in a bit tricky way (with a ternary operator #(isActive ? "is-active" : "")). To make the dropdown work as intended, we should define #onclick attribute and also #onblur to disable it when user clicks somewhere else.
The code below works just fine:
<div class="header-sign">
<div class="dropdown" id="toggleDropdown">
<button #onclick="Show" #onblur="Hide" class="button-md" type="button">
<i data-feather="user"></i>
<span>Personal cab</span>
</button>
<ul class="dropdown-list #(isActive ? "is-active" : "")">
<li class="dropdown-item">
<a class="dropdown-link" href="/cabinet">
<p class="text-md">Cabinet</p>
</a>
</li>
<li class="dropdown-item">
<a #onclick="LogOutAsync" class="dropdown-link" href="">
<p class="text-md">LogOut</p>
</a>
</li>
</ul>
</div>
</div>
#code {
private bool isActive = false;
private void Show()
{
isActive = true;
}
private void Hide()
{
isActive = false;
}
private async Task LogOutAsync()
{
}
}
I'm trying to get my Navigation Bar to look like this. However the text won't align to the right side of the screen seemingly no matter what changes I make to the base layout code.
My html code is as follows:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#if (Session["Logged_In"] == null)
{
<li>#Html.ActionLink("Home", "Index", "OUsers")</li>
<li class="navbar-right">#Html.ActionLink("Create", "Create", "OUsers")</li>
<li class="navbar-right">#Html.ActionLink("Login", "Login", "OUsers")</li>
}
#if (Session["Logged_In"] != null)
{
<li>#Html.ActionLink("Home", "LoggedIndex", "OUsers")</li>
<li>#Html.ActionLink("Delete Account", "DeleteProfile", "OUsers")</li>
<li>#Html.ActionLink("Edit Profile", "EditProfile", "OUsers")</li>
<li style="float:right">#Html.ActionLink("Sign Out", "SignOut", "OUsers")</li>
}
</ul>
</div>
This isn't the full Layout code granted however it's what I've actually edited and seems relevant to text alignment. Also my "navbar-right" class consists of only float: right; and text-align: right;
The strange thing is that when I inspect the Login and Create actionlinks on the website the "navbar-right" class is applied yet there is no alignment changed. It may be worth noting I tried putting the css class within the actionlink parameters and nothing changed and I also attmepted a new division with navbar right but that seemed to align Login under the Home actionlink which was also bizarre to me.
It seems you are using Bootstrap 3. Then this will work
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Link</li>
</ul>
</div>
The navbar-nav class have float:left property with it which align all the nav to left side
try to override
I'm trying to hide menu options from navbar in master page based on user roles
but when I tried to call the element it gives me an error.
This is what I did :
MasterPage
<div class="navbar-collapse collapse">
<ul id="MasterMenu" class="nav navbar-nav">
<li id="liDashboard">
<a runat="server" href="~/_Dashboard">Dashboard</a>
</li>
<li id="liTicket">
<a runat="server" href="~/Forms/Tickets/_Ticket">Ticket+</a>
</li>
<li id="liReports">
<a runat="server" href="-">Reports</a>
</li>
</ul>
</div>
And in another page
if (User.IsInRole("User"))
{
System.Web.UI.HtmlControls.HtmlGenericControl liDashboard = (System.Web.UI.HtmlControls.HtmlGenericControl)Master.FindControl("liDashboard");
liDashboard.Visible = false;
}
Also I tried to add runat="server" but it still not working.
Use Null-Conditional operator (?.) and check for null before assignment:
System.Web.UI.HtmlControls.HtmlGenericControl liDashboard =
(System.Web.UI.HtmlControls.HtmlGenericControl)Master?.FindControl("liDashboard");
if (liDashboard != null) liDashboard.Visible = false;
Also you have missed runat="server" in the following line:
<li id="liDashboard" runat="server">
For example
if your place holder something like that.
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
Try to use something like that
Master.FindControl("MainContent").FindControl("liDashboard")
Then find your value hierarchically
And of course values need to be with runat="server"
Edit
Give your PlaceHolder an ID
<asp:PlaceHolder ID="Something" runat="server"/> and get your value with:
Master.FindControl("Something").FindControl("liDashboard")
I try to automate a Task "Navigating on a Website" with WatiN.
Now, I have the following problem:
The website shows this:
There I have to simulate a click on "Einstellungen". When I look at the Sourcecode it looks like:
<div class="ui-widget ui-opt-outer-nav ui-widget-content ui-corner-all nav_nav_panel">
<div class="ui-widget ui-opt-inner-nav ui-widget-content ui-corner-all">
<div id="NAV" class="nav_nav nav_pointer">
<ul>
<li id="jBtnMENUShipmentList" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0120">Sendungsübersicht</label></span></span></li>
<li id="jBtnMENUCreateShipment" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0130">Sendung erstellen</label></span></span></li>
<li id="jBtnMENUAddressBook" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0140">Adressbuch</label></span></span></li>
<li id="jBtnMENUEndOfDayManifest" data-opt-load-type="menu">
<span class="select-buttons" data-opt-title="">
<span><label data-opt-label-key="V7GMGLMBTN0150">Tagesabschluss</label></span>
</span>
</li>
<li id="jBtnMENUPickup" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0160">Abholung</label></span></span></li>
<li id="jBtnMENURateEnquiry" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0170">Preisauskunft</label></span></span></li>
<li id="jBtnMENUExpertFunctions" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0180">Einstellungen</label></span></span></li>
</ul>
</div>
</div>
</div>
But I have no idea, how I can now with WatiN simulate the click on "Einstellungen".
I have tried:
browser.Link(Find.ByName("jBtnMENUExpertFunctions")).Click();
but with no success.
Comment from jessehouwing is the solution:
The Browser.Link method will search for a Link element, but the element in the DOM you need to click is a Label, so you should probably use:
Browser.Label(Find.ByText("Einstellungen").Click()
I have a dropdown defined within a nav-bar (http://getbootstrap.com/components/#nav-dropdowns) and I want to, when I click on the dropdown a function on server side to be executed.
My dropdown:
<li role="presentation" class="dropdown">
<a href="../#" id="notS" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<span class="glyphicon glyphicon-bell" aria-hidden="true"><span id="not" class="badge">3</span></span>
</a>
<ul id="notificacoes" class="dropdown-menu" role="menu">
<li role="presentation">
<a runat="server" onserverclick="setVisivel" role="menuitem" tabindex="-1" href="../Admin/VerRevisoes?id=1144">
As revisões do caso 1144 estão completas
</a>
</li>
<li role="presentation">
<a runat="server" onserverclick="setVisivel" role="menuitem" tabindex="-1" href="../Admin/VerRevisao?id=7">
Foi adicionada uma nova revisão ao caso 1144
</a>
</li>
<li role="presentation">
<a runat="server" onserverclick="setVisivel" role="menuitem" tabindex="-1" href="../Admin/Casos">
O caso 1145 foi adicionado pelo utilizador 1
</a>
</li>
</ul>
</li>
And my funtion setVisivel it C# and it's on server side:
protected void setVisivel(object sender, EventArgs e)
{
DBConFactory.getInstance().setVisibleNotificacao(int.Parse(Context.User.Identity.GetUserName()));
}
But when I click the dropdown, the function setVisivel is not called!
Make sure that you have set the property of ASP.NET DropDown control: AutoPostBack="True" (like explained in MSDN online:
https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listcontrol.autopostback%28v=vs.110%29.aspx )
Working example, the DropDownList is declared as:
<asp:DropDownList ID="cmbSelectChannel" runat="server" AutoPostBack="true"/>
Hope this may help. Best regards,
in my opinion; try to integrate two different technologies .NET and bootstrap in a way others have tried before.
try to read this:
http://techbrij.com/responsive-menu-twitter-bootstrap-asp-net
then modify your bootstrap CSS and make it look like what your dropdown looks like now.