Unable to get the elements of an iframe using phantomJS - node.js

Question

I am searching for a way to get the control on the elements inside a document. The problem is, the document is attached to an iFrame.
Here's an example:
.goto('https://wirecard-sandbox-engine.thesolution.com/engine/hpp/')
.use(iframe.withFrameName('wc', function (nightmare) {
nightmare
.type('#account_number', accountNumber)
.screenshot(resultfolder + '\\06-Card-Number.png')
.type('#card_security_code', testData.securityCode)
.selectIndex('#expiration_month_list', 1)
.selectIndex('#expiration_year_list', 4)
.click('span[id="hpp-form-submit"]')
}))
What I am trying to do above is:
Getting the iFrame with the Url.
Using this to get the control on every element in iFrame.

Answer 1

I encountered a similar issue. For one reason or another (Windows? Outdated?) the package nightmare-iframe was not working for me.
So I did this using pure DOM, which would transcribe for you:
var info = {
"account": account_number,
"security": testData.security_code;
};
nightmare.wait( () => {
/* Return true when the iframe is loaded */
var iframe = document.querySelector("iframe[name='wc']");
if (!iframe) {
return false;
}
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
return iframeDocument.querySelector("#account_number") != null;
}).evaluate( (info) => {
var iframe = document.querySelector("iframe[name='wc']");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.querySelector("#account_number").value = info.account;
iframeDocument.querySelector("#card_security_code").value = info.security;
//also use DOM to set proper date
...
iframeDocument.querySelector("span#hpp-form-submit").click();
}, info).then( () => {
console.log("submit done!");
}).catch((error) => {
console.error("Error in iframe magic", error);
});
This only works of course if the iframe is in the same domain as the main page and same-origin is allowed for the iframe. My use case was logging into paypal from a merchant's page.
For iframes with different origin, nightmare-iframe would be the package to use but then an error is needed to see what's the problem.