I need to select a date say like Year as 1947, Month as Aug and Date like 15.
What are the methods and classes that I need to use? I tried using WebElement by xpath. I cant locate the year and month only date is located. Please suggest me the rigt way
This is HTML Page source for that particular element
<td>
<div>
<div class="dais_gwt_input_div" style="margin-left: 140px; margin-bottom: 0px; width: 175px; height: 24px;">
<input id="EMPLOYEE_New_DOB" class="dais_gwt_input_Field" type="text" style="border-style: none; padding: 2px 20px 2px 6px;" maxlength="10"/>
<div id="dais_gwt_fieldcontainer_left_right_top_bottom_label" class="default-label" style="margin-top: 3px; float: left; width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: -275px;">DOB</div>
<div id="undefined" class="dais_gwt_image_div" align="center" style="float: right; margin-top: -23px;">
<img id="undefined" class="applyclicks" align="middle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABkUlEQVR42p2Ty07CUBCG+waSGHAnPIbII4hAYSFySaSWxMJClqxISIQIigKPIwkhUsJlSSAQsFx8BC5bfk9HhaJpQjrJpPlm2j//mTPloIlut4t0Or3HqVRKt68Gt9ls0Gg0UKvVUCy+wufzolqtol5/Z/wCl+uSet+861cqb5jPP8ElEvfwenlEIjfgeQ8cjnMIQoSS592w2880vOuHwyEEgwFwJycWtFotsiPLMmIxaWtPlusQRUHD+31RvAVntZ5uBZbLJbM1376wWq0Yz/7wri9Jd+BsNiuazSaMxD+Bfr9P88hmM8T5fJ7OrSgKJpMJG6iTaroCg8EAoVAQhcITcalUokHNZlNKv/+KaroCi8UCnU4Ho9GIeDweE6/Xa8p2u001XQH1abGYmYsAsXpdZvMxLZCaJtMRqwlGHKw0Dj70BYbDATuzOoNn4nL5dwYzTKcHzKDX68HjcSOTeSDO5XKMXT+3oMDpvGC1x30B7SIZ2gN1ldWzGYloVASXTCYRCFwjHo+R4mEp0cfqv/AFv/QghO2HDIwAAAAASUVORK5CYII=" style="cursor: pointer;"/>
</div>
</div>
</div>
</td>
All I need to know is how to locate and access the year and month I tried using arrow keys in it by using xpath and Action class but I cannot click every time and move forward and backward, same with the month. I dont have any idea about how to handle this. I have never faced this before.
Related
I am not able to click and select the value from dropdown by using XPath
driver.findElement(By.xpath(".//*[#id='ProcessTypeIGCombo']/span")).click();
MY HTML code is as below:
<input class="ui-igcombo-field ui-corner-all" readonly="" style="float: left; display: block; position: absolute; height: 20px; width: 99.7921%;">
for more details please use the screenshots
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:'"
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.
The concept of frames is being used on a website I am tasked with testing. However, the frames do not use frame tags, one is for example a div that is filled by GET/POST. Selenium cannot access the element inside of the frame (ElementNotVisibleException) because it must first switch to the frame. But, I can't switch to the frame because it is not technically a frame in Selenium's eyes. How can I access the content of the frame without manipulating the DOM? (The point of testing is that we test what is there as an end user and don't change it). So, I cannot use JavaScript executor. I have tried using action building to click elements/move to the element, but it returns errors.
EDIT:
Here is the basic form of the html I'm trying to access. I cannot use selenium to access any elements inside el1. I need to select an option for el6.
<div id="el1" style="width: 960px; height: 230px; margin-bottom: 6px;">
<div style="width: 955px;padding: 5px 0px 0px 5px;">
<span>Text Here</span>
<form id="el2" action="pageName.jsp?action=blah" method="POST" style="height: 300px;" name="el2">
<div id="el3" style="width: 600px; margin: 20px 0px 0px 60px;">
<div id="el4" style="height: 20px;">
<div id="el5" style="height: 20px; padding-left: 40px;">
<div style="width: 400px;">
<span style="font-weight: bold;">More Text Here</span>
</div>
<div style="width: 400px;">
<select id="el6" onchange="javascriptfunction(this)" name="el6" style="width: 400px;">
<option selected="selected" value="">A Select Box Option</option>
<option value="NumberHere">More Options Populated By JSP</option>
</select>
</div>
</div>
</div>
</div>
<!--Some Unnecessary content here-->
</form>
</div>
</div>
Here is style calculation for el6. I have tried manually adjusting height with WebDriver in attempt to get rid of ElementNotVisibleException. This did not work.
font-family MS Shell Dlg
body Helvetica,Arial,Sans-Serif
div Arial,Helvetica,Geneva,sans-serif
body Arial,Helvetica,Geneva,sans-serif
font-size 13.3333px
div 14px
body 13px
color rgb(0, 0, 0)
#container #333
text-align start
#wrapper left
.bodyStyle center
width 400px
margin-top 0px
margin-right 0px
margin-bottom 0px
margin-left 0px
padding-top 0px
padding-right 0px
padding-bottom 0px
padding-left 0px
why can't you switch to any available iframe without specifying the ID or name.
you can do this just switch to iframe..
try this
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe")));
If you are getting ElementNotVisibleException,it means element is invisible at that time.You can use explicit wait to achieve this :
WebDriverWait wait = new WebDriverWait(driver,<Time>);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("el6")));
First,you calculate time which is taken by element to visible and replace with <Time>.
For more detail,you can [see][1].
[1]: http://docs.seleniumhq.org/docs/04_webdriver_advanced.jsp
How Can I add an Html elements inside a Cytoscape node?
E.g: I want to add to every node - 2 small buttons, so the user can click on each one of the buttons and the value inside this node will change.
Example of the graph I want to create
[IMG]http://i57.tinypic.com/1z1bp1l.jpg[/IMG]
It's not possible to render HTML in a canvas, nor would you probably want to for performance. If you really want it on the node, I suggest creating an overlay -- though that has its own set of complications in its implementation. Otherwise, you're far better off placing interactive elements separately from a node (e.g. tooltip, sidebar, menu, etc...).
mxGraph seems to do it by using an SVG foreignObject tag, and within that HTML like so:
<g style="cursor: move;">
<g>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%">
<div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 1212px; margin-left: 839px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
<div>Some HTML inside SVG</div>
</div>
</div>
</div>
</foreignObject>
</g>
</g>
Not sure I want to go there in Cytoscape as its API is too nice to start working round and you'd need to deal with the update event flow, but mxGraph is a fantastic toolkit worth knowing about in this space.