Automation lab Aú Forms & Validation (FORMS_VALIDATION)

Lab 020: Auto-save draft using local storage

Practice auto-save draft using local storage in a real web app context as part of the Forms & Validation module.

basic basic
basic

Objectives

Use for test scripts
  • Understand the purpose and business flow of auto-save draft using local storage.
  • Design stable locators for key UI elements.
  • Automate user interactions and verify the resulting UI state.

Sandbox

Forms & Validation • web-ui • basic • active

Auto-save draft using local storage

Persist draft data locally, recover it on load, and clear on submit.

Reading and understanding requirements Choosing stable locators Designing assertions based on business rules

Learning objectives

  • Auto-save with debounce to localStorage.
  • Restore drafts on page load.
  • Clear draft after successful submit.

Steps

  1. Type into fields; observe "Saved locally" status.
  2. Reload page to confirm values persist.
  3. Submit to clear storage and fields.
  4. Assert "Draft cleared" message appears.

Expected results

  • Draft auto-saves after typing.
  • Draft restores on load when present.
  • Submit clears both UI and storage.

Practice sandbox

Draft auto-save with restore.

Waiting for input

Assertions to practice

  • localStorage key: lab-020-draft.
  • Debounced save updates status to "Saved locally".
  • Submit clears UI and storage, status changes to "Draft cleared".