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?

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"}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

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

After attempting several methods, I am struggling to display the books in the desired format. My objective is to showcase products within a specific category, such as: http://localhost:4200/books/category/1. Initially, it worked without specifying a catego ...

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

I recently started learning React.js and I'm interested in using the "Content-Based Recommender" package from npm. However, after downloading it, I encountered an issue with importing it. The documentation suggests the following: const ContentBasedRec ...

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

I've been following a tutorial on this video: https://www.youtube.com/watch?v=D4ny-CboZC0 After completing all the steps, I encountered an error in the console during testing: jquery.min.js:2 POST http://apr2.test/admin/posts/%7B%7B%20('autocom ...

React Native: Unable to update React state during logout process

Currently, I am working on a mobile app and learning new practices in React every day as a junior developer. Today, I need assistance with implementing a User Logout function. In my Profil.js file, I have the Logout function inside an IconButton that gets ...

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

Experiencing difficulties in detecting events other than install, activate, or push in my firebase-messaging-sw.js. Notifications are being received and displayed, but I am unable to detect the event handler for notificationclick. When a firebase notificat ...

designing items in various color palettes

section { background-color:#d5ecf2; width:1024px; height:200px; margin: 0 auto; } .sectiontext { float:right; height:180px; width:720px; margin:10px; } <section> <div class="sectiontext"> <h3>GDS 114.01: HTML and Javascript</h3 ...

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

Sample code: http://jsfiddle.net/RuQNP/ <!DOCTYPE html> <html> <head> <title>Foo</title> <style type="text/css"> a:link, a:visited { color: blue; } a:hover, a:active { ...

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

//initiating an AJAX request to access the API jQuery(document).ready(function() { jQuery.ajax({ url:"http://localhost:8080/activitiesWithRealData?location=%22SEA%22&startDate=%2205-14-16%22&endDate=%2205-16-16%22&a ...

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

I am currently facing an issue with a form that contains hidden errors. The CSS for this form, written in Stylus, is as follows: span.error display: none position: relative padding: .25em .5em width: 75% margin-top: 5px margin-bottom: 15px f ...

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

I have a piece of JavaScript code that is activated when the user clicks on an excel image. $("#excel").on("click", function () { $('#revealSpinningWheel').reveal(); $(window).load(function () { $('#revealSpinningWheel').hide ...

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

I have a dynamically populated accordion that updates every 15 seconds. I need to keep track of the last opened accordion group as the dataList can be very large and parsing it for each update is not feasible. Below is the code snippet from my HTML file: ...

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

On my HTML page, I am looking to showcase text lines in succession with a delay. The unique condition is that when the second line appears, the color of the first line should change. Then, as the third line emerges, the color of the second line should also ...

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

Struggling with implementing bootstrap 4.0? I'm attempting to utilize h-100 to ensure that the background stretches to the bottom of the user's screen. I've experimented with clearfix, fluid-containers, and more in an effort to make it work ...

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

Is there a way to eliminate the left and bottom borders as shown in the image? ...

Is the CSS parser malfunctioning?

My program is designed to scan css files using the jar cssparser-0.9.5.jar and perform various operations on the data. public static Map<String, CSSStyleRule> parseCSS(String FileName) throws IOException { Map<String, CSSStyleRule> rul ...

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

Hello everyone, I currently have an array of objects containing some populated fields. Below is the product schema: import mongoose, { Schema } from 'mongoose'; const productSchema = new mongoose.Schema( { name: String, description: S ...

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

Is it considered advisable to include tags such as etc from another page? For example: <?php include_once("header.php")?> Content specific to each individual page <?php include_once("footer.php")?> The header.php file includes: <!DOCTYP ...

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

Is it possible for a jQuery each loop to wait for Ajax success before continuing when sending SMS to recipients from an object? I want my script to effectively send one SMS, display a success message on the DOM, and then proceed with the next recipient. O ...

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

I am attempting to send a PDF file as a POST request. The API supports the use of @RequestPart and @RequestParam: @RequestPart("file") MultipartFile file; @RequestParam(value = "document-types", required = false) Set<String> documentTypes; My appro ...

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

Project Link: Click here to view the project In my testForm, I have 3 levels of formGroup, with the last formGroup being an array of formGroups. I am trying to enable the price field when a checkbox is clicked. I am unsure how to access the price contro ...