I'm some issues launching certain menu items.
The menu DOM below contains <ul> items:
Uploads
Reports
Downloads
Admin
Here's a DOM sample of the menu structure:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="TheMenu">
<ul class="rmRootGroup rmHorizontal">
<li class="rmItem rmSelected" style="z-index: 0;">
<span class="rmLink rmRootLink rmExpand rmExpandDown" tabindex="0">Bal Sheet)</span><div class="rmSlide" style="display: none; visibility: visible; width: 141px; height: 126px; left: 0px; top: 28px; z-index: 9; overflow: hidden;">
<ul class="rmVertical rmGroup rmLevel1" style="top: -126px; left: 0px; display: block; visibility: visible; transition: none;">
<li class="rmItem rmFirst" style="z-index: 0;">
<span class="rmLink rmExpand rmExpandRight" " style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Uploads</span></span><div class="rmSlide" style="display: none; visibility: visible; width: 144px; height: 126px; left: 135px; top: 0px; z-index: 5; overflow: hidden;">
<ul class="rmVertical rmGroup rmLevel2">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0" ><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Upload List</span></span></li>
<li class="rmItem ">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" ><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Adj123</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel3">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">BLAH Adjustment This</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">BLAH2 Adjustment That</span></span></li>
</ul>
</div>
</li>
<li class="rmItem ">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 72px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Targets</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel3">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Target1 BLAH1</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Target2 BLAH2</span></span></li>
</ul>
</div>
</li>
<li class="rmItem rmLast">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 72px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Actuals</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel3">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Actual This</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Actual That</span></span></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="rmItem ">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Reports</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel2">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">REPT 1</span></span></li>
<li class="rmItem "><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">REPT 2</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">REPT 2</span></span></li>
</ul>
</div>
</li>
<li class="rmItem ">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Administration</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel2">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Sub123 List Admin</span></span></li>
<li class="rmItem "><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">THIS MENU</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">THAT MENU</span></span></li>
</ul>
</div>
</li>
<li class="rmItem rmLast">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Downloads</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel2">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">FIRST DOWNLOAD THING</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">SECOND DOWNLOAD THING</span></span></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
And my Protractor script below...
FYI: My first elem.click() does work, and successfully enters the .Then() section; and the dropdown menu opens.
Now, I can use '.rmItem .rmFirst' to open the "Uploads" sub menu, but what if I want to open the "Reports" menu ? Which selector should I use ? 'ul li:nth-child(2)' only goes to the siblings which goes back to the top menu bar again (not what I want).
this.launchUploadsMenu = function () {
var sel = '#RadMenu1 > ul > li:nth-child(3)';
var elem = element(by.css(sel));
elem.click().then(function () {
//var elem2 = element.all(by.cssContainingText('.rmLink', 'Uploads')).first(); // THIS STILL NOT WORKING
var elem2 = element.all(by.css('.rmItem .rmFirst')); //
elem2.click();
});
}
Help is appreciated.
regards,
Bob
You want to use first() method in order to get first element from the array. But element() returns single element, you should use element.all() to return ElementArrayFinder and then you can apply first() .
Instead of using cssContaingText I would prefer to create some structure of levels in your menu and then just walking inside each level.
Also, why have you decided to waitForAngular ? Protractor is waiting by default, I don't understand why you use browser.sleep in that case. Most thing you can achive by chaning then promises.
Can you specify on which element exactly you want to click ?
EDIT:
Also, there is no such element with rmLink class and containing text Adjust This, I think that you should look for rmText.
Due to the fact that we have encountered so many road blocks traversing the DOM in this environment, we decided to go with a combination of browser.actions() and 'cssByText()` instead.
It's not ideal, but it does work.
For example, this will accomplish the menu clicks that are required to get to the required Angular page (fyi: the nav menus are NOT an Angular application; only the final landing page is where the Angular app loads within an iframe element).
var sel = '#RadMenu1 > ul > li:nth-child(3)'; // top-level menu
var elem = element(by.css(sel));
elem.click().then(function () {
var elem2 = element(by.css(sel));
browser.sleep(2000);
// OPENS SUBMENUS
browser.actions()
.mouseMove(elem2, { x: 25, y: 50 }) // an offset relative to the top-left corner of elem2
.click()
.perform()
.then(function () {
browser.sleep(1000);
browser.actions()
.mouseMove({ x: 150, y: 20 }) // opens next menu option
.click()
.perform()
.then(function () {
var elem = element(by.cssContainingText('.rmText', 'Menu Item To Click'));
elem.click();
});
});
});
}
Related
<nav class="navbar navbar-expand-lg">
<img class="nav-img" src="images/amd-white.svg" alt="">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="#navbarSupportedContent">
<a class="navbar-brand" href=""></a>
<div class="nav2"></div>
<ul class="navbar-nav">
<div class="nav2">
<li class="nav-item">
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
PRODUCT
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</li>
</div>
<div class="nav2">
<li class="nav-item">
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
SOLUTION
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</div>
<div class="nav2">
<li class="nav-item">
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
SHOP
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</div>
<div class="nav2">
<li class="nav-item">
<div class="driver">DRIVERS & SUPPORT</div>
</li>
</div>
</ul>
</div>
What I understood from your question, You can add these bg classes to toggler button and the icon span to change its color, like this:
<button class="navbar-toggler ml-auto bg-danger"
type="button"
data-toggle="collapse"
data-target="#nav1">
<span class="navbar-toggler-icon my-toggler bg-info">
</span>
</button>
I prepared simple navbar menu with BS 4 documents. The toggle menu displays vertical when I clicked. Is it possible make horizontal with BS?
This is my navbar and codepen.io: vertical toggle
body {
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="nav-brand" href="#">
<img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"</span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">ABOUT<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link " href="#">PORTFOLIO</a>
<a class="nav-item nav-link " href="#">CONTACT</a>
</div>
</div>
</nav>
This is as I want but I couldn't figured out with source code: horizontal toggle
It's fairly simple to do that. Bootstrap has flex class options, so there's no need to create your own code.
Simply change:
<div class="navbar-nav ml-auto">
To:
<div class="navbar-nav flex-row ml-md-auto d-md-flex">
Also make sure to add p-2 to your nav-item that will give you some padding space between the elements.
That makes your code look like this:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="nav-brand" href="#">
<img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"</span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav flex-row ml-md-auto d-md-flex">
<a class="nav-item nav-link p-2 active" href="#">ABOUT<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link p-2" href="#">PORTFOLIO</a>
<a class="nav-item nav-link p-2" href="#">CONTACT</a>
</div>
</div>
</nav>
i am unable to toggle content right to left beside icon can any one can assist me
<div class="container=fluid">
<div class="pos-f-t ">
<div class="collapse " id="navbarToggleExternalContent">
<ul class="navbar-nav flex-row-reverse ">
<li class="nav-item">
<a class="nav-link">Right Link 1</a>
</li>
<li class="navbar-item">
<a class="nav-link">Right Link 2</a>
</li>
</ul>
</div>
<nav class="navbar navbar-dark bg-dark ">
<button class="navbar-toggler ml-auto " type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
</nav>
</div>
</div>
html:
<nav class="navbar navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="">demo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-dark" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
css:
.navbar-collapse {
position: absolute;
top: 54px;
left: 100%;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 100%;
transition: all 0.4s ease;
display: block;
}
.navbar-collapse.collapsing {
height: auto !important;
margin-left: 50%;
left: 50%;
transition: all 0.2s ease;
}
.navbar-collapse.show {
left: 0;
}
test it: https://www.codeply.com/go/yggim0FPTG
I was creating a bootstrap website as a challenge when I encountered a problem which I can't find a fix for.
In the jumbotron I have a form with a textfield and a submit button.
The textfield also has an addon (input-group-addon)
Without any images The addon is placed perfectly where it should be but When I add an image the Addon moves away a pixel from the text field.
.bg {
background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg");
text-align: center;
color: white;
}
.jumbotron form {
text-align: none;
}
.jumbotron hr {
background-color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<body style="position: relative;" data-spy="scroll" data-target="#navBar">
<nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My App</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron bg">
<h1 class="display-3">My Amazing App!</h1>
<p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p>
<hr class="my-4">
<p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p>
<form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">#</div>
<input style="width: 350px;" type="email" class="form-control" id="email" placeholder="Your Email">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
Bootstrap 4, still in beta release, applies a highly-transparent border for the .form-control class. Your example highlights how this may produce unexpected results when using an input element against a container with a dark background. Bootstrap 4's default style is this:
.form-control {
border-color: rgba(0, 0, 0, 0.15);
}
That's a black border with near-maximum transparency. Rendering that over a dark background will not achieve the expected look, as you've discovered.
I've appended a custom class to override Bootstrap 4's default border-color for the .form-control class. Applied to your example, it's in effect only when the class .bg has also been applied to the jumbotron.
.bg .form-control.solid-gray-border {
border-color: rgb(222,222,222);
}
.bg {
background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg");
text-align: center;
color: white;
}
.jumbotron form {
text-align: none;
}
.jumbotron hr {
background-color: white;
}
.bg .form-control.solid-gray-border {
border-color: rgb(222,222,222);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<body style="position: relative;" data-spy="scroll" data-target="#navBar">
<nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My App</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron bg">
<h1 class="display-3">My Amazing App!</h1>
<p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p>
<hr class="my-4">
<p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p>
<form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">#</div>
<input style="width: 350px;" type="email" class="form-control solid-gray-border" id="email" placeholder="Your Email">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
I'm a newbie to web app automation testing. I'm using watir-webdriver to automate our functional testing with an application. In the process we need to click on a drop down and select a value from the drop down. The problem i'm facing is that i'm able to click on the elements that are visible in the drop-down however, when i tried clicking on an item which is just below the visible item it sets the default value to the drop down and exit without any error.
My HTML extract:
<td width="50%">
<strong>Drop Down Header</strong>
<br />
<div style="POSITION: relative; TOP: 0px">
<div class="SelectRight">Select Item...</div>
<div style="Z-INDEX: 998; WIDTH: 717px; DISPLAY: none; TOP: 639px; LEFT: 21px" class="SelectTarget" id="currentSelectedOptions"
originalparent="null">
<iframe style="POSITION: absolute; FILTER: alpha(opacity=0); WIDTH: 100%; DISPLAY: block; HEIGHT: 150%; TOP: 0px; LEFT: 0px"
marginheight="0" src="javascript:'';" frameborder="0" marginwidth="0" scrolling="no" align="bottom"></iframe>
<ul style="Z-INDEX: 998; WIDTH: 684px; HEIGHT: 200px" class="SelectOptions">
<li>
<a id="option_0" href="javascript:void(0)">Select Item...</a>
</li>
<li>
<a id="option_1" href="javascript:void(0)">Item 1</a>
</li>
<li>
<a id="option_2" href="javascript:void(0)">Item 2</a>
</li>
<li>
<a id="option_3" href="javascript:void(0)">Item 3</a>
</li>
<li>
<a id="option_4" href="javascript:void(0)">Item 4</a>
</li>
<li>
<a id="option_5" href="javascript:void(0)">Item 5</a>
</li>
<li>
<a id="option_6" href="javascript:void(0)">Item 6</a>
</li>
<li>
<a id="option_7" href="javascript:void(0)">Item 7</a>
</li>
<li>
<a id="option_8" href="javascript:void(0)">Item 8</a>
</li>
<li>
<a id="option_9" href="javascript:void(0)">Item 9</a>
</li>
<li>
<a id="option_10" href="javascript:void(0)">Item 10</a>
</li>
<li>
<a id="option_11" href="javascript:void(0)">Item 11</a>
</li>
</ul>
</div>
</div>
<select id="dropDownItem" class="Shidden" name="dropDownItem" rows="3" wrap="soft">
<option selected="selected" value="-1:::">Select Item...</option>
<option value="291:::Item 1">Item 1</option>
<option value="310:::Item 2">Item 2</option>
<option value="350:::Item 3">Item 3</option>
<option value="100:::Item 4">Item 4</option>
<option value="102:::Item 5">Item 5</option>
<option value="103:::Item 6">Item 6</option>
<option value="104:::Item 7">Item 7</option>
<option value="105:::Item 8">Item 8</option>
<option value="106:::Item 9">Item 9</option>
<option value="108:::Item 10">Item 10</option>
<option value="109:::Item 11">Item 11</option>
</select>
</td>
My Watir Code:
contentframe = b.frame(:id => 'contentframe')
contentframe.element(:xpath => "//td[contains(.,'Drop Down Header') and ./div/div[#class='SelectRight']]").click
contentframe.element(:xpath => "//div[#id='currentSelectedOptions']/ul[#class='SelectOptions']/li/a[contains(.,'Item 9')]").click
Would be of help if someone can point me in the right direction to correct this
Thanks,
Ara
Its really weird, instead of
contentframe.element(:xpath => "//div[#id='currentSelectedOptions']/ul[#class='SelectOptions']/li/a[contains(.,'Item 9')]").click
i tried
contentframe.element(:xpath => "//div[#id='currentSelectedOptions']/ul[#class='SelectOptions']/li/a[contains(.,'Item 9')]").fire_event 'onclick'
and it worked!!!