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

An error was encountered at line 52 in the book-list component: TypeError - The 'books' properties are undefined. This project was built using Angular

Step-by-step guide on how to include the "content-based-recommender" package in a Reactjs project

Issue with Laravel 5.7 Autocomplete search: JavaScript unable to recognize the specified route

React Native: Unable to update React state during logout process

Having trouble capturing the 'notificationclick' event in the service worker when using Firebase messaging with Nuxt.js and Vue.js?

designing items in various color palettes

What is the reason for the .foo a:link, .foo a:visited {} selector taking precedence over the a:hover, a:active {} selector in CSS?

Error: Attempting to access the 'HotelInfo' property of an undefined variable led to an uncaught TypeError

What's the strangest glitch in Chrome related to repainting?

Hiding a div with Javascript when the Excel dialog box is loaded

Tips for keeping the most recently opened accordion in a group by using the is-open attribute to call a function

Show one line of text at a time with a pause in between each one

When I incorporate the h-100 class, my content expands beyond the container on mobile devices

Tips for eliminating the left and bottom border in a React chart using Chart.js 2

Is the CSS parser malfunctioning?

Using Node.js and MongoDB to filter a sub array within an array of objects

Should header and footer be incorporated as part of a template design?

Using Jquery's $.each() method within an ajax call can be a powerful

The FormData object appears to be blank, even though it was supposed to be populated when attempting to send a PDF file using a multipart FormData POST request in Cypress

Exploring Angular 10's advanced forms: delving into three levels of nested form groups combined with