Filed under Test Automation, UI Testing.

Here is the list with some of the best screenshot comparison tools:

LoadFocus Screenshot Comparison – Free online screenshot tool to generate and compare screenshots of two websites

Resemble.js – Image analysis and comparison. Analyse and compare images with Javascript and HTML5

pixelmatch – The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests

PhantomCSS – Visual/CSS regression testing with PhantomJS

WebdriverCSS – Regression testing tool for WebdriverIO

Wraith – Wraith — A responsive screenshot comparison tool

Huxley – A testing system for catching visual regressions in Web applications.

ImageMagick – ImageMagick Image Comparing

Blink-Diff – A lightweight image comparison tool

If you are using any other screenshot comparison tool, please comment to this post and we’ll keep the list updated.

 

LoadFocus is an All-In-One cloud testing platform for Load Testing and performance testing, Website Speed Testing, Automated Website Testing for Websites, Mobile Applications and APIs and Mobile Emulation on Mobile Devices.

 

Filed under Test Automation.

There are quite a few applications on the market that help you to make a screenshot of your application, capture the screen of your mobile or make a recording of your iPhone application.

These recording tools allow to record the screen of your mobile phone while using your application. This use case is very important when you want to demo an application to the product owners or to your clients. Some of these tools are Reflector 2 or X-Mirage.

The only bad part about these tools is that they are not free. We found another option to all these paid screen capturing/recording tools, an this option is totally free.

Below are the steps for taking a screenshot or for making a recording of your iPhone screen while using the application:

  1. Connect your iPhone to your Mac using the cable that comes with your phone
  2. Open QuickTime Player
    1. by pressing Cmd + Space on your keyboard and typing “QuickTime
      or
    2. by going to Applications folder and double clicking “QuickTime
  3. Click on File -> New Movie Recording
  4. A new screen will appear and by default will try to record from your laptop camera
  5. On the drop down that appears on the new screen, select the name of your device
  6. Your mobile screen should appear on the laptop screen and you can click Record to start recording your video

 

 

Filed under Load Testing, Mobile Apps Testing, Mobile Testing, Test Automation, Website Speed Testing.

In order to find out how does your application / website behave, there are a number of steps that you have to follow which will give you a better understanding of the current performance state of your website / application.

Usually, you can keep a customers interested if your website’s speed is good enough and each page of your application loads in less than 3 seconds. If it’s more than 3 seconds, we suggest trying to find where your bottlenecks can be.

Here are some tools which will help you get started in order to measure the speed of your site and find bottlenecks:

Load Testing service

  • allows you to stress test your web apps & APIs with thousands of concurrent connections.
  • run performance tests against websites, micro-services and APIs.

Website Speed Testing service

  • run the site speed test from various test locations
  • analyses the content of a web page, then generates suggestions to make that page faster.

More details on how to use open source tools like Apache JMeter in order to run a load test and find potential bottlenecks.

Filed under Mobile Apps Testing, Test Automation.

Why would I want to investigate the traffic that is made from a native iOS application ?

There are several reasons for which you would like to be able to see which are the requests a native application is making to the server side:
– to debug an issue that is happening in the application when you don’t have access to the server logs
– to check how the application is built in terms of the APIs that they are calling
– to check the security of an application
– to retry and make the same requests manually or automatically from an automation framework
– more details on how to debug native and HTML5 apps

How can I debug the traffic coming from a native application ?

The answer is very simple. All you need for being able to inspect the traffic is:
– have access to a WiFi network where both a laptop and the device that has the application are connected
– install an application called “Charles Web Debugging Proxy

How to configure the iPhone device so that the traffic appears in Charles ?

There are a few steps that you need to do to get to the point where you can see the traffic in Charles.
1. First find the IP address of the laptop where you installed Charles. You can find that pretty easily by using the
following commands from the terminal:

<strong>"ifconfig" for Linux/MacOS</strong>
<strong>"ipconfig" for Windows</strong>

2. Go to the iPhone device to Settings -> Wi-Fi. Click on the blue disclosure arrow to configure the network.

3. Scroll down until you get to the HTTP Proxy session. In there enter the IP of the laptop in the Server section, port 8888 in the Port section and leave Authentication Off.
4. Now open an application from you iPhone, for example Instagram.
5. You should see a prompt in Charles when you first make a connection from the iPhone, asking you to allow the traffic.


6. Now you will be able to see the traffic that is coming from your iPhone in Charles.


7. Remember to disable the HTTP Proxy in your Settings when you stop using Charles, otherwise you’ll get random network failures in your applications!

How can I see what is sent in the request that are made over https ?

For being able to see the content of the requests made over Https you need to follow the below steps:
1. On your iPhone, after you have set up Charles as proxy, open Safari and browse to http://www.charlesproxy.com/getssl. Safari will prompt you to install the SSL certificate.

3. Now you should be able to access SSL websites with Charles using SSL Proxying.
4. Go into Charles at Proxy -> SSL Proxying Settings and add the host of the call that you want to see the content for.
In our case the host is i.instagram.com and the port is 443.

5. Now go back to the iPhone and open the application again, in our case Instagram.

Now the traffic that is coming from the application will be shown as decrypted in Charles.

Hope this will help you debug your native applications more easily.

Filed under Apache JMeter, Load Testing, Performance Testing, Selenium WebDriver, UI Testing.

Here is how to use Apache JMeter’s WebDriver Sampler to load test the UI of the application, and by the UI, I mean load test a user’s workflow, with entering the web pages, clicking on different links etc.
All you have to do is install the JMeter plugins and make use of the WebDriver Config and WebDriver Sampler plugins which will offer this capability.
Let’s go into more detail and see how to load test an app with Apache JMeter’s WebDriver Sampler.
Here are the steps to Load Test the UI:
  • Add a Chrome Driver Config

      • choose if you want to create a new Browser at the start of each iteration (if you don’t tick this option, the browser instances are going to be reused per each thread, which will cache some of the assets, requests)

  • Add a WebDriver Sampler

      • add the following code which will monitor the load time for loading the following webpage https://www.example.com?uid=${token}

 	WDS.sampleResult.sampleStart()
 	WDS.browser.get('https://www.example.com?uid=${token}')
 	WDS.sampleResult.sampleEnd()
      • the token variable is previously generate by an HTTP POST request
      • imagine the scenario where you first have to authenticate in order to access a webpage, this is what we do
          • generate a token with an HTTP POST request
          • extract the token from the HTTP POST response
        • open the webpage with the token as a query parameter and monitor the load time
    • add an Aggregate Report in order to measure the load testing metrics like number of samples, response times, errors, throughput
    • add the Listeners from the JMeter Plugins: Response Times Over Time, Hits per Second and Active Threads Over Time to better understand the behaviour of your application while running the load test of the UI

Run the test at the beginning with only 1 thread in parallel, to create the baseline. The you can increase the number of threads (parallel users) to find performance bottlenecks. Here are more details on performance testing vs load testing.

Hope this helps.

Filed under Apache JMeter, Test Automation.

Here are details on how to save or export the results of your Apache JMeter test script to a CSV or XML file.

Setup

1. Open Apache JMeter (here is how to start Apache JMeter on Mac) and right click Test Plan and Add -> Threads (Users) -> Thread Group
2. Right click Thread Group and Add -> Samplers -> HTTP Request
3. Add example.com to the Server input field of the HTTP Request
4. Right click Thread Group and Add -> Listeners -> Aggregate Report

More details on how to load test a web server with Apache JMeter.

Save Apache JMeter Results to a CSV file

1. Configure the filename in the Filename field of the Aggregate Report
i.e.: [FULLPATH]/results.csv
where [FULLPATH] is the path on the disk to the directory where you want to save the Apache JMeter results.
2. Run the test script
Result
A file with the results.csv name should now be created at the path specified.

Save Apache JMeter Results to a XML file

1. Go in the Aggregate Report and click the Configure button
2. Check the Save as XML field in the top left corner.
3. Change the extension of the filename to XML i.e. [FULLPATH]/results.xml

Result
A file with the results.xml name should now be created at the path specified.

 

Save results to current test script location

If you want to use the current test script location as the destination of your Apache JMeter test scripts, you can follow the below steps:


Apache JMeter note:
Don’t use GUI mode for load testing, only for Test creation and Test debugging!
For load testing, use NON GUI Mode & adapt Java Heap to your test requirements

Filed under Test Automation.

We’ve speed tested over 30000 websites and here are the speed test results after running the website speed tests:

Total: 30000 websites tested – Check how fast is your website for free

Response times between 0ms – 200ms
223 (<1%) websites with response time between 0ms – 200ms

Response times between 200ms – 500ms
641 (~2%) websites with response time between 200ms – 500ms

 

Response times between 500ms – 750ms
708 (~2%) websites with response time between 500ms – 750ms

 

Response times between 750ms – 1000ms
718 (~2%) websites with response time between 750ms – 1000ms

 

Response times between 1000ms – 2000ms
3794 (~16%) websites with response time between 1000ms – 2000ms

 

Response times between 2000ms – 3000ms
3521 (~11%) websites with response time between 2000ms – 3000ms

 

Response times between 3000ms – 5000ms
4961 (~16%) websites with response time between 3000ms – 5000ms

 

Response times between 5000ms – 10000ms
5641 (~19%) websites with response time between 5000ms – 10000ms

 

Response times between: greater than 10000ms
9793 (~32%) websites with response time between 10000ms

 

 

Only 7% of the websites tested have a response time lower than 1 second.

Also more than 50% of the websites tested, almost 15k websites, have a response time greater than 5 seconds.

A higher response time translates indirectly in potential customers leaving your website.
How to Improve Your Page Load Speed by 50% in less than 30 Minutes? Here are a few hints which can make a huge difference:
  • minify assets (JS files, CSS files)
  • minify HTML
  • use CSS Image Sprites
  • optimise images
  • use CDN for hosting images and other assets (fonts etc) – inspect latency
  • move JS files at the bottom of your HTML page and CSS files at the top
  • group multiple CSS files and JS files into a single (minified) CSS or JS file if possible
  • eliminate Render-Blocking JavaScript and CSS (Async Javascript)
  • rely on browser caching
  • remove unused widgets, plugins
  • improve server side hardware (DB queries, hardware, etc)
  • more details on increasing rendering speed
As you saw above, there are loads of things you can do to improve your website rendering speed. We also offer a free website speed test.
To get a better understanding and speed insights related to your website, create an account today with LoadFocus and run a full website speed test.