Creative Web Automation: Generate User Guide with Automation Script

How to use an automated script to take screenshots and create an HTML user guide

A repost of my daughter’s article with permission. I added a few notes. This is also included in my “How to in Selenium WebDriver” series.

This article shows how I use automation scripts to generate a user guide for a website. For this exercise, I will use the sign-up process on WhenWise as an example.

Table of Contents:
· Why use an Automation Script?
· A typical Online User Guide 
· Automation Design
· Implementation
  ∘ Combine all into one Markdown document
  ∘ Convert Markdown to HTML
· What does it look like?
· Add Styling
· Full Script
· Considerations
· Review by Zhimin

Why use an Automation Script?

Typically, a user guide is generally written by a technical writer after the software is complete. However, the documentation often is outdated quickly as the app evolves.

Using automated scripts to generate user guides makes document-update much easier and quicker.

A typical Online User Guide

1. Navigate to the start page
2. Some text to explain, followed by step by step guide.
3. for each step, we might add a screenshot of the control on the page to make it clear.

Automation Design

For each business feature,

1. Open the start page (using automation script)
2. Write step description
3. Take a screenshot of the controls on the page (optional)
4. Combine all the above together into Markdown format
5. Convert to HTML

Why Markdown?
Markdown is a popular markup language that is very readable. It is easier to use and concise, very easy to convert to HTML.

Implementation