How to test html content generate by the javascript page

Ask the Experts and Postman Tips
, ,
1

Hi all,

I want to test the content of an HTML page.

The problem I have is that the HTML I’m looking for is generated by JavaScript.

I found how to visualize the page in the visualize tab by doing this:

var response = pm.response.text();
var base = ' < base href = "https://www.mywebsite.com/" > ';
var template = response.replace('<head>', '<head>' + base);
pm.visualizer.set(template);

However, I didn’t succeed in storing the “generated HTML” by the javascript in a variable and testing it.

Regards,
Jerome

2

Hi @paynumweb. Welcome to the Postman Community!

Postman Scripts provides you access to the Cheerio library which allows you parse and manipulate HTML pages. You can use this library to check for the presence of specific HTML elements, properties, or strings.

Here’s an example showing how you can check if a title text is valid.

const $ = cheerio.load(pm.response.text());

//output the html for testing
console.log($.html());

// Input field you want to test for
const targetElementText = $('section > div.title').text();
const savedTitle = pm.collectionVariables.get('title')

pm.test("title is valid", () => {
    pm.expect(targetElementText).to.be("savedTitle");
});
3

Thanks for your response.

I tried with Cheerio and with your sample.

The problem is in the constant ‘$’ I have:

And I need to interpret the JavaScript to generate the associated HTML.

And after I need test the generated html.

Regards,
Jerome

4

Hi @paynumweb.

What’s the problem with the ‘$’ constant?

Also, can you explain your workflow? Where is the html being generated? Is that being generated in the test scripts using the visualizer object or it is generated and then returned as an API response?

It’ll be helpful if you explain your workflow so I could better understand what you want to achieve.

5

You right , it is not clear .

Need (semple) : I need to check if the boutton ‘se connecter’ is present on my HTML page.

You will find below the visual exemple of my page:
Capture d’écran 2024-06-06 153301

You will find below the html retun by postman :

< body class="mat-typography" >
  <app-root class="d-block h-100"></app-root>
<script src="runtime-es2017.56be23bae8374fdbf44d.js" type="module">
</script> </body></html>

when the script “runtime-es2017.56be23bae8374fdbf44d.js” is executed , it will generated the 2 input, the button, ect …

I need to have the final content (after javascript execution) to do the test.

is it more understandable ?

6

Someone from Postman will probably need to confirm, but I’m pretty sure you can’t execute the JavaScript that is returned in the response within the Sandbox (probably due to security and many other reasons).

2 Likes
7

Is Postman the most appropriate tool to perform UI Testing?

I would love you to keep you within the platform but I feel this type of testing is better suited in a dedicated tool/framework, that allows you to create these UI tests.

The use of cheerio to parse the response HTML to check for certain elements is limited and will only get you to a certain point. Once you want to expand on that, you’re moving into the capabilities of those more targeted tools.

2 Likes
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.