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 the CloudFront URL https://assets-${env}.tl.techmatters.org/aselo-webchat-react-app/${helplineShortCode}/ (intentionally uses CloudFront rather than S3 direct, to validate cache eviction on deployment)
• 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 — uses count() > 0 (not isVisible()) and scrollIntoViewIfNeeded() + check({ force: true }) because Twilio Paste renders the checkbox input as a visually-hidden element (position:absolute, clip:rect(0 0 0 0), zero-size) that may be below the viewport
• All non-checkbox 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.

[stephenhand]

The new E2E test is failing because it doesn't check the accept terms and conditions checkbox

[Copilot]

Pull request overview

Adds a Playwright E2E test path for the new aselo-webchat-react-app client, mirroring the existing legacy webchat E2E flow while targeting the React app’s data-test / data-testid selectors and completing the required pre-engagement form.

Changes:

• Added a new Page Object Model for the React-based Aselo webchat client (e2e-tests/aseloWebchat.ts).
• Added a new Playwright spec that runs the full chat + HRM contact save flow against the new client (e2e-tests/tests/aseloWebchat.spec.ts).
• Introduced a new E2E config option for the Aselo webchat URL (aseloWebchatUrl, env var ASELO_WEBCHAT_URL) in e2e-tests/config.ts.

Reviewed changes

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

File	Description
e2e-tests/tests/aseloWebchat.spec.ts	New serial E2E test that opens the new webchat, fills pre-engagement, runs the chat script, and saves the contact form.
e2e-tests/config.ts	Adds aseloWebchatUrl config option (env override + default URL) for navigating to the new client.
e2e-tests/aseloWebchat.ts	New POM for the React app using data-test/data-testid selectors and onBlur-based pre-engagement field updates.

[Copilot]

webchatUrl explicitly uses the direct S3 URL to avoid CloudFront caching issues (see the comment above), but aseloWebchatUrl defaults to the assets-...tl.techmatters.org host. For consistency and to reduce the risk of E2E tests hitting stale cached assets, consider switching this default to the equivalent https://s3.amazonaws.com/assets-${localOverrideEnv}.tl.techmatters.org/aselo-webchat-react-app/${helplineShortCode}/ (still overridable via ASELO_WEBCHAT_URL).

Suggested change

	default: `https://assets-${localOverrideEnv}.tl.techmatters.org/aselo-webchat-react-app/${helplineShortCode}/`,
	default: `https://s3.amazonaws.com/assets-${localOverrideEnv}.tl.techmatters.org/aselo-webchat-react-app/${helplineShortCode}/`,

[stephenhand]

Using the cloudfront URL is a better test as it checks cloudfront and the cache evection on deployment is correctly configured

[Copilot]

The new E2E test is failing because it doesn't check the accept terms and conditions checkbox

The checkbox wasn't being checked because Paste's Checkbox renders the actual <input> as a HiddenCheckbox — it's absolutely positioned, zero-size, and clipped (clip: rect(0 0 0 0)), so Playwright's isVisible() always returned false and the block was skipped.

Fixed in 7899e21:

• Changed the guard from isVisible() to count() > 0 (checks the element exists in the DOM regardless of visual state)
• Changed check() to check({ force: true }) to allow Playwright to interact with the visually-hidden input

[stephenhand]

The test is failing because the terms & conditions checkbox is out of the viewport when the test tries to select it. From the logs it looks like the method being used should automatically try to scroll it into view but you might want to try explicitly scrolling it into view or changing the timeout

[stephenhand]

Using the cloudfront URL is a better test as it checks cloudfront and the cache evection on deployment is correctly configured

[Copilot]

The test is failing because the terms & conditions checkbox is out of the viewport when the test tries to select it. From the logs it looks like the method being used should automatically try to scrol...

Added an explicit scrollIntoViewIfNeeded() call before check({ force: true }) in 61903ae. This ensures the hidden checkbox element is scrolled into the viewport before Playwright attempts to interact with it.