Component Lab A · Workflows

Realistic Forms

Automate realistic registration, login, contact, job, support, and feedback forms with client validation, conditional fields, accessible error summaries, and isolated server responses from the Practice API.

PRACTICE FIXTURE — intentionally built for automation practice

Learner registration

Client rules cover required, matching, conditional, strength, date, choice, dependent location, and terms fields; valid data creates an isolated API user.

Weak

Gender

Registration not submitted.

Login UI only

This chunk validates the form interface only. Authentication and real session behavior intentionally arrive in Chunk 8.

No login attempt.

Contact form

A successful submission maps fictional contact data to an isolated customer record.

Contact request not submitted.

Job application

Selecting experienced reveals and requires years of experience before the employee record can be created.

Application not submitted.

Support ticket

The form maps priority and subject into a ticket and exposes simulated server failures for assertion practice.

Ticket not submitted.

Feedback form

A labelled rating group and required comments create a synthetic follow-up task.

Rating

Feedback not submitted.

Passing examples

Start with observable behavior

These snippets match executable tests stored inexamples/playwright-ts/.

Client validation
await page.getByRole('button', { name: 'Create learner account' }).click();
await expect(page.getByRole('alert')).toContainText('Fix');
await expect(page.getByLabel('First name')).toHaveAttribute('aria-invalid', 'true');
API success
await page.getByLabel('First name').fill('Asha');
await page.getByLabel('Last name').fill('Tester');
await page.getByLabel('Registration email').fill('asha.4803@example.test');
// fill remaining required fields, then submit
await expect(page.getByTestId('registration-result')).toContainText('Created users record');
Duplicate-data 409
await page.getByRole('button', { name: 'Use an existing synthetic email' }).click();
await page.getByRole('button', { name: 'Create learner account' }).click();
await expect(page.getByTestId('registration-result')).toContainText('DUPLICATE_RECORD');
Simulated server error
await page.getByLabel('Server response simulation').selectOption('503');
await page.getByRole('button', { name: 'Send support ticket' }).click();
await expect(page.getByTestId('support-result')).toContainText('503');