Can't click with selenium on service console option of salesforce - selenium

i'm trying to automate Salesforce Service Console, but i'm having some troubles because the multiples iframes.
One thing i really need is to click on the option "Close all primary tabs", but everything i have tried is not working.
The weird thing is that although the click is done nothing happens, if i try to do a click on chrome inspector console using javascript the tabs are closed, also if i click manually the tabs are closed, but if is made this trought selenium/katalon although the click is done nothing happens.
I have discovered that the popup html source is not under an iframe but the render of the popup overlays a iframe which comes from the external page tab.
If i trick the webpage modifying the css with the inspector moving the popup more up, were there is not iframe, then the click is closing the tabs.
Also if i delete the iframe from the html, the click is closing the tabs.
So i understand that this could be the problem, but although i have tried switch to iframe still not working.
i'am using katalon to automate but also happens with selenium .
Can you help me?
code of the popup list
<div id="ext-comp-1031"
class="x-menu x-menu-floating x-layer"
style="position: absolute; z-index: 15000; visibility: visible; left: 1086px; top: 124px;">
<a class="x-menu-focus"
href="#"
onclick="return false;"
tabindex="-1"
id="ext-gen173"/>
<ul class="x-menu-list"
id="ext-gen174"
style="height: 158px;">
<li id="x-menu-el-ext-comp-1106"
class="x-menu-list-item">
<a id="ext-comp-1106"
class="x-menu-item tab-scroller-menu-item "
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon hidden"
id="ext-gen526">
<span class="x-menu-item-text"
id="ext-gen527">
<div class="tabTitle">
<span class="tabText">External Page</span>
</div>
<img alt=""
src="/s.gif"
class="refresh-icon"
id="ext-gen538">
<div class="x-menu-item-icon burl-link third-position"
id="ext-gen539"/>
<img alt=""
src="/s.gif"
class="bookmark-icon bookmarkNoPin"
id="ext-gen540"></span>
</a>
</li>
<li id="x-menu-el-ext-comp-1107"
class="x-menu-list-item">
<a id="ext-comp-1107"
class="x-menu-item tab-scroller-menu-item x-tab-tabmenu-selected "
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon hidden"
id="ext-gen528">
<span class="x-menu-item-text"
id="ext-gen529">
<div class="tabTitle">
<span class="tabText">External Page</span>
</div>
<img alt=""
src="/s.gif"
class="refresh-icon"
id="ext-gen541">
<div class="x-menu-item-icon burl-link third-position"
id="ext-gen542"/>
<img alt=""
src="/s.gif"
class="bookmark-icon bookmarkNoPin"
id="ext-gen543"></span>
</a>
</li>
<li id="x-menu-el-ext-comp-1108"
class="x-menu-list-item">
<a id="ext-comp-1108"
class="x-menu-item x-tab-tabmenu-menuItem"
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon "
id="ext-gen530">
<span class="x-menu-item-text"
id="ext-gen531">Close all primary tabs</span>
</a>
</li>
<li id="x-menu-el-ext-comp-1109"
class="x-menu-list-item">
<a id="ext-comp-1109"
class="x-menu-item x-tab-tabmenu-menuItem"
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon "
id="ext-gen532">
<span class="x-menu-item-text"
id="ext-gen533">Refresh all primary tabs</span>
</a>
</li>
<li id="x-menu-el-ext-comp-1110"
class="x-menu-list-item">
<a id="ext-comp-1110"
class="x-menu-item x-tab-tabmenu-menuItem"
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon "
id="ext-gen534">
<span class="x-menu-item-text"
id="ext-gen535">Reopen last-closed tab</span>
</a>
</li>
<li id="x-menu-el-ext-comp-1111"
class="x-menu-list-item">
<a id="ext-comp-1111"
class="x-menu-item x-tab-tabmenu-menuItem"
hidefocus="true"
unselectable="on"
href="#">
<img alt=""
src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-menu-item-icon "
id="ext-gen536">
<span class="x-menu-item-text"
id="ext-gen537">Show keyboard shortcuts (SHIFT+K)</span>
</a>
</li>
</ul>
</div>
xpath i'am selecting
//*/text()[normalize-space(.)='Close all primary tabs']/parent::*

Related

Select value from dropdown with selenium webdriver

I am trying to select a value from a dropdown with selenium webdriver but it just opens the dropdown and immediately closes it.
Here is the code for webdriver:
driver.findElement(By.cssSelector("span.k-select ")).click();
Thread.sleep(3000);
driver.findElement(By.xpath("//li[#class='k-item'][.='Revenue per click']")).click();
And this is the html code from the browser for the dropdown:
<div class="controls">
<span class="k-widget k-dropdown k-header kendo-input span8 ddFix" unselectable="on">
<span unselectable="on" class="k-dropdown-wrap k-state-default">
<span unselectable="on" class="k-input">Select revenue type...
</span>
<span unselectable="on" class="k-select">
<span unselectable="on" class="k-icon k-i-arrow-s">select</span>
</span>
</span>
<input name="revenueType" id="revenueType" class="kendo-input span8 ddFix" data-role="dropdownlist" style="display: none;">
</span>
</div>
<div class="k-animation-container km-popup">
<div class="k-list-container k-popup k-group k-reset" id="revenueType-list" data-role="popup">
<ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" id="revenueType_listbox" aria-live="off" style="overflow: auto;">
<li tabindex="-1" role="option" unselectable="on" class="k-item">Select revenue type...</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per action</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per click</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per sale</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per action + Revenue per sale</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item">Revenue per mile</li>
</ul>
</div>
</div>
It's hard to debug without the context but:
Your locator is invalid, instead try using:
By.xpath("//li[text()='Revenue per click']")
Since only one item has that text, it should be sufficient. If you still want to include #class in selector, use
By.xpath("//li[#class='k-item' and text()='Revenue per click']")
Try using javascript change the unselectable to off using javascript executor.
Get the dropdown text value after perform click action
subdropdown_child = navigationDriver.findElements(By.cssSelector("select#ctl00_SPWebPartManager1_g_c873566a_540c_4681 option");
for (Element subchild : subdropdown_child)
{
dropdown_value = subchild.text();
new Select(navigationDriver.findElementByCssSelector("select#ctl00_SPWebPartManager1_g_c873566a_540c_4681_")).selectByVisibleText(dropdown_value);
}

How to find a node with xpath having namespace in xml

I am trying to find div node with Xpath for selenium. here div having categories/Accounts & Contacts as value of ext:tree-node-id need to be selected, but as ext:tree-node-id is a namespace my below xpath is not working.
//li[#class='x-tree-node']//div[contains(.,ext:tree-node-id='categories\/Accounts & Contacts')]
//li[#class='x-tree-node']//div[#ext:tree-node-id='categories\/Accounts & Contacts']
<li class="x-tree-node">
<div class="x-tree-node-el x-unselectable folder x-tree-node-collapsed" unselectable="on" ext:tree-node-id="categories\/Accounts & Contacts">
<span class="x-tree-node-indent"/>
<img class="x-tree-ec-icon x-tree-elbow-plus" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/>
<img class="x-tree-node-icon" unselectable="on" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/>
<a class="x-tree-node-anchor" tabindex="1" href="" hidefocus="on">
</div>
<ul class="x-tree-node-ct" style="display: none;">
</li>
<li class="x-tree-node">
<div class="x-tree-node-el x-unselectable folder x-tree-node-collapsed" unselectable="on" ext:tree-node-id="categories\/Opportunities">
<span class="x-tree-node-indent"/>
<img class="x-tree-ec-icon x-tree-elbow-plus" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/>
<img class="x-tree-node-icon" unselectable="on" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/>
<a class="x-tree-node-anchor" tabindex="1" href="" hidefocus="on">
</div>
<ul class="x-tree-node-ct" style="display: none;">
</li>
A colon in the attribute will not allow the xpath works. You need to improve a little to it works as you wish, like:
//li[#class='x-tree-node']//div[#*[contains(local-name(), tree-node-id)] = 'categories\\/Accounts & Contacts']
The "local-name" will select the name after the colon named "tree-node-id".

How to get this Bootstrap navbar to have correct margins and align left when breaking?

I'm trying to get a Bootstrap 3 navbar collapse properly but still have two open issues:
the margins not equal:
when the navbar breaks, the icons are not left aligned with the text:
I know how I could add style fixes until I get this right, but I how do I solve this properly?
https://jsfiddle.net/edwardtanguay/v83aj4cn/3
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-collapse">
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-minus"></span>
</a>
<p class="navbar-text">Company Name</p>
<p class="navbar-text">CUSTOMER PORTAL</p>
<p class="navbar-text navbar-right">Contact Name</p>
<p class="navbar-text navbar-right">2016-04-14</p>
</div>
</div>
</div>
</nav>
</div>
There you go friend!
SOLUTION JDSFILE
Regards!

responsive logo over carousel

this is my 1st page where logo and carousel both are in the top section of the pageI was trying to put a responsive logo over carouser from bootstrap. Logo was over the carousel but it does not shows the responsive behavior. I used the code from www.w3schools.com i think its somewhere in the carousel class in bootstrap.min.css but cant locate it. If someone has work on it plz leave the comment.
html:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"> </li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="overlay">
<!--<img src="images/logo.png" class="img-responsive" alt="">-->
</div>
<div class="item active">
<img src="images/1bg.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/11bg.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/111bg.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
logo is in overlay div.I want logo to be responsive
.overlay {background: url('../images/logo.png') top left no- repeat;position: absolute;top: 30px;
left: 600px;width: 100%;height: 100%;z-index: 10;pointer-events: none;}
Use percentage instead of pixel in overlay class.
For Example:
.overlay {background: url('../images/logo.png') top left no- repeat;position: absolute;top: 3%;left: 50%;width: 100%;height: 100%;z-index: 10;pointer-events: none;}
change top and left percentages value as you need.

where i can get bootstrap 3.0 carousal with 4 images?

Am trying to put one bootstrap carousal (with 4 images at a time scroll)
into a bootstrap tabs. I have tried many examples but am not getting. Am using bootstrap 3.0. Can anybody please give an idea for this? Am unable to see at least one bootstrap 3.0 carousal anywhere
You can just use the standard markup but add four images inside each of your .item slide wrappers.
HTML:
<div class="carousel slide" data-ride="carousel" id="carousel4img">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel4img" data-slide-to="0" class="active"></li>
<li data-target="#carousel4img" data-slide-to="1"></li>
<li data-target="#carousel4img" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/350/E83E00/fff&text=Image+1">
<img src="http://placehold.it/350/00ACE7/fff&text=Image+2">
<img src="http://placehold.it/350/e8117f/fff&text=Image+3">
<img src="http://placehold.it/350/C7FF0D/fff&text=Image+4">
</div>
<div class="item">
<img src="http://placehold.it/350/FF0000/fff&text=Image+5">
<img src="http://placehold.it/350/E8950C/fff&text=Image+6">
<img src="http://placehold.it/350/782AE8/fff&text=Image+7">
<img src="http://placehold.it/350/393CE8/fff&text=Image+8">
</div>
<div class="item">
<img src="http://placehold.it/350/40083D/fff&text=Image+9">
<img src="http://placehold.it/350/FF1919/fff&text=Image+10">
<img src="http://placehold.it/350/00E790/fff&text=Image+11">
<img src="http://placehold.it/350/FFB500/fff&text=Image+12">
</div>
</div><!--/.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel4img" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel4img" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--/.carousel -->
CSS:
.item img {
width:25%;
float:left;
}