Test With A.T.T.I.T.U.D.E - Instructions

A playful acronym generator for practicing exploratory testing, source reading, DOM inspection, query-string setup, and JavaScript console investigation.

Stuck? Start Here

The main buttons that control the extra functionality are hidden.

You can open the browser DevTools, inspect the page, and change the relevant display attributes from display:none to display:block, or remove the display:none styling altogether.

You need to amend two div items to show the hidden buttons:

  • <div id="gtrig" style="display:none">
  • the nested <div style="display:none"> inside #gtrig that contains the Render and Header buttons

Or run this script in the console to see the buttons and get started:

document
    .querySelectorAll('#gtrig, #gtrig div[style*="display:none"]')
    .forEach(function(elem) {
        elem.style.display = 'block';
    });

After that, try to enable the buttons yourself by inspecting and editing the DOM.

About Page

Test With A.T.T.I.T.U.D.E starts from a slogan:

I
T.E.S.T
with
A.T.T.I.T.U.D.E

The default expansions are:

T.E.S.T
Tactical
Exploratory
Strategic
Testing

A.T.T.I.T.U.D.E
Attack
Tenacious
Task
Interrogate
Technical
Understand
Debrief
Experiment

At first glance the page appears to provide a set of inputs with visible Clear and Defaults buttons. That is the start of the challenge, not the full application.

Use it to practice:

  • repeated interaction testing
  • generated text checks
  • DOM inspection
  • JavaScript console investigation
  • query-string driven state setup
  • canvas rendering investigation
  • finding hidden features from source comments and code

Exploratory Testing

Use the challenge questions as a lightweight test charter:

  • What does it do?
  • What can you make it do?
  • Is this thing buggy?
  • What clues are in the starting slogan and the source comments?
  • Which behaviours are visible, and which are hidden until you inspect the implementation?

Investigation Exercises

Treat the application itself as the game. Start by using it normally, then inspect how it works.

Try:

  • typing words into the generated input fields
  • clicking Clear and watching how the form is rebuilt
  • clicking Defaults and checking how the form is rebuilt and populated
  • inspecting the div elements and their ids
  • reading the comments in the page source
  • finding makeExplodedSentenceForm() and following what it creates
  • looking for the hidden gtrig area
  • finding the hidden Render and Header buttons
  • inspecting what uses the canvas
  • finding amItesting(), getWordsFromLocation(), reportResult(), writeToCanvas(), and testRender()

Useful questions:

  • What do the letters in T.E.S.T and A.T.T.I.T.U.D.E expand to?
  • Are empty inputs handled clearly?
  • Does the generated result match the visible input fields?
  • What functionality exists but is hidden from the normal UI?
  • What changes when the canvas rendering functions are triggered?

Console Exercises

Call the functions directly from the console.

Show the current acronym result in the page:

reportResult();

Render the current acronym result to the canvas:

writeMainTextToTheCanvas();

Animate the canvas output:

writeToCanvas();

Change the words from JavaScript and recalculate the result:

setGUIWordValuesFrom([
    ["T.E.S.T", "A.T.T.I.T.U.D.E"],
    ["Tactical", "Exploratory", "Strategic", "Testing"],
    ["Attack", "Tenacious", "Task", "Interrogate", "Technical", "Understand", "Debrief", "Experiment"]
]);

reportResult();

Query String Setup

The page has a testing mode that reads words from the URL when the query string includes AvalloneSleuth.

Try opening a URL shaped like this:

/fun-and-games/test-with-attitude/?AvalloneSleuth&word=Tactical|Exploratory|Strategic|Testing&word=Attack|Tenacious|Task|Interrogate|Technical|Understand|Debrief|Experiment

Add RenderIt to trigger the canvas rendering path:

/fun-and-games/test-with-attitude/?AvalloneSleuth&RenderIt&word=Tactical|Exploratory|Strategic|Testing&word=Attack|Tenacious|Task|Interrogate|Technical|Understand|Debrief|Experiment

Experiment with different word counts, empty values, punctuation, long words, and mismatched acronym lengths.