ff.findElementByxpath(//object[# id='slPlugin2']).click();
is not recognizing the element.
And also suggest me the way to upload media through webdriver
<table class="imgTable photoTable" cellspacing="0">
<div id="fileUploadControl404" class="fileUpload t-toolbar t-grid-toolbar t-grid-top">
<object id="slPlugin2" width="117" height="32" data="data:application/x-silverlight," type="application/x-silverlight">
<param value="/LMM/ClientBin/FileUpload.xap" name="source">
<param value="Url =https://lmmwipqa.blob.core.windows.net/uploads?se=2013-12-28T07%3A18%3A43Z&sr=c&sp=w&sig=fxuPdwl4huKRISO%2BCPdZIQxh0i5cdnGjWKO8okj2O34%3D, Parent =fileUploadControl404, Caption =Add Photo" name="initParams">
</object>
</div>
//object[# id='slPlugin2']
The above parameter should be within double quotes,i.e., a string should be passed as parameter to findElementByXPath().
The required statement can be rewritten as follows :
ff.findElementByXPath("//object[#id='slPlugin2']").click();
With respect to clicking on invisible elements, the following statement can be used :
(Note : This assumes the page has jQuery on it)
((JavascriptExecutor)driver).executeScript("$('selector_of_element').click();");
For file upload you can refer this.
I think, ff.findElementById("slPlugin2") would be more shorter way to find the element,
but, anyway unfortunatelly, WebDriver will be not be able to handle the elements
inside the Silverlight embeded app.
I'd recomend to get the parent div: ff.findElementById("fileUploadControl404")
Get its coordinates with .getLocation();
Use Java Robot
or Sikuli in order to manipulate the embeded control.
Related
I'm playing around with a basic Dot-Net web assembly application. In the application I'm displaying two images using two different image tags image and img. The size of the image is bound to a private variable Size. I've noticed a problem where images do not render in a specific scenario using the image tag.
Replication:
dotnet new blazorwasm
I downloaded the SVG from: Bootstrap icons, then I placed the SVG file in "wwwroot/Media/".
In index.razor I've updated the code as follows:
#page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size">
<image src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size"/>
#code
{
private static string Size => "75";
}
The result of running the above code shows only one image displaying
Through process of elimination, the image defined using the image tag is the problem here. If you tweak the code to use hardcoded values i.e.
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"/>
then the code works again as expected.
I'm aware that <image> is deprecated, but I'd like to understand if the reason the binding breaks the image displaying is due to the deprecation or something else?
Update
The generated HTML using the template is
<!--!--><div class="top-row px-4" b-vv8m6rf2se="">About</div>
<article class="content px-4" b-vv8m6rf2se=""><!--!--><!--!--><!--!--><!--!-->
<!--!--><h1 tabindex="-1">Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="75" height="75">
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"></image></article>
An interesting find, although of course not of any practical value, just use <img>.
I could easily reproduce this with a jpg image so it's not about svg.
Now for a speculative answer:
Blazor treats <image> like any other tag and the generated HTML looks like expected. But according to this answer,
The HTML5 parsing spec requires that the tag is mapped to the img element at the tree construction stage
This makes me think that when the complete tag is rendered just once it works fine, handling is up to the browser.
But after Blazor has filled in the #Size it will try to update the HTML it generated earlier. If the Browser really changed <image> to <img> internally then the JS Bridge will have trouble finding the element again and the updates fail.
Our TYPO3 users (editors) need to exchange / update SVG files to the TYPO3 website. The svg files are clickable, hence the <img> html tag does not work for them. We decided in favour of the <object> tag, with <img> fallback (Do I use <img>, <object>, or <embed> for SVG files?).
The Fluid code for the fronted is easy for generating normal img tags:
<f:layout name="Default" />
<f:section name="main">
<div class="container">
<f:for each="{dce:fal(field:'image1', contentObject:contentObject)}" as="fileReference" iteration="iterator">
<f:if condition="{iterator.isFirst}">
<f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" />
</f:if>
</f:for>
</div>
</f:section>
However, according to FluidTYPO3 vhs ViewHelper for SVG Images?, I might be able to use fluid code like this:
<img src="{f:uri.image(src: 'uploads/tx_myext/{imgIcon}')}">
which, adapted to object, would be:
<object data="{f:uri.image(src: 'xxx')}" type="image/svg+xml">
<img src="{f:uri.image(src: 'xxx')}">
</object>
Unfortunately, I have no idea what to provide as src. {fileReference.uid} only inserts the unique id of the file (a number).
How can I convert the file id to the relative or absolute URI of the picture?
I think the viewhelper attribute treatIdAsReference is what you are looking for.
f:image as well as f:uri:image can handle Files and FileReferences.
It looks like you have a FileReference, so you should add the attribute with value 1
Here is an example with inline notation:
{f:uri.image(src: '{fileReference.uid}', treatIdAsReference:'1')}
The result of this is the path to your file, it can be used in regular HTML-Tags.
I have an angular2 application which consists of multiple components, which embeds ( param) different small svg files in its templates. The reason for this choice is that I need to interact with the svg and manipulate the inner DOM of the svg files. Also I want to refer to an svg file, and not use inline svg multiple places in the template, its cleaner in the component template.
My problem is that these svg files is not being cached in the browser, and when loading a page whith multiple components (which renders these svg files), I notice some small delay before the page is finished loading.
This is far from optimal, and Im considering going back to inline svg if I cant solve this issue.
My goal is to be able to have the components template point to an svg file, and when this component is loaded for the first time, it will not be sent from the server, but retrieved from browser cache. Hopefully this will solve the delayed loading issue I have.
I have allready tried defining an cache.manifest file in the root of my application (which defines the different svgs to be cached), but when the component loads, the server is still sending the svgs (and param.js) each time a component load.!
This is how I have structured one of the component template, which consists of the svg symbol, and when I click the svg symbol, I open a popup which should contain the same symbol:
<div>
<!--Header-->
<div>{{ name }}</div>
<!--Actual svg symbol Object-param style-->
<div class="symbolIcon"(mouseup)="onMouseUp()" (mousedown)="onMouseDown()" >
<object type="image/svg+xml" data="app/mySymbol.svg" >
<param name='Activate' value={{activate}} />
<param name='Status' value={{status}} />
</object>
</div>
</div>
<!--Placeholder for Popup-->
<modal-popup *ngIf="loadPopup" (command)="popupCmd($event);">
<!--Symbol to be placed on Popup (same as in template above)-->
<div class="modal-startstop-symbol">
<!--Place content here...injected into "ng-content" in child-->
<object type="image/svg+xml" data="app/mySymbol.svg" >
<param name='Activate' value={{activate}} />
<param name='Status' value={{status}} />
</object>
</div>
</modal-popup >
I am embedding a local pdf file into a simple webpage and I am looking to set the initial zoom to fit to the object size. Here is what I tried but it is not affecting the zoom.
<embed src="filename.pdf?zoom=50" width="575" height="500">
does anyone know how to modify the code so its initial zoom is set to fit the object size.
Bit of a late response but I noticed that this information can be hard to find and haven't found the answer on SO, so here it is.
Try a differnt parameter #view=FitH to force it to fit in the horzontal space and also you need to start the querystring off with a # rather than an & making it:
filename.pdf#view=FitH
What I've noticed it is that this will work if adobe reader is embedded in the browser but chrome will use it's own version of the reader and won't respond in the same way. In my own case, the chrome browser zoomed to fit width by default, so no problem , but Internet Explorer needed the above parameters to ensure the link always opened the pdf page with the correct view setting.
For a full list of available parameters see this doc
EDIT: (lazy mode on)
For me this worked(I wanted to zoom in since the container of my pdf was small):
<embed src="filename.pdf#page=1&zoom=300" width="575" height="500">
This method uses "object", it also has "embed". Either method works:
<div id="pdf">
<object id="pdf_content" width="100%" height="1500px" type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
<!-- <embed src="Assembly.pdf" width="100%" height="100%" type="application/x-pdf" trusted="yes" application="yes" title="Assembly">
</embed> -->
<p>System Error - This PDF cannot be displayed, please contact IT.</p>
</object>
</div>
just in case someone need it, in firefox for me it work like this
<iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>
Followed #Rich answer, I used view=FitH in my code to view PDF content base64 in Angular as below.
I shared for whom concern about view base64 content PDF file with object tag using Angular framework.
The option for view PDF
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
Read PDF content from API as
let content = DataHelper.getDataFromAPI();
When click show content button use
showData() {
let content = DataHelper.getDataFromAPI();
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
this.pdfview.nativeElement.setAttribute('data', this.pdfContent);
}
In HTML file use object tag as
<object #pdfview
[data]=''
type="application/pdf"
width="100%"
height="800px"
>
</object>
Link Angular demo https://stackblitz.com/edit/angular-ivy-tdmieb
Bit late response to this question, however I do have something to add that might be useful for others.
If you make use of an iFrame and set the pdf file path to the src, it will load zoomed out to 100%, which the equivalence of FitH
Use iframe tag do display pdf file with zoom fit
<iframe src="filename.pdf" width="" height="" border="0"></iframe>
This works fine for me
<embed src=".file-name.pdf#zoom=FitH" width="100%" height="1930px" />
I embedded a default media player into my webpage with the following html
<object height="20" width="200">
<embed src="url to music" autostart="false" loop="false" height="20" width="200">
</object>
Everytime I go to the website, this object automatically downloads the music. How can I disable the autodownload? I want it to load only when someone clicks on the play button.
I've been looking around today, and I see no way to instruct the browser to do exactly that.
The best way I can think of is instead of the <object ...>, you display an image which looks like the player, then you add an onclick property to the image, and you use javascript to replace the image with the real object. Something like :
<div><img src="player.png" onclick="this.parentNode.innerHTML = '<object height=\'20\' width=\'200\'> <embed src=\'url-to-music\' autostart=\'false\' loop=\'false\' height=\'20\' width=\'200\'> </object>'"></div>
I should add that you have to keep the <div> around the image (or put a <span>, or whatever tag you see fit) because the onclick action replaces parentNode.innerHTML, that is, the HTML contained in the parent, which in this case, is the image.