dgtechqa.com — practice-lab main*
--:--:--
<DGTechQA/>

// automated + manual QA sandbox

Break things here,
so production doesn't.

DGTechQA is a practice lab built for testers. Forms that need validating, buttons that behave badly, locators that change on purpose, and a live API console — all in one page you're free to poke at.

Start with Manual Jump to Automation
32
practice elements
10
automation traps
4
live API methods

manual.spec.js

Manual Testing Practice

Everything here is meant to be clicked, typed into, dragged, resized and generally interrogated by hand before you ever automate it.

TC-001

Form Validation

READY

TC-002

Checkboxes & Radio Buttons

READY
Subscribe to
Experience level

Selection updates live.

TC-003

Dropdown & Multi-select

READY

TC-004

JS Alerts, Confirm & Prompt

READY

Result appears here.

TC-005

Modal Dialog

READY

Modal is closed.

TC-006

Drag and Drop

READY
DRAG ME
Drop here

TC-007

Tooltips & Hover Reveal

READY
This tooltip is pure CSS + a data attribute.
Hidden panel
Only visible on hover / focus.
TC-008

Sortable / Filterable Table

READY
Test name ⇅ Suite ⇅ Duration (ms) ⇅ Status ⇅
Login with valid credssmoke412PASS
Login with invalid passwordsmoke388PASS
Add item to cartregression901FAIL
Checkout with couponregression1220PENDING
Search returns resultssmoke256PASS
Logout clears sessionregression190PASS
TC-009

File Upload

READY

No file selected.

TC-010

Dynamic Loading

READY

TC-011

Hidden & Disabled Elements

READY
TC-012

Custom Context Menu

READY
Right-click inside this box
TC-013

Date Picker & Range Slider

READY
TC-014

Progress Bar

READY

TC-015

New Tab Link & Broken Image

READY
Opens in a new tab ↗
Intentionally broken image ↑ intentionally broken — practice detecting failed image loads
TC-016

Scroll-to-load List

READY
Item 1
Item 2
Item 3

Scroll to the bottom of the box to load more items.

automation.spec.js

Automation Testing Practice

Locator traps and timing problems, on purpose. Point Selenium, Playwright or Cypress at these and practice writing selectors that don't break.

AT-001

Stable Locators Reference

READY
Elementidclassdata-testid
Login buttonsubmitFormbtn btn--small—
Form outputformOutputwidget__outputform-output
Country selectcountry——
Drag sourcedragBoxdnd__boxdrag-box
AT-002

Dynamic ID Button

TRICKY

Current id: —

The id regenerates on every click and every page reload — locate this by data-testid or text instead of id.

AT-003

Shadow DOM Element

TRICKY

The button above lives inside a shadow root — practice piercing it (e.g. >>> in Playwright, or JS shadowRoot traversal in Selenium).

AT-004

Form Inside an iFrame

TRICKY
AT-005

Delayed Appearance (Explicit Wait)

TRICKY
AT-006

Stale Element Reference

TRICKY

Replacing swaps the DOM node entirely — a held reference to the old button will throw a stale element exception.

AT-007

Multiple Similar Elements

TRICKY

Same text, same class — practice indexing / nth-match / data-index selectors.

api.spec.js

API Testing Console

A tiny REST client, live in the page. Requests go to jsonplaceholder.typicode.com, a free public fake API — good for practicing Postman, REST Assured, Karate or your own fetch/axios scripts.

Request body (used for POST / PUT)

Response —

Send a request to see the response here.
AT-API-01

Public Practice APIs

REFERENCE
JSONPlaceholderjsonplaceholder.typicode.comCRUD on fake posts/users
ReqResreqres.in/apiAuth & user endpoints
HTTPBinhttpbin.orgEchoes headers, status codes

locators.md

Locator Cheat Sheet

Quick reference while you write selectors against this page.

StrategyExample against this page
CSS id#submitForm
CSS attribute[data-testid="drag-box"]
XPath text//button[text()='Trigger alert()']
XPath contains//*[contains(@class,'test-card')][1]
nth-of-type.locator-btn:nth-of-type(3)