0

I am trying to attach an image to an email as normal attachment (not as inline image), but on html DOM, Firebug finds two elements with xpath //input@type='file', because I have two buttons that allows me to add the image: Insert file and Attach foto, see screenshots attached. For some reason, the image is always added as inline file in the body of the message. I tried in different ways to identify uniquely the xpath of the Insert button, but the image is always added inline with text.

Can anybody suggest a solution?

insert as normal attachment :-

insert as normal attachment

add image inline with the text :-

add image inline with the text

EDIT: html

<document>
<html>
<head>
<body class="globalnavigation" data-atip="inbox" data-application="inbox" data-l_iid="11">
<div class="CDB-global-header" role="navigation">
<div id="frameMod" class="globalnavigation" data-mailboxtotalsize="232159303" data-introduction="false" data-loginrequest="true" data-serverhost="cmpweb99" data-l_iid="12">
<div id="headerArea">
<div id="contentArea" class="advert wide">
<div id="frameScaleLeft" class=" wide">
<!-- <div id="tAdConatiner"> -->
<!-- TODO: put T-AD here -->
<!-- </div> -->
<div id="frameScaleRight" class=" wide">
<div id="frameClmRight">
<div id="contentHeader" class="borderBottom">
<div id="toolbar" data-atip="toolbar">
<div id="textLinkContainer" style="display: none;">
<div id="messagelist" class="listContainer isExtendedListView sortingEnabled" aria-label="Nachrichtenliste" title="Nachrichtenliste" data-l_iid="32" style="display: none;">
<div id="messageContainer" class="writeMailContainer" data-stat="" aria-label="E-Mail Schreiben - Ansicht" title="E-Mail Schreiben - Ansicht" data-atip="mailwriteview" data-priority="normal" data-editormode="html" data-msgidheader="" data-continuemsg="" data-forwardsmsgs="" data-inreplytomsgs="" data-folderid="" data-l_iid="341" data-rnd="};&a+?9x~wxa((#}~%xd6'ud#K==}<=|#%+u|?}F%t8l">
<form title="" onsubmit="return false" action="" name="writemail" method="post">
<div id="messageWrapper">
<div class="edge"/>
<script type="text/javascript"> var recipientsToTempArray = []; var recipientsCcTempArray = []; var recipientsBccTempArray = []; </script>
<div id="messageHeaderContainer">
<div id="attachmentContainer" class="empty" data-atip="attachment" data-l_iid="344">
<div id="messageBodyContainer" data-texttype="html" style="height: 385px;">
<div id="textAreaSpacerZone" data-l_mouse_cl="Mailwriteview::setFocusInBodyPart"/>
<div class="textAreaContainer" style="display: block;">
<div class="rte">
<div class="rteWrapper">
<div id="mceu_250" class="mce-tinymce mce-container mce-panel" role="application" tabindex="-1" hidefocus="1" style="visibility: hidden; border-width: 1px;">
<div id="rteToolbar" class="mce-container-body mce-stack-layout">
<div id="mceu_251" class="mce-toolbar-grp mce-container mce-panel mce-stack-layout-item mce-first" role="group" tabindex="-1" hidefocus="1" style="width: 800px;">
<div id="mceu_251-body" class="mce-container-body mce-stack-layout">
<div id="mceu_252" class="mce-container mce-toolbar mce-stack-layout-item mce-first mce-last" role="toolbar">
<div id="mceu_252-body" class="mce-container-body mce-flow-layout">
<div id="mceu_253" class="mce-container mce-flow-layout-item mce-first mce-btn-group" role="group">
<div id="mceu_254" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_255" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_256" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_257" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_258" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_259" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_259-body" style="position: relative;">
<div id="mceu_248" class="mce-widget mce-btn mce-first mce-last" aria-labelledby="mceu_248" tabindex="-1" role="button" aria-label="Bild einfügen/ersetzen" style="z-index: 3;">
<div id="html5_1avbl0qhf1rdv73j1bq61bl1v2183_container" class="moxie-shim moxie-shim-html5 pluploadFix_mceu_248" style="position: absolute; top: 0px; left: 0px; width: 27px; height: 26px; overflow: hidden; z-index: 2;">
<input id="html5_1avbl0qhf1rdv73j1bq61bl1v2183" type="file" accept="" multiple="" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"/>
</div>
</div>
</div>
<div id="mceu_260" class="mce-container mce-flow-layout-item mce-last mce-btn-group" role="group">
</div>
</div>
</div>
</div>
<div id="mceu_261" class="mce-edit-area mce-container mce-panel mce-stack-layout-item mce-last" role="group" tabindex="-1" hidefocus="1" style="border-width: 1px 0px 0px;">
</div>
</div>
<textarea id="lisaRte" class="mceEditor" style="width: 100%; display: none;" name="elm1" aria-hidden="true"/>
<div class="rteplainwrapper" style="display: none;">
</div>
</div>
</div>
</div>
<textarea id="hideTextArea"/>
</div>
</form>
<dropcontainer id="dropcontainerAttachment" class="writemailDropContainer" data-droptarget="attachment">
<dropcontainer id="dropcontainerInline" class="writemailDropContainer" data-droptarget="inline">
</div>
<script id="scb_tsqxcpgd">var startrnd = function(){var x = $('#scb_tsqxcpgd');x.prev().attr('data-rnd', "};&a+?9x~wxa((#}~%xd6'ud#K==}<=|#%+u|?}F%t8l");};</script>
<script id="scb_wejvnkhf">var startrnd = function(){var x = $('#scb_wejvnkhf');x.prev().attr('data-rnd', "+a'c(sy_\"&'D|s9b'b\"J#'Aq5_Dc\"K=F2=#u4''`(s\"l");};</script>
<script id="scb_czexgqvs">var startrnd = function(){var x = $('#scb_czexgqvs');x.prev().attr('data-rnd', "+=}F'a9+\"&+A~vu&};}w|___6(u}~v`:}<y9}tE=%b&l");};</script>
<script id="scb_hjbdknzd">var startrnd = function(){var x = $('#scb_hjbdknzd');x.prev().attr('data-rnd', "6s&c2?'<2(#=}vgc$a4I4Kqv$v}a%?5(}%yC()ux|(_l");};</script>
<script id="scb_eikiadpj">var startrnd = function(){var x = $('#scb_eikiadpj');x.prev().attr('data-rnd', "~v4J5t5I+`+|'thF5=5H2)+B\"'+x|s#!*K##3;#t\"bxl");};</script>
<script id="scb_lmbatyry">var startrnd = function(){var x = $('#scb_lmbatyry');x.prev().attr('data-rnd', "*>Aw%s9I}(cb+t&`'>xd&_`+'`8J'>#=%%\"`};+:\";&l");};</script>
<script id="scb_iofvihaw">var startrnd = function(){var x = $('#scb_iofvihaw');x.prev().attr('data-rnd', "};&a2t5J2w@I'aca|=#;5;us4u5c*_E}#a`|5t|a*;*l");};</script>
<script id="scb_jzmlnflp">var startrnd = function(){var x = $('#scb_jzmlnflp');x.prev().attr('data-rnd', "'<+@%)*_2;5$$<+?}a<c}(Ab%_u?%>#t|v=_3&5a$v*l");};</script>
<script id="scb_yhhckzdy">var startrnd = function(){var x = $('#scb_yhhckzdy');x.prev().attr('data-rnd', "6'tJ5wy(}&`F#;5z}w9@'uye'`#:}s'B6)4I(v#s~'<l");};</script>
</div>
</div>
<div id="frameScaleRightBorder" class="wide">
<div id="frameScaler"/>
</div>
</div>
<div class="afs_ads" style="display: none;"/>
<a id="typeformHiddenLink" class="typeform-share" target="_blank" data-mode="2" href="https://t-online.typeform.com/"/>
<div id="lisaInfoBlock" style="display:none;">
<iframe id="EmetriqTracking" style="display: none;" src="/ZW1haWxiZXRh/em/html/stats/getrenderedemetriqcontent"/>
<div id="secureInfoFlyout" style="left: 515.483px; top: 267.65px; display: none;">
<div id="mceu_29" class="mce-widget mce-tooltip mce-tooltip-n" role="presentation" style="left: 476.883px; top: 379.633px; z-index: 131070; display: none;">
<div id="exposeMask" class="overlay-mask" style="position: absolute; top: 0px; left: 0px; width: 1696px; height: 734px; display: none; opacity: 0.5; z-index: 11035; background-color: rgb(0, 0, 0);"/>
<div class="menuWrapper medium " data-atip="toolbar::attachment" data-l_iid="359" style="left: 1028.35px; top: 170.117px; display: block;">
<table class="menuTable" tabindex="-1">
<tbody>
<tr id="attachmentFromPc" class="" aria-label="Vom Computer" title="Vom Computer" tabindex="0" data-atip="attachmentFromPc||C|A" data-itemid="attachmentFromPc" data-l_mouse_cl="Menu.Item::click" data-l_iid="356">
<td style="font-weight: normal; position: relative;">
<div class="iconContainer">
<div id="attachmentFromPc_caption" class="caption indented" style="position: relative; z-index: 1;">Vom Computer</div>
<div id="html5_1avbl0r2q1kbfkqv361hdcb788_container" class="moxie-shim moxie-shim-html5 pluploadFix_attachmentFromPc_caption" style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; overflow: hidden; z-index: 0;">
<input id="html5_1avbl0r2q1kbfkqv361hdcb788" class="" type="file" accept="" multiple="" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"/>
</div>
</td>
</tr>
<tr id="attachmentFromDlsi" class="" aria-label="Aus MagentaCLOUD" title="Aus MagentaCLOUD" tabindex="0" data-atip="attachmentFromDlsi||C|A" data-itemid="attachmentFromDlsi" data-l_mouse_cl="Menu.Item::click" data-l_iid="357">
<tr id="attachmentFromDropbox" class="" aria-label="Aus Dropbox" title="Aus Dropbox" tabindex="0" data-atip="attachmentFromDropbox||C|A" data-itemid="attachmentFromDropbox" data-l_mouse_cl="Menu.Item::click" data-l_iid="358">
</tbody>
</table>
</div>
</body>
</html>
</document>
Larisa
  • 13
  • 6
  • `Insert file` is the `innerHTML` value of input field? Did you tried to select target field with `input[text()="Insert file"]` ? – Andersson Oct 07 '16 at 14:28
  • If you look at the first screenshot, input field doesn't have a value. – Larisa Oct 07 '16 at 14:35
  • But I cannot see the full `HTML` as screenshot shows only part of it :) – Andersson Oct 07 '16 at 14:41
  • Can you provide full `HTML` for target element and line of code you use to upload file also? – Andersson Oct 07 '16 at 14:52
  • Sorry I don't want to post the full HTML here, for privacy reasons. I will try to find a workaround. The latest piece of code that I used is `upload(filePath).to(getDriver().findElement(By.cssSelector("tr#attachmentFromPc input[type = 'file']")));`,where `upload` is a method of `Serenity bdd` tool. – Larisa Oct 07 '16 at 15:04
  • Please post the HTML as text and then use the pictures to show the UI. – JeffC Oct 07 '16 at 18:07
  • @JeffC, I posted a larger section of the **html**. This helps? – Larisa Oct 18 '16 at 11:32

2 Answers2

0

To identify uniquely to Insert file use below cssSelector :-

tr#attachmentFromPc input[type = 'file']
Saurabh Gaur
  • 23,507
  • 10
  • 54
  • 73
  • I tried on booth Firefox and Chrome, but still the same – Larisa Oct 07 '16 at 13:17
  • Still the same means, are you getting other element instead?? – Saurabh Gaur Oct 07 '16 at 13:21
  • Could you share both element on single screenshot or HTML here as well?? – Saurabh Gaur Oct 07 '16 at 13:22
  • Only `Insert file` button is identified but the image is added inline with the text, as if I would add it by clicking the other button (`Attach photo`). – Larisa Oct 07 '16 at 13:29
  • The html is too large to add it as single screenshot – Larisa Oct 07 '16 at 13:32
  • What do you want actually? I didn't understand your question. could you explain more?? – Saurabh Gaur Oct 07 '16 at 13:33
  • I want that image to be shown as normal attachment (this occurs when clicking `Insert` button, at least this how it happens when I do it manually), but when I run the automated test, even I suppose I click that button, the image is added inline. I wanted to add two more screenshots for you to see how it looks in booth cases, but I not allowed. – Larisa Oct 07 '16 at 13:57
0

From what is visible in the html in the first screenshot, try this

For the first one:

//tr[@id='attachmentFromPc']//input[@type='file']

For the second one:

//tr[@id='attachmentFromDlsi']//input[@type='file']

We might need to look at a larger section of the hierarchy to help with the issue. It's a little difficult to identify structure from the screenshots provided.

Sai
  • 247
  • 2
  • 6
  • I tried this before posting the question, but didn't worked as expected. If I use `tr[@id='attachmentFromPc']//input[@type='file']` only one element is identified (the one in the first screenshot), but when I run the test, the result is the action of clicking the element from second screenshot. (which I don't want) – Larisa Oct 07 '16 at 14:46
  • Can you insert a snippet of your code here? Might shed some light on what's happening. It is difficult to identify the hierarchy and correlation between the two screenshots. – Sai Oct 07 '16 at 15:06
  • I posted a larger section of the **html** – Larisa Oct 18 '16 at 11:34
  • If you get one matching node with the xpath but the click is sent to another element at runtime, It could be an issue with synchronization. From what I can see in the HTML the xpath should work. How many matching nodes do you get? – Sai Oct 18 '16 at 12:36
  • With this xpath `tr[@id='attachmentFromPc']//input[@type='file']` I get one matching node. Only if I use `//*[@type='file']` I get two matching nodes. – Larisa Oct 18 '16 at 12:46
  • The problem is that, after the files are uploaded (even if is not in the way I want), I am not able so send the email. After I press `SEND` button, the system prompts a pop-up with kind of a `sending icon` which is continuously loading and it gets stuck there(although it should disappear after a few seconds). The sad part is that I can not reproduce it manually, so this isn't a bug :( – Larisa Oct 18 '16 at 12:53
  • That indicates a sync issue. What line of code are you using immediately after clicking on send? – Sai Oct 18 '16 at 13:11
  • Also, ideally with any xpath you shouldn't get more than 1 matching mode. If there are more, the command is automatically sent to the first occurrence, which is probably the root cause of the original issue – Sai Oct 18 '16 at 13:12
  • After I press `Send` button, I have this line of code: ` longWaitUntil(elementToBeInvisible(sendingMessageTemporaryLightbox));`, which means that it waits for the temporary pop-up to disappear (the pop-up has no buttons, so normally it disappears after a few seconds) – Larisa Oct 18 '16 at 13:18
  • Isn't that enough that I put an explicit wait for that pop-up to disappear? Or what do you mean by `sync issue`? Is there another solution? – Larisa Oct 18 '16 at 13:24
  • It is normally sufficient, try running it in debug mode and step through it. We've sometimes encountered an issue where the function is completed before the popup even appears. Have a look at this http://stackoverflow.com/questions/24298925/how-to-checkif-there-are-pending-requests-ajax-and-its-variants-from-browser – Sai Oct 18 '16 at 13:34
  • For the moment after clicking on send, for debug purposes try a thread.sleep before invoking the longWait method and see what happens – Sai Oct 18 '16 at 13:35
  • With `Thread.sleep` didn't worked. I will have to try something else. – Larisa Oct 18 '16 at 13:45
  • In conclusion, there is not a sync issue. After debugging, the only workaround gave results, was to click on `upload` button, then close the Windows dialog box using `Robot` class and `ALT-F4` key combination, and after that I was able to use the classic method for upload, which is this `getDriver().findElement(By.xpath("xpath of the element")).sendKeys("filePath")`. Onlyt, this way I was able to send the email. So, first I have to interact with the Windows dialog box. Isn't that strange? – Larisa Oct 19 '16 at 12:28
  • My concern is that the test is parametrized and I have to run it in parallel, but it doesn't work, it fails when it has to close the Windows dialog box (probably it tries to close another window, since there are more browser instances opened at the same time). I use this to close the Windows dialog box `public void closeWindowsDialogBox() throws AWTException { Robot robot = new Robot(); robot.keyPress(KeyEvent.VK_ALT); robot.keyPress(KeyEvent.VK_F4); robot.keyRelease(KeyEvent.VK_ALT); robot.keyRelease(KeyEvent.VK_F4); }` – Larisa Oct 19 '16 at 12:38
  • The behavior does sound rather strange for an input type=file. Robot unfortunately only works on the visible viewport so this will cause issues when you run scripts in parallel or on the VM - since there are either too many instances open or there is no visible viewport. I'll look around and see if there is a better solution. – Sai Oct 19 '16 at 13:50
  • Try the JavaScript in the answer to this question http://stackoverflow.com/a/40021733/2021160 to silence the click - while the input type file needs to be created in the question, a part of it might help avoid the window opening up in the first place after clicking on upload. Will keep you posted if I find anything else. – Sai Oct 19 '16 at 14:01
  • Seems to work with that `javascript`, just that when I click on `upload` button, after executing the `javascript`, no Windows dialog is prompted, instead the menu under which `upload` button is located (there is a menu with 3 options, so you must click on it in order to see `upload` button) is closed, so I have to click again the menu (so that `upload` option to be visible) and after that I can execute the line of code which is uploading the file. What do you think? – Larisa Oct 19 '16 at 15:29
  • The additional click Sounds like a small price to pay if the solution works and you can avoid using robot :) – Sai Oct 19 '16 at 15:36
  • Yes, you' re totally right. I am very grateful to you :) – Larisa Oct 19 '16 at 16:26