new to Watir and trying to select items in an unordered JS list. I'm using watir-classic and testing in IE with Ruby v1.9.3p392.
<div id="ctl00_content" style="text-align: left; background: #fff;">
<script type="text/javascript"> … </script>
<div id="ctl00_breadCrumb" class="navBar"> … </div>
<div id="ctl00_menuBarUpdatePanel">
<div id="ctl00_menuBar" class="menuBar">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<div class="menu">
<ul>
<div id="ctl00_MenuBarButtons" class="menuBarButtons">
<li id="ctl00_AddMenu" style="display:inline;"> … </li>
<li id="ctl00_ChangeCustodyMenu" style="display:inline;">
Change Custody
<ul>
<li id="ctl00_CheckInMenuItem" style="display:inline;">
<li id="ctl00_CheckOutMenuItem" style="display:inline;">
<li id="ctl00_ReceiveMenuItem" style="display:inline;">
<li id="ctl00_ReturnMenuItem" style="display:inline;">
<li id="ctl00_DropOffMenuItem" style="display:inline;">
<a onclick="window.location = '/WebSite/PropertyItems.aspx?action=dropOff'; return false;" href="">
Drop-off
I'm trying to select Drop-off (the last item in the list) and have attempted using the following:
browser.ul(:id,"ctl00_ChangeCustodyMenu").li(:text,"Drop-off").click
browser.div(:id, "ctl00_MenuBarButtons").li(:index, 1).link(:index, 4).click
... but then read that I can't select items in Watir unless I can see it. I started to test with fire_event("onclick") with the following tip: "I firstly need to fire_event("onmouseover") which selects the item then fire_event("onclick")."
So I try this:
browser.li(:id,"ctl00_ChangeCustodyMenu").fire_event("onclick")
This method will flash the 'Change Custody' menu, but not drop down the list with the 'Drop-down' item. Hence, I am not able to select the item on the list. The Change Custody list will drop once the user hovers over the menu in normal operation.
How do I select the JS drop-down list and select an item in an unordered list? Do I need to use webdriver's select_list, or am I just missing something? Watir-classic seems pretty straight forward and should handle this, but maybe the JS structure is tricky here.
Thanks for the help!
Shannon
Related
I am looking to make a drop down for some of the option in the main navigation menu, but nothing I try seems to work. Current HTML without drop down:
<center>
<li style="font-weight: normal;"><b>Home</b></li>
<br />
<li style="font-weight: normal;"><b>About</b></li>
<br />
<li><b>Contact</b><br /></li>
<li style="font-weight: normal;"><b>Slimming Recipes</b></li>
<br />
<li style="font-weight: normal;"><b>Meal Plans</b></li>
<li style="font-weight: normal;"><b>Lifestyle & Reviews</b></li>
</center>
To create a dropdown menu in HTML, follow this form
Navigation Menu
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Navigation Menu with Dropdown Menu
<ul>
<li>
Dropdown Menu
<ul>
<li>Dropdown Item</li>
<li>Dropdown Item</li>
<li>Dropdown Item</li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
</ul>
To create a dropdown you need to add css and edit your code.
You can Check here - https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
Assume that following HTML snippet exists somewhere in the <body> element of a web page:
<div id="root_1000" class="root bacon">
<ul>
<li id="item_1234567" class="active">
<div class="userpost author_4281">
<div>This text should be visible.<div>
</div>
<ul><li>Some item</li></ul>
</li>
</ul>
</div>
<div id="root_2000" class="root bacon">
<ul>
<li id="item_8675309" class="active">
<div class="userpost author_3333">
<div>
This text, and as the DIV.root that contains it, should be hidden.
<div>
</div>
<ul><li>Another item</li></ul>
</li>
</ul>
</div>
<div id="root_3000" class="root bacon">
<ul>
<li id="item_7654321" class="active">
<div class="userpost author_9877">
<div>This text should be visible.<div>
</div>
<ul><li>Yet another item</li></ul>
</li>
</ul>
</div>
So here's my question: what would the XPath syntax be to select the div.root that contains info posted by author #3333 (i.e. div[class~="author_3333"])?
The following XPath statement will properly match the div.userpost element associated with author #3333 that I want to hide, but does not include the <ul><li>Another item</li></ul> node, which I also need to hide:
.//div[contains(#class, 'author_3333')]
What I want to do is select the closest div.root ancestor associated with the node that my XPath statement matches. Any help would be greatly appreciated... thanks in advance!
you need to get the parent node that has the second div as its child, something like:
//div[.//div[contains(#class, "author_3333")]]
You can use this XPath expression:
.//div[contains(#class, 'author_3333')]/ancestor::div[contains(#class,'root')][1]
Output is:
<div id="root_2000" class="root bacon">
<ul>
<li id="item_8675309" class="active">
<div class="userpost author_3333">
<div>
This text, and as the DIV.root that contains it, should be hidden.
</div>
</div>
<ul>
<li>Another item</li>
</ul>
</li>
</ul>
</div>
I need help. I have been trying to automate selecting an item from a drop down menu. I have try many ways but I cannot get it to work. I using Selenium 2.39 firefox. The sample application is on https://www.salesforce.com/form/signup/freetrial-sales.jsp?d=70130000000EqoP&internal=true.
Any help will be appreciated. Thanks
The Xpath is: //*[#id='form-container']/ul/li[14]/div/div[2]/a/span[1]
Surrounded by :
<div id="form-container" class="clearfix wide-fields style-placeholder">
<div id="globalErrorMessage" style="display:none"> Please fill out the highlighted fields below </div>
<ul class="clearfix vertical form-ul">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-hidden">
<li class=" type-text">
<li class=" type-text">
<li class=" type-text">
<li class=" type-text">
<li class=" type-text">
<li class=" type-text">
<li class=" type-select">
<div class="control-container error">
<div class="label">
<div class="field">
<select id="CompanyEmployees" class="selectBox" name="CompanyEmployees" style="display: none;">
<a class="selectBox selectBox-dropdown" style="width: 296px; display: inline-block; -moz-user-select: none; "title="" tabindex="0">
<span class="selectBox-label" style="width: 262px;">Employees</span>
<span class="selectBox-arrow" />
</a>
<span class="form-field-error show-form-field-error">Select the number of employees</span>
</div>
<div class="info">
</div>
</li>
<li class=" type-hidden">
<li class=" type-hidden">
I have already tried using Select class but does not work.
Select select = new Select(driver.findElement(By.name("CompanyEmployees")));
select.selectByValue("250");
I get the following error:
....
Caused by: org.openqa.selenium.remote.ErrorHandler$UnknownServerException: Element is not currently visible and so may not be interacted with
...
There are 2 points for you to be noted:
It's not a dropdown control as such. You might have to go through some basic HTML sources on how to achieve a DropDown scenario without using the actual DropDown control.
Escaping sequence (notice inverted commas inside the XPath expression)
Below is C# code. I'm sure you can figure out the code in the language of your choice.
Driver.FindElement(By.XPath(#"(//*[#id=""form-container""])/ul/li[14]/div/div[2]/a/span[1]")).Click(); //Click on the DropDown
Driver.FindElement(By.XPath(#"/html/body/ul[1]/li[4]/a")).Click(); //selects "21 - 100 Employees"
Please try the following code for "employees" selection:
public void selectEmployees(){
WebDriver driver = new FirefoxDriver();
WebDriverWait driverWait = new WebDriverWait(driver, 30);
driver.get("https://www.salesforce.com/form/signup/freetrial-sales.jsp?d=70130000000EqoP&internal=true");
// Wait for visibility of Employees combobox and click on it to open drop-down list
// Combo-box is selected by css locator which searches for ".selectBox" element that are preceded by "#CompanyEmployees" element
WebElement emplyeesCombobox = driverWait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#CompanyEmployees ~ .selectBox")));
emplyeesCombobox.click();
//Wait for visibility of required drop-down list item ("6 - 20 employees" in this example) and select it by clicking
// Drop-down list item is selected by XPath locator which searches for "a" element with "6 - 20 employees" text
WebElement itemToSelect = driverWait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//a[text()='6 - 20 employees']")));
itemToSelect.click();
}
Hope it will help.
I am using Capybara,Rspec and Ruby for my development. I am having drop down list which is populated with values with dynamic ids because of which I am not able locate the element correctly. Here is HTML code. I tried to get the solution from this site as well as by googling. But I couldn't get the correct solution
when I am doing the firebug I am getting Xpath as //[#id='select2-result-label-8'] and every time I am getting new id in the last meaning, next time if I go I will get it as //[#id='select2-result-label-11']. How to resolve this issue. I am having similar issues with my group of check box also. Hope this solution will help there also
<ul id="Values" class="check" role="listbox">
<li class="Reports " role="presentation">
<div id="select2-result-label-3" class="history" role="option">
<span class="same"/>
Add New
</div>
</li>
<li class="Reports-highlighted" role="presentation">
<div id="select2-result-label-4" class="history" role="option">
<span class="same"/>
Multiple
</div>
</li>
<li class="Reports" role="presentation">
<div id="select2-result-label-5" class="history" role="option">
<span class="same"/>
Last
</div>
</li>
</ul>
using prototype, I am trying to hide the specific children element of a particular element.
From the html below, I want to hide child ul and all of its element:
<ul>
<li id="category_1" class="active">
<strong id="img_1" class="cat_plus"></strong>
<input type="checkbox" name="cat_id[]" value="1">
<ul>
<li id="category_3">
<strong id="img_1" class="cat_plus"></strong>
<input type="checkbox" name="cat_id[]" value="3">Root Catalog
</li>
</ul>
<li>
</ul>
i tried:
$('category_1 ul').hide();
I think this is what you are looking for.
$$('#category_1 ul').first().hide();
See fiddle
I hope it helps.