How to click on a link in an iFrame in selenium IDE - html

Hello Stackoverflow community,
I am working with selenium IDE and I have the following problem:
I have to move a web content within a web content Management System from one folder to another. Therefore I have to click on a "Select" button to specify a target folder, then an iframe opens up where I can navigate through the "tree structure" of the folders.
The original page looks like this:
original page with "Select"-button
The structure of the web content management system is as follows:
Home
-Test(=Parent Folder):
-UniqueTitle
-UniqueTitle2
Because the folder that I want to adress(UniqueTitle2) lies one hierarchy below my current folder(I am in UniqueTitle), I have to click on the parent Folder "TEST" to go one hierarchy back. This is a link to the "TEST"-folder.
iframe where you can select the target folder
The problem is that on the original page below the iframe, the same Link to the "TEST"-folder exists as a breadcrumb. So if selenium clicks on the href link, it actually clicks the link on the original page, and not the one in the iframe.
I tried the following:
to select the iframe:
storeAttribute|css=iframe.dialog-iframe-node#id|iframeIDE
selectFrame|id=${iframeID}
to click on the link:
clickAndWait|link=TEST
clickAndWait|//a[contains(#href,'https://www.companyname.com/language/projectname/manage/maintenance/web-content-management[...]folderid=465576')]
Here is a HTML Snippet of the iframe:
TEST
How can I differentiate between these two, so my script will click within the iframe?
Thank you in advance and let me know if you need more information.

you have two options:
1. don't use iframe, use div or section instead
using this approach, you have to move the code for file selection to the main page. use AJAX to populate the file list to the div. this approach is often called single page application, though you don't need to move everything to a single page, just the file selection codes.
2. set allow-origin header of your iframe to your domain name or *
you should read about how to set this HTTP header.
here are some refs
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

Probably duplicate of How to switch between frames in Selenium WebDriver using Java
First thing when you want to do something inside iframe is switch to it.
WebDriver.SwitchTo().Frame(WebDriver.FindElement(By.Id("iframe")));
After that you can click on element.
When you want to back you can use:
WebDriver.SwitchTo().DefaultContent();

Related

Adding href link in google sites through embedded code

There are three pages in my sites.google.com named (index.html, data.html, test.html). I created the three files using "Full Page Embed" option in Pages section. I am having issue with adding hyperlink of data.html inside index.html
I tried
Data
Data
while trying the above ways, a link automatically adding up like https://2004xxxxxx-atari-embeds.googleusercontent.com/embeds/16cb204cf3a9d4d2xxxxxxxxxxx/data.html and giving 404 error while accessing it.
I also used the direct link Data but many browsers blocking it, saying its external
Anyway to add hyperlink to the page inside the pages through embedded code itself
I am able to use target="_blank" which opening the links in new tabs but is there a way to show in the same tab (I used target="_self" but it blocking)
It sounds like Google is using frames that live in a completely different context for this full page embed feature. Since that is the case, I think you need to use absolute URLs to link to the other pages on your site from that location:
<a target=_top href="https://example.com/data.html">Data</a>
The target=_top makes the link apply to the whole window, not just in the frame.

How to show completed html source on chrome?

I'm trying to take the full html source of the tab in
this page
I want to take the source of
this tab
But unfortunately, the html I'm getting is not completed.
I registered a gif to explain it better
That select list is showing just when I inspect the element, while If I just insect the element with the list closed, it doesn't return any list html.. is it created dinamically when the user click on it?
I've tried to expand all the codes, but unfortunately it seems the html of every list is not appearing.. It might be created just when I open the list?
Is there a way to get the lists html?
Hope I've been clear.
Not sure what you want to save, but by inspecting it sources, it seems that the website use the way of removing and appending the html source which means only you pressed the expanded button, Javascript will append it (different options) to the body, otherwise it will not shown in the element tab.
I don't think you could get all html tags in just 1 try because the website use Javascript to append the html and you can't see it in the element section in console when the element is being removed.
Example:
You can save the page if you want. Just save it with Ctrl+S and you will find the basic source in there along with the stylesheet and other scripts.

Link is removing Http header

I am trying to do a simple thing , navigate to an external url
Class Books
However I am getting a 404 because the Http// portion is being deleted I am not sure if this is an mvc thing or html thing. Here is link http://18.217.228.108/angularapp1.
Here is a link to a screen shot of me accessing url
https://gyazo.com/455b01f1ceded24f9b4ce6c58b0e10e1
Curious-programmer,
You must navigate using an absolute URL just when it is out of your domain such as https://www.amazon.com/
However, I've noticed that you are trying to navegate to a link inside your own domain using absolute URL when you must use relative URL like:
Class Books
Try
Anchor Test
and then try keying http://18.217.228.108/angularapp1/book/ into your browser url.
The link you are using is actually 404.
Based on the link given in updated question:
The new link you've given is an html page (which you can navigate to in the "normal way"). It links to an angular app with an anchor "Books". Clicking on "Books", whilst attaching "book/" to the url in the browser (the url you're trying to link to in your original question), is intercepted by the script and actually navigates to:
http://13.59.126.130/BuellerWebApi_deploy/api/book/getAll
which returns a Json object containing data to display on the same page.
(Your concern about the removal of the http:// in the anchor is a red-herring (try navigating to http://www.bbc.com - you will see www.bbc.com in the browser url). It's the way your app has been configured.)
So, as things stand, navigating to the anchor in your original question, whilst appearing to be a valid url, actually is not. Its a 404.

Extract/echo text from div from one iframe, onto another part of the page

So if it's possible I'd like to echo (or otherwise copy) some text from inside one iframe on a custom page i'm making into another section/div on the page this iframe is on.
Example:
<div 1>
<iframe>
<div inside frame>
Text i would like to echo/copy
</div>
</iframe>
</div>
<div 2>
(another iframe could go here if needed but i was firstly trying to do it without another one.)
Text from the iframe above
</div>
I may not have that 100% right but i'd like to do that and in the second div i'll have a class that makes the text scroll.
The use for this is a twitch stream project i'm working on. This is taking text that shows 'now playing' from a page and making it transparent via having the background color 'chroma key green' and displaying it on the stream.
The other option is if I could have some sort of script to send the text from this div into a text file as it updates and then i could add the text file to the stream instead.
note: I don't mind using php or java/jquery. I was trying to keep the file simple to use and edit most of all. I just wanted to note i'm not as experienced in java and php. I want to do this the simplest way possible.
Thanks!
(I don't want to include all my code, but it's fairly straight forward, all help is appreciated.)
If the parent page and the page inside the iframe are hosted on the same domain, you can access the contents of the iframe directly with something like this on the parent page:
var iframe = document.getElementById('id-of-iframe');
var element = iframe.documentWindow.getElementById('id-of-element-inside-iframe');
For security reasons, this will fail if the pages are not hosted on the same domain.
If the pages are hosted on different domains, but you have access to both (read: you can change the HTML output from the server on both pages), you have another option called cross-document messaging.
This is a bit more complex, and involves scripts on the parent and child page to communicate with each other and send data back and forth.
On the parent page, you would have something like:
window.attachEventListener('onmessage', function (...) {
// Listen for messages from the child page
}, false);
And then in the child page, you would package up the data and send it to the parent with a call like this:
parent.postMessage(...);
Obviously, there are details I've left out here (...), but this is the general idea.
If you don't have access to both the parent and child page, there is no way to achieve what you're asking. Allowing any page to access any other page inside an iframe would be a major security problem. (Imagine if I placed a full-page iframe on my site, loaded Gmail in it, then setup a script to watch the value of the password field.)

How to open a specific tab in a different page

I have a home page on which, inside an IFrame a different HTML page is shown.
On that page there's a link, which on click, needs to open another page inside the same IFrame with specific tab shown. The new page has 3 tabs and the link need to open the second one.
There are other links too, which needs to open specific tabs. The problem is all this is for a demo purpose and no dynamic setting is there. No database or anything. All are static HTML pages.
Tab 2
assuming the page can parse the hash