Selenium - Not able to Click Dynamically Visible Menu - selenium

I have a Menu which have li
(list) elements which gets enabled after you mouse-hover a particular label.
driver.get("www.snapdeal.com"); Actions actions = new Actions(driver);
actions.moveToElement(driver.findElement(By.id("loggedOutAccount"))).build().perform();
//Wait for 5 Secs
driver.findElement(By.className("accountLink")).click();// Here it's throwing Element not visible exception
This code is doing the mouse-hover properly but not able to click the "SignIn Link" Link. Though on manually checking the element is Visible
DOM Structure -
<div id="loggedOutAccount" class="hd-rvmp-logout">
<a class="signIn" href="javascript:void(0);">
<i class="iconHeader accountUser"></i>
<label class="my-account-lang"> My Account</label>
<i class="mar_2_left right-downArrow breadcrumbArrow-down"></i>
</a>
<div class="sdNavDropWrapper accDetails" style="display: none; z-index: 999;">
<ul class="positionAbsolute pull-right">
<li class="customLoggedInState">
<div class="left triangle"></div>
<div class="right triangle"></div>
<div>
<a class="accountLink" href="javascript:void(0);">Click here to sign in ></a>
</div>
</li>
<li class="stop-event">
<li class="stop-event">
<li class="stop-event">
<li class="stop-event">
<li class="stop-event">
</ul>
</div>
</div>

Please use xpath for both element like below :
driver.get("www.snapdeal.com");
Actions actions = new Actions(driver);
actions.moveToElement(driver.findElement(By.xpath("yourxpathhere"))).build().perform();
driver.findElement(By.xpath("yourxpathhere")).click();
I think class/Id repeating for other elements also for style purpose. so Xpath is better to find unique element.

Related

Trouble selecting a hidden menu item using SeleniumBasic for vba

I am having some trouble selecting a hidden menu item on a work webpage using SeleniumBasic for vba. I have tried to use WebDriver.Mouse.MouseTo to hover over each menu option so that I can select the object nested "beneath" it, but after the first hover the object cannot be found.
In the picture below I intend to navigate like this:
Pricing Admin
System Admin
Multi-PAG Upload
To do this, I have to hover over Pricing Admin and subsequently hover over System Admin so that menu appears to click on Multi-PAG Upload. I have successfully gotten the driver to hover over Pricing Admin which brings up first menu list with three items ending in System Admin. However, trying to FindElement() for System Admin so that I can hover on it has proven very difficult.
I tend get an object required error or an XPath selector invalid depending on the method that I attempt. I start having problems at Set systemAdmin =.
Any advice would be welcome!
Public Sub SeleniumTest()
Dim driver As New WebDriver
'open chrome to site
driver.start "chrome"
driver.Get "http://www.website.net"
'login
driver.FindElementByName("j_username").SendKeys ("user")
driver.FindElementByName("j_password").SendKeys ("pass")
driver.FindElementById("submit_button").Click
'hover over Pricing Admin
Dim pricingAdmin As WebElement
Set pricingAdmin = driver.FindElementById("prcngAdmMnuFrm:prcngAdmMnu")
driver.Mouse.MoveTo pricingAdmin
Dim systemAdmin As WebElement
'neither selection method below works properly
' Set systemAdmin = driver.FindElementByXPath("//*[contains(text(),'System Admin')]")
' Set systemAdmin = driver.FindElementByXPath("//div[#id='prcngAdmMnuFrm:prcngAdmMnu']/div/div/ul/li/ul/li[3]/ul/li[4]/a/span/span")
driver.Mouse.MoveTo systemAdmin
Dim multiPagUpload As WebElement
' Set multiPagUpload = driver.FindElement("??")
multiPagUpload.Click
'closes browser window
driver.Quit
End Sub
Here is the (abridged) HTML for the site. I trimmed out a bit of the lists for simplicity's sake but if it's actually necessary (for using javascript, etc) let me know and I can pop more in.
<div id="prcngAdmMnuFrm:prcngAdmMnu" style="">
<div class="ui-widget ui-widget-content wijmo-wijmenu ui-corner-all ui-helper-clearfix wijmo-wijmenu-horizontal" aria-activedescendant="ui-active-menuitem" role="menubar">
<div class="scrollcontainer checkablesupport">
<ul style="display: block;" class="wijmo-wijmenu-list ui-helper-reset" tabindex="0">
<li role="menuitem" class="ui-widget wijmo-wijmenu-item ui-state-default ui-corner-all wijmo-wijmenu-parent" aria-haspopup="true" style="">
<a href="#" class="wijmo-wijmenu-link ui-corner-all" id="">
<span class="wijmo-wijmenu-text">
<span class="wijmo-wijmenu-text">Pricing Admin</span>
</span>
<span class="ui-icon ui-icon-triangle-1-s"></span>
</a>
<ul class="wijmo-wijmenu-list ui-widget-content ui-corner-all ui-helper-clearfix wijmo-wijmenu-child" style="display: none; left: 0px; top: 38px; position: absolute; list-style-type: none;" aria-hidden="true">
<li role="menuitem" class="ui-widget wijmo-wijmenu-item ui-state-default ui-corner-all wijmo-wijmenu-parent" aria-haspopup="true" style="">
<a href="#" class="wijmo-wijmenu-link ui-corner-all ui-state-focus">
<span class="wijmo-wijmenu-text">
<span class="wijmo-wijmenu-text">System Admin</span>
</span>
<span class="ui-icon ui-icon-triangle-1-e"></span>
</a>
<ul class="wijmo-wijmenu-list ui-widget-content ui-corner-all ui-helper-clearfix wijmo-wijmenu-child" style="display: none; left: 215px; top: -1px; position: absolute; list-style-type: none;" aria-hidden="true">
<li role="menuitem" class="ui-widget wijmo-wijmenu-item ui-state-default ui-corner-all">
<a onclick="showProcessingMessage('Loading');;var self = this; setTimeout(function() { var f = function(opt){ice.ace.ab(ice.ace.extendAjaxArgs({"source":"prcngAdmMnuFrm:menu_pad_sa_multi","execute":'#all',"render":'#all',"event":"activate"}, opt));}; f({node:self});}, 10);" style="cursor:pointer;" class="wijmo-wijmenu-link ui-corner-all">
<span class="wijmo-wijmenu-text">
<span class="wijmo-wijmenu-text">Multi-PAG Upload</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var widget_prcngAdmMnuFrm_prcngAdmMnu = ice.ace.create("Menubar", ["prcngAdmMnuFrm:prcngAdmMnu", {
"autoSubmenuDisplay": true,
"direction": "auto",
"animation": {
"animated": "fade",
"duration": 400
}
}]);
</script>
</div>
If I've left anything out that you need to troubleshoot, please let me know!
The xpath which is used in the code is not correct. my suggesting to find the anchor element and move the mouse over.
# System Admin Menu
'Hover over Pricing Admin
Dim systemAdmin As WebElement
Set systemAdmin = driver.FindElementByXPath("//a[.//span[contains(.,'System Admin')]]")
driver.Mouse.MoveTo pricingAdmin
If the mouse hover does not work, we can still try to handle the menu by clicking on the anchor element and then sendkeys (keys.Arrow_Right)
#Multi-PAG Upload
Dim multiPagUpload As WebElement
Set multiPagUpload = driver.FindElementByXPath("//a[.//span[contains(.,'Multi-PAG Upload')]]")
multiPagUpload.Click

change class of glyphicon when nav-item is open

I am using bootstrap menu on a web page.
my menu list looks something like this:
<li><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">main item
<span class="pull-left glyph-btn-menu">
<em class="glyphicon glyphicon-menu-down"></em>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
sub item1<br>
sub item2<br>
sub item2<br>
</div>
</li>
I want glyphicon symbol to change to class glyphicon-menu-up when nav-link is clicked and submenu items open and then again to change back to glyphicon-menu-down when nav-item is closed or when a different nav-item is clicked.
What would be the best way to acheive that
So this is my solution.
I gave the parent ul the an id value: id="theme"
bootstrap adds the class open to an open li so I check to see if any li have the class open, remove and add glyphicon classes as needed
$('#theme li').click(function () {
if($(this).hasClass('open')){
//alert('aaa');
$(this).children('a').children('span').children('em').removeClass('glyphicon-menu-up');
$(this).children('a').children('span').children('em').addClass('glyphicon-menu-down');
} else {
$(this).children('a').children('span').children('em').removeClass('glyphicon-menu-down');
$(this).children('a').children('span').children('em').addClass('glyphicon-menu-up');
}
});

Web scraping Linkedin Job posts using Python, Selenium & Phantomjs

Some LinkedIn job posts contain a see more button that expands the whole job description:
https://www.linkedin.com/jobs/view/401243784/?refId=3024203031501300167509&trk=d_flagship3_search_srp_jobs
I tried to expand it using the element.click() but the source I get after expansion contains some placeholder divs instead of the original div. How, can I scrap those hidden texts.
This is what I get from driver.page_source
<div class="jobs-ghost-placeholder jobs-ghost-placeholder--medium jobs-ghost-placeholder--thin mb2"></div>
<div class="jobs-ghost-placeholder jobs-ghost-placeholder--x-small jobs-ghost-placeholder--thin mb2"></div>
<div class="jobs-ghost-placeholder jobs-ghost-placeholder--small jobs-ghost-placeholder--thin"></div>
Instead of the source I get from chrome inspect:
<div id="ember7189" class="jobs-description-details pt5 ember-view"> <h3 class="jobs-box__sub-title js-formatted-exp-title">Seniority Level</h3>
<p class="jobs-box__body js-formatted-exp-body">Associate</p>
<!---->
<h3 class="jobs-box__sub-title js-formatted-industries-title">Industry</h3>
<ul class="jobs-box__list jobs-description-details__list js-formatted-industries-list">
<li class="jobs-box__list-item jobs-description-details__list-item">Real Estate</li>
<li class="jobs-box__list-item jobs-description-details__list-item">Information Technology and Services</li>
</ul>
<h3 class="jobs-box__sub-title js-formatted-employment-status-title">Employment Type</h3>
<p class="jobs-box__body js-formatted-employment-status-body">Full-time</p>
<h3 class="jobs-box__sub-title js-formatted-job-functions-title">Job Functions</h3>
<ul class="jobs-box__list jobs-description-details__list js-formatted-job-functions-list">
<li class="jobs-box__list-item jobs-description-details__list-item">Information Technology</li>
<li class="jobs-box__list-item jobs-description-details__list-item">Project Management</li>
<li class="jobs-box__list-item jobs-description-details__list-item">Product Management</li>
</ul>
</div>
I also tried different values for the wait WebDriverWait(driver, 3) but in vain.
code:
employment_type = wait.until(EC.presence_of_element_located(
(By.CSS_SELECTOR, 'div.jobs-description__details>div.jobs-description-details>p.js-formatted-employment-status-body'))).text
raises timeout exception as it only finds those jobs-ghost-placeholder instead of the described css_selector

Selenium WebDriver - Finding Elements using cssSelector and nth child

<ul>
<li class="active">
<a href="#">
<i class="fa fa-home"></i><br>
<span class="title">Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-rss-square"></i><br>
<span class="title">Posts</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-calendar"></i><br>
<span class="title">Events</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o"></i><br>
<span class="title">My Activity</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-edit"></i><br>
<span class="title">Assessments</span>
</a>
</li>
</ul>
I want to locate the respective span element. I want to check the order of the span elements using css selector. So when I use selenium IDE,I will verify it like below(using nth child concept).
verifyText | css=.title:nth(0) | Home
verifyText | css=.title:nth(1) | Posts
verifyText | css=.title:nth(2) | Events
verifyText | css=.title:nth(3) | My Activity
verifyText | css=.title:nth(4) | Assessments
But when I do the same thing in Selenium WebDriver I am not able to locate the elements with the order which I did using Selenium IDE.
Below are the codes that I used in WebDriver and it dint work.
driver.findElement(By.cssSelector(".title:nth(0)")); // to locate the "Home" element
driver.findElement(By.cssSelector(".title:nth-of-type(0)")); // to locate the "Home" element
driver.findElement(By.cssSelector(".title:nth-child(0)")); // to locate the "Home" element
Could anyone please help me.
You can generate the css-selector from ul like ul > li:nth-child(1) for home. See below:
driver.findElement(By.cssSelector("ul > li:nth-child(1)")); >> home
driver.findElement(By.cssSelector("ul > li:nth-child(2)")); >> posts
driver.findElement(By.cssSelector("ul > li:nth-child(3)")); >> events
also reachin span is the same:
driver.findElement(By.cssSelector("ul > li:nth-child(1) > a > span")); >> home
do you need css specifically? if not, you can also go for xpath, which imho reads better/clearer:
driver.findElement(By.xpath("(//span[#class='title'])[0]")); // home
driver.findElement(By.xpath("(//span[#class='title'])[1]")); // posts
...
<body>
<div class=parent>
<div></div>
<div></div>
<div></div>
</div>
</body>
If you already have the parent element and just need to find nth child
parent.find_element_by_css_selector('div:nth-child(2)')
would select the second div
We can write this way-
To get all the span text like-
Home
Posts
Events
My Activity
Assessments
Then driver.findElements(By.cssSelector("ul>li>a span:nth-child(3)"));
and
To get individual span text then you need to pass the index position in nth-child(index) method.driver.findElement(By.cssSelector("ul>li:nth-child(1)>a span")).getText();//Home driver.findElement(By.cssSelector("ul>li:nth-child(2)>a span")).getText();//Posts driver.findElement(By.cssSelector("ul>li:nth-child(3)>a span")).getText();//Events driver.findElement(By.cssSelector("ul>li:nth-child(4)>a span")).getText();//My Activity driver.findElement(By.cssSelector("ul>li:nth-child(5)>a span")).getText();//Assessments For more details please visit- CSS Selector in Details
driver.find_element_by_css_selector('ul>li:nth-of-type(1)>a>')

Locating element in a pagination bar

The button in the code "AS PDF" ,As excel" are wrapped in the button Export and the export button is embedded within a pagination toolbar
I am unable to locate this element in webdriver
tried
"//span[text()='As PDF']"
Still i see error unable to locate the element
<li class="leaf">
<button id="export" class="button capsule mutton up last over">
<span class="wrap">
Export
<span class="icon"/>
<span class="indicator"/>
</span>
</button>
</li>
ul id="menuList">
<li id="menuList_simpleAction.Report.exportReport" class="leaf">
<p class="wrap button">
<span class="icon"/>
<!--Item text goes here-->
As PDF
</p>
</li>
<li id="menuList_simpleAction.Report.exportReport" class="leaf">
<p class="wrap button">
<span class="icon"/>
<!--Item text goes here-->
As Excel
</p>
Please help
If you are using java code then you can use
driver.findElement(By.linkText("As PDF"));
or you can get all the icons using
List<WebElement> list = driver.findElements(By.xpath("//span[#class='icon']"));
for(WebElement ele: list){
if(ele.getText().equals("As PDF")){
ele.click();
}
}
Hope this helps you.