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:'"
Related
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.
//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);
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.
I want to create a header similar to facebook where position:fixed. and when you zoom-out the whole page centers itself and when I zoom-in the header also streches..
When I use position:fixed and zoom-in some contents disappear due to lack of space on the window..
<div id="header_line" ></div>
<div id="header">
<div id="heading_name" >Home </div>
<div id="heading_name" style="left:28%;">Advertisement Board</div>
<div id="heading_name" style="left:46%;">Advertise</div>
<div id="heading_name" style="left:60%;">Sign In</div>
<div id="heading_name" style="left:76%;">About Us</div>
</div>
<style>
#header_line{
position:fixed;
top:0%;
left:0%;
width:1370px;
height:7px;
z-index:20;
background-color:#F60;
}
#header{
position:fixed;
left: 0px;
z-index:20;
top: 7px;
width:1370px;
height: 30px;
background-color:#003;
border-bottom:thick;
border-bottom-color:#000;
box-shadow:2px 5px 5px 1px #033;
}
</style>
I have a piece of code that do as I want in IE6 but not in Chrome/Firefox:
In IE6, the img is displayed with absolute position relative the td, as I wanted/expected. In Firefix/Chrome the img is displayed relative the outer div.
<div>
<table>
<tr>
<td class="rel cell">
<img src="style/easypos_mobile/icons/pencil.png" class="icon" onclick="_onclick.newArticle_andraNr();"/>
</td>
</tr>
</table>
</div>
.rel
{
position: relative;
}
.icon
{
position: absolute;
top: 3px;
right: -23px;
}
.cell
{
width: 186px;
}
Found this stuff:
The specs leave it open to the
User-Agent to decide if a table-cell
can act as a container for absolute
positioned objects.
http://www.w3.org/TR/CSS21/visuren.html#propdef-position
(note the 'effect of
'position:relative' on
table-row-group, table- header-group,
table-footer-group, table-row,
table-column-group, table-column,
table-cell, and table-caption elements
is undefined').
This fixed it:
<table><tr>
<td style="position: relative; width: 180px;">
<div style="position:relative;width:100%;height:100%;">
<img src="imageA.gif" class="status">
<img src="imageB.gif" class="status">
</div>
</td>
</tr></table>