Add aselo-webchat-react-app E2E test

[Copilot]

Description

Adds an E2E test for the new aselo-webchat-react-app client, parallel to the existing legacy webchat test. The new client uses React+Redux with data-test/data-testid attributes rather than Twilio Flex CSS classes, and requires completing a pre-engagement form before chatting.

e2e-tests/config.ts

• New aseloWebchatUrl config option (ASELO_WEBCHAT_URL env var), defaulting to https://assets-${env}.tl.techmatters.org/aselo-webchat-react-app/${helplineShortCode}/
• With defaults (HL=e2e, HL_ENV=development) resolves to https://assets-development.tl.techmatters.org/aselo-webchat-react-app/e2e/

e2e-tests/aseloWebchat.ts (new POM)

• Parallel to webchat.ts but targets the new app's test attributes instead of Twilio Flex CSS classes
• Key selector differences:

Concern	Legacy	New
Toggle button	button.Twilio-EntryPoint	[data-testid="entry-point-button"]
Chat container	div.Twilio-MainContainer	[data-test="root-container"]
Pre-engagement form	div.Twilio-PreEngagementCanvas	[data-test="pre-engagement-chat-form"]
Message input	.Twilio-MessageInputArea-TextArea textarea	[data-test="message-input-textarea"]
Message bubbles	div.Twilio-MessageListItem div.Twilio-MessageBubble	[data-testid="message-bubble"] p

• fillPreEngagementForm() populates all mandatory fields of the AS pre-engagement form and explicitly calls .blur() to flush Redux store updates (the new app uses onBlur handlers rather than onChange to dispatch updatePreEngagementDataField):
  • firstName → input#firstName
  • contactIdentifier (email) → input#contactIdentifier
  • age → select#age
  • gender → select#gender
  • termsAndConditions → input#termsAndConditions
• All fields are filled conditionally (if visible) to keep the POM flexible across helplines with different form configurations
• selectHelpline() uses native <select> via Playwright's selectOption() rather than the MUI dropdown approach in the legacy POM

e2e-tests/tests/aseloWebchat.spec.ts (new test)

• Identical flow to webchat.spec.ts: open chat → fill pre-engagement form → run chat script → fill contact form → save

Checklist

• Corresponding issue has been opened
• New tests added
• Feature flags added
• Strings are localized
• Tested for chat contacts
• Tested for call contacts

Other Related Issues

None

Verification steps

Run against the development environment:

cd e2e-tests
cross-env LOAD_SSM_CONFIG=true HL_ENV=development HL=e2e TEST_NAME=aseloWebchat npm run test

The test navigates to the deployed e2e page, clicks the chat entry point, completes all mandatory pre-engagement form fields (first name, email, age, gender, terms & conditions), exchanges chat messages via the bot/counselor flow, and saves the contact form.

AFTER YOU MERGE

1. Cut a release tag using the Github workflow. Wait for it to complete and notify in the #aselo-deploys Slack channel.
2. Comment on the ticket with the release tag version AND any additional instructions required to configure an environment to test the changes.
3. Only then move the ticket into the QA column in JIRA

You are responsible for ensuring the above steps are completed. If you move a ticket into QA without advising what version to test, the QA team will assume the latest tag has the changes. If it does not, the following confusion is on you! :-P

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add an aselo webchat E2E test</issue_title>
<issue_description>## Description

We are migrating from the legacy webchat client defined in the webchat directory to a new version defined in the aselo-webchat-react-app directory

We need an E2E test similar to the existing 'webchat' test, but using the new client rather than the legacy one.

You need to

• Add a new test that follows the same flow as the existing webchat test, but for the new client
• Add a set of parallel POM support code for the new client
• The new test will need to complete the pre-engagement form

Additional context

The aselo-webchat-react-app client is deployed to https://assets-development.tl.techmatters.org/aselo-webchat-react-app/e2e/
</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add an aselo webchat E2E test #4071

---

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

[stephenhand]

The preengagement form on the new client has more mandatory fields than the legacy form, determine which fields need to be filled and update the test code to populate them

[Copilot]

The preengagement form on the new client has more mandatory fields than the legacy form, determine which fields need to be filled and update the test code to populate them

Identified the mandatory fields from the AS helpline's pre-engagement form definition (as/v1/webchat/PreEngagementForm.json) and updated fillPreEngagementForm to populate them all:

• firstName → input#firstName (filled with 'Test')
• contactIdentifier (email) → input#contactIdentifier (filled with 'test@example.com')
• age → select#age (selects value '10')
• gender → select#gender (selects 'Girl')
• termsAndConditions → input#termsAndConditions (checked)

All fields are still filled conditionally (if visible) to keep the POM flexible across helplines. Committed in 86095f9.

[Copilot]

Pull request overview

Adds a new Playwright E2E flow for the aselo-webchat-react-app client (React/Redux, data-test / data-testid selectors), mirroring the existing legacy webchat E2E test flow and ensuring the new client’s pre-engagement form is completed before chatting.

Changes:

• Added ASELO_WEBCHAT_URL / aseloWebchatUrl config option with a sensible default based on HL and HL_ENV.
• Introduced a new Page Object Model (aseloWebchat.ts) targeting the new app’s test attributes and pre-engagement fields.
• Added a new serial Playwright spec (aseloWebchat.spec.ts) that runs the same end-to-end chat + contact save flow against the new client.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
e2e-tests/config.ts	Adds aseloWebchatUrl config option used by the new E2E flow.
e2e-tests/aseloWebchat.ts	New POM for the React webchat client (open widget, fill pre-engagement form, run scripted chat).
e2e-tests/tests/aseloWebchat.spec.ts	New Playwright test that executes the full chat + HRM contact save workflow using the new POM.

---

You can also share your feedback on Copilot code review. Take the survey.