Trying to pick value in the dropdown on form.
Current HTML looks like
<div class="listing-editor__input--half d--ib va--t">
<div aria-haspopup="true" tabindex="-1" class="dropdown form__text--select d--b dropdown--expanded" aria-expanded="true">
<div class="dropdown__selector dropdown__selector--select-tag dropdown__selector--select-tag--large">
<p data-et-name="category" class="tc--lg">
Select Subcategory (optional)
</p>
</div>
<div>
<ul class="dropdown__menu">
<li class="dropdown__menu__item"><a class="dropdown__link">Belts</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Glasses</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Gloves & Mittens</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Hair Accessories</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Hats</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Hosiery & Socks</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Key & Card Holders</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Laptop Cases</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Phone Cases</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Scarves & Wraps</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Sunglasses</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Tablet Cases</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Umbrellas</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">Watches</a></li>
<li class="dropdown__menu__item"><a class="dropdown__link">None</a></li>
</ul>
</div>
</div>
<p class="form__error-message" style="display: none;">
</p>
</div>
And im trying to pick by string "Phone"
Tried with
// select the drop down list
var education = driver.FindElementByCssSelector("#content > div > div > div:nth-child(2) > section:nth-child(4) > div > div.col-x24.col-l20 > div:nth-child(1) > div > div.dropdown__selector.dropdown__selector--select-tag.dropdown__selector--select-tag--large");
//create select element object
var selectElement = new SelectElement(education);
// select by text
selectElement.SelectByText("Phone");
Output
OpenQA.Selenium.Support.UI.UnexpectedTagNameException: 'Element should have been select but was div'
Edit>
SelectElement can be used only with HTML select tag. Steps to select the dropdown in HTML you provided:
click on dropdown to expand it
find and click on "option" element.
using (IWebDriver driver = new ChromeDriver())
{
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
IJavaScriptExecutor js = (IJavaScriptExecutor) driver;
driver.Navigate().GoToUrl("https://poshmark.com/create-listing");
driver.FindElement(By.Id("login_form_username_email")).SendKeys("username");
driver.FindElement(By.Id("login_form_password")).SendKeys("password");
driver.FindElement(By.TagName("button")).Click();
wait.Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("input[data-vv-name='title']"))).SendKeys("Title controled by t3cho");
driver.FindElement(By.CssSelector("[data-vv-name='originalPrice']")).SendKeys("22");
var categoryCombobox = driver.FindElement(By.XPath("//span[#data-et-name='category']/ancestor::div[contains(#class,'isting-editor__input--half')][1]"));
js.ExecuteScript("arguments[0].scrollIntoView(false)", categoryCombobox);
categoryCombobox.Click();
var category1 = driver.FindElement(By.LinkText("Accessories"));
js.ExecuteScript("arguments[0].scrollIntoView(false)", category1);
category1.Click();
var category2 = driver.FindElement(By.LinkText("Glasses"));
js.ExecuteScript("arguments[0].scrollIntoView(false)", category2);
category2.Click();
}
Download SeleniumExtras.WaitHelpers NuGet Package for ExpectedConditions.
Try this:
new SelectElement(driver.FindElement(By.Xpath("//ul[#class='dropdown__menu']"))).SelectByText("Phone Cases");
Related
I used this code with bootstrap 3, and it worked correctly, when clicking on the page, it appeared as active, but when switching to bootstrap 4, it no longer calls the active class, when I pass the page number inside the "for"
Any ideias how to resolve that?
<ul class="pagination">
<li class="page-item ">
#{
if (ViewBag.pageNumber> 1)
{
<a class="page-link" href="#Url.Action("Index", "Barcos", new { search= ViewBag.Search, pageNumber= ViewBag.pageNumber- 1 })">before</a>
}
else
{
<a class="page-link" href="#">
before
</a>
}
}
</li>
#{
var page = ViewBag.pageNumber;
for (var i = 1; i <= ViewBag.Count; i++)
{
<li #(page== i ? "class=page-item active" : "")>
<a class="page-link" href="#Url.Action("Index", "Barcos", new {search= ViewBag.Search, pageNumber= i})">#i</a>
</li>
}
}
<li>
#if (ViewBag.pageNumber< ViewBag.count)
{
<a class="page-link" href="#Url.Action("Index", "Barcos", new { Search= ViewBag.Search, pageNumber= ViewBag.pageNumber+ 1 })">Next</a>
}
else
{
<a class="page-link disabled" href="#">
Before
</a>
}
</li>
</ul>
You need class="page-item" on all list items, not just for your current page
Corrected bode below.
#for (var i = 1; i <= ViewBag.Count; i++)
{
var page = ViewBag.pageNumber;
string classes = "page-item";
if (page == i)
{
classes += " active";
}
<li class="#classes">
#Html.ActionLink(i.ToString(), "Index", "Barcos", new { search = ViewBag.Search, pageNumber = i }, new { #class = "page-link" })
</li>
}
This generates the following HTML
<ul class="pagination">
<li class="page-item ">
<a class="page-link" href="/Barcos/Index?pageNumber=1">before</a>
</li>
<li class="page-item">
<a class="page-link" href="/Barcos/Index?pageNumber=1">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="/Barcos/Index?pageNumber=2">2</a>
</li>
<li class="page-item">
<a class="page-link" href="/Barcos/Index?pageNumber=3">3</a>
</li>
<li>
<a class="page-link" href="/Barcos/Index?pageNumber=4">Next</a>
</li>
</ul>
<div id="welcome-menu" class="panelContainer" style="display: block;">
<ul>
<li>
About
<div class="modal hide" id="displayAbout">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>About</h3>
</div>
<form name="frmSelectEmployees" id="frmSelectEmployees" method="post" action="/index.php/communication/beaconAboutAjax" enctype="multipart/form-data">
<div class="modal-body">
<div id="companyInfo">
<ul>
<li>
<p>Company Name: OrangeHRM (Pvt) Ltd</p>
</li>
<li>
<p>Version: Orangehrm OS 3.3.1</p>
</li>
<li>
<p>Active Employees: 9</p>
</li>
<li>
<p>Employees Terminated: 0</p>
</li>
</ul>
</div>
</div></form>
</div></li>
<!-- <li></li> -->
<li>Logout</li>
</ul>
</div>
Any one knows how to select element with :
<li> Logout </li>.
I have tried following option :
[FindsBy(How = How.CssSelector, Using = "a[href*='/index.php/auth/logout']")]
Also tried link text and tag name. nothing is working. Anyone can help please? thanks
As per the HTML you have shared to identify the element you can use either of the following line of code :
linkText :
[FindsBy(How = How.LinkText, Using = "Logout")]
CssSelector :
[FindsBy(How = How.CssSelector, Using = "li > a[href='/index.php/auth/logout']")]
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()
HTML:
<li class="dropdown current-user" dropdown="" on-toggle="toggled(open)">
<a aria-expanded="false" aria-haspopup="true" href="" class="dropdown-toggle" dropdown-toggle="">
<img src="assets/images/avatar-1.jpg"alt="{{user.FirstName}}">
<span class="username">
{{user.FirstName}} <i class="ti-angle-down"> </i> </i>
</span>
</a>
</li>
<ul>
<li>
<a href="Account/LogOff" ng-href="Account/LogOff">
Log Out
</a>
</li>
</ul>
Now in my site, i need to click on link which has another sub links like profile, log out etc. how to find that super link and than click on sublink.
Try this
IJavaScriptExecutor js = driver as IJavaScriptExecutor;
//Scroll the element into view
string title = (string)js.ExecuteScript("return document.getElementsByTagName('a')[1].scrollIntoViewIfNeeded()");
//Now, execute findElement
driver.FindElement(By.XPath("//a[#href='']/following::a"));
I have the following HTML
<div id='cssmenu'>
<ul>
<li class= 'has-sub'>
<a href=store.aspx?id=dLYTWvt8EsHOq7Ps2wJA9A%3d%3d&digest=tNy7s/jOrynR4pvMVN6d6Q==><span>Armed Combat</span></a>
<ul>
<li class= 'has-sub'>
<a href=store.aspx?id=xEDEzZWDRkX8%2fbXoMX2pSQ%3d%3d&digest=tNy7s/jOrynR4pvMVN6d6Q==><span>Armed Combat 1-2</span></a>
<ul>
<li class= 'active'><a href=store.aspx?id=TxlSRrnSZ6HDgj%2b2ZSxRhg%3d%3d&digest=tNy7s/jOrynR4pvMVN6d6Q==><span>Dance -1</span></a></li>
<li class= 'active'><a href=store.aspx?id=Y7JxNAXSuG1T%2f0cpjQXSwA%3d%3d&digest=tNy7s/jOrynR4pvMVN6d6Q==><span>Dance - 2</span></a></li>
<li class= 'active'><a href=store.aspx?id=%2fcoJMcJTjWp3%2bPuimR5AhA%3d%3d&digest=tNy7s/jOrynR4pvMVN6d6Q==><span>Armed Combat 1-5</span></a></li>
</ul>
</li>
<li class= 'has-sub'>
<a href=store.aspx?id=KC2g4igBzXisbsbKu%2fKrzw%3d%3d&digest=tNy7s/jOrynR4pvMVN6d6Q==><span>Armed Combat 1-3</span></a>
<ul>
<li class= 'active'><a href=store.aspx?id=8DCHnP%2b4KQVYDTGxVt9snQ%3d%3d&digest=tNy7s/jOrynR4pvMVN6d6Q==><span>Death -1</span></a></li>
<li class= 'active'><a href=store.aspx?id=nGEm4rbNMQ%2bQfyO44ECmpA%3d%3d&digest=tNy7s/jOrynR4pvMVN6d6Q==><span>Death - 1</span></a></li>
</ul>
</li>
<li class= 'has-sub'><a href=store.aspx?id=feki%2bXDs66obnO1e2dxHWg%3d%3d&digest=tNy7s/jOrynR4pvMVN6d6Q==><span>Armed Combat 1-4</span></a></li>
<li class= 'has-sub'><a href=store.aspx?id=5O394Lww9oxD1vHbIY7LWw%3d%3d&digest=tNy7s/jOrynR4pvMVN6d6Q==><span>Armed Combat 1-6</span></a></li>
</ul>
</li>
<li class= 'active'><a href=store.aspx?id=RIe63RBggHzj76SUwDHKMg%3d%3d&digest=tNy7s/jOrynR4pvMVN6d6Q==><span>Dance</span></a></li>
</ul>
</div>
And in reqid
var reqid = "<%=Request["id"]%>";
In reqid I will get urlencoded based on menu selection
My jQuery code here
$(function () {
var str = $("#cssmenu").find('li').find('a').attr('href');
if ($(str).has(reqid)) {
var str2 = $("#cssmenu").find('li').find('a').text();
$('#selectedmenuitem').html(str2);
}
});
If the href attribute encoded url contains selected menu item encodedurl i want to get the matched url .text() to the #selectedmenuitem label id.
I checked with contains, am not getting. Please suggest me what are other possibilities for this.
use indexOf function of Javascript
http://www.w3schools.com/jsref/jsref_indexof.asp
Use following jquery code
$(function () {
var str2= $("#cssmenu").find("li").find("a[href*='" + reqid + "']").text();
$('#selectedmenuitem').html(str2);
});