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:
  • firstName → input#firstName
  • contactIdentifier (email) → input#contactIdentifier
  • age → select#age
  • gender → select#gender
  • termsAndConditions — Twilio Paste renders the real checkbox input as a visually-hidden element and shows an SVG facsimile, so the visible label is clicked instead. A data-testid={${name}-label} attribute is added to the Label element in aselo-webchat-react-app/src/components/forms/formInputs/Checkbox.tsx and the POM locates the label via [data-testid="termsAndConditions-label"], clicks it to toggle the checkbox, then blurs the hidden input to fire the onBlur Redux dispatch
• 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

aselo-webchat-react-app/src/components/forms/formInputs/Checkbox.tsx

• Added data-testid={${name}-label} to the Label element to give each checkbox label a stable, id-based test attribute for E2E targeting

aselo-webchat-react-app/src/store/actions/genericActions.ts

• Added new updatePreEngagementDataFields thunk action creator that takes an array of { name, value } pairs, looks up each field definition once from state, validates and builds all updated items, then dispatches a single ACTION_UPDATE_PRE_ENGAGEMENT_DATA action with the merged result

aselo-webchat-react-app/src/components/PreEngagementFormPhase.tsx

• handleSubmit now syncs all current DOM form element values to Redux in a single batch dispatch immediately before submitAndInitChatThunk() runs validation. It collects all field values via reduce and calls dispatch(updatePreEngagementDataFields(domFieldValues)) once (.checked for checkboxes, .value for all others). This ensures Redux is fully up to date for validation regardless of whether a field's onBlur event has fired — preventing fields filled without blurring (e.g. by an E2E test) from failing validation

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.

[stephenhand]

Twilio paste checkboxes like the terms and condtions checkbox hide the real HTML input and show an SVG facsimile instead, so playwright is failing to check it, because the 'real' checkbox is not rendered

Work around this by clicking the label for the checkbox rather than checking the box directly. Prefer adding a data ID attribute or a HTML ID to the label to locate it rather than attempting to match using the label text

[Copilot]

Twilio paste checkboxes like the terms and condtions checkbox hide the real HTML input and show an SVG facsimile instead, so playwright is failing to check it, because the 'real' checkbox is not rende...

Fixed in 1375f0b:

• Added data-testid={${name}-label} to the Label element in Checkbox.tsx, giving the label a stable, id-based test attribute
• Updated the POM to locate the label via [data-testid="termsAndConditions-label"] and click it (which is visible), then blur the hidden input to trigger the onBlur Redux dispatch

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• tsock.us1.twilio.com
  • Triggering command: /opt/hostedtoolcache/node/20.20.1/x64/bin/node node /home/REDACTED/work/flex-plugins/flex-plugins/aselo-webchat-react-app/node_modules/.bin/jest --watchAll=false /googleapis/build/src/apis/abusiveexperiencereport/index.d.ts /googleapis/build/src/apis/abusiveexperiencereport/v1.d.ts /googleapis/build/src/apis/playdeveloperreporting/v1beta1.d.ts /googleapis/build/src/apis/playdeveloperreporting/v1alpha1.d.ts /googleapis/build/src/apis/playdeveloperreporting/index.d.ts /googleapis/build/src/apis/factchecktools/v1alpha1.d.ts /googleapis/build/src/apis/factchecktools/index.d.ts /googleapis/build/src/apis/tpu/v2alpha1.d.ts /googleapis/build/src/apis/tpu/v1alpha1.d.ts /goo�� /googleapis/build/src/apis/tpu/v1.d.ts /googleapis/build/src/apis/playablelocations/v3.d.ts (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[stephenhand]

Enhance the pre-engagement form by setting the values of every form value in redux to the current value in the equivalent form element prior to running any validation sweep. This way redux will always be up to date for validation purpuses

[Copilot]

Enhance the pre-engagement form by setting the values of every form value in redux to the current value in the equivalent form element prior to running any validation sweep. This way redux will always...

Done in 5a7a98e. In PreEngagementFormPhase.handleSubmit, before calling submitAndInitChatThunk(), the code now iterates every field definition, locates the corresponding DOM element via form.querySelector('#fieldName'), and dispatches setItemValue with its current value (.checked for checkboxes, .value for all others). This ensures Redux is fully in sync with the DOM before validation runs, regardless of whether the user blurred a field.

Updated tests to reflect the new behaviour:

• "Input/Email valid" tests now fill the DOM input without blur (rather than pre-loading Redux)
• "Checkbox valid" test now clicks the checkbox without blur
• "Select not valid when empty" test gains an explicit empty placeholder option so the DOM select defaults to an empty value
• Added a new "Input: form is valid when a required input has a DOM value but has not been blurred" test to explicitly cover the new DOM-sync path

[stephenhand]

@copilot This should be implemented as a single action that can take multiple updated fields and update them all at once. updatePreEngagementDataFields action creator should be replaced with one that takes multiple fields and conforms to our naming convention for action creator functiuons

[Copilot]

Done in 9989965. Added updatePreEngagementDataFields (plural) thunk in genericActions.ts — it takes an array of {name, value} pairs, looks up each definition once from state, validates and builds all updated items, then dispatches a single ACTION_UPDATE_PRE_ENGAGEMENT_DATA action with the merged result.

handleSubmit in PreEngagementFormPhase.tsx now collects all DOM values into an array via reduce and calls dispatch(updatePreEngagementDataFields(domFieldValues)) once before submitAndInitChatThunk. Added unit tests for the new action in genericActions.test.ts.