I am trying to use the puppeteer-sharp page.ClickAsync() method to click an element in a combo box. I need to get
this below (Canadian Dollar).
</li><li class="favorite"><div class="display">Canadian Dollar</div><div class="value">CAD</div>
<div class="container want">your text
<div class="label"><strong>Currency I want:</strong></div>
<div class="currency-container">
<div class="want-select collapse"> <div class="overlay"> <div class="colorBlock active" data-color="#0000e0" style="border-top: 2px solid transparent; border-left: 2px solid transparent; border-bottom: 2px solid transparent; color: rgb(0, 0, 224);">EUR</div> <div class="amount" align="right"></div> </div> <div class="select-container"> <div class="currencyPicker" data-index=""> <input class="search" placeholder="Type to search..."> <ul class="list" style="display: none;"><li class="groupLabel favorite"><div class="display">Favorites</div><div class="value"></div></li><li class="favorite"><div class="display">Euro</div><div class="value">EUR</div></li><li class="favorite"><div class="display">US Dollar</div><div class="value">USD</div></li><li class="favorite"><div class="display">British Pound</div><div class="value">GBP</div></li><li class="favorite"><div class="display">Canadian Dollar</div><div class="value">CAD</div></li><li class="favorite"><div class="display">Australian Dollar</div><div class="value">AUD</div></li><li class="groupLabel"><div class="display">A</div><div class="value"></div></li><li><div class="display">Afghanistan Afghani</div><div class="value">AFN</div></li><li><div class="display">Afghanistan Old Afghani*</div><div class="value">AFA</div></li><li><div class="display">Albanian Lek</div><div class="value">ALL</div></li><li><div class="display">Algerian Dinar</div><div class="value">DZD</div></li><li><div class="display">Andorran Franc*</div><div class="value">ADF</div></li><li><div
I have tried many different ways, but nothing is working.
await page1.ClickAsync(".body,.controls,.secondary,.container want,.currency-container,.want-select collapse,.select-container,.currencyPicker,.list,.favorite,.dispaly,.value, CAD");
await page1.ClickAsync(".want-select,.select-container");
await page1.ClickAsync("div[class='display']:has-text('Canadian Dollar')");
I have tried.
await page1.ClickAsync(".want-select,.select-container");
await page1.ClickAsync(".body,.controls,.secondary,.container want,.currency-container,.want-select collapse,.select-container,.currencyPicker,.list,.favorite,.dispaly,.value, CAD");
await page1.ClickAsync("div[class='display']");
await page1.ClickAsync("div[class='display']:has-text('Canadian Dollar')");
This worked
var elements = await page1.XPathAsync("//html/body/div/div/div/div/div/div/div/div/div/ul/li[5]/div[2]");
await elements[0].ClickAsync();
and this too.
await page1.ClickAsync("#hcc>div.body>div.controls>div.secondary>div.container.want>div.currency-container>div.want-select.collapse.active>div.select-container>div>ul>li:nth-child(5)>div.value")
Related
page-break is not working in firefox
im using vue, vuetify
<div :class="groupLen() ? 'group' : 'min-group'" class="page-break">
<div v-for="(group, i) in components.groups" :key="`${i}a`">
<v-card style="border: thin solid #a80707;" class="pt-0 pa-3 grey lighten-2" rounded outlined>
<v-card-title class="pl-0">{{ group.name }}</v-card-title>
<div :class="$vuetify.breakpoint.name" class="pa-0">
<div v-for="(item, i) in group.items" :key="i">
<dynamic
:componentName="item.Widget"
:properties="item.properties"
/>
</div>
</div>
</v-card>
</div>
</div>
div.page-break div {
// -webkit-column-break-inside: avoid;
// page-break-inside: avoid;
break-inside: avoid;
padding-bottom: 0.5em;
}
screenshot from firefox
screenshot from brave
here I want to add a label on the popular blogger popular posts widget, but it doesn't appear there and that's the code. Is there something wrong?
Here I have done the right thing like adding labels and so on, in normal posts it works fine, but popular post widgets don't work using this code
Code:
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/> </a>
<b:if cond='data:label.isLast != "true"'> </b:if>
</b:loop>
Try my custom Popular Post. Its has label on it.
.grid-col {grid-template-columns: repeat(3,1fr);display: grid;}
.grid-col .post:nth-child(n+2) {margin: 10px;}
.grid-col section:nth-child(1) img {height: 205px;object-fit: cover;object-position: top;}
.grid-col img {width: 100%}
.grid-col section:nth-child(1) {grid-column: 1 / -1;}
.grid-col section:nth-child(n+2) img, .ofc {height: 105px;object-fit: cover;}
.grid-col section:nth-child(n+2) .post-title,.grid-col section:nth-child(n+2) .byline, .grid-col section:nth-child(n+2) .date {display: none;}
.ov-img, .ov-title {grid-row: 1 / -1;}
.ov-img {grid-column: 1 / -1;}
.ov-title {grid-column: 1 / -1;align-self: self-end;padding: 10px 15px;overflow: hidden;}
.grid-col section:nth-child(1) .ov-title {background: linear-gradient(to bottom,#0000,#000);}
.item-thumbnail {position: relative;display: grid;}
.item-thumbnail:hover img {filter: brightness(50%);transition: .2s}
.PopularPosts{counter-reset: section;}
.grid-col section .counter::before {counter-increment: section;content: counter(section);position: absolute;top: 6px;left: 4px;background: #FF6347;color: white;padding: 3px 7px;font-size: 13px;border-radius: 3px;}
.PopularPosts .post-title {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.PopularPosts a,.genre-date{color: white;text-decoration: none;font-weight: 500}
.genre-date {font-size: 14px;}
.widget-title {display: flex;justify-content: space-between;align-items: center}
.view-all {background: #FF6347;text-transform: uppercase;font-size: 9px;padding: 3px 6px;border-radius: 2px;}
<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<div class='widget-title'>
<b:include name='widget-title'/>
<a class='view-all' href=''>View All</a>
</div>
<div class='widget-content'>
<b:include name='snippetedPosts'/>
</div>
</b:includable>
<b:includable id='postLabels'>
<span class='byline post-labels'>
<span class='byline-label'>Genre: </span>
<b:loop index='i' values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>,
</b:loop>
</span>
</b:includable>
<b:includable id='snippetedPostContent'>
<div class='post-content'>
<b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
</div>
</b:includable>
<b:includable id='snippetedPostThumbnail'>
<div class='item-thumbnail relative overlay'>
<a class='block ov-img b-img' expr:href='data:post.url'>
<b:include data='{ image: data:post.featuredImage, imageSizes: [172, 244], imageRatio: "1:2", sourceSizes: "272px" }' name='responsiveImage'/>
<span class='counter'/>
</a>
<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
</div>
</b:includable>
<b:includable id='snippetedPostTitle'>
<b:if cond='data:post.title != ""'>
<div class='ov-title'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<div class='genre-date'>
<b:include name='postLabels'/>
<div class='date mt-5'><data:post.date/></div>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='snippetedPosts'>
<div class='grid-col' role='feed'>
<!-- Don't render the post that we're currently already looking at. -->
<b:loop values='data:posts filter (p => p.id != data:view.postId)' var='post'>
<section class='post' role='article'>
<b:include name='snippetedPostContent'/>
</section>
</b:loop>
</div>
</b:includable>
</b:widget>
This is the code that i have:
<div class="news-container">
<div class="flex_column av_two_third flex_column_div first">
<div class="news-date"><h2>jan 2015</h2></div>
<div class="news-entry">
<div class="news-title"><h2>new title</h2></div>
<div class="news-source">wearhouse</div>
<div class="news-content">excerpt goes here.</div>
</div>
</div>
<div class="flex_column av_one_third flex_column_div">myimage</div>
</div>
how can i get the image to float in the middle vertically of it's div.
i tried adding this code:
.img{
position: absolute;
top: 50%;
margin-top: -100px;
}
but because i have padding of 30px on the news containter it doesn't seem to work properly.
I have my live page at:
http://nodal.rudtek.com/about-us/press-room/news-features/
Try using line-height, usually it works perfectly for me, so chances are it will for you too. Hope it helps.
Can i use image sprites for my form submit button, tried a few things but nothing seems to work.
.button, .download, .OK, .file{
background: url(app/sprites.png) no-repeat;
}
.button{
background-position: -1px -212px ;
width: 170px;
height: 30px;
}
My form
<form action="add.php" method="post" value="Username">
<div style="float:left; margin-left:15px;"><input type="text" name="fbid" required></div>
<div style="float:left; margin-left:2px;"><input type="submit" value="Submit"></form>
Right now you are missing a class on the input.
<input type="submit" class="button" value="Submit">
With that it'll work.
I put it into a jsFiddle, using a different image because I don't have access to yours. You can play with the position, in incriments of 32px.
jsfiddle.net/CzWCv
Have you tried
<div class="button" style="float:left; margin-left:2px;"><input type="submit"
value="Submit"></form>
??
I've got this form:
<form id="imageinputpopup" class=suggestionsubmit style="display: none">
<span>Add a thing!</span><br/>
<label>url: </label><input name="imageurl" type="url"><br/>
<label>file: </label><input name="imagefile" type="file"><br/>
<input type='hidden' name='schoolid' class="schoolid">
<input type="submit" value="Submit">
</form>
And this document.ready:
<script type="text/javascript">
$(document).ready(function() {
$('.schoolid').val(get_gmap_value('school_id'));
$(".allow-submission").live('click', function(){
if($(this).attr('inputtype')=="colorpicker"){
.....
} else if($(this).attr('inputtype')=="image"){
remove_hidden("#imageinputpopup");
add_fieldname($(this), $("#imageinputpopup"));
$("#imageinputpopup").dialog();
} else if($(this).attr('inputtype')=="text"){
....
} else {
//nothing
}
});
$(".suggestionsubmit").submit(function(){
event.preventDefault();
alert($(this).html());
$(this).ajaxSubmit({
url: '/save-school-suggestion/',
type: 'post',
success: function(response){
response = jQuery.parseJSON(response);
// Check for login redirect.
// if ( response.requireLogin ) {
// alert('Sign up or log in to save your answer');
// } else {
$('.suggestionsubmit').dialog('close');
// }
}
});
});
});
function add_fieldname(element, addto){
var elementname = document.createElement('input');
elementname.type = 'hidden';
elementname.name = 'fieldname';
elementname.value = element.attr('fieldname').replace(' ', '_');
$(elementname).addClass('fieldname');
addto.append(elementname);
}
function remove_hidden(element){
$(element+' .fieldname').remove();
}
But the file field isn't showing up server side.
Why?
I found this in the documentation:
Why aren't all my input values posted?
jQuery form serialization aheres closely to the HTML spec. Only successful controls are valid for submission.
But I don't understand why my file control would be invalid.
I have another submission form in a different place on my site that is almost identical and works perfectly...
EDIT: this is the other form that does work (it has some extra stuff in it, but the form tag just has an id, like the problem one, and the input tags are the same).
<form id="photos-submission-form6">
<input type="hidden" name="section" value="photos">
<input type="hidden" name="school" id="photos-submit-school6">
<div style="margin-bottom: .5em">
<p style="position: relative; width:80%; font-size: 14px; display: inline" id="photos-anonymity-header6">Post as: null</p>
<img id="helpicon6" src="/static/img/help-icon.png" style="float: right; cursor: pointer; padding-left:1em;">
<div id="explanation6" style="display: none; padding:1em; background-color:white; border:2px solid gray; position: absolute;z-index:30; right:5px; top:5px">For more posting options, <a id="profilelink6" href="/profile/">fill out your profile</a></div>
</div>
<div id="photos-anonymity-select6" style="margin-bottom: .75em; width:412px" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%; "></a></div>
<input type="hidden" id="photos-anonymity-level6" name="anonymity-level" value="username">
<span style="line-height: 40px;">
<label class="photouploadlabel">URL</label><input type="text" name="image-url" style="width: 335px"><br>
<label class="photouploadlabel">File</label><input type="file" name="image-file" style="width: 335px"><br>
<label class="photouploadlabel">Caption</label><input type="text" id="image-caption6" name="image-caption" style="width: 335px; color: rgb(128, 128, 128); ">
</span>
<div style="height: 30px; margin-top: 1em; width: 413px;">
<label id="photos-tagsbutton6" style="margin-right: .5em; cursor: pointer; vertical-align: bottom; float:left; line-height: 1.8em;">Tags</label>
<input id="photos-tagsinput6" style="display: none;" type="text" name="tags">
<button id="send-photos-suggestion6" disabled="" style="float:right; position: relative; bottom: 7px; right: -4px;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true"><span class="ui-button-text">Post</span></button>
</div>
</form>
This is probably not the case but are sure there are no spelling mistake server side? like you would be using $_FILE instead of $_FILES? Could you post the relevant php also?
Also, definitely not an issue but it is recommended to close your input tags, now like this:
<input ... />
Add enctype="multipart/form-data" attribute to your form.
Try to change the type of the input imageurl from url to text:
FROM:
<label>url: </label><input name="imageurl" type="url"><br/>
TO:
<label>url: </label><input name="imageurl" type="text"><br/>
I am not sure, but maybe the jquery plugin fails serializing the form due to invalid type attribute of image_url.
Hey you just forgot to add ---> enctype="multipart/form-data" in the form tag. This will help you out.
I think you have a problem with the binding in javascript not recognising your file.
Try binding your submit trigger event with another live() function
i.e. change
$(".suggestionsubmit").submit(mooFar(e));
to
$(".suggestionsubmit").live('submit', mooFar(e));
...........I was looking in the wrong place in the request for the file.
Server side should have been:
if not s.url_field and 'imagefile' in request.FILES:
s.image_field = request.FILES['imagefile']
instead of
s.image_field = request.POST.get('imagefile', None)
Complete and utter fail on my part.
Make sure the files you're testing aren't outside the max file size, it would be worth setting this in your HTML.
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
Also, testing without the display:none might be worth while until you have the form working; which browser are you testing in?