If you ever wanted to learn how to use the dev tools and the basics of JavaScript then this fun course can help. You will be introduced to Technical Web Testing. Using a small JavaScript game called “Protect the Square”.
Exclusively available to Patreon supporters. You can sign up to Patreon for only $1 a month and you’ll gain access to this course, as well as other exclusive courses and regular (often daily) tips, tutorials and advice on Software Development and Testing.
Contents
This course is a short overview of ‘hacking’ a JavaScript game to help learn more about the DOM, the browser dev tools, and basic JavaScript.
This course has about 70 minutes of video content and the exercises might take 30 - 60 minutes.
Once you learn this, you will be surprised at the amount of opportunities that open up in your testing.
You can find the contents in this patreon post
We cover:
- An overview of the Chrome Developer Tools - Elements DOM View and JavaScript Console
- How to view Application Source Code
- Basics of HTML and how to learn more
- How to amend DOM elements and change the HTML of the application under test
- Some Basic JavaScript
- How to execute JavaScript from the Console
- How to amend JavaScript memory to change the application under test as it executes
- How to amend the code the application under test executes
- How to add new code into the application under test with JavaScript
When you finish you will:
- Know that you can’t ’trust’ information from the ‘front end’ of a client server app
- Feel confident ‘opening’ and application to view its source, both HTML and JavaScript
- Have run JavaScript code from the console
- Changed an applications HTML in the browser
- Know how to learn more HTML for the applications you test
- Know enough to start experimenting with the applications you test
The Game we use (in the course it explains how to download to have an offline version)
eviltester.github.io/TestingApp/games/buggygames/protect_the_square/protect_the_square.html
Lecture Contents:
- 001 Protect The Square - Overview (12:39)
- 002 Protect The Square - Overview Answers (07:42)
- 003 Protect The Square - HTML Review (15:18)
- 004 Protect The Square - JavaScript Review (14:42)
- 005 Protect The Square - JavaScript Answers (14:36)
- 006 Protect The Square - Resources and Next Steps
- 007 Bonus - Case Study of click from console using TodoMvc App
