Retrieve all HTML dependencies, such as JavaScript and CSS files, using the same method as a web browser

Question

Retrieve all HTML dependencies, such as JavaScript and CSS files, using the same method as a web browser

I am currently working on a Single Page Application (SPA).

My main objective is to evaluate the performance of the application using .

Given that the application is an SPA, I want to simulate a scenario where all static content is loaded when a user first opens the application in their browser. Specifically, during the initial request within the artillery scenarios, I anticipate that all resources such as html, js, and css files will be retrieved.

One approach would be to manually list all the GET calls made when loading these resources. However, considering that js files use versioning, it would require updating file names whenever a new version is released.

Is there a way to mimic browser behavior within test scenarios? For instance, can all dependencies be automatically loaded when the html page is accessed?

javascript html css

Answer 1

Answer №1

If you're looking for a solution, consider using phantomjs

Here is the JavaScript code:

var timeoutMs = 25000;
var result = {};

var timerId = setTimeout(function() {
    console.log('pageError: timeout');
    page.close();
    phantom.exit();
}, timeoutMs);

var page = require('webpage').create(),
    system = require ('system'),
    address, output, size;

page.settings.userAgent = 'Mozilla/5.0 TEST';
page.viewportSize = { width: 1280, height: 1024 };

page.customHeaders = {
    'Connection': 'keep-alive',
    'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
    'Accept-Encoding': 'identity',
    'Accept-Language': 'ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3'
};

address = system.args[1];

page.onLoadFinished = function(status) {
    result.loadMS = new Date().getTime() - startTime;
};

var startTime = new Date().getTime();
page.open(address, function (status) {    
    result.status = status;
    clearTimeout(timerId);
    console.log('<<<<RESULT>>>>');
    console.log(JSON.stringify(result));
    setTimeout(function(){
        phantom.exit();
    }, 0);
});

To use it, call the following:

phantomjs load.js https://artillery.io

The resulting output will be:

{"loadMS":2216,"status":"success"}

Answer 2

If you're looking for a solution, consider using phantomjs

Here is the JavaScript code:

var timeoutMs = 25000;
var result = {};

var timerId = setTimeout(function() {
    console.log('pageError: timeout');
    page.close();
    phantom.exit();
}, timeoutMs);

var page = require('webpage').create(),
    system = require ('system'),
    address, output, size;

page.settings.userAgent = 'Mozilla/5.0 TEST';
page.viewportSize = { width: 1280, height: 1024 };

page.customHeaders = {
    'Connection': 'keep-alive',
    'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
    'Accept-Encoding': 'identity',
    'Accept-Language': 'ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3'
};

address = system.args[1];

page.onLoadFinished = function(status) {
    result.loadMS = new Date().getTime() - startTime;
};

var startTime = new Date().getTime();
page.open(address, function (status) {    
    result.status = status;
    clearTimeout(timerId);
    console.log('<<<<RESULT>>>>');
    console.log(JSON.stringify(result));
    setTimeout(function(){
        phantom.exit();
    }, 0);
});

To use it, call the following:

phantomjs load.js https://artillery.io

The resulting output will be:

{"loadMS":2216,"status":"success"}

Retrieve all HTML dependencies, such as JavaScript and CSS files, using the same method as a web browser

Answer №1

Similar questions

After upgrading, my npm is completely dysfunctional – it keeps showing the error "Cannot read property 'get' of undefined."

Is it possible to verify if each value satisfies a condition within a Javascript function?

Mini-navigation bar scrolling

unable to render the JavaScript code

The material UI Paper component appears to be extending beyond the boundaries of the background image

Exploring the world of design with React JS and MUI's diverse styling options

Formatting tabular rows to appear as headers

What method can we use to temporarily route traffic from one URL to another URL for a specific amount of time?

The CSS stylesheet appears to be properly linked, however, it is not displaying correctly on the preview page

Learn the process of adding transformation to an SVG path element

Please be patient until setInterval() completes its task

Display issue with ThreeJS cube

Tips for shuffling the sequence of EJS variables

"Help needed: The HTML dialog element is obstructing the invisible reCAPTCHA challenge popup. Any solutions for resolving this

Display a loading message using jQuery Dialog when the page is loading

Tips for ensuring a NodeJS/connect middleware runs after response.end() has been called?

The sup tag does not function properly when used within the title tag

What is the top choice for creating a cutting-edge front-end web module?

Ways to eliminate a textbox from an HTML table using jQuery or JavaScript while retaining the textbox values

Is there a way to check the existence of an email in the database without having to refresh the PHP page?