Refactor option handling in tests: implement scoped locators for clearer section differentiation, resolve misaligned inputs, and centralize filter reset logic in clearFilters for consistent pre-test setup.

Author: MartinBraquet

tests/e2e/web/pages/peoplePage.ts

@@ -310,6 +310,24 @@ export class PeoplePage {
     await this.resetFilters.click()
   }
 
+  /**
+   * Start from the whole directory rather than from whatever the account happens to be looking for.
+   *
+   * A first visit seeds the search from the member's own "Who I'm looking for" preferences (see
+   * `getLookingForFilters` in web/components/filters/use-filters.ts), and a seeded test account gets a
+   * single random preferred gender, one connection type and a narrow age band — so the People page
+   * frequently opens on "No profiles found", and anything that reads the profile count or picks a card
+   * fails for reasons that have nothing to do with what the test is checking.
+   *
+   * The reset button only renders when something is actually selected, hence the count check.
+   */
+  async clearFilters() {
+    await this.openFilters()
+    if ((await this.resetFilters.count()) > 0) await this.resetFilters.click()
+    await this.closeFilters()
+    await expect(this.profileGrid).toBeVisible()
+  }
+
   async setLookingForFilters() {
     await this.openFilters()
     await expect(this.lookingForCheckbox).toBeVisible()
@@ -517,7 +535,7 @@ export class PeoplePage {
       if (!totalProfiles || !filterdProfiles) return
       await expect(parseInt(totalProfiles)).not.toEqual(parseInt(filterdProfiles))
     } else {
-      const noProfilesFound = await this.page.getByText('No profiles found.', {exact: true})
+      const noProfilesFound = await this.page.getByText('No profiles found', {exact: true})
       await expect(noProfilesFound).toBeVisible()
     }
   }

tests/e2e/web/pages/signUpPage.ts

@@ -79,6 +79,9 @@ export class SignUpPage {
   private readonly jobTitleField: Locator
   private readonly companyField: Locator
   private readonly universityCheckbox: Locator
+  private readonly interestsSection: Locator
+  private readonly causesSection: Locator
+  private readonly workAreaSection: Locator
   private readonly addWorkAreaField: Locator
   private readonly addWorkAreaButton: Locator
   private readonly politicalBeliefDetailsField: Locator
@@ -130,16 +133,23 @@ export class SignUpPage {
     this.neutralOnWantingKids = page.getByRole('radio', {name: 'Neutral'})
     this.agreeOnWantingKids = page.getByRole('radio', {name: 'Agree'})
     this.stronglyAgreeOnWantingKids = page.getByRole('radio', {name: 'Strongly agree'})
-    this.addInterestsField = page.getByRole('textbox', {name: 'Search or add'}).first()
-    this.addInterestsButton = page.getByRole('button', {name: 'Add'}).first()
-    this.addCausesField = page.getByRole('textbox', {name: 'Search or add'}).nth(1)
-    this.addCausesButton = page.getByRole('button', {name: 'Add'}).nth(1)
+    // Scoped to their own section rather than picked off the page by index: Work Area, Causes and
+    // Interests are all `AddOptionEntry`s with an identically-labelled "Search or add" field, and the
+    // positional locators had interests and work the wrong way round — so custom interests were being
+    // typed into Work Area, which is how "Chess" ended up an option in both sections.
+    this.interestsSection = page.getByTestId('option-entry-interests')
+    this.causesSection = page.getByTestId('option-entry-causes')
+    this.workAreaSection = page.getByTestId('option-entry-work')
+    this.addInterestsField = this.interestsSection.getByRole('textbox', {name: 'Search or add'})
+    this.addInterestsButton = this.interestsSection.getByRole('button', {name: 'Add'})
+    this.addCausesField = this.causesSection.getByRole('textbox', {name: 'Search or add'})
+    this.addCausesButton = this.causesSection.getByRole('button', {name: 'Add'})
     this.universityField = page.getByTestId('university')
     this.jobTitleField = page.getByTestId('job-title')
     this.companyField = page.getByTestId('company')
     this.universityCheckbox = page.getByRole('checkbox', {name: 'University'})
-    this.addWorkAreaField = page.getByRole('textbox', {name: 'Search or add'}).nth(2)
-    this.addWorkAreaButton = page.getByRole('button', {name: 'Add'}).nth(2)
+    this.addWorkAreaField = this.workAreaSection.getByRole('textbox', {name: 'Search or add'})
+    this.addWorkAreaButton = this.workAreaSection.getByRole('button', {name: 'Add'})
     this.politicalBeliefDetailsField = page.getByTestId('political-belief-details')
     this.religiousBeliefsDetailsField = page.getByTestId('religious-belief-details')
     this.opennessPersonalitySlider = page.getByRole('slider').first()
@@ -343,41 +353,41 @@ export class SignUpPage {
     if (!interest || interest.length === 0) return
 
     for (let i = 0; i < interest.length; i++) {
-      const checkbox = this.page.getByRole('checkbox', {name: `${interest[i]}`})
+      const checkbox = this.interestsSection.getByRole('checkbox', {name: `${interest[i]}`})
       const isExisting = (await checkbox.count()) > 0
 
       if (isExisting) {
-        await expect(this.page.getByRole('checkbox', {name: `${interest[i]}`})).toBeVisible()
-        await clickCheckbox(this.page.getByRole('checkbox', {name: `${interest[i]}`}))
+        await expect(checkbox).toBeVisible()
+        await clickCheckbox(checkbox)
       } else {
         await expect(this.addInterestsField).toBeVisible()
         await expect(this.addInterestsButton).toBeVisible()
         await this.addInterestsField.fill(interest[i])
         await this.addInterestsButton.click()
       }
-      await expect(this.page.getByRole('checkbox', {name: `${interest[i]}`})).toBeVisible()
-      await expect(this.page.getByRole('checkbox', {name: `${interest[i]}`})).toBeChecked()
+      await expect(checkbox).toBeVisible()
+      await expect(checkbox).toBeChecked()
     }
   }
 
   async setCauses(cause: (Causes | string)[] | undefined) {
     if (!cause || cause?.length === 0) return
 
     for (let i = 0; i < cause.length; i++) {
-      const checkbox = this.page.getByRole('checkbox', {name: `${cause[i]}`})
+      const checkbox = this.causesSection.getByRole('checkbox', {name: `${cause[i]}`})
       const isExisting = (await checkbox.count()) > 0
 
       if (isExisting) {
-        await expect(this.page.getByRole('checkbox', {name: `${cause[i]}`})).toBeVisible()
-        await clickCheckbox(this.page.getByRole('checkbox', {name: `${cause[i]}`}))
+        await expect(checkbox).toBeVisible()
+        await clickCheckbox(checkbox)
       } else {
         await expect(this.addCausesField).toBeVisible()
         await expect(this.addCausesButton).toBeVisible()
         await this.addCausesField.fill(cause[i])
         await this.addCausesButton.click()
       }
-      await expect(this.page.getByRole('checkbox', {name: `${cause[i]}`})).toBeVisible()
-      await expect(this.page.getByRole('checkbox', {name: `${cause[i]}`})).toBeChecked()
+      await expect(checkbox).toBeVisible()
+      await expect(checkbox).toBeChecked()
     }
   }
 
@@ -410,7 +420,7 @@ export class SignUpPage {
     if (!workArea || workArea?.length === 0) return
 
     for (let i = 0; i < workArea.length; i++) {
-      const chip = optionChip(this.page, workArea[i])
+      const chip = optionChip(this.workAreaSection, workArea[i])
       const isExisting = (await chip.count()) > 0
 
       if (isExisting) {
@@ -424,8 +434,8 @@ export class SignUpPage {
         await this.addWorkAreaButton.click()
         await this.page.waitForTimeout(500)
       }
-      await expect(optionChip(this.page, workArea[i])).toBeVisible()
-      await expect(optionChipInput(this.page, workArea[i])).toBeChecked()
+      await expect(chip).toBeVisible()
+      await expect(optionChipInput(this.workAreaSection, workArea[i])).toBeChecked()
     }
   }
 

tests/e2e/web/specs/signIn.spec.ts

@@ -1,6 +1,5 @@
 import {sleep} from 'common/src/util/time'
 
-import {TEST_USER_DISPLAY_NAME} from '../../utils/seedDatabase'
 import {expect, test} from '../fixtures/signInFixture'
 import {getCardAgeGender, getCardName, getCardSeekingInfo, getCardStar} from '../pages/peoplePage'
 
@@ -17,6 +16,7 @@ test.describe('when given valid input', () => {
   test('should be able to save/favorite people', async ({app, signedOutAccount: account}) => {
     await app.signinWithEmail(account)
     await app.home.clickPeopleLink()
+    await app.people.clearFilters()
     const profile = await app.people.getProfileInfo()
     const star = await getCardStar(profile)
     const name = await getCardName(profile)
@@ -30,6 +30,7 @@ test.describe('when given valid input', () => {
   test.describe('the applied filter should', () => {
     test('update the profile count', async ({app, signedInAccount}) => {
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
 
       const totalProfiles = await app.people.profileCountLocator.textContent()
       await app.people.setConnectionTypeFilter(['Collaboration', 'collaboration'])
@@ -57,6 +58,7 @@ test.describe('when given valid input', () => {
      */
     test.skip('show profiles with the correct age', async ({app, signedInAccount}) => {
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
       await app.people.setDisplayFilter({filters: {Age: true}})
 
       const totalProfiles = await app.people.profileCountLocator.textContent()
@@ -77,6 +79,7 @@ test.describe('when given valid input', () => {
 
     test('show profiles with the correct gender', async ({app, signedInAccount}) => {
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
 
       const totalProfiles = await app.people.profileCountLocator.textContent()
       await app.people.setGenderTypeFilter(['Woman', 'female'])
@@ -87,6 +90,7 @@ test.describe('when given valid input', () => {
 
     test('show profiles with the correct education level', async ({app, signedInAccount}) => {
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
 
       const totalProfiles = await app.people.profileCountLocator.textContent()
       await app.people.setBackgroundFilter({education: ['College', 'some-college']})
@@ -97,6 +101,7 @@ test.describe('when given valid input', () => {
 
     test('show profiles with the correct diet', async ({app, signedInAccount}) => {
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
 
       const totalProfiles = await app.people.profileCountLocator.textContent()
       await app.people.setLifestyleFilter({diet: ['Vegetarian', 'veg']})
@@ -107,6 +112,7 @@ test.describe('when given valid input', () => {
 
     test('show profiles with the correct smoking preference', async ({app, signedInAccount}) => {
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
 
       const totalProfiles = await app.people.profileCountLocator.textContent()
       await app.people.setLifestyleFilter({smoker: 'Yes'})
@@ -120,6 +126,7 @@ test.describe('when given valid input', () => {
       signedInAccount,
     }) => {
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
 
       const totalProfiles = await app.people.profileCountLocator.textContent()
       await app.people.setLifestyleFilter({psychedelics: ['Regularly (weekly+)', 'regularly']})
@@ -130,6 +137,7 @@ test.describe('when given valid input', () => {
 
     test('show profiles with the correct cannabis preference', async ({app, signedInAccount}) => {
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
 
       const totalProfiles = await app.people.profileCountLocator.textContent()
       await app.people.setLifestyleFilter({
@@ -142,6 +150,7 @@ test.describe('when given valid input', () => {
 
     test('show profiles with the correct political preference', async ({app, signedInAccount}) => {
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
 
       const totalProfiles = await app.people.profileCountLocator.textContent()
       await app.people.setValuesAndBeliefsFilter({political: ['Progressive', 'progressive']})
@@ -152,6 +161,7 @@ test.describe('when given valid input', () => {
 
     test('show profiles with the correct religion preference', async ({app, signedInAccount}) => {
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
 
       const totalProfiles = await app.people.profileCountLocator.textContent()
       await app.people.setValuesAndBeliefsFilter({religious: ['Jewish', 'jewish']})
@@ -161,10 +171,14 @@ test.describe('when given valid input', () => {
     })
   })
 
+  // Each test hides `signedOutAccount` — a profile the fixture seeds and deletes for this test alone —
+  // rather than a permanent seeded member, so the tests neither depend on `seed-test-data` having been
+  // run against the database nor leave a hidden-profile row behind on a shared account.
   test.describe('the hide profile feature', () => {
-    test('should correctly hide a profile', async ({app, signedInAccount}) => {
+    test('should correctly hide a profile', async ({app, signedInAccount, signedOutAccount}) => {
       await app.home.clickPeopleLink()
-      await app.people.useSearch(TEST_USER_DISPLAY_NAME)
+      await app.people.clearFilters()
+      await app.people.useSearch(signedOutAccount.display_name)
       await sleep(1000)
       const profile = await app.people.getProfileInfo()
       if (!profile) throw new Error('Profile not found')
@@ -180,9 +194,10 @@ test.describe('when given valid input', () => {
       ).toBeVisible()
     })
 
-    test('should be reversible using undo', async ({app, signedInAccount}) => {
+    test('should be reversible using undo', async ({app, signedInAccount, signedOutAccount}) => {
       await app.home.clickPeopleLink()
-      await app.people.useSearch(TEST_USER_DISPLAY_NAME)
+      await app.people.clearFilters()
+      await app.people.useSearch(signedOutAccount.display_name)
       await sleep(1000)
       const profile = await app.people.getProfileInfo()
       if (!profile) throw new Error('Profile not found')
@@ -205,9 +220,11 @@ test.describe('when given valid input', () => {
     test('should be reversible using manage hidden profiles feature in settings', async ({
       app,
       signedInAccount,
+      signedOutAccount,
     }) => {
       await app.home.clickPeopleLink()
-      await app.people.useSearch(TEST_USER_DISPLAY_NAME)
+      await app.people.clearFilters()
+      await app.people.useSearch(signedOutAccount.display_name)
       await sleep(1000)
       const profile = await app.people.getProfileInfo()
       if (!profile) throw new Error('Profile not found')
@@ -228,6 +245,7 @@ test.describe('when given valid input', () => {
       await app.settings.unhideProfiles(name)
       await app.settings.clickCloseButton()
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
       const undoProfile = app.people.page.getByRole('heading', {name: `${name}`})
       await expect(undoProfile).toBeVisible()
     })
@@ -264,6 +282,7 @@ test.describe('when given valid input', () => {
       const longMessage = message.repeat(20)
 
       await app.home.clickPeopleLink()
+      await app.people.clearFilters()
       await app.people.useSearch(receiver.display_name)
       await app.people.messageProfile(receiver.display_name, longMessage)
       await app.messages.verifyMessage(longMessage)

tests/e2e/web/utils/optionChip.ts

@@ -20,12 +20,22 @@ export async function clickCheckbox(checkbox: Locator) {
   await target.click()
 }
 
-/** The clickable chip for `label` — its enclosing <label> element. See {@link clickCheckbox}. */
-export function optionChip(page: Page, label: string): Locator {
-  return page.locator('label').filter({has: page.getByRole('checkbox', {name: label, exact: true})})
+/**
+ * The clickable chip for `label` — its enclosing <label> element. See {@link clickCheckbox}.
+ *
+ * `root` is usually the page, but pass a section locator where the same option label appears in more
+ * than one group on screen (Work Area / Causes / Interests all offer the same free-form options), or
+ * the locator resolves to several chips and Playwright fails on strict mode.
+ */
+export function optionChip(root: Page | Locator, label: string): Locator {
+  // The `has:` locator is re-rooted at each candidate <label>, selector chain and all — so it has to be
+  // built from the page, not from `root`. Scoped from `root` it would look for a section *inside* the
+  // label and match nothing.
+  const page = 'goto' in root ? root : root.page()
+  return root.locator('label').filter({has: optionChipInput(page, label)})
 }
 
 /** The chip's underlying checkbox — for `toBeChecked()` assertions, which need the input itself. */
-export function optionChipInput(page: Page, label: string): Locator {
-  return page.getByRole('checkbox', {name: label, exact: true})
+export function optionChipInput(root: Page | Locator, label: string): Locator {
+  return root.getByRole('checkbox', {name: label, exact: true})
 }

web/components/add-option-entry.tsx

@@ -22,7 +22,10 @@ export function AddOptionEntry(props: {
     Object.entries(invert(choices)).sort((a, b) => a[0].localeCompare(b[0], locale)),
   )
   return (
-    <Col className={clsx(colClassName)}>
+    // Several of these sections sit in the same form and share option labels (a member can add
+    // "Chess" as both a work area and an interest), so the test id is what lets a locator say
+    // *which* section's "Search or add" field or option chip it means.
+    <Col className={clsx(colClassName)} data-testid={`option-entry-${label}`}>
       {title && <label className={clsx(labelClassName)}>{title}</label>}
       <MultiCheckbox
         choices={sortedChoices}