Skip to content

Conversation

@juliajforesti
Copy link
Contributor

@juliajforesti juliajforesti commented Dec 30, 2025

Proposed changes (including videos or screenshots)

  • remove all data-qa attributes from AutoComplete components
  • improve autocomplete a11y
  • improve tests using role-based locators instead of data-qa

Issue(s)

Steps to test or reproduce

Further comments

CORE-1595

Summary by CodeRabbit

  • Bug Fixes

    • Improved accessibility for form fields with proper label-to-input associations and ARIA attributes.
  • Tests

    • Updated test selectors to use role-based and accessibility-driven locators for better reliability.
    • Removed deprecated test helper methods.

✏️ Tip: You can customize this high-level summary in your review settings.

@dionisio-bot
Copy link
Contributor

dionisio-bot bot commented Dec 30, 2025

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

@changeset-bot
Copy link

changeset-bot bot commented Dec 30, 2025

⚠️ No Changeset found

Latest commit: 9cf83dc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 30, 2025

Walkthrough

This PR systematically replaces test-centric data-qa attributes with accessibility-focused alternatives across client components and E2E tests. Changes include removing data-qa attributes, introducing aria-label props, adding React useId() for proper label-input associations, and updating test selectors to use role-based and label-based locators instead of data attributes.

Changes

Cohort / File(s) Summary
User autocomplete component simplification
packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx, apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx, apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx
Removed data-qa-type and data-qa-id attributes from autocomplete components, eliminating test-specific markup without functional change.
Omnichannel form accessibility improvements
apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx, apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx, apps/meteor/client/views/omnichannel/components/AutoCompleteAgent.tsx, apps/meteor/client/views/omnichannel/components/AutoCompleteDepartment.tsx
Replaced data-qa attributes with aria-label or proper label-input associations via useId() and htmlFor linkage; improved semantic accessibility without behavioral change.
Omnichannel modal accessibility enhancements
apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx, apps/meteor/client/views/omnichannel/monitors/MonitorsTable.tsx
Added React useId() hook and wired field IDs to labels and input components; removed data-qa-id attributes in favor of accessible identifier patterns.
E2E test selector modernization
apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts, apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts, apps/meteor/tests/e2e/page-objects/omnichannel-contact-center-chats.ts, apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
Updated locators from data-qa attributes to role-based and label-based selectors (e.g., getByRole('textbox'), getByLabel()); removed unused accessor methods.
E2E automation refactoring
apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts, apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts, apps/meteor/tests/e2e/federation/page-objects/channel.ts
Replaced XPath and data-qa selectors with role-based and fill-based interactions; simplified modal title interaction by removing unnecessary click step.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • #37699 — Modifies the same UserAutoCompleteMultipleOption component regarding data-qa-type attribute changes
  • #37369 — Touches overlapping omnichannel components and updates related to module locations
  • #36757 — Performs the same class of accessibility-focused refactoring by replacing data-qa attributes with ARIA-based identifiers

Suggested labels

stat: ready to merge, stat: QA assured

Suggested reviewers

  • tassoevan

Poem

🐰 With whiskers twitched and hoppy delight,
We've swapped the test-smoke for access-right!
No more data-qa in sight—
Just aria-labels shining bright.
Accessibility hops into flight! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'test: replace data-qa attributes for Autocomplete locators' accurately describes the primary changes—removing data-qa attributes and updating test locators to use role-based selectors for autocomplete components.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch test/autocomplete

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link

codecov bot commented Dec 30, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.67%. Comparing base (8b2a50d) to head (9cf83dc).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##           develop   #38029      +/-   ##
===========================================
+ Coverage    70.66%   70.67%   +0.01%     
===========================================
  Files         3146     3146              
  Lines       108829   108829              
  Branches     19590    19603      +13     
===========================================
+ Hits         76900    76912      +12     
+ Misses       29923    29916       -7     
+ Partials      2006     2001       -5     
Flag Coverage Δ
e2e 60.20% <100.00%> (+0.06%) ⬆️
e2e-api 47.45% <ø> (+0.08%) ⬆️
unit 71.79% <ø> (-0.02%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 30, 2025

📦 Docker Image Size Report

➡️ Changes

Service Current Baseline Change Percent
sum of all images 0B 0B 0B
account-service 0B 0B 0B
authorization-service 0B 0B 0B
ddp-streamer-service 0B 0B 0B
omnichannel-transcript-service 0B 0B 0B
presence-service 0B 0B 0B
queue-worker-service 0B 0B 0B
rocketchat 0B 0B 0B

📊 Historical Trend

---
config:
  theme: "dark"
  xyChart:
    width: 900
    height: 400
---
xychart
  title "Image Size Evolution by Service (Last 30 Days + This PR)"
  x-axis ["11/18 22:53", "11/19 23:02", "11/21 16:49", "11/24 17:34", "11/27 22:32", "11/28 19:05", "12/01 23:01", "12/02 21:57", "12/03 21:00", "12/04 18:17", "12/05 21:56", "12/08 20:15", "12/09 22:17", "12/10 23:26", "12/11 21:56", "12/12 22:45", "12/13 01:34", "12/15 22:31", "12/16 22:18", "12/17 21:04", "12/18 23:12", "12/19 23:27", "12/20 21:03", "12/22 18:54", "12/23 16:16", "12/24 19:38", "12/25 17:51", "12/26 13:18", "12/29 19:01", "12/30 20:52", "01/08 20:38 (PR)"]
  y-axis "Size (GB)" 0 --> 0.5
  line "account-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.00]
  line "authorization-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.00]
  line "ddp-streamer-service" [0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.00]
  line "omnichannel-transcript-service" [0.14, 0.14, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.00]
  line "presence-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.00]
  line "queue-worker-service" [0.14, 0.14, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13, 0.00]
  line "rocketchat" [0.35, 0.35, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.00]
Loading

Statistics (last 30 days):

  • 📊 Average: 1.5GiB
  • ⬇️ Minimum: 1.4GiB
  • ⬆️ Maximum: 1.6GiB
  • 🎯 Current PR: 0B
ℹ️ About this report

This report compares Docker image sizes from this build against the develop baseline.

  • Tag: pr-38029
  • Baseline: develop
  • Timestamp: 2026-01-08 20:38:08 UTC
  • Historical data points: 30

Updated: Thu, 08 Jan 2026 20:38:08 GMT

@juliajforesti juliajforesti added this to the 8.1.0 milestone Dec 30, 2025
@dougfabris dougfabris marked this pull request as ready for review January 8, 2026 18:13
@dougfabris dougfabris requested a review from a team as a code owner January 8, 2026 18:13
@dougfabris dougfabris added the stat: QA assured Means it has been tested and approved by a company insider label Jan 8, 2026
@dionisio-bot dionisio-bot bot added the stat: ready to merge PR tested and approved waiting for merge label Jan 8, 2026
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 issues found across 16 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts">

<violation number="1" location="apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts:48">
P1: `selectOption()` is only for native `<select>` elements, not custom autocomplete components with `role="listbox"`. This will fail at runtime. Use `getByRole('option')` and `click()` instead.</violation>
</file>

<file name="apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts">

<violation number="1" location="apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts:82">
P1: `dmListbox.selectOption()` will fail because `dmListbox` is a raw Playwright `Locator`, and Playwright's `selectOption()` only works with native `<select>` elements, not ARIA listboxes. Use `this.listbox.selectOption(username)` from the base class instead, which correctly clicks the option role.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx (2)

99-110: Remove redundant aria-label when proper label association exists.

The htmlFor/id association on Lines 99 and 102 already provides the necessary accessible name. Adding aria-label on Line 103 is redundant and can override the label in some screen readers, potentially causing confusion.

♻️ Remove redundant aria-label
 <FieldLabel htmlFor={departmentFieldId}>{t('Forward_to_department')}</FieldLabel>
 <FieldRow>
 	<AutoCompleteDepartment
 		id={departmentFieldId}
-		aria-label={t('Forward_to_department')}
 		withTitle={false}
 		maxWidth='100%'
 		flexGrow={1}

115-129: Remove redundant aria-label when proper label association exists.

Similar to the department field, the htmlFor/id association on Lines 115 and 118 provides the accessible name. The aria-label on Line 119 is redundant.

♻️ Remove redundant aria-label
 <FieldLabel htmlFor={userFieldId}>{t('Forward_to_user')}</FieldLabel>
 <FieldRow>
 	<AutoCompleteAgent
 		id={userFieldId}
-		aria-label={t('Forward_to_user')}
 		withTitle
 		onlyAvailable
🤖 Fix all issues with AI agents
In
@apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts:
- Around line 44-45: The repeated locator this.page.getByRole('textbox', { name:
'Choose users' }) should be stored in a local constant (e.g., chooseUsersInput)
and reused; replace the two calls with a single const assignment and then call
chooseUsersInput.click() and chooseUsersInput.fill(username) to improve
readability and maintainability.
- Line 48: The test calls selectOption on a listbox role
(this.page.getByRole('listbox').selectOption(username)), which is only valid for
<select> elements; replace it by locating the listbox option (e.g.,
this.page.getByRole('option', { name: username }) or find the option inside the
listbox) and perform a click on that option so the custom ARIA
listbox/autocomplete works; if the displayed option text differs from username,
target the option by its value attribute or a more specific locator inside the
listbox before clicking.

In
@apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts:
- Around line 18-24: The selectors in the page object getters get
inputForwardDepartment and get inputForwardUser rely on localized label text;
add stable data-qa-id attributes to the input components in ForwardChatModal.tsx
(set data-qa-id='ForwardChatModalInputForwardDepartment' on the
AutoCompleteDepartment input and data-qa-id='ForwardChatModalInputForwardUser'
on the AutoCompleteAgent input) and then update the page object getters to
select by those data-qa-id attributes instead of getByLabel so tests don’t break
with language changes.

In @apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts:
- Around line 128-130: The test's locator relies on translated labels and is
brittle; modify the AutoCompleteUnit component (look for PaginatedSelectFiltered
usage in AutoCompleteUnit.tsx) to add a stable attribute (e.g.,
data-testid="AutoCompleteUnit-Unit" or data-qa="AutoCompleteUnit-Unit") on the
PaginatedSelectFiltered element, then update the test's inputUnit locator to use
that stable selector (e.g.,
this.page.locator('[data-testid="AutoCompleteUnit-Unit"]') or
'[data-qa="AutoCompleteUnit-Unit"]'). Ensure the chosen attribute is unique and
matches the pattern used by other form inputs.
🧹 Nitpick comments (1)
apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx (1)

132-142: Consider adding proper label association for the comment field.

While this file adds htmlFor/id associations for the department and user fields, the comment textarea on Line 140 still uses a data-qa-id attribute without a proper id and associated label. For consistency with the PR's accessibility improvements, consider:

  1. Adding an id prop to the TextAreaInput
  2. Adding htmlFor to the FieldLabel (though it already has text content)
  3. Removing or replacing the data-qa-id attribute
📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 7d86bc9 and dc7a259.

📒 Files selected for processing (16)
  • apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx
  • apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx
  • apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx
  • apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx
  • apps/meteor/client/views/omnichannel/components/AutoCompleteAgent.tsx
  • apps/meteor/client/views/omnichannel/components/AutoCompleteDepartment.tsx
  • apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
  • apps/meteor/client/views/omnichannel/monitors/MonitorsTable.tsx
  • apps/meteor/tests/e2e/federation/page-objects/channel.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-contact-center-chats.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx
💤 Files with no reviewable changes (7)
  • apps/meteor/tests/e2e/federation/page-objects/channel.ts
  • apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx
  • apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx
  • apps/meteor/client/views/omnichannel/components/AutoCompleteAgent.tsx
  • apps/meteor/client/views/omnichannel/components/AutoCompleteDepartment.tsx
  • apps/meteor/tests/e2e/page-objects/omnichannel-contact-center-chats.ts
  • packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

  • apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx
  • apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx
  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/client/views/omnichannel/monitors/MonitorsTable.tsx
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
  • apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
apps/meteor/tests/e2e/page-objects/**/*.ts

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

Utilize existing page objects pattern from apps/meteor/tests/e2e/page-objects/

Files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
apps/meteor/tests/e2e/**/*.{ts,spec.ts}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

apps/meteor/tests/e2e/**/*.{ts,spec.ts}: Store commonly used locators in variables/constants for reuse
Follow Page Object Model pattern consistently in Playwright tests

Files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
🧠 Learnings (13)
📓 Common learnings
Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 36987
File: apps/meteor/tests/e2e/page-objects/fragments/room-toolbar.ts:10-20
Timestamp: 2025-09-23T19:22:59.217Z
Learning: In Playwright e2e tests, prefer stable selectors like data-qa-id attributes over localized text in getByRole() or getByText() calls to prevent test failures when UI language changes. Test translations separately by validating actual text content after ensuring UI interactions work with stable selectors.
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Avoid using `page.locator()` in Playwright tests - always prefer semantic locators such as `page.getByRole()`, `page.getByLabel()`, `page.getByText()`, or `page.getByTitle()`
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/page-objects/**/*.ts : Utilize existing page objects pattern from `apps/meteor/tests/e2e/page-objects/`

Applied to files:

  • apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx
  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Avoid using `page.locator()` in Playwright tests - always prefer semantic locators such as `page.getByRole()`, `page.getByLabel()`, `page.getByText()`, or `page.getByTitle()`

Applied to files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.{ts,spec.ts} : Store commonly used locators in variables/constants for reuse

Applied to files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.{ts,spec.ts} : Follow Page Object Model pattern consistently in Playwright tests

Applied to files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Utilize Playwright fixtures (`test`, `page`, `expect`) for consistency in test files

Applied to files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Use `expect` matchers for assertions (`toEqual`, `toContain`, `toBeTruthy`, `toHaveLength`, etc.) instead of `assert` statements in Playwright tests

Applied to files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Prefer web-first assertions (`toBeVisible`, `toHaveText`, etc.) in Playwright tests

Applied to files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Implement proper wait strategies for dynamic content in Playwright tests

Applied to files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Ensure tests run reliably in parallel without shared state conflicts

Applied to files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
📚 Learning: 2025-09-23T19:22:59.217Z
Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 36987
File: apps/meteor/tests/e2e/page-objects/fragments/room-toolbar.ts:10-20
Timestamp: 2025-09-23T19:22:59.217Z
Learning: In Playwright e2e tests, prefer stable selectors like data-qa-id attributes over localized text in getByRole() or getByText() calls to prevent test failures when UI language changes. Test translations separately by validating actual text content after ensuring UI interactions work with stable selectors.

Applied to files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
📚 Learning: 2025-12-16T17:29:40.430Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37834
File: apps/meteor/tests/e2e/page-objects/fragments/admin-flextab-emoji.ts:12-22
Timestamp: 2025-12-16T17:29:40.430Z
Learning: In all page-object files under apps/meteor/tests/e2e/page-objects/, import expect from ../../utils/test (Playwright's async expect) instead of from Jest. Jest's expect is synchronous and incompatible with web-first assertions like toBeVisible, which can cause TypeScript errors.

Applied to files:

  • apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
  • apps/meteor/tests/e2e/page-objects/fragments/modals/omnichannel-transfer-chat-modal.ts
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Use `test.step()` for complex test scenarios to improve organization in Playwright tests

Applied to files:

  • apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
  • apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts
🧬 Code graph analysis (4)
apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx (1)
apps/meteor/tests/e2e/page-objects/auth.ts (1)
  • username (68-70)
apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts (1)
apps/meteor/tests/e2e/page-objects/auth.ts (1)
  • username (68-70)
apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts (1)
apps/meteor/tests/e2e/page-objects/auth.ts (1)
  • username (68-70)
apps/meteor/client/views/omnichannel/monitors/MonitorsTable.tsx (2)
apps/meteor/tests/e2e/page-objects/auth.ts (1)
  • username (68-70)
packages/models/src/models/Users.ts (1)
  • setUsername (2791-2795)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (10)
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: cubic · AI code reviewer
🔇 Additional comments (8)
apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-members.ts (1)

44-48: Replace localized text selector with stable identifier and extract to constant.

The selector uses the localized string 'Choose users' in the name parameter, which breaks when UI language changes. While getByRole() is the correct semantic locator approach per Playwright rules, the name parameter should reference a stable, language-independent identifier (like aria-label or data-qa).

Additionally, the same selector is called twice on consecutive lines (44-45) and should be extracted to a getter variable following the Page Object Model pattern.

Related issue: The same pattern appears on line 33 in apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts, affecting multiple federation test files.

apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx (1)

46-47: LGTM! Proper use of React's useId hook.

The use of useId() to generate unique IDs for form fields is correct and follows React 18 best practices for accessible form associations.

apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx (1)

43-59: LGTM! Appropriate interim accessibility solution.

The aria-label with the FIXME comment on Line 46 appropriately acknowledges this is a temporary solution until PaginatedSelectFiltered supports proper label association via htmlFor. This is a reasonable interim approach.

apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts (1)

21-23: Verify test stability across language changes.

The selector uses localized text "Username" which may break if the UI language changes or translations are updated. This is part of the broader shift toward semantic selectors for accessibility, but consider the maintenance implications.

Based on learnings, which recommend stable selectors over localized text to prevent test failures when UI language changes.

apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts (2)

55-63: Good improvement using fill() instead of typing.

The change from XPath-based locators to role-based locators and using fill() instead of typing is a good improvement for test reliability. However, the localized text "Add people" in the selector may break if UI language changes.

Consider the trade-off between semantic clarity and test stability across languages. Based on learnings, which recommend stable selectors to prevent failures when UI language changes.


75-83: Consistent improvement with role-based locators.

The changes align with the pattern established in CreateNewChannelModal and use more reliable fill() for input. Same localization stability consideration applies.

Based on learnings, verify these tests work consistently across supported UI languages.

apps/meteor/client/views/omnichannel/monitors/MonitorsTable.tsx (1)

31-31: LGTM! Proper label-input association improves accessibility.

The implementation correctly uses useId() to generate a unique identifier and associates the label with the input field via htmlFor and id props. This follows WCAG best practices for accessible form controls.

Also applies to: 40-40, 143-145

apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx (1)

6-6: LGTM! Consistent accessibility pattern.

The implementation follows the same proper label-input association pattern as MonitorsTable.tsx, using useId() to link the label with the input field. This enhances form accessibility and maintains consistency across the codebase.

Also applies to: 18-19, 41-43

@kodiakhq kodiakhq bot merged commit e39ab9b into develop Jan 8, 2026
44 checks passed
@kodiakhq kodiakhq bot deleted the test/autocomplete branch January 8, 2026 21:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

stat: QA assured Means it has been tested and approved by a company insider stat: ready to merge PR tested and approved waiting for merge

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants