Technical Web Testing 101

Technical testing is not the tools, or automation, or techniques. It is learning, modelling, experimenting. What comes first? Tool or Learning? I explain.

My fundamental Mnemonic for Technical Testing: Model, Observe, Reflect, Interrogate, Manipulate. Utilise the observations.

A description of some free online sites you can use to practice testing against

Applications to test against described in more detail

• http://google-gruyere.appspot.com/part1
  • http://google-gruyere.appspot.com/start
• https://hack.me/
• http://demo.testfire.net/

• Lists of Apps to Test Against
  • http://blog.taddong.com/2011/10/hacking-vulnerable-web-applications.html

Modern browsers allow you to observe traffic and manipulate the DOM

Read the Official Documentation:

- https://developers.google.com/web/tools/chrome-devtools

- https://developer.mozilla.org/en-US/docs/Tools

- https://developer.apple.com/safari/

The concept Form Follows Function is one I use to help me with technology and tooling.

Device Mode allows you to simulate how your page looks and performs on a mobile device.

The ability to configure your workspace and run additional commands and experimental tooling.

The main place working area for much exploratory web testing. Observe, Interrogate and Manipulate the DOM and CSS interaction.

Use the Network panel when you want to observe traffic or interrogate to check that requests are sent, and resources are being downloaded or uploaded, as expected.

This is where we learn about HTTP - the messages that are passed from browser to server, and server to browser.

- Record/ Stop Recording

- Preserve Log between page loads

- Offline and speed throttling - useful for testing JS Heavy Sites

- Disable Cache - great for refreshing sites after changes

- Export as HAR file (HTTP Archive File)

- Filter by Type

- Request View as List

- Request View - Inspect Request Headers, Response Preview, Response, etc.

Use Basic Ajax Example for filtering for XHR

https://testpages.herokuapp.com/styled/basic-ajax-test.html

Incognito mode offers a very simple, brute force method of isolating cookies, and additional benefits of customising the browser with an emphasis on using it for Technical Web Testing

In this video we cover the inbuilt functionality in Google Chrome browser for Cookie manipulation. The cookie functionality in Google Chrome does not meet the needs of Technical testers so we have to add 2 freely available extensions to allow us to meet cookie manipulation needs as Technical Testers

Sometimes I'm a little unfair on the Firefox developer tools because I use Firebug for testing so much but the web console is very capable and since it is there by default, we should learn how to use it.

View Page Source is a very powerful, but under used feature of browsers. Probably because we have all become so used to the Web Development tools and testers forget the page view exists.

Page view is worth adding to your arsenal. You'll find and spot things that no-one else will, because no-one else values it.

We will explore how we can view the page source, navigate between pages using it and compare the functionality between browsers to learn how to check for HTML syntax errors in the page source view.

The exercises for exploring View Page Source functionality as a video lecture and list in a pdf.

A short summary of the information I found when I compared the functionality of view page source between browsers - differences in features and how to trigger the functionality.

A quick demonstration of some of the problems I detected on live sites when I used the view page source functionality.

The purpose of this Technical Web Testing Challenge is to spend about an hour in a guided investigation of another very simple browser function. I use this all the time for testing and for general life.

Watch the introduction and the challenge exercise - that will take about 10 minutes. Then work through the exercise for 30 mins and watch the rest of the section (about 15 mins).

Perfect for a spare hour of study or a lunch time workout.

An overview of incognito mode and the basic way to access it from the different browsers. Also a description of how I have used the functionality in the past to test multi-user interaction.

The challenges to undertake to explore and learn about incognito mode in the different browsers, and to see how using the functionality changes your test approach. The attached PDF lists the challenges in written form so you can print them out as you tackle the challenges.

A live example using Chrome of the type of approach that I took when using incognito mode. It caused me to focus on the multi-user interaction rather than other functionality.

http://textadventures.co.uk/ has some classic games like hitchhikers guide, zork

* http://textadventures.co.uk/games/view/3cbedqimquselmanehhzxg/the-hitchhikers-guide-to-the-galaxy
* http://textadventures.co.uk/games/view/5zyoqrsugeopel3ffhz_vq/zork

Learn about Interactive fiction:

* https://en.wikipedia.org/wiki/Interactive_fiction

How to play Interactive Fiction

* http://www.ifwiki.org/index.php/Starters
* http://brasslantern.org/beginners/

You'll find links to some of the RestMud games in a later lecture. What we basically do is download the game. Unzip it.

Then from the command line if we run `java -jar game.jar`

It will start. Better to do this from a command line prompt because then you can see various logging messages in the console as well.

Then head off to localhost:4567 in a browser and you can start playing.

In this video I'm going to have a quick play of one of my example games. And some hints on how to play any of the RestMud games

* Change URLs
* Observe URLs - watch for common verbs, go, examine etc.
* Inspect Elements - look for ids, look for hidden information in the page, look for location ids
* watch the log
* clues in the descriptions and messages

Play the game that you find for download at compendiumdev.co.uk/page/restmud.

This is a course for self starters. I'll go over some of the basics and the psychology behind what we do and why we do it. I'll quickly show some of the tools in action and describe their basic capabilities. And provide more links for you to head off and explore.

A description of HTTP Proxies and how they help us observe and interrogate traffic, and manipulate them. Use them for learning HTTP. They can handle HTTPs. Why should testers care about this stuff? When should you use it? When should you not use it? What are the risks?

Quick overview of starting burpsuite and configuring Firefox to point to the browser and send traffic through the proxy.

Authorise the burpsuite certificate in firefox. Observe and Interrogate the requests in the BurpSuite History. Overview of the Request and Response Interrogation Tabs. Overview of Sitemap and how it helps your testing. 

Overview of recommended books

• The Web Application Hacker's Handbook
  
• www.amazon.com/exec/obidos/ASIN/1118026470
• www.amazon.co.uk/exec/obidos/ASIN/1118026470

• Debugging with Fiddler by Eric Lawrence
• www.amazon.com/exec/obidos/ASIN/1475024487
• www.amazon.co.uk/exec/obidos/ASIN/1475024487

• BurpSuite
• http://www.portswigger.net/burp/

• Fiddler
• http://www.fiddler2.com/fiddler2/

• zaproxy (Zed Attack Proxy)
• http://code.google.com/p/zaproxy/

Download the tools, buy the books, start using the proxies and inbuilt browser tools to help you with your testing.

An overview of how to chain debug proxies. With browser requests going into Zap, which then go into BurpSuite, which then go into Fiddler. This allows us to use all the features of all the debug proxies at the same time.

Overview of this section which will provide a good set of exerises to build up your skill interacting with REST APIs and the client tools you'll start with.

Description of a REST Api, with an example of a live API called RandomUser.me

Exercise using the api.randomuser.me through the browser to access the API

Showing the answers and demonstration of some JSON pretty printing tools.

Overview of REST clients and the free Postman REST client in particular.

Uses api.randomuser.me as the example API.

Extend the previous examples so that you now use Postman client and experiment with different result formats.

Demo using postman client to solve the exercises.

Postman shares cookies, proxy setting with Chrome, so be aware of that.

Example of using Postman to interact with Restmud and create collections of requests in Postman.

Explain the aims of the exercise to play Restmud without using a GUI

Example showing how to use Postman and send the requests through the Owasp ZAP proxy - by setting Chrome to use a proxy.

* More REST API Theory
* Get, Put, Post, Delete - what they are for
* Status Codes and where to find more information
* Basic Authorization header and example of how to set it using Postman

Description of some recommended open source applications with APIs to try testing.

The slides and references pdf.

We are going to learn how to use the JavaScript console to automate and manipulate the application we are testing.

- We're going to learn, simple Javascript
- How to use the Chrome Developer console
- How to automate a lot, with a little
- How to understand your JavaScript application

We are going to open up a new world of opportunities for you.

And this is such good fun.

"The Evil Tester Sloganizer" is a simple JavaScript application which randomly generates a slogan when you click a button. In this video we will look at how it works so we understand how HTML and JavaScript fit together.

Spend some time investigating the Evil Tester Sloganizer.

* visit [The Evil Tester Sloganizer v 1](http://www.eviltester.com/apps/sloganizer/version/1/sloganizer.html)
* inspect the button element
* see that you can view the event in the 'Elements' 'Event Listeners' tab
* use the JavaScript console to change the slogan by typing 'changeSlogan()' at the console

An overview of JavaScript functions and objects and how they are used in The Evil Tester sloganizer and start to use the JavaScript console.

* Look at the source for the sloganizer and see how much you understand
* type the names of the objects that you see into the console
* explore the output in the console
* run some of the functions that you find
* observe that when you type a function name you have code completion in the console (press tab to autocomplete a function name)
* if you press the cursor up and down then you can select items from the console history - use this to re-enter commands

The basic JavaScript you need to understand to interact with simple JavaScript applications: Arrays, Objects, For loops, Console.log

Putting all of the JavaScript theory together, we start to interact with the application from the command line with an aim of testing it without using the GUI.

* use a `for` loop to generate 100 variations of `sentence[0]` by calling `process_sentence`
* amend the value of `sentence[0]` to be `bob` and try your `for` loop again
* call the `removeSpacesAtStart` method with a `string`
* call the `removeSpacesBeforePunctuation` method with different `string` values and check that it works as you expect
* generate 1000 sentences with `random_sentence

Examples of answers to the interaction exercises.

An overview of the TodoMVC Backbone application and an early investigation into the source to find the top level object we will use from the console.

A 'how to' investigation in the app to learn how to create Todo items, amend them, read their values and delete them. All from the console to support GUI based interactive testing.

Explanation of the exercises, with reminder hints:

* use a `for` loop to create 100 todos
* use a `for` loop to `toggle` all of your todos and mark them as `completed`
* then use the GUI to `Clear completed`
* create another 100 todos, then see if you can write code to toggle half of them
* create another 100 todos, then see if you can write code to toggle every second todo
* create another 100 todos, then see if you can delete them all
* create another 100 todos, complete half of them, then delete the completed items
* create another 100 todos, then amend them all to have "*TODO*" after the name, e.g. "todo" would become "todo*TODO*"

Explanation of the answers to the exercises, with description of `for` loops, `while` loops and `do...while` loops.

Summary of how frameworks can make things harder, but also why we need testable applications.

An example of using the `setInterval` and `clearInterval` commands to create multiple 'bots' which can interact with the application every X milliseconds, and allow you to continue to use the console and the GUI.

Chrome have a 'snippets' tab on the source view.

This allows you to store short 'snippets' of JavaScript code in the dev tools, rather than having to copy and paste into the console all the time.

[developers.google.com/web/tools/chrome-devtools/debug/snippets](https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en)

In this video you'll see it in action for the Evil Tester Sloganizer.

You can find sources of useful snippets to help you in your work

You can find collections of other people's snippets online.

* https://bgrins.github.io/devtools-snippets/

* https://github.com/bgrins/devtools-snippets [rss](https://github.com/bgrins/devtools-snippets/commits/master.atom)
* https://github.com/bahmutov/code-snippets [rss](https://github.com/bahmutov/code-snippets/commits/master.atom)

The Chrome Snippets does not have an 'official' way of saving and loading snippets.

We need to use this gist:

* https://gist.github.com/soundyogi/03df95505604c8351212

This video provides an overview of using the Gist to maintain multiple collections of snippets.

Essential JavaScript and Chrome Console links you should read.

- [Using the console](https://developers.google.com/web/tools/chrome-devtools/debug/console/?hl=en)
- [Eloquent JavaScript](http://eloquentjavascript.net)
- [JavaScript for Cats](http://jsforcats.com/)
- [w3schools.com/jsref](http://www.w3schools.com/jsref)
- [Mozilla Developer Network Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [Essential JavaScript Links](https://github.com/ericelliott/essential-javascript-links#essential-javascript-links)

Some blog posts I wrote in September 2016 and a JS Unconf 2016 talk to watch entitled "Hacking Games and Why You Should Do It" by Philip Hödtke.

* http://blog.eviltester.com/2016/09/hacking-javascript-games-to-improve.html
* http://blog.eviltester.com/2016/09/lessons-learned-from-automating.html
* http://blog.eviltester.com/2016/09/difference-between-hacking-cheating-and.html
* https://www.youtube.com/watch?v=pSMljRkpP64

A fun game for learning basics of programming:

- [codingame.com](https://www.codingame.com/)

How to view the HTTP traffic from your mobile device on a computer using Fiddler

How to view the HTTP traffic from your mobile device on a computer using BurpSuite

This video demonstrates connecting an iOS device (iPad) to a Windows desktop computer HTTP Proxy.

On your iOS settings:

1. In Wifi
2. Select the (i) information icon next to your wifi network
3. On the bottom of the screen is the HTTP Proxy settings
4. Set this to Manual
5. Type in the Server IP address and port of your proxy

A WebCam based demo of the VMLite VNC Android Server

A desktop demo of the VMLite VNC Server in action using TightVNC and the HTML5 and Java Applet VNC viewers

In this video I will show you how to use the in built Chrome browser functionality to emulate a mobile browser and conduct basic mobile testing using your desktop browser.

You can use the Airplay functionality on iOS to send to a Windows PC, but you need additional software to do that. Here I demonstrate Airserver and Reflector.

You can find wireshark on line - it is a free tool.

https://www.wireshark.org/

Wireshark is a tool for monitoring network traffic. Unlike an HTTP proxy server where you have to configure your machine to point to the HTTP proxy server in order to monitor the traffic. With Wireshark.

On Windows

The Windows install is simple. Just download and run.

https://www.wireshark.org/download.html

Note that you may not be able to capture the mobile traffic on Windows because of WinPCap limitations. You may need to buy an additional adapter to do this. I'm using Mac to show you this functionality.

http://wiki.wireshark.org/CaptureSetup/WLAN#windows

On Mac

Mac install was a little harder for me and it didn't work out the box so I had to do the extra steps to add the application to XQuartz

- Install X-Windows - X11 XQuartz - http://xquartz.macosforge.org/landing/

- Download the img for wireshark

- install Wireshark

- Start wireshark - it might take a while, but should work

If it doesn't work then you could try, start xquartz

In the Applications menu of Xquartz, customize it and "Add Item" with the command:

- "open /Applications/Wireshark.app/Contents/MacOs/Wireshark"

- or "open wireshark"

- or "wireshark"

Then you could try, running wireshark from the Applications menu in XQuartz, or from the application icon directly.

You might find these links helpful if you are on a mac:

* https://ask.wireshark.org/questions/12140/cant-run-wireshark-in-mac-os-x-mountain-lion

On Linux

I haven't tried the install on linux - I imagine the instructions on the Wireshark website work fine.