Selenium throws wrong NoSuchElementException thrown - c#

Weird issue I am facing here:
Test fails when Chrome browser is being tested:
This is what I get, when chrome is being tested.
When for example FireFox is tested, I do do get this:
I did some googling, and there is no frame on a page.. And in general, I am asserting to throw exeption, but it's somehow wrong.?
Would be very thankful for any help as I am so new with selenium, basically one of the first testing attempts :)
update:
-Adding html loaded while test is running:
<body>
<div id="react-app">
<div data-reactroot="" class="container-fluid">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-10">
<div>
<div>
<h1>Customer</h1>
<div>
<select id="customer-id">
<option value="BAH">BA Holidays</option>
<option value="CHEAPCARIB">CheapCaribbean</option>
<option value="DELTA">Delta Vacations</option>
<option value="1TEST">1 Vacations</option>
<option value="LATAM">LATAM</option>
<option value="SPIRIT">Spirit Airlines</option>
<option value="THOMASCKUK">Thomas Cook UK</option>
</select>
</div>
<div>
<h2>Profile</h2>
<select id="profile-id">
<option value="DL_FH">DL_FH</option>
<option value="DL_FHM">DL_FHM</option>
</select>
</div>
<div>
<button id="download-order-template" class="ui-button ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text ui-c">
Download Template
</span>
</button>
</div>
<div>
<h2>Place a new standalone order</h2>
<span class="ui-button ui-fileupload-choose ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left fa fa-plus">
</span>
<span class="ui-button-text ui-clickable">
Select File To Upload
</span>
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</span>
</div>
<div>
<h2>Replace all Subscriptions</h2>
<span class="ui-button ui-fileupload-choose ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left fa fa-plus">
</span>
<span class="ui-button-text ui-clickable">
Select File To Upload
</span>
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</span>
</div>
<h2>Subscription Lines</h2>
<div>
<h3 id="no-subscriptions-message">
No subscriptions are available for selected profile
</h3>
</div>
</div>
</div>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</div>
<script src="/dist/vendor.js?v=FSqTLWksDyRJ8ISowkFa5SF8Km7z2u2VqPZf0m3lpXA"></script>
<script src="/dist/main.js?v=zuIW3HpayKUQgmfsu0Hi17_VJILvxurljy9Fv0yHLMA"></script>
</body>

Exceptions are not different because they follow the same guidelines from the Selenium Framework but each WebDriver can choose to add additional debug informations to help fix issues in their underlying engines (which is specific to each browser of course).
ChromeDriver tends to be more "chatty" about errors, just ignore these if you only care about the result of your test suite.

Related

Inconsistent Appearance in ASP.Net

I'm having an issue with one of my webpages in my ASP.NET MVC Application. I have the HTML in Webstorm, and when I open it from there, it looks as intended. When I then copy over to the View in Visual Studio all of the Form controls are a mess.
Even if I directly copy everything from Webstorm into the _layout.cshtml, leaving only the script and style links (and RenderBody();) it's still completely off.
The Form itself is just copied from getbootstrap.com so it should be just fine. I have no clue what the issue could be, I hope someone has an idea.
Link so you can see the issue: https://imgur.com/a/bxFrr3P
Markup from Webstorm:
<div id="wrapper" >
<div id="content-wrapper" class="d-flex flex-column ">
<!-- Main Content -->
<div id="content" style="width: 100%;">
<hr>
<div class="container-fluid">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Page Title</h1>
</div>
<div class="col-xl col-md mb-4 " >
<div class="card shadow h-100 py-2 card-background" >
<div class="card-body" style="padding: 0px;">
<div class="box-part text-center mt-2 mr-2 mb-2 ml-2 m-3">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Sounds like bootstrap isn't loading.
I would reinstall bootstrap and/or check your package references.

Hiding login form when logged in

I have a form in my nav bar which includes a username and password textbox as well as a sign in button. When the user logs in I am trying to understand how I would hide the login form and show a profile button, I am wondering how may I come across doing it in ASP.NET? I am using Bootstrap, I know how to log the user in but I don't know how I would change it to show a profile button when the user is logged in.
Here is what I have so far in my MasterPage.Master source code:
<body role="document">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
The Web Forms way of doing this is to use a LoginView control.
<asp:LoginView id="LoginView1" runat="server">
<AnonymousTemplate>
<!-- this is displayed if no user is logged in -->
</AnonymousTemplate>
<LoggedInTemplate>
<!-- this is displayed once logged in. may wanna leave it empty -->
</LoggedInTemplate>
</asp:LoginView>

Selenium element Not selectable

I am having an issue with an element which works with a mouse click and there are some items from which one has to be selected but its unselectable is set to on.
whenever I try to select the elements
I get back an error
the element is not visible so may not be interacted with
But the element is visible
we are using a kendo UI multiselect
please help
The Html Code:-
<div class="k-multiselect-wrap k-floatwrap" unselectable="on">
<ul id="ProfileEditSharedModel_SelectedIndustrySectorIds_taglist" class="k-reset" unselectable="on" role="listbox">
<li class="k-button" unselectable="on">
<span unselectable="on">Sector 1</span>
<span class="k-icon k-delete" unselectable="on">delete</span>
</li>
</ul>
<input class="k-input" style="width: 25px;" accesskey="" role="listbox" aria-expanded="false" tabindex="0" aria-owns="ProfileEditSharedModel_SelectedIndustrySectorIds_taglist ProfileEditSharedModel_SelectedIndustrySectorIds_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-icon k-loading k-loading-hidden"></span>
</div>
<select id="ProfileEditSharedModel_SelectedIndustrySectorIds" class="bigselect" name="ProfileEditSharedModel.SelectedIndustrySectorIds" multiple="multiple" data-val-required="*" data-val="true" data-placeholder="Select Sectors..." data-role="multiselect" style="display: none;" aria-disabled="false" aria-readonly="false">
<option value="1">Sector 1</option>
<option value="2">Sector 2</option>
<option value="3">Sector 3</option>
</select>
Thanks in Advance
Try taking the element in a list first because it may be possible if you are finding element by classname (say), there may be multiple elements with the same classname. Selenium won't search further as it gets the first element by that identifier which may not be visible in your case. So please check that action is performed on the expected element.
I found a soloution using the JavascriptExecutor
It worked for me using:
((IJavaScriptExecutor)driver).ExecuteScript(String.Format("$('#{0}').data('kendoMultiSelect').value({1});", "ProfileEditSharedModel_SelectedIndustrySectorIds", 3,));
or
((IJavaScriptExecutor)driver).ExecuteScript(String.Format("$('#ProfileEditSharedModel_SelectedIndustrySectorIds').data('kendoMultiSelect').value([values]);", "ProfileEditSharedModel_SelectedIndustrySectorIds", 3,));
I was using a kendoMultiSelect there

Why aren't the navigation bar menu items displaying in the twitter.bootstrap.mvc4 package sample application?

I created an empty MVC4 web application project in VS2012. I then installed the http://www.nuget.org/packages/twitter.bootstrap.mvc4.sample/ nuget package. However when I run the sample application, I cannot see any of the navigation menu items in the navbar. I can only see the "Application Name" link. The other items ("Automatic Scaffolding", nested "Example Layouts" dropdown navigation menu) are hidden.
Do I need to modify the cshtml or less files in some way to get these items to display in the sample application?
I modified the cshtml markup in the _BootstrapLayout.basic.cshtml file to get the navigation bar items to display correctly. I used the fixed top navbar example from http://getbootstrap.com/examples/navbar-fixed-top/ as a guide.
Original (Not Working) Code:
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" title="change in _bootstrapLayout.basic.cshtml">Application Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
#Html.Navigation()
</ul>
</div>
</div>
</div>
</div>
New (Working) Code:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#Html.Navigation()
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Result:

Linq to xml - access deep element

In C# i need to access element that is nested in many other elements. I could write a query by naming all of elements but that would be very time consuming. Is there any easy way to do this or maybe some generator?
for example i have a xml:
<div id="list_offers">
<div class="container">
<div id="header">
<div class="row">
<div class="space-on-sides">
<div class="sixteen columns relative">
<div class="logo">
<a href="/">
<img src="/images/design_resp/design/logo_profesia.png" width="113" height="76" alt="PROFESIA.SK - práca, zamestnanie, ponuky práce, brigáda, voľné pracovné miesto" title="PROFESIA.SK - práca, zamestnanie, ponuky práce, brigáda, voľné pracovné miesto" />
</a>
</div>
<div class="right-panel">
<a class="login-company small red button nice radius right hide-on-phones margin-on-left" title="Vstup pre firmy" href="/login_person.php?action=company_login">Vstup pre firmy</a>
<a class="login-company small red button nice radius right show-on-phones margin-on-left" href="/login_person.php?action=company_login">Firmy</a>
<a rel="nofollow" id="login_modal" class="small gray button nice radius right" title="Prihláste sa do konta" href="/login_person.php?action=login">Prihlásiť</a>
<div class="search">
<div class="relative hide-on-phones">
<form name="fulltextsearch" id="fulltextsearch" action="/search.php" method="get" onsubmit="if(document.getElementById('search').value=='HÄľadanie') return false; return true;" class="nice" />
<input name="which_form" type="hidden" value="simple" />
<input name="tab_name" type="hidden" />
<input name="search_anywhere" type="text" id="search" placeholder="HÄľadanie" tabindex="1" class="input-text expand" />
<input name="submit_search_simple" type="image" src="/images/design_resp/design/blank.png" alt="HÄľadaĹĄ" class="ico search-nosprite" /></form>
</div>
<div class="show-on-phones">
<a title="HÄľadajte ponuky práce podÄľa rĂ´znych kritĂ©riĂ">
</a>
</div>
</div>
<div class="row-header-favorite">
<div class="header-favorite">
<a title="Moje vybrané pracovné ponuky" class="ico-shopping-cart-toppanel" rel="nofollow" href="/user_details.php?action=show_my_offers&ref_top_panel=157">0</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and i need access:
input name="tab_name" type="hidden"
You can use Linq to xml
var xDoc = XDocument.Load(pathToXmlFile); //XDocument.Parse(xmlstring);
var input = xDoc.Descendants("input")
.First(i=>(string)i.Attribute("name")=="tab_name");
XPath can be used too
var input = xDoc.XPathSelectElement("//input[#name='tab_name']");
If you need to access that element on server side, you'll need to add a runat attribute there (like this: runat="server"), to make it a server side control. I would strongly suggest making it a control of your page, then, so you can access it like any other variable. You would have to give it an ID, so at the very least you could fetch it through that property.
But! your problem seems to be more client side related, so I strongly, really strongly suggest you use jQuery instead. Get jQuery in your site, and it becomes as easy as:
$("input[name='tab_name']");
Or better yet, if you give it an ID:
$("#idYouGaveTotheField");

Categories

Resources