Background:
I administer an Amazon shop for a category that is unsupported by the Amazon bulk upload tool. The shop contains (once this question is resolved) +150 individual products with 6-9 preview images each and in 6 EU sites (huge manual upload effort).
I decided to use Selenium and my basic python skills to automate the upload.
Problem:
All works perfectly fine except for image upload. I had used this code in the past to send images into an input field:
driver.find_element_by_css_selector('input[type="file"]').send_keys('path/to/local/image')
Modifying this to fit to the image upload page in question:
driver.find_element_by_id('main_image_url').send_keys('path/to/local/image')
Returns a sea of red:
File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages/selenium/webdriver/remote/errorhandler.py", line 192, in check_response
raise exception_class(message, screen, stacktrace)
ElementNotVisibleException: Message: element not visible
(Session info: chrome=53.0.2785.116)
(Driver info: chromedriver=2.23.409710 (0c4084804897ac45b5ff65a690ec6583b97225c0),platform=Mac OS X 10.11.6 x86_64)
Also tried:
I have read around a bit but my knowledge of Javascript is null so I have blindly tried a few javascript snippets to make the element visible first to no avail.
driver.execute_script('document.getElementById("main_image_url").style.visibility = "visible";')
I've also read some solutions involving trying to navigate the actual dialogue window with complicated combinations of send_keys() but sound like trouble.
I'm on a Mac and using the Chrome driver.
Any tips much appreciated
HTML element of page:
<div id="main_image_url-wrapper" class="a-row a-spacing-medium input-container">
<div data-attribute-name="main_image_url"
data-image-index="0" class="a-row a-grid-vertical-align a-grid-center ilui-image-input-container image-not-selected hide-remove-button ilui-post-attribute">
<input id="main_image_url" name="main_image_url"
value="" cssClass="image-source-of-truth"
type="hidden" autocomplete="off"
/>
<div class="a-row">
<label for="main_image_url" class="label">
<span class="attribute-label-text">Main Image
<span class="a-size-base a-color-tertiary a-text-italic a-text-normal">
(required)
</span> </span> <span class="a-declarative"
data-action="a-popover" data-a-popover="{"name":"attributeHelpmain_image_url","inlineContent":"The URL where a main image of the product is located. It's important that this is supplied for all products."}">
<span class="help-icon"></span> </span>
</label>
</div>
<div class="a-row ilui-image-wrapper ilui-visualization-element">
<span class="a-declarative" data-action="image-select-main_image_url"
data-image-select-main_image_url="{}"
id="image-container-declarative">
<div tabindex="0" class="ilui-image-select-container">
<div id="image-camera-icon" class="icon-container">
<i class="icon"></i>
<ul class="a-nostyle a-vertical error-list image-error-list"></ul>
</div>
</div>
</span> <img src="" class="ilui-img-thumbnail"
/>
<div class="image-loading-overlay a-hidden">
<div class="a-section upload-progress-meter image-progress-bar">
<div class="a-meter" aria-label="0%">
<div class="a-meter-bar"
style="width: 0%;"></div>
</div> <span class="percentage"></span> </div>
</div> <span class="a-declarative" data-action="image-remove-button-main_image_url"
data-image-remove-button-main_image_url="{}">
<div tabindex="0" class="remove-image-button">
<i class="a-icon a-icon-close"></i>
</div>
</span> </div>
</div>
Related
i have a webview application which loads html locally and i want to update existing data
<div id="sport">
<div class="case" id="jarak">
<a tabindex="-1"> Sport Channel </a>
<div id="hide">
<div class="scroll-area">
<ul>
<li class="scroll-nav">
<img onclick="location.href='http://xxx'; " tabindex="2" src="http://xxx" alt="xxx" class="squareBig"></img>
</li>
<li class="scroll-nav">
<img onclick="location.href='http://xxx'; " tabindex="2" src="http://xxx" alt="xxx" class="squareBig"></img>
</li>
</ul>
</div>
</div>
</div>
</div>
there you see a flexbox, i will update it regularly img url and link in [li] tag, any ideas?
thanks :)
for now i keep use webview load html totally online but i want my webview just online for change some url on my html, I hope the answer related with json.
I am trying to differentiate PDF downloads from PDF opens in a new tab/browser withing Google Analytics or Google Tag Manager
I have two HTMLs
<a href="#" class="resource__link link-download link-file link-file--pdf" rel="noreferrer noopener" target="_blank" download="" modaldialog="[object Object]">
<div class="p-0 resource__border card card-body">
<div class="resource__outer-div ">
<div class="resource__img"><img alt="Product Insert" src="/content/_assets/images/Placeholder/file.png"></div>
<div class="pl-4">
<p class="resource__title card-text">Product Insert</p>
<p class="d-block resource__size card-text">454 KB</p>
</div>
</div>
</div>
<span class="sr-only">This links to a pdf file</span>
</a>
The one above downloads the PDF.
Prescribing Information<span class="sr-only">This links to a pdf file</span>
The one above opens in a new link
I want to add a custom dimension that shows whether the clicks lead to a download or a new tab.
Any ideas?
Thank you
I try to click a button whenever the button shows. However when the button shows, in google chrome's page source, the actual URL is not shown. Here's the source:
<div id="fname2" style="display:none" > Description1 <br/> <span> Description2 </span></div>
<div id="fname"><h1 class="ThreeDee"> Preparing Your Links....<br/> Please wait...</h1></div>
<div id="hata" style="display:none" > Failed to Create Links.. <br/> <span>Please Restart your link Translation . </span></div>
<div id="vip" style="display:none" > None This Link Download your consent <br/> <span> More Description1.. </span></div>
</div>
<div id="buton" style="display:none">
<div class="info-link right" >
Download
</div>
</div>
# is a link of the current page(it is a hyperlink), when it should be the URL of next page. However when I "inspect" the button after it appears:
<div id="wrapper">
<div class="main-menu clearfix">
</div>
<center> <img src="./images/example.png"></center>
<div class="info-v3 clearfix">
<div class="info-txt left">
<div id="fname2" style=""> Created to download Links <br> <span> Download your Download Push Button </span></div>
<div id="fname" style="display: none;"><h1 class="ThreeDee"> Preparing Your Links....<br> Please wait...</h1></div>
<div id="hata" style="display:none"> Failed to Create Links.. <br> <span>Please Restart your link Translation . </span></div>
<div id="vip" style="display:none"> None This Link Download your consent <br> <span> This file is a private Vip our users.. </span></div>
</div>
<div id="buton" style="">
<div class="info-link right">
Download
</div>
</div>
</div>
</div>
Any idea how to click the button? Thanks!
The link must be a side effect of JS. You can't see the changes made by JS in source code. JS is client-side. It executes on the browser. However, you can see in inspect element.
And source code doesnt show the side-effects of executed JS. It show the page got from the server.
You can use waitForKeyElements with jQuery's :visible selector to click the button only once it is displayed.
Something like:
waitForKeyElements (
"#button:visible",
clickButtton
);
function clickButton(jNode) {
jNode.click();
}
I am trying to implement a carousel using impress.js similar to http://demo.tutorialzine.com/2012/02/css3-product-showcase/#/music.
I tried developing it but facing some problem like when clicked on left or right icon, the screen is moving upwards and downwards. The work that i have done is uploaded in my server. Link:
http://think360apps.co.in/evdt/issued/index.html#intro
Also the code is given below:
<div class="animate-slider">
<div id="impress" class="impress-not-supported">
<div id="intro" class="step" data-x="0" data-y="0">
<h2>Introducing Galaxy Nexus</h2>
<p>Android 4.0<br /> Super Amoled 720p Screen<br /> 1.2 GHz Dual Core CPU<br /> 32 GB of storage<br /> Fast Camera</p>
<img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
<h2>Simplicity in Android 4.0</h2>
<p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel to Android. Simple layouts with subtle animations and delightful flourishes make everything feel alive. </p>
<img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
<h2>Connect & Share</h2>
<p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing with mobile devices just as easy at it is in person. </p>
<img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>
<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
<h2>Instant Upload</h2>
<p>Your photos upload themselves with Instant Upload, which makes it much easier to share them with family and friends.</p>
<img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>
<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
<h2>Jam on with Google Music</h2>
<p>Google Music makes discovery, purchase, and listening effortless and fun. Store your entire collection for free, and stream your music to your Galaxy Nexus, computer, or other Android devices.</p>
<img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>
Please let me know where i am doing wrong.Please help.
You should have this code to control the button:
<script>
$("#arrowRight").click(function () {
impress().next();
});
$("#arrowLeft").click(function () {
impress().prev();
});
</script>
By the way, the link you've given is invalid.
i have create a app. in phoneGap. it work fine on iphone but in android click event not work.
have any idea what is wrong in my code
this is my html:-
<div id="logInScreen">
<div class="logInScreen">
<a class="main_logo" href="#"><img src="logo.png" alt=""/></a>
<p class="main_text">Digital Discount Vouchers <br /> On Your Phone</p>
<div id ="divRegister" class="main_reg" onclick="GeneralTransit('#register')">Register</div>
<div id ="divNotNow" class="main_reg" onclick="GeneralTransit('#t_featured')">Not Now...</div>
<div id ="divLogin" class="main_reg" onclick="GeneralTransit('#login')">Login</div>
<div class="main_forgot" onclick="GeneralTransit('#login_fog')">FORGOT PASSWORD?</div>
<p class="main_text2">IN ORDER TO PURCHASE ADDITIONAL VOUCHERS <br /> YOU NEED TO BE REGISTERED</p>
<p class="main_text3">POWERED BY YALLAMOB.COM</p>
</div>
</div>
there is also some other div's that hide and show on conditions .
I thought it was the missing ';' (GeneralTransit('#register');)
But it works here with and without the';': http://jsfiddle.net/ZVFgW/11/
Your problem is likely somewhere else.
Did you debug it using Chrome or Firefox+Firebug?