It’s my api response and my body like this
{
“htmlContent”: “My Html Content Is Here”
“status”: “success”,
“errorCode”: null,
“errorMessage”: null,
“errorGroup”: null,
“locale”: “tr”,
“systemTime”: 1697216390962,
“conversationId”: “123456789”
}
Looking at the visualizer code in the question, it’s trying to submit the form. I do not think that is supported! Possibly because there would be security implications . Someone from Postman can provide an official reasoning.
After removing type="hidden" and the JavaScript code to submit the form, I’m able to view it in the visualizer.
// Not sure why we need this?
function fixHTML(html) {
const fixedHTML = html.replace(/<input(.*?)>/g, '<input$1 />');
const cleanedHTML = fixedHTML.replace(/onclick=".*?"/g, '');
return cleanedHTML;
}
const htmlContent = pm.response.json().data; // HTML will be inside this field when using postman-echo.com
const fixedHTMLContent = fixHTML(htmlContent);
pm.visualizer.set(fixedHTMLContent);
@baha-bayar thinking more about your use-case. Doesn’t look like you are after visualizing the response, instead you want to submit the data in the form. Do clarify, if that’s not the case.
Based on my assumption about your use-case, I suggest you parse the HTML response using cheerio library available within Postman’s sandbox, to setup a request directly in postman and execute that.
To get you started, the following code will return all the input elements inside the form:
const htmlContent = pm.response.json().htmlContent
const $ = cheerio.load(htmlContent);
let inputElements = $("form[id='test-3ds-form'] input");
let actionURL = $("form[id='test-3ds-form']")[0].attribs.action;
console.log(inputElements); // Check Postman's console to view the elements data
console.log(actionURL);
Next you can read the attribs field and extract the field name and value, store them in Environment (or Collection) variables. That can be used in the next Postman request. I leave this as an exercise for you.
You should then be able to view the response of the request directly within Postman, under the Preview tab.
On a side note, this isn’t really visualizing the HTML you posted, but showing you what is returned when the form is submitted.
I don’t think this will work from the desktop client, as I’m sure I’ve seen posts where it mentions that this is disabled as the desktop client uses your local browser for the Visualize feature.
I guess its different for the web client, as you can’t disable JavaScript otherwise the rest of the app wouldn’t work.
It’s a bit of a security risk having this pull in data from outside Postman, that you haven’t specifically sent a Post request to.
I’ve just tested the desktop app and its not working there.
You can see if you inspect the visualization that its sat on your HTML code, which won’t show anything as the form elements are hidden.
Pretty sure that is expected behaviour. It should stay on the HTML that you provided to the visualizer, which as its showing hidden form data, shouldn’t show anything.
It’s not executing the JavaScript to submit the form to bring up the mock that you are expecting to see.
Saying that, you can use scripts in the HTML templates that you provide to the Visualizer, as I’ve used that a few times to reformat dates. So I don’t think JavaScript is completely disabled in the desktop version.
Not sure this should work from the web version either (but it does seem to at the moment).
Perhaps someone from Postman may be able to advise further on whether you are supposed to be able to do this or not.
Thank you for the response. I didn’t realize there was a difference between the Web Postman and the desktop version. I believe that’s why it’s not working
. Someone from Postman can provide an official reasoning.
.
