README.md

Test Automation Workshop

Background

This is the material for my workshop at GovTech STACK Conference 2024 (Slides).

This workshop will take folks on a learning adventure of how software engineers in GovTech use Automated Testing in building high-quality software products for public good. Attendees will be introduced to the different layers of the Testing Pyramid and the tools that software engineers in GovTech use to support that layer of automated testing.

Attendees will be given a number of self-paced hands-on labs to have a taster on the different kind of testing tools available. Through these, participants will learn about different kinds of test automation tools used in software engineering. Specifically for full-stack web development.

Pre-requisites (for attendees)

• Basic understanding of programming concepts.
• Familiarity with JavaScript, Python or Java programming languages.
• Familiarity with Git and GitHub (you will need a GitHub user account).
• Familiarity with web development concepts.
• Familiarity with REST API concepts.

Concept

Through this workshop, I aim to introduce the different testing tools used by modern full-stack software engineers in developing web applications.

We will cover the tools used in the Test Pyramid: Unit Testing, Integration Testing and End-to-End Testing.

Sample Application

We will use a To Do List app to help illustrate the concepts. The To Do List app will have these features:

• List of To Do Items
• Add new To Do Item
• Delete To Do Item
• Edit a To Do Item
• Mark Item as Done / Not Done
• Clear Completed To Do Items from the list (to be implemented as part of the exercises)

Components

• Frontend App
  • The To Do List frontend is a web application built with JavaScript.
    • VueJS for the SPA¹ framework.
    • Vitest for the Unit Tests.
• Backend App
  • The To Do List backend is a REST API server built in 3 programming languages.
  • JavaScript:
    • Express.js for the web framework.
    • Sequelize for the ORM².
    • Vitest for the Unit Tests.
    • SQLite3 for the database.
  • Python:
    • FastAPI for the web framework.
    • SQLAlchemy for the ORM².
    • Pytest for the Unit Tests.
    • SQLite3 for the database.
  • Java:
    • Spring Boot for the web framework.
    • Spring Data JPA for the ORM².
    • Junit for the Unit Tests.
    • H2 for the database.
• End-to-End Tests
  • This will automate a web browser and interact with the application like a normal user. This way, we have a repeatable and predictable way of verifying the features.
    • Playwright for the E2E testing framework. We can write tests in JavaScript, Python or Java.

Hands-on Lab Exercises

We will be using GitHub Codespace (via Devcontainers) for these exercises. You can use this IDE³ in the browser or in Visual Studio Code on your laptop.

• Exercise 1: Fork the Workshop Repository
• Exercise 2: Start a Codespace
• Exercise 3: Open your Code Workspace
• Exercise 4: Intro to your IDE (Integrated Development Environment) - Visual Studio Code (VSCode)
• Exercise 5: Intro to the Frontend App
• Exercise 6: Intro to the Backend App
• Exercise 7: Running the To Do List app
• Exercise 8: Intro to the Playwright End-to-End Test
• Exercise 9: About the new feature
• Exercise 10: Updating the Backend
• Exercise 11: Updating the Frontend
• Exercise 12: Updating the End-to-End Test
• Exercise 13: Review the changes
• Exercise 14: Bonus Exercises

Other ways of running this workshop code

• Run the Codespaces on VSCode on your local machine
• Using VSCode with Devcontainers

Coding with AI

• How we created the sample application using AI tools.

Footnotes

1. Single Page Application ↩

2. Object Relational Mapping ↩ ↩² ↩³

3. Integrated Development Environment ↩