Develop Reference

Can not access the attribute or the iframe which is inside iframe #document puppeteer

const attr = await page.$$eval("body > iframe", el => el.map(x => x.getAttribute("style")));
console.log(attr);
I am trying to extract the attribute name in the second iframe which is under #doument.
When I do a copy selector it gave me the selector body > iframe and it is not letting me extract the attribute of the iframe. I need the name attribute and it is not letting me get it no matter what selector I use
[![click here for the image ][1]][1]
https://i.stack.imgur.com/Lf2FO.png

I also recommend using the puppeteer recorder extension. You can record mouseclicks for example inside of the iFrame, it will then produce a script for you which you can use to get a better understanding of how to access the contents of the frame. This helped me A LOT with stuff like pop-ups, iFrames, etc...
https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda?hl=en
Have you tried using something like
let frames = await page.frames()
const frame = frames.find(f => f.url().startsWith('https://www.urlofiframe.com'))
or just console logging the frames variable and seeing what u can get from there?

Edit (If you don't have an id then you can get it with the name)
Put your iframe in a variable like this:
var MyIframe = document.getElementsByName('iframe_id_here');
then you go like this to get stuff inside the iframe because it will be in an array since getelemetsByName is plural:
MyIframe[0].getElementById('SomeID').style.SomeProperties = 'Some_Value';
Should work like that.

How to get an element from an iframe from another domain in JavaScript or jQuery?

I need to get the value of the last column from the following url, so that I can use that for input for another url.
This url is being displayed in an iframe, with it's source coming from another domain (the domain in the url above).
The part of my function containing this code is currently looking like this:
if (url) {
document.getElementById('techtable').innerHTML =
'<iframe id="myframe" src="' + url + '"></iframe>';
overlay.setPosition(coordinates);
var iframe = document.getElementById("myframe");
console.log(iframe);
var docu = iframe.contentDocument;
console.log(docu);
var elmnt = docu.getElementsByTagName("table")[0];
console.log(elmnt);
var idtext = $('elmnt tbody tr:first td:last').text();
console.log(idtext);
}
The console.log's can be seen in this screen capture:
What happens is that the second console.log is showing the document from the iframe, but it is only returning an empty head and body tag, while these tags are filled in the first log. The problem is that I cannot find a reason why this is occurring. It might be the fact that the source is from another domain, although I do not see any errors in the console, or that my function/syntax is wrong.
So, if it's possible, how do I get the value of the last column of the table in the iframe?

Two issues merit investigation:
The posted code is synchronous - it attempts to log the content of the iframe element before giving it a chance to load content across the net from the url set in its src attribute.
Possibly, and perhaps even likely, the second log which was made synchronously could be showing the document of an "about:blank" document object initially loaded in the iframe element.
Given that objects logged on the console tend to be live, the first log entry may have been updated after iframe content was loaded - or the log entry in the screen shot was expanded after loading was complete.
Access to documents from different domains my be blocked for security reasons. This does not necessarily mean console.log is blocked from showing the content, it means access to the content from JavaScript may be impossible.
How to debug
a) Access iframe content from within load event listeners registered on the iframe element.
b) test using a url from the same domain. If that works but access fails for documents from a different domain then you may need to investigate CORS further. Discussing hypotheticals here is a little early.

How to get iframe src value dynamically in nightwatch test case?

My html dom includes a tag and the value of the src is dynamically generated. Please see below screenshot as an example:
I want to test the dom under the selected iframe tag:
<iframe class="ide-page-frame" ng-src="http://localhost:8080/che/wksp-rn6c?uid=514006" src="http://localhost:8080/che/wksp-rn6c?uid=514006"></iframe>
I use below method to load the frame and put the assert code in the callback function. But it doesn't find any dom. The code is shown as below.
browser
.url('http://localhost:8080/dashboard/#/ide/che/wksp-rn6c')
.frame(".ide-page-frame",()=>{
// it can't find any dom here
})
})
If I load the dynamical url http://localhost:8080/che/wksp-rn6c?uid=514006 directly, it is able to find the dom elements. So I want to know how I can get the url from the iframe src in the test case. Does nightwatch support something like $(.ide-page-frame).getAttribute('src')?

I think that your problem is in browser.iframe(".ide-page-frame")
nightwatch will look for an iFrame having the id="ide-page-frame" which does not exist in your page.
If the frame id is missing or null, the server should switch to the
page's default content.
My proposition: Please change your iFrame creation by changing class="ide-page-frame" by id="ide-page-frame" (or you can just add the id and keep the class)
<iframe id="ide-page-frame" class="ide-page-frame" ng-src="http://localhost:8080/che/wksp-rn6c?uid=514006" src="http://localhost:8080/che/wksp-rn6c?uid=514006"></iframe>
Does this solve your problem?

Dynamically change page title from h1 tag using Javascript

First off, thanks for taking the time to read this question. What a great community Stack Overflow has :)
I need to change the title tag of a page based on the text contained in the h1 element on that page.
I've been searching around, and I have found the "document.title" Javascript function. I've been playing around with it, trying to pull the text from my h1 element that has the class of "Category-H1".
<script type="text/javascript">
document.title = document.getElementsByClassName("Category-H1");
</script>
However, it is just setting the page title to "[object HTMLCollection]", which as I understand is a null value. Is JS the best was to do this? I know my code is jacked, any tips?
Thanks in advance! - Alex
Edit
I have been informed that line of code returns a collection object and not a string. It was pointed to a code example of:
setTimeout(function () { document.title = "iFinity User Profile - " + document.getElementById("test").outerText; }, 1000);
However, this code produces a page title of "iFinity User Profile - undefined". I have the h1 element on that page set to the id of "test".

You're almost there.
[object HTMLCollection] is not a null value--it is the string representation of a collection of html elements. You want to choose the first one and then get the inner html from it.
document.getElementsByClassName("Category-H1")[0].innerHTML
Also, make sure you do this after the document has loaded. You can either do this by adding the script at the end of your document, or have it run on the onload event of the body.

This should work:
document.title = document.getElementsByClassName("Category-H1")[0].innerHTML;
The getElementsByClassName() function returns a collections of elements ( [object HTMLCollection], so you need to get an element out of it, I'm assuming the first one.

A better solution may be the following:
<script type="text/javascript">
document.title = document.getElementsByTagName("H1")[0].innerHTML
</script>
This would save from setting a h1 class.

This is very close, but I found that - working with Firefox anyway, when you use the getElementsByTagName("H1") it gives you an array as you have recognized. However, it works better using:
<script type="text/javascript">
document.title = document.getElementsByTagName("H1").item(0).innerHTML;
</script>
Note the addition of the .item(0).innerHTML after getting the element rather than the [0].innerHTML.

I don’t know if you have any experience in it or not, but another alternative that seems to be very popular these days is the use of jQuery. As in the earlier discussions, the code below assumes that you are interested in grabbing the first instance of the “H1” tag or the “Category-H1” class. This is an important point because unless you target an “ID” attribute, you will get a collection of items.
This code also assumes that you have already implemented the inclusion of the jQuery library either directly from your website or by referencing a CDN.
<script type="text/javascript">
$(document).ready(function () {
document.title = $("H1")[0].innerText;
});
</script>
The $(document).ready will call it’s enclosed function only after the Document Object Model (DOM) has finished loading, and before the browser’s rendering engine displays the page.
The content inside the function will grab the inner text of the first instance of the “H1” tag and assign that text value to the document’s title tag in the head section.
I hope this adds another layer of help.

javascript multiple forms on the same rendered screen

I'm working with classic ASP.
I have an 2 includes that have 2 different forms on them. They are both unique in name. However, when I try to read the value of the one the elements in the 2nd form I get an error saying it is null. However, when I view the source in Firebug I can see that in face there is a value in that element.
My javascript code:
console.log(document.getElementById('focusValue').value);
Output from firebug:
<input id="focusValue" type="hidden" value="1006" name="focusValue">
Is there something I need to do because there are 2 forms on this "rendered" screen? The only other thing I think I should mention is that these pages are in an iFrame. Not sure if that really matters...

An iFrame creates a separate document within the containing document, you need to get a reference to that document before you can access its content. There is a reasonable tutorial at http://www.dyn-web.com/tutorials/iframes/.
If you only have one iFrame in the page, then you can reference it by:
var frame = window.frames[0];
Or you could use an id with getElementById. To get a reference to the document:
var doc;
if (frame) {
doc = frame.contentDocument || frame.contentWindow.document;
}
Now you can get to the input element:
var input = doc && doc.getElementById('focusValue');
Of course this all depends on you complying with the same origin policy, otherwise you can't access the frame content.

Can't see your page, so it's hard to debug. Assuming the script runs AFTER the forms. The only thing i can think is that there is more than one element on the page with the id "focusValue".
What happens when you console.log(document.getElementById('focusValue'))