Testing - Web

Fast, good, cheap: pick only two.

Summary

This article is a compendium of useful tips & tricks for testing web apps.

Chrome hard refresh or deleting cache refresh

  1. Hold Shift and click the Reload button.
  2. Hold down Cmd and then press R.

or you can just:

Open the Chrome DevTools by clicking the right click and click Inspect. Once the Chrome DevTools are open, just right click the refresh button and a menu will drop down. This menu gives you the option of doing a hard refresh, or even clearing the cache and do a hard refresh automatically.

Clearing browser cookies and cache

In this section of the handbook you will learn or be reminded on how to quickly clear cache and delete cookies in every browser you use for testing.

To quickly summon window with options to clear cookies and cache on different browsers, press the following keyboard combination:

All of this commands for each browser should do the trick and help you to clear everything needed withouth you going into browser settings to do it.

How to compare two different texts

How to simulate offline state in different browsers

Chrome

First thing you have to is open the developer console window. On Windows you can use Ctrl+Shift+J, while on Mac you can use Ctrl+Option+J.

Next, click on Application --> Service Workers --> select Offline

Mozilla Firefox

Go to Firefox Settings --> Web Developer --> Work Offline

Now, why would you want to simulate offline state in Chrome or any other browser?

Here are some of the reasons:

  1. When you want to test out how will your WebApp behave when there is no Internet connection
  2. When you want to test out different API errors, although this is specific to a certain WebApp & sometimes can't be done
  3. When you don't want to lose Internet connection on a test device but just on a tab you're testing (works only on Chrome)

Also, if you're trully hardcore there is some interesting info in this article but you probbaly shouldn't go that far :)

Selecting test devices

When testing a web app, it's important to know which major browsers we are supporting and what is the current market share. This is project-dependent so make sure to check with your project team.

To check the market share, you can use pages such as Net Marketshare.

Testing cookies

What is a cookie?

Cookies are files created by websites you visit. They make your online experience easier by saving browsing information. With cookies, sites can keep you signed in, remember your site preferences, and give you locally relevant content.

Content of a Cookie

The cookie consists of mainly three things:

By default, the activities of storing and sending cookies are invisible to you. However, you can change your settings to allow you to approve or deny cookie storage requests, delete stored cookies automatically when you close browser, and more.

Types of Cookies

How to test Cookies – Sample Test Cases

To view all the cookies that are stored, navigate to browser Settings or Preferences. In Chrome, click on Advanced. Under the Privacy and security section, click on Site Settings and then click on Cookies and site data.

If you want to view cookies for a particular website, first open a Developer Tools, then click on Application tab. On the left-hand side in the Menu find Storage -> Cookies.

You can delete one cookie, edit cookies or you can delete all the cookies.

Now let's start with some test cases you can go through to test the cookie:

As cookies can play an important part in how smoothly a website functions, it’s pretty important that you test how they are written and stored in your hard drive by the the websites you visit. The issue of security is important too because of the significant information stored locally within each cookie.

These are some of the test cases to be considered while testing website Cookies.

Testing web apps on several devices simultaneously

Check out Ghostlab.

Testing web app UI behaviour with content amount variations

When you want to quickly change the content on a page (i.e. to check what the page would look like if there is more/less text, how buttons would look like with longer/shorter labels etc.), you can use the document.designMode='on' command in the browers' console: 1. open the console 2. enter document.designMode='on' 3. hit Enter

The designMode should be enabled and you can edit the content.