Uploading external file in protractor - protractor

I am trying to upload a remote file through window popup using protractor but none of the solutions work.
Request someone to please help
My code is something like:-
var remote = require('F:/untitled/node_modules/selenium-webdriver/remote');
browser.setFileDetector(new remote.FileDetector());
var fileElem = element(by.css('input[type="file"]'));
//files
//var fileElem = element(by.css('div.file-uploader'));
var absolutePath = 'F:/1778.docx';
browser.switchTo().activeElement();
browser.executeScript("arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px';arguments[0].style.opacity = 1", fileElem.getWebElement());
fileElem.sendKeys(absolutePath);
browser.driver.sleep(100);*/
source code is something like
File Drop not
available
<div ng-show="dropAvailable" ng-switch="buttonType" layout="row" layout-align="center center" class="">
<!-- ngSwitchWhen: fab -->
<!-- ngSwitchWhen: icon -->
<!-- ngSwitchWhen: text-icon --><div class="file-upload-button ng-scope" ng-switch-when="text-icon">
<button class="btn btn-primary ng-binding" aria-label="Add Attachment">Add Attachment <span ng-class="icon" class="glyphicon glyphicon-paperclip"></span></button>
</div>
<!-- ngSwitchDefault: -->
</div>
</div><!-- end ngIf: canUploadFn() -->
<!-- Display the existing files -->
<!-- ngIf: showAttachments -->

Related

How to get span value which has ng-bulding class?

I can get value when I tried this on console using:
$x("//*[#class='file-folder-breadcrumbs-item-part name']")[1].innerText;
or
document.querySelector("[ng-if='currentPathNodes.length']").innerText;
but not able to convert in this JavaScript code in Protractor code.
Below is HTML
<div class="file-folder-breadcrumbs-child-panel ng-hide" ng-shenter image ow="isExpanded(root.full)">
<!-- ngRepeat: child in root.nodes -->
<div ng-repeat="child in root.nodes" class="ui-state-default filedrop file-folder-breadcrumbs-item-child ng-scope" ng-click="navigateToChild($event, child, root)">
<span class="ng-binding">TestFolder</span>
</div>
<!-- end ngRepeat: child in root.nodes -->
</div>
I think this is what you are looking for:
const breadcrumbPart = element.all(by.css('.file-folder-breadcrumbs-item-part.name').first();
const myText = await breadcrumbPart.getText();
// console.log(myText);
expect(myText).toEqual('something');
Or synchronous solution:
const breadcrumbPart = element.all(by.css('.file-folder-breadcrumbs-item-part.name').first();
breadcrumbPart.getText().then(myText => {
// console.log(myText);
expect(myText).toEqual('something');
});

XPages Date picker in a modal

If I use the standard date picker control, on a normal xpage, everything works perfectly, however, if I have it within a modal, when I call the modal, and the field displays fine, but if I then click on the picker icon, the calendar only flashes up and just disappears so that I can't actually select a date.
Has anyone had any issues / resolutions to this? Modal code below:
<!-- Modal ONE -->
<div class="modal fade" data-keyboard="false" data-backdrop="static"
tabindex="-1" role="dialog" id="modalDueDate">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header modal-header-default">
<h4 class="modal-title">Change Due Date</h4>
</div>
<div class="modal-body">
<xp:inputText id="dtChangeDueDate">
<xp:dateTimeHelper id="dateTimeHelper1" />
<xp:this.converter>
<xp:convertDateTime type="date" />
</xp:this.converter>
</xp:inputText>
</div>
<div class="modal-footer">
<xp:button type="button" styleClass="btn btn-danger" id="button4">
<xp:this.attrs>
<xp:attr name="data-toggle" value="modal" />
<xp:attr name="data-target" value="#modalDueDate" />
</xp:this.attrs>
Cancel
</xp:button>
<xp:button type="button" styleClass="btn btn-success" id="button5">
<xp:this.attrs>
<xp:attr name="data-toggle" value="modal" />
<xp:attr name="data-target" value="#modalDueDate" />
</xp:this.attrs>
Update
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:try{
var noteID:string = compositeData.noteID;
print ("Parent NoteID: " + noteID)
var doc:NotesDocument = database.getDocumentByID(noteID);
var dueDate = getComponent("dtChangeDueDate").getValue();
//var oldDueDate = doc.getItemValueString("DueDate");
var docWrap = wrapDocument(doc);
var dt = new Date();
var arrHistory:array = AddObjectivesHistoryItem(docWrap, dt, "Due Date Changed To "+dueDate, userBean.displayName);
docWrap.replaceItemValue("DueDate",dueDate);
docWrap.save();
var o = {}
o.title = "Due Date Updated";
o.body = "The due date has been succesfully updated to " + dueDate;
o.alertIcon = "fa-thumbs-up fa-lg";
o.autoClose = true;
o.alertType = "success";
//o.growl = true;
requestScope.put("alertServer",o)
}catch(e){
openLogBean.addError(e,this.getParent());
}}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</div>
</div>
</div>
</div><!-- Modal ONE End-->
Check the relative z-index css settings for the modal and the date-time helper. I don't know if the z-index of the modal is putting it in front of the picker. I'd also look at the Network tab in whatever browser developer tools you're using to see if there's anything unusual there.

two subscribe forms on same page with mailchimp

I want to have two mailchimp forms ( linked to the same mailchimp list ) within the same landingpage in a Shopify Store. *it is a long landing page so I want them to be able to subscribe two times along the way.
It seems the second form does not work and the only think it does is refreshing the page. I am pretty sure there is a conflict with their ID´s because the two forms have the same ID ( id="mailchimp" ) but I believe it is neccesary for them to work.
I may have a very easy-to-resolve question but i have been struggling with it for a while. It seems there is no documentation about it ( apart from inserting one of the forms within an iframe -> I am not confortable with this solution because I want to record with GTM ( GA ) customer succesuful submitions etc. ).
The code for the forms ( snippet that it is called two times within the page ):
<!-- Newsletter Section -->
<section id="services" class="small-section bg-gray-lighter">
<div class="container relative">
<form class="form align-center newsdown" id="mailchimp">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="mb-20">
<input placeholder="Introduce tu email" class="newsletter-field form-control input-md round mb-xs-10" type="email" pattern=".{5,100}" required/>
<button type="submit" class="btn btn-mod btn-border-c btn-medium btn-round mb-xs-10">
Suscribe
</button>
</div>
<div id="subscribe-result"></div>
</div>
</div>
</form>
</div>
</section>
<!-- End Newsletter Section -->
What can I do to have these two identical forms working on the same page? Have in mind I don't have access to the javascript ( because mailchimp has Shopify app that makes this connection ).
If you wrap each mailchimp form in a ...., then run this script on the page, it will re-assign all IDs of the non-focused form, and re-bind the submit event. A bit hacky, but it works if you're in a bind.
$(document).ready(function() {
// only execute if confirmed more than 1 mailchimp form on this page
if ( $('.mc-form-instance').length > 1 ) {
$('.mc-field-group > .required').on('focus', function() {
var thisField = $(this);
// backup all mc-form ids on this page
$('.mc-form-instance [id]').each(function() {
var currentID = $(this).attr('id');
if ( currentID.indexOf('-bak') == -1 ) {
$(this).attr('id', currentID + '-bak');
}
});
// change the current form ids back to original state
var thisForm = thisField.closest('.mc-form-instance');
thisForm.find('[id]').each(function() {
var currentID = $(this).attr('id');
if ( currentID.indexOf('-bak') != -1 ) {
$(this).attr('id', currentID.replace('-bak', ''));
}
});
});
// re-bind
$.getScript('//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js');
}
});
As it appeared there were a conflict with two exact forms ( same javascript etc ) so I implemented the second form differently:
<!-- Newsletter Section -->
<section id="services" class="small-section bg-gray-lighter">
<div class="container relative">
<form action="YOURACTION;id=YOURID" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="row">
<div class="col-md-8 col-md-offset-2" style="text-align: center;">
<div class="newsletter-label font-alt">
¿Te interesa? Recibe más noticias y tutoriales exclusivos
</div>
<div class="mb-20">
<input name="EMAIL" id="mce-EMAIL" placeholder="Introduce tu email" class="newsletter-field form-control input-md round mb-xs-10 required email" type="email" pattern=".{5,100}" required/>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-mod btn-border-c btn-medium btn-round mb-xs-10">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_5307a1008b76c5446a7303622_18658ede2a" tabindex="-1" value=""></div>
<div class="form-tip">
<i class="fa fa-info-circle"></i> Pocos emails, pero de calidad. Nunca Spam. Te servirán.
</div>
<div id="subscribe-result"></div>
</div>
</div>
</form>
</div>
</section>
<!-- End Newsletter Section -->
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='dropdown';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[5]='MMERGE5';ftypes[5]='url';fnames[7]='MMERGE7';ftypes[7]='text';fnames[6]='MMERGE6';ftypes[6]='birthday';fnames[8]='MMERGE8';ftypes[8]='text';fnames[9]='MMERGE9';ftypes[9]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

Ionic Android inappbrowser plugin - set all links in iframe to open in system browser

How could I set all links inside iframe to open in system web browser, instead of WebView? I'm using inappbrowser plugin.
<ion-view style="" title="iframe">
<ion-content class="has-header" overflow-scroll="true" padding="true">
<div style="" class="list card">
<div class="item item-divider-android">iframe content</div>
<div class="item item-body-android">
<div style="">
<center>
<iframe src='{{trustSrc(iframe.src)}}' frameborder="0" width="100%" height="500" scrolling="yes"></iframe></center>
</div>
</div>
</div>
</ion-content>
I found this solution in that gist (I didn't write it).
Basically it declares an angular filter that converts href links into window.open that opens the links using inappbrowser plugin
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.filter('hrefToJS', function ($sce, $sanitize) {
return function (text) {
var regex = /href="([\S]+)"/g;
var newString = $sanitize(text).replace(regex, "onClick=\"window.open('$1', '_blank', 'location=yes')\"");
return $sce.trustAsHtml(newString);
}
});
myApp.controller('MyCtrl', function ($scope) {
$scope.html = "This a link: <a href='https://www.google.com'>Google</a> :)";
$scope.plaintext = "This is a link: https://www.google.com :) "
});
Usage in your HTML template:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<h1>Before</h1>
<p ng-bind-html="html"></p>
<p ng-bind-html="plaintext"></p>
<h1>After</h1>
<p ng-bind-html="html | hrefToJS"></p>
<p ng-bind-html="plaintext | linky | hrefToJS"></p>
</div>
</div>

tt_news template dont show images

I am developing a webpage with typo3 and tt_news, i edited the tt_news_template_v3 so the news appear in the way I want. I edited the TEMPLATE_LIST3 in this way:
<!-- ###TEMPLATE_LIST3### begin
This is the template for the list of news in the archive or news page or search
-->
###NEWS_CATEGORY_ROOTLINE###
<!-- ###CONTENT### begin
This is the part of the template substituted with the list of news:
-->
<!-- ###NEWS### begin -->
<article class="box">
<span class="news-list-date" style="margin-left:80%">###NEWS_DATE###</span>
<div class="image-border">
<a href="#" class="image image-left">
<!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###-->
</a>
</div>
<h2><!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--></h2>
<h3 class="subtitulos">###NEWS_SUBHEADER###</h3>
<p>###NEWS_CONTENT###</p>
<!--<p>###CATWRAP_B### ###TEXT_CAT### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###</p>-->
<p class="button">
<!--###LINK_ITEM###--> Ver Más <!--###LINK_ITEM###-->
</p>
</article>
<!-- ###NEWS### end-->
<!-- ###NEWS_1### begin -->
<div class="row" style="margin-top:15px; display: inline-block; width:100%">
<div class="6u">
<section class="box tbox">
<h2><!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--></h2>
<h3 class="subtitulos">###NEWS_SUBHEADER###</h3>
<div class="image-border">
<a href="#" class="image image-full">
<!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###-->
</a>
</div>
<p>###NEWS_CONTENT###</p>
<!--<p>###CATWRAP_B### ###TEXT_CAT### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###</p>-->
<p class="button">
<!--###LINK_ITEM###--> Ver Más <!--###LINK_ITEM###-->
</p>
</section>
</div>
<!-- ###NEWS_1### end-->
<!-- ###NEWS_2### begin -->
<div class="6u">
<section class="box tbox">
<h2><!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--></h2>
<h3 class="subtitulos">###NEWS_SUBHEADER###</h3>
<div class="image-border">
<hr class="cl-right" />
###NEWS_IMAGE###
</div>
<p>###NEWS_CONTENT###</p>
<!--<p>###CATWRAP_B### ###TEXT_CAT### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###</p>-->
<p class="button">
<!--###LINK_ITEM###--> Ver Más <!--###LINK_ITEM###-->
</p>
</section>
</div>
<!-- ###NEWS_2### end-->
<!-- ###CONTENT### end -->
</div>
this is my typoscript:
###tt_news
plugin.tt_news.pageBrowser {
maxPages = 10
showPBrowserText = 0
showResultCount = 0
showFirstLast = 0
browseBoxWrap.wrap = ds|end
dontLinkActivePage = 1
pagefloat = right
showRange = 0
disabledLinkWrap = <li>|</li>
inactiveLinkWrap = <li>|</li>
activeLinkWrap = <li style="margin-right:5px;">|<li>
LinksWrap =
showResultsWrap = |
showResultsNumbersWrap =<li>|</li>
browseBoxWrap = <div style="text-align:center">
browseLinksWrap = |
}
plugin.tt_news.usePiBasePagebrowser = 1
#-----------------------------------# idioma e imagenes tt_news#-----------------------------------
plugin.tt_news {
displayList {
content_stdWrap.crop = 300 | ...
image.file.maxW = 87
image.file.maxH = 59
image.file.width = 87c
image.file.height = 59c
image.altText.field = imagecaption
image >
image.stdWrap.cObject = IMAGE
image.stdWrap.cObject.file = GIFBUILDER
image.stdWrap.cObject.file {
XY = 87,59
10 = IMAGE
10 {
offset = 0,0
file {
import=uploads/pics/
import.data = field:image
import.listNum = 0
import.override.field = image
maxW = 87
maxH = 59
width = 87c
height = 59c-0
}
}
}
}
_LOCAL_LANG.default {
pi_list_browseresults_first = Primera página
pi_list_browseresults_last = Última página
pi_list_browseresults_page = Página
pi_list_browseresults_prev = < Anterior
pi_list_browseresults_next = Siguiente >
}
}
plugin.tt_news.newsFiles.stdWrap.HTMLparser.tags.img.fixAttrib.width.set = 16
plugin.tt_news.newsFiles.stdWrap.HTMLparser.tags.img.fixAttrib.height.set = 18
#page.includeCSS {
#file1 = fileadmin/templates/webuax/css/uax.css
#file1.media = screen
#}
plugin.tt_news.enableConfigValidation = 0
## Hide the "no news id given" & "no news in this list
## messages, they might scare people
plugin.tt_news._LOCAL_LANG.es.noNewsIdMsg = &nbsp
plugin.tt_news._LOCAL_LANG.es.noNewsToListMsg = &nbsp
##para que coja los 3 layouts de noticias de la portada
plugin.tt_news.alternatingLayouts = 3
plugin.tt_news._LOCAL_LANG.es {
more =
}
plugin.tt_news._LOCAL_LANG.en {
more =
}
but the ###NEWS_IMAGE### dont work, it renders like this:
<img src="" width="" height="" border="0" alt="">
If I use the single view news, its works, rendering this
<img src="uploads/pics/imagenew.png" width="120" height="120" border="0" alt="">
Anybody knows how to solve it?
thanks in advance
I answer my own question:
The problem was in the resizing of the images, so I installed the JB GD Resize extension, and now it works like a charm
I guess image.stdWrap.cObject = IMAGE does not work - or import=uploads/pics/ is wrong. So, why do you want to use GIBUILDER? There is no need to (i guess).
Your first configuration
image.file.maxW = 87
image.file.maxH = 59
image.file.width = 87c
image.file.height = 59c
looks correct - it should work. So just remove the GIFBUILDER-stuff. I would not expect image.stdWrap to work. It depends on the extension, if "image." is a real IMAGE object. Often it is not!