Responsive Web Design Testing

Micro Focus Expert
Micro Focus Expert
0 0 1,413

In this blog post, we'll introduce you to one of the feature highlights of Silk Performer 17.5: Responsive web design testing. We will first discuss what responsive web design is, and then we will show you how Silk Performer analyzes a real website and provides some valuable information for the subsequent testing process. Or in other words: Silk Performer's Page Analysis Summary will suggest the resolutions we should consider when load testing our web application.

Take a look at the graphic below. There are three main steps noted: (1) Media query detection, (2) page analysis summary, and (3) testing various resolutions. We will follow and explain these steps in this blog post. So, let's get going!

Responsive Web Design Testing - Blog graphic 1.png

What is responsive web design?

Responsive web design is a design paradigm for websites and web applications. It ensures that the user interface of a web application dynamically adapts to the end user device - whether this is a smartphone, a tablet, a desktop computer, or any other device. Or in other words: A website is available in a number of versions for several devices. The big challenge for load test engineers is, that they have to consider the different versions when modeling a load test. But how do you know how many versions a website offers and which versions you should consider for testing? Silk Performer can help you answering these questions by analyzing a website.

How does Silk Performer analyze responsive websites?

How does the analysis work, you may ask. Let's first get the term version out of the way - it's a pretty unprecise term. A website or web application changes its appearance and behavior based on so-called media queries. The website queries the resolution (and other information) from the browser, which knows the physical details about the device it is running on. Media queries are typically embedded in cascaded style sheets (.css files), which contain the layout definitions of a website.

For the most part, media queries are related to resolutions. According to the response the media query evokes, the application chooses it's appearance and behavior. So, when analyzing a website, Silk Performer detects all media queries from the .css files of the website.

What is the result of the analysis?

When the analysis is done, Silk Performer shows a page called Page Analysis Summary. But first things first! Let's discuss all these steps based on a real-world example. We start Silk Performer and create a new web-business transaction project. On the Model Script dialog, we enter this URL: www.newzealand.com (1). This is the official New Zealand tourism website. You will see in a minute that this website implements the responsive web design paradigm beautifully. Therefore, it is a wonderful example for our blog post. Then, all we have to do is click Analyze (2).

Responsive Web Design Testing - Screenshot 1.png

Analyzing a website

Silk Performer starts the analysis and we can watch the progress in the Output window. After a few moments, the analysis is completed and the Page Analysis Summary displays. It contains three screenshots - one for a desktop computer, one for a tablet, and one for a smartphone (1). So we can see at one glance how the website looks like on different devices. Below the screenshots we can find a very useful graph (2): It visualizes all detected media queries with the help of blue and green bars. To get a little more "hard facts" about the media queries, click the diagram. This will open TrueLog Explorer.

Responsive Web Design Testing - Screenshot 2.png

Examining the results

In TrueLog Explorer, take a look at the tree and expand the node BrowserAnalyzePage (1). Below this node, we can find all detected resolutions - in our case, there are five of them (2). Now click the node BrowserAnalyzePage. It shows screenshots for each of the detected media queries as well as a complete list of detected media queries.

Responsive Web Design Testing - Screenshot 3.png

When you scroll down, you can see the diagram again. Note that the blue and green bars visualize the media queries that have been detected (1). The red marks (2) visualize the resolutions Silk Performer used to test the website. Note the correlation between the resolutions in the tree and the red marks in the diagram. Remember the resolutions for a moment. In fact, you only need to remember the x-values: 450 pixels, 630, 764, 1040, and 1157 pixels. The y-values are always 525 and can be neglected for responsive web design anyway.

Responsive Web Design Testing - Screenshot 4.png

Recording using a suggested resolution

We will now take three of these suggestions to model three scripts for a comprehensive load test of the New Zealand website: 450, to simulate a smartphone, 764 for a tablet, and 1157 to simulate a desktop computer. We jump back to the Workbench and click Model Script on the workflow bar and Record using customized browser. When we click Suggested browser size (1) on the subsequent dialog, we can choose from the resolutions Silk Performer suggests based on the analysis. The list shows the values 450, 630, 1040, and 1157 (2). Now, when we select 450x525 and click Start recording (3), the browser opens with the specified resolution of 450 pixels and we can go ahead with the recording process.

Responsive Web Design Testing - Screenshot 5.png

Conclusion

Silk Performer supports you with your responsive web design testing. Starting a page analysis takes just one click. Silk Performer then provides you with some useful information, which can help you to decide which resolutions to consider for your load tests.

Watch the video

In the following video, you can watch how we performed the above described steps:

More information

To learn more about all new features and enhancements Silk Performer 17.5 provides, take a look at the following blog posts:

The Silk Performer Help is another comprehensive source of information:

If this article was useful for you, leave us a comment or like it. We appreciate your feedback.

The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.