How to click on close(X) icon in iframe pop-up in selenium - selenium

//please check the code below for the close button
<div class="fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened" tabindex="-1" style="width: 557px; height: auto; position: absolute; top: 20px; left: 396px; opacity: 1; overflow: visible; display: block;">
<div class="fancybox-skin" style="padding: 0px; width: auto; height: auto;">
<div class="fancybox-outer">
<div class="fancybox-inner" style="overflow: auto; width: 557px; height: 385px;">
<iframe id="fancybox-frame1455168443258" class="fancybox-iframe" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" hspace="0" vspace="0" name="fancybox-frame1455168443258" scrolling="auto" src="http://100stohappiness.dev-imaginovation.net/100s-happiness/100s-happiness/login" style="height: 460px;"/>
</div>
</div>
<a class="fancybox-item fancybox-close orange-color-bg" href="javascript:;" title="Close"/>
</div>
</div>

You first need to switch to the iframe
Java syntax, similar in all languages
String parentHandle = driver.getWindowHandle();
// switch to the new window
for (String handle : driver.getWindowHandles()) {
if (!handle.equals(parentHandle))
{
driver.switchTo().window(handle);
}
}
// click on close button
driver.findElement(By.className("fancybox-close")).click();
// switch back to the old window
driver.switchTo().window(parentHandle);

Related

Robot Framework - unable to locate React created elements

I am trying to Input Text into a React created element. So far I have tried the following methods:
Input Text css:input#textfield-1198-inputEl TEXT
Input Text css:input.x-form-field x-form-required-field x-form-#textfield-1198-inputEl TEXT
Input Text xpath=//input[contains(#name,'textfield-1198-inputEl')] TEXT
Input Text xpath=//*[#id="textfield-1198-inputEl"] TEXT
As well as trying the absolute & relative paths, though it always responds with - did not match any elements.
Wait Until Element Is Visible times out.
Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="x-window x-layer x-window-default x-closable x-window-closable x-window-default-closable x-border-box x-resizable x-window-resizable x-window-default-resizable" id="window-1196" style="width: 316px; height: 195px; right: auto; left: 630px; top: 315px; z-index: 19001;" tabindex="-1">
<div class="x-window-header x-header x-header-horizontal x-header-draggable x-docked x-unselectable x-window-header-default x-horizontal x-window-header-horizontal x-window-header-default-horizontal x-top x-window-header-top x-window-header-default-top x-docked-top x-window-header-docked-top x-window-header-default-docked-top" id="window-1196_header" style="right: auto; left: 0px; top: 0px; width: 316px;">
<div class="x-header-body x-window-header-body x-window-header-body-default x-window-header-body-horizontal x-window-header-body-default-horizontal x-window-header-body-top x-window-header-body-default-top x-window-header-body-docked-top x-window-header-body-default-docked-top x-box-layout-ct x-window-header-body-default-horizontal x-window-header-body-default-top x-window-header-body-default-docked-top" id="window-1196_header-body" style="width: 309px;">
<div class="x-box-inner" id="window-1196_header-innerCt" role="presentation" style="width: 309px; height: 15px;">
<div class="x-box-target" id="window-1196_header-targetEl" style="width: 309px;">
<div class="x-component x-header-text-container x-window-header-text-container x-window-header-text-container-default x-box-item x-component-default" id="window-1196_header_hd" style="right: auto; left: 0px; top: 0px; margin: 0px; width: 288px;">
<span class="x-header-text x-window-header-text x-window-header-text-default" id="window-1196_header_hd-textEl"> </span>
</div>
<div class="x-tool x-box-item x-tool-default x-tool-after-title" id="tool-1203" style="width: 15px; height: 15px; right: auto; left: 294px; top: 0px; margin: 0px;"><img class="x-tool-img x-tool-close" id="tool-1203-toolEl" role="presentation" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>
</div>
</div>
</div>
</div>
<div class="x-window-body x-window-body-default x-closable x-window-body-closable x-window-body-default-closable x-window-body-default x-window-body-default-closable x-resizable x-window-body-resizable x-window-body-default-resizable" id="window-1196-body" style="overflow: auto; left: 0px; width: 316px; height: 165px; top: 30px;">
<span id="window-1196-outerCt" style="display:table;"></span>
<div class="" id="window-1196-innerCt" style="height: 100%; vertical-align: top; display: table-cell;">
<span id="window-1196-outerCt" style="display:table;"></span>
<div class="x-panel x-window-item x-panel-default" id="createCMDBPanel-1197" style="width: 316px; height: 165px;">
<span id="window-1196-outerCt" style="display:table;"></span>
<div class="x-panel-body x-panel-body-default x-panel-body-default x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left" id="createCMDBPanel-1197-body" style="padding: 0px; left: 0px; top: 0px; width: 316px; height: 125px;">
<span id="window-1196-outerCt" style="display:table;"><span id="createCMDBPanel-1197-outerCt" style="display:table;"></span></span>
<div class="" id="createCMDBPanel-1197-innerCt" style="height: 100%; vertical-align: top; padding: 10px; display: table-cell;">
<span id="window-1196-outerCt" style="display:table;"></span>
<table cellpadding="0" class="x-field x-table-plain x-form-item x-form-type-text x-field-default x-anchor-form-item" id="textfield-1198" style="table-layout: auto;">
<tbody>
<tr class="x-form-item-input-row" id="textfield-1198-inputRow" role="presentation">
<td class="x-field-label-cell" id="textfield-1198-labelCell" role="presentation" style="" valign="top" width="105"><label class="x-form-item-label x-unselectable x-form-item-label-left" for="textfield-1198-inputEl" id="textfield-1198-labelEl" style="width:100px;margin-right:5px;">CMDB Name:</label></td>
<td class="x-form-item-body" colspan="2" id="textfield-1198-bodyEl" role="presentation"><input aria-invalid="false" autocomplete="off" class="x-form-field x-form-required-field x-form-text" data-errorqtip="" id="textfield-1198-inputEl" name="textfield-1198-inputEl" type="text" value="new CMDB"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In general the attribute values React puts are "semi-dynamic" (my term, and don't quote me on it :) - they are generated by the framework as it sees fit, and can change on slight source code change. This applies for the class and in your case for the id attribute - as you can see the number 1198 in it has no semantic meaning, it's just a counter.
Thus you'd better not use them in locators, as they won't be rigid - the value can easily change between builds without warning.
I would approach it with a different strategy; here is an xpath locator that works, breakdown of its structure follows:
//td[label[text()="CMDB Name:"]]/following-sibling::td/input[#type="text"]
It first selects a table cell that has as its child span with that text - the label the user sees in the UI for the input. Then it selects the very next cell (the following-sibling axis), and finally - the input element that is its child - your target.
In effect, this locator reads - "return the input that is next to the text 'CMDB Name:'"

how to animate div box from left to right or right to left when scroll web page

i want to animate div box from left to righ and right to left.
suppose i have a 2 box with bootstrap classes`example :
<div class="container">
<div class="row">
<div class="col-md-6 id="leftToRight"></div>
<div class="col-md-6 id="RightToLeft"></div>
</div>
</div>
now i want to animate #leftToRight id from left to right and #RightToLeft from righ to left.
when scroll web page.
I see many website in which this type of animation is applied.
I am very curious to know how it is happen.
You can use the wheel event to answer your question:
$(function() {
$(window).on('wheel', function(e) {
var delta = e.originalEvent.deltaY;
if (delta > 0) //On scroll down
{
$('#RightToLeft').animate({
left: "-=10px"
},5);
$('#LeftToRight').animate({
left: "+=10px"
},5);
}
else //This is added for reverse animation on scroll up
{
$('#RightToLeft').animate({
left: "+=10px"
},5);
$('#LeftToRight').animate({
left: "-=10px"
},5);
}
return false; // this line is only added so the whole page won't scroll in the demo
});
});
#RightToLeft{
position: relative;
margin: auto;
background: red;
width: 100px;
height: 100px;
}
#LeftToRight{
position: relative;
margin: auto;
background: blue;
width: 100px;
height: 100px;
}
.row{
margin: auto;
width:90%;
overflow: hidden;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6" id="LeftToRight">Left to Right</div>
<div class="col-md-6" id="RightToLeft">Right to Left</div>
</div>
</div>

Unable to see all element in DOM using f12 as well using XPATH in selenium

My problem is in finding all Dev Data from DOM using XPATH in selenium webdriver so that count number of elements.
Data Resides in Dev tag and have 20 documents. When I do F12 it is showing only 6 items in dev at a time and when I try to find elements using XPATH it is fetching only 6 documents.If I do scroll in UI DOM gets updated and shows new items which are visible in UI now.
So is there any way to get all data (20 Documents) at once from DOM? Scrolling in UI each time and then getting data will be tricky and not feasible.
Below is DOM:
<div id="datatable1481094646361" class="webix_view webix_dtable job_table" style="border: 0px solid red; position: relative; width: 1380px; height: 240px;" view_id="optlist-completed">
<div class="webix_ss_header" style="height: 47px;">
<div class="webix_ss_body">
<div class="webix_ss_left" style="width: 0px; height: 193px;">
<div class="webix_ss_center" style="width: 1363px; height: 193px;">
<div class="webix_ss_center_scroll" style="width: 1363px; height: 193px;">
<div class="webix_column webix_first" style="width: 80px; left: 0px; top: 0px;" column="0">
<div class="webix_column " style="width: 322px; left: 80px; top: 0px;" column="1">
<div class="webix_cell">Opt_S_Rel_034</div>
<div class="webix_cell">Opt_S_Rel_033</div>
<div class="webix_cell">Opt_S_Rel_032</div>
<div class="webix_cell">Opt_S_Rel_031</div>
<div class="webix_cell">Opt_S_Rel_030</div>
<div class="webix_cell">Opt_S_Rel_029</div>
</div>
<div class="webix_column " style="width: 321px; left: 402px; top: 0px;" column="2">
<div class="webix_column " style="width: 100px; left: 723px; top: 0px;" column="3">
<div class="webix_column " style="width: 180px; left: 823px; top: 0px;" column="4">
<div class="webix_column " style="width: 180px; left: 1003px; top: 0px;" column="5">
<div class="webix_column webix_last" style="width: 180px; left: 1183px; top: 0px;" column="6">
</div>
</div>
<div class="webix_ss_right" style="width: 0px; height: 193px;">
</div>
And In actual similar to Opt_S_Rel_034 there are more than 20 rows available in Application UI.
Using: XPATH= //div[#view_id='optlist-completed']//div[#column=1]
to get all test which is returning only 6 document
If I do scroll in UI DOM gets updated and shows new items which are visible in UI now
The DOM is probably getting updated by JavaScript, which means the documents doesn't exist in the DOM until the update (triggered by the scroll down) and that why you can't see them with F12 and selenium catch only 6. If the documents do not exist in the DOM, Selenium can't fetch them.

jsdatatable TableTools buttons not working when used in dropdown menu collection

I am using TableTools for JS Datatable
tableTools:
sSwfPath: "/static/external/datatables/copy_csv_xls_pdf.swf"
sRowSelect: 'multi'
sSelectedClass: 'row_selected'
bHeader: true
aButtons: [
{
sExtends: 'collection',
sButtonText: 'Tools <span class="caret" />',
aButtons: [
{
sExtends: 'copy'
mColumns: 'visible'
bSelectedOnly: true
},
{
sExtends: 'xls',
sFileName: '*.xls',
mColumns: 'visible',
bSelectedOnly: true
},
{
sExtends: 'pdf'
mColumns: 'visible'
bSelectedOnly: true
},
{
sExtends: 'csv'
mColumns: 'visible'
bSelectedOnly: true
},
'select_all',
'select_none'
]
}
'print',
]
It produces following dropdown menu:
The menu items are not working expect selec/deselect.
When I don't use collection and just display buttons in one row everything works perfectly fine.
How should one properly deine buttons when extending collection?
The produced HTML for dropdown looks like this:
<ul class="DTTT_dropdown dropdown-menu" style="display: block; position: absolute; left: 551.3125px; top: 553px; opacity: 1;">
<li class=" DTTT_button_copy" id="ToolTables_agencies_1" tabindex="0" aria-controls="agencies">
<a>Copy</a>
<div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
<embed id="ZeroClipboard_TableToolsMovie_1" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=0&height=0" wmode="transparent">
</div>
</li>
<li class=" DTTT_button_xls" id="ToolTables_agencies_2" tabindex="0" aria-controls="agencies">
<a>Excel</a>
<div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
<embed id="ZeroClipboard_TableToolsMovie_2" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=0&height=0" wmode="transparent">
</div>
</li>
<li class=" DTTT_button_pdf" id="ToolTables_agencies_3" tabindex="0" aria-controls="agencies">
<a>PDF</a>
<div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
<embed id="ZeroClipboard_TableToolsMovie_3" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&width=0&height=0" wmode="transparent">
</div>
</li>
<li class="DTTT_button_csv" id="ToolTables_agencies_4" tabindex="0" aria-controls="agencies">
<a>CSV</a>
<div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
<embed id="ZeroClipboard_TableToolsMovie_4" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&width=0&height=0" wmode="transparent">
</div>
</li>
<li class="DTTT_button_text" id="ToolTables_agencies_5" tabindex="0" aria-controls="agencies"><a>Select all</a></li>
<li class="DTTT_button_text disabled" id="ToolTables_agencies_6" tabindex="0" aria-controls="agencies"><a>Deselect all</a></li>
</ul>
additionally it creates div with background:
<div class="DTTT_collection_background" style="position: absolute; left: 0px; top: 0px; height: 936px; width: 1054px; opacity: 0.25;"></div>
in CSS I set z-index:
ul.DTTT_dropdown.dropdown-menu
z-index: 9998
&li
z-index: 9999
The issue was wit wrong positioning of DIV's containing this small piece of flash which makes the magic.
When you place DIV with position property set to absolute inside LI you have to quarantee, that LI's position is set to relative
I make it works by this piece of CSS:
.DTTT_button_copy, .DTTT_button_xls, .DTTT_button_pdf,.DTTT_button_csv {
position: relative
}
Another solution is based on the fact the buttons have sequential naming of 'id' attribute.
ex
ZeroClipboard_TableToolsMovie_1
ZeroClipboard_TableToolsMovie_2
ZeroClipboard_TableToolsMovie_3
So based on where your 'copy' button appears in the sequence. You may add the following css style.
#ZeroClipboard_TableToolsMovie_3 { height: 29px; width: 43px; }
This will convert the non-flash 'copy' button to flash based button right after the data-table comes out of hiding. Thereby making it work without needing to click on the 'Export' (Collection button)
Try adding another class :
flash-relative
with relative position :
<style>
.flash-relative{
position: relative;
}
</style>
then create the datatable with buttons :
buttons: {
buttons: [
{extend: 'excel',className: 'dropdown-item flash-relative'},
{extend: 'pdf',className: 'dropdown-item flash-relative'}
]
}
dropdown-item : just for dropdown bootstrap style
and try using this buttons.resize() when dropdown is shown :
$("#dropdown_ID").on("shown.bs.dropdown", function (event) {
$.fn.dataTable.tables({api: true}).buttons.resize();
});
#NullPointer : try to stop dropdown from closing:
$('#dropdown_ID a.flash-relative').on("click", function (e) {
e.stopPropagation();
e.preventDefault();
});
I have <a> not <li> element

Firepath define xpath, but Selenium IDE -> "locator not found"

I have a button:
<button class="pure-field-button" type="button" id="yui_3_5_0_1_1394785205896_6061" style="background-color: rgb(238, 238, 238);"><i class="fa fa-user"></i></button>
Here is what I get and verify in Firepath, no any error in Firepath
//button[contains(#id, 'yui_3_5_0_1') and #class="pure-field-button"]
when I try to put it Selenium IDE
Command: click
Target: //button[contains(#id, 'yui_3_5_0_1') and #class="pure-field-button"]
Error: locator not found
Any suggestion?
Code. The button is in the last row
<head>
<body id="yui_3_5_0_1_1394792924659_843" class="yui3-skin-sam">
<div class="yui3-widget-mask" style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 2;"></div>
<div id="yui_3_5_0_1_1394792924659_5326" class="yui3-dd-draggable yui3-widget yui3-panel yui3-widget-positioned yui3-widget-modal yui3-widget-stacked yui3-panel-focused" style="width: 610px; left: 323px; top: 263.5px; z-index: 2;" tabindex="0">
<div id="yui_3_5_0_1_1394792924659_5327" class="yui3-panel-content yui3-widget-stdmod">
<div class="yui3-widget-hd">Новый абонент</div>
<div id="yui_3_5_0_1_1394792924659_5555" class="yui3-widget-bd">
<div id="yui_3_5_0_1_1394792924659_5554" class="form-container">
<form id="yui_3_5_0_1_1394792924659_2237" class="pure-form pure-g">
<div class="block-overlay" hidden="hidden" style="display: none; width: 594px; height: 177px;">
<fieldset id="yui_3_5_0_1_1394792924659_5553" class="pure-u-1">
<legend>
<div id="yui_3_5_0_1_1394792924659_5552" class="pure-field-group pure-field-with-button required">
<div class="pure-u-11-24 pure-field-label-container">
<div id="yui_3_5_0_1_1394792924659_5551" class="pure-u-11-24">
<button id="yui_3_5_0_1_1394792924659_5550" class="pure-field-button" type="button">
If CSS locators are welcome, you can try this one:
css=button[#id^="yui_3_5_0_1"][#class="pure-field-button"]
You can try searching by Id instead of xpath.
By.id("yui_3_5_0_1_1394785205896_6061");
Let me know if that works.