test(e2e): select the value editors by role and name

ValueEditor no longer takes a data-test. Three accessors replace it, and
setText/waitForElementVisible accept a Locator so callers can pass one.

  featureValueField()            role=textbox, /^(Value|Control Value)/
  variationValueField(i)         role=textbox, "Variation Value", nth(i)
  segmentOverrideValueField(i)   scoped to the override, then role+name

The feature value alternation is not cosmetic: the label becomes
"Control Value <weight>%" once a feature has variations.

This also retires a selector that encoded its own value:

  data-test={`featureVariationValue${featureStateToValue(value) || index}`}

The id was featureVariationValue1 only while the field was empty, and
became featureVariationValueadded once you typed. The tests passed because
they addressed it before typing.

toHaveValue becomes toHaveText in change-request-test: the editor is a
contenteditable, not a textarea, so there is no value to assert on.

No new type errors in e2e (3 before, 3 after, all pre-existing).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/documentation/components/ValueEditor.stories.tsx

@@ -20,12 +20,7 @@ const Interactive = ({
   const [value, setValue] = useState(initialValue)
   return (
     <div style={{ maxWidth: width, padding: 16 }}>
-      <ValueEditor
-        data-test='valueEditor'
-        {...props}
-        value={value}
-        onChange={setValue}
-      />
+      <ValueEditor {...props} value={value} onChange={setValue} />
     </div>
   )
 }

frontend/e2e/helpers/e2e-helpers.playwright.ts

@@ -1,4 +1,4 @@
-import { Page, expect } from '@playwright/test';
+import { Locator, Page, expect } from '@playwright/test';
 import { LONG_TIMEOUT, SHORT_TIMEOUT, byId, log, logUsingLastSection, getFlagsmith } from './utils.playwright';
 
 // Re-export for backwards compatibility
@@ -18,23 +18,41 @@ export type Rule = {
 export class E2EHelpers {
   constructor(private page: Page) {}
 
+  // The value editors are selected by role and accessible name rather than a
+  // data-test. The feature value label switches to "Control Value <weight>%"
+  // once the feature has variations, hence the alternation.
+  featureValueField(): Locator {
+    return this.page.getByRole('textbox', { name: /^(Value|Control Value)/ });
+  }
+
+  variationValueField(index: number): Locator {
+    return this.page.getByRole('textbox', { name: 'Variation Value' }).nth(index);
+  }
+
+  segmentOverrideValueField(index: number): Locator {
+    return this.page
+      .locator(byId(`segment-override-${index}`))
+      .getByRole('textbox', { name: 'Value' });
+  }
+
   async isElementExists(selector: string): Promise<boolean> {
     return await this.page.locator(byId(selector)).count() > 0;
   }
 
-  async setText(selector: string, text: string) {
+  async setText(selector: string | Locator, text: string) {
     logUsingLastSection(`Set text ${selector} : ${text}`);
-    const element = this.page.locator(selector).first();
+    const element = typeof selector === 'string' ? this.page.locator(selector).first() : selector;
     await element.waitFor({ state: 'visible', timeout: LONG_TIMEOUT });
     await element.clear();
     if (text) {
       await element.fill(text);
     }
   }
 
-  async waitForElementVisible(selector: string, timeout: number = LONG_TIMEOUT) {
+  async waitForElementVisible(selector: string | Locator, timeout: number = LONG_TIMEOUT) {
     logUsingLastSection(`Waiting element visible ${selector}`);
-    await this.page.locator(selector).first().waitFor({
+    const element = typeof selector === 'string' ? this.page.locator(selector).first() : selector;
+    await element.waitFor({
       state: 'visible',
       timeout
     });
@@ -269,7 +287,7 @@ export class E2EHelpers {
     await featureRow.waitFor({ state: 'visible', timeout: LONG_TIMEOUT });
     await featureRow.dispatchEvent('click');
     await this.waitForElementVisible('#create-feature-modal');
-    await this.waitForElementVisible(byId('featureValue'));
+    await this.waitForElementVisible(this.featureValueField());
   }
 
   // Create a feature
@@ -296,7 +314,7 @@ export class E2EHelpers {
     await this.gotoFeatures();
     await this.click('#show-create-feature-btn');
     await this.setText(byId('featureID'), name);
-    await this.setText(byId('featureValue'), `${value}`);
+    await this.setText(this.featureValueField(), `${value}`);
     await this.setText(byId('featureDesc'), description);
     if (!defaultOff) {
       await this.click(byId('toggle-feature-button'));
@@ -305,7 +323,7 @@ export class E2EHelpers {
       const v = mvs[i];
       await this.click(byId('add-variation'));
       await this.page.waitForTimeout(200);
-      await this.setText(byId(`featureVariationValue${i}`), v.value);
+      await this.setText(this.variationValueField(i), v.value);
       await this.setText(byId(`featureVariationWeight${v.value}`), `${v.weight}`);
       await this.page.waitForTimeout(100);
     }
@@ -588,7 +606,7 @@ export class E2EHelpers {
       await this.click(byId('segment_overrides'));
     }
     await this.click(dropdownSelector);
-    await this.waitForElementVisible(byId(`segment-override-value-${index}`));
+    await this.waitForElementVisible(this.segmentOverrideValueField(index));
   }
 
   // Add segment override for boolean flags
@@ -611,7 +629,7 @@ export class E2EHelpers {
   // Add segment override for remote configs
   async addSegmentOverrideConfig(index: number, value: string | number | boolean, selectionIndex: number = 0) {
     await this.openSegmentOverride(index, selectionIndex);
-    await this.setText(byId(`segment-override-value-${index}`), `${value}`);
+    await this.setText(this.segmentOverrideValueField(index), `${value}`);
     await this.click(byId(`segment-override-toggle-${index}`));
   }
 
@@ -631,7 +649,7 @@ export class E2EHelpers {
     await featureRow.dispatchEvent('click');
     await this.waitForElementVisible(byId('update-feature-btn'));
     if (value !== '') {
-      await this.setText(byId('featureValue'), `${value}`);
+      await this.setText(this.featureValueField(), `${value}`);
     }
     if (mvs.length > 0) {
       await this.page.waitForTimeout(500);

frontend/e2e/tests/change-request-test.pw.ts

@@ -12,6 +12,7 @@ test.describe('Change Request Tests', () => {
     page,
   }, testInfo) => {
     const {
+      featureValueField,
       assertChangeRequestCount,
       approveChangeRequest,
       assertInputValue,
@@ -73,7 +74,7 @@ test.describe('Change Request Tests', () => {
     log('Create change request by editing feature value')
     await gotoFeatures()
     await gotoFeature(featureName)
-    await setText(byId('featureValue'), 'updated_value')
+    await setText(featureValueField(), 'updated_value')
 
     await createChangeRequest(
       'Update feature value',
@@ -126,7 +127,7 @@ test.describe('Change Request Tests', () => {
     await page.reload({ waitUntil: 'domcontentloaded' })
     await waitForElementVisible('#show-create-feature-btn')
     await gotoFeature(featureName)
-    await expect(page.locator(byId('featureValue'))).toHaveValue('updated_value', { timeout: 15000 })
+    await expect(featureValueField()).toHaveText('updated_value', { timeout: 15000 })
     await closeModal()
 
     log('Verify value via API')

frontend/e2e/tests/mv-options-tests.pw.ts

@@ -22,6 +22,7 @@ const variantCards = (page: Page) => page.locator('#create-feature-modal .varian
 test.describe('Multivariate Options', () => {
   test('Repeated saves keep the variant set stable @oss', async ({ page }) => {
     const {
+      variationValueField,
       closeModal,
       createRemoteConfig,
       editRemoteConfig,
@@ -62,6 +63,7 @@ test.describe('Multivariate Options', () => {
 
   test('Variants can be added and removed in a single save @oss', async ({ page }) => {
     const {
+      variationValueField,
       click,
       closeModal,
       createRemoteConfig,
@@ -90,7 +92,7 @@ test.describe('Multivariate Options', () => {
     await expect(variantCards(page)).toHaveCount(1);
     await click(byId('add-variation'));
     await page.waitForTimeout(200);
-    await setText(byId('featureVariationValue1'), 'added');
+    await setText(variationValueField(1), 'added');
     await page.waitForTimeout(500);
     await click(byId('update-feature-btn'));
     await waitForToast();

frontend/e2e/tests/segment-test.pw.ts

@@ -84,6 +84,7 @@ const segmentAnyRules = [
 
 test('Segment test 1 - Create, update, and manage segments with multivariate flags @oss', async ({ page }, testInfo) => {
   const {
+      featureValueField,
     addSegmentOverride,
     assertInputValue,
     assertUserFeatureValue,
@@ -204,6 +205,7 @@ test('Segment test 1 - Create, update, and manage segments with multivariate fla
 
 test('Segment test 2 - Test segment priority and overrides @oss', async ({ page }) => {
   const {
+      featureValueField,
     addSegmentOverride,
     addSegmentOverrideConfig,
     assertUserFeatureValue,
@@ -312,6 +314,7 @@ test('Segment test 2 - Test segment priority and overrides @oss', async ({ page
 
 test('Segment test 3 - Test user-specific feature overrides @oss', async ({ page }, testInfo) => {
   const {
+      featureValueField,
     assertUserFeatureValue,
     click,
     clickUserFeature,
@@ -350,7 +353,7 @@ test('Segment test 3 - Test user-specific feature overrides @oss', async ({ page
 
   log('Edit flag for user')
   await clickUserFeature(REMOTE_CONFIG_FEATURE)
-  await setText(byId('featureValue'), 'small')
+  await setText(featureValueField(), 'small')
   await click('#update-feature-btn')
   await waitAndRefresh() // wait and refresh to avoid issues with data sync from UK -> US in github workflows
   await assertUserFeatureValue(REMOTE_CONFIG_FEATURE, '"small"')
@@ -393,6 +396,7 @@ test('Segment test 4 - Create ANY rule type segment and verify match changes whe
   const ANY_FEATURE = 'any_segment_feature'
   const ANY_SEGMENT = 'any_segment_test'
   const {
+      featureValueField,
     addSegmentOverrideConfig,
     assertUserFeatureValue,
     click,

frontend/e2e/tests/versioning-tests.pw.ts

@@ -10,6 +10,7 @@ import { E2E_USER, PASSWORD } from '../config';
 
 test('Versioning tests - Create, edit, and compare feature versions @oss', async ({ page }, testInfo) => {
     const {
+      variationValueField,
         assertNumberOfVersions,
         click,
         closeModal,
@@ -100,7 +101,7 @@ test('Versioning tests - Create, edit, and compare feature versions @oss', async
     await expect(page.locator(byId('featureVariationKey0'))).toHaveText('primary')
     await click(byId('add-variation'))
     await page.waitForTimeout(200)
-    await setText(byId('featureVariationValue2'), 'huge')
+    await setText(variationValueField(2), 'huge')
     await page.waitForTimeout(500)
     await click(byId('update-feature-btn'))
     await waitForToast()

frontend/web/components/SegmentOverrides.js

@@ -279,7 +279,6 @@ const SegmentOverrideInner = class Override extends React.Component {
                   label='Value'
                   disabled={readOnly}
                   value={v.value}
-                  data-test={`segment-override-value-${index}`}
                   onChange={
                     readOnly
                       ? null
@@ -298,7 +297,6 @@ const SegmentOverrideInner = class Override extends React.Component {
                 label='Segment Control Value'
                 labelAfter={<ControlWeightChip percentage={controlPercent} />}
                 value={v.value}
-                data-test={`segment-override-value-${index}`}
                 disabled={readOnly}
                 onChange={
                   readOnly

frontend/web/components/ValueEditor/ValueEditor.tsx

@@ -22,7 +22,6 @@ import './ValueEditor.scss'
 
 export interface ValueEditorProps {
   className?: string
-  'data-test'?: string
   disabled?: boolean
   // Renders the field's label and wires it to the editor. Callers used to
   // render their own, which is why three different label treatments grew up
@@ -55,7 +54,6 @@ const ValueEditor: FC<ValueEditorProps> = ({
   onChange,
   onValidityChange,
   value,
-  ...rest
 }) => {
   const [language, setLanguage] = useState<ValueEditorLanguage>(
     languageProp ?? 'txt',
@@ -131,7 +129,6 @@ const ValueEditor: FC<ValueEditorProps> = ({
         <Highlight
           aria-labelledby={label ? labelId : undefined}
           aria-readonly={disabled || undefined}
-          data-test={rest['data-test']}
           disabled={disabled}
           onChange={disabled ? null : onChange}
           onBlur={disabled ? null : onBlur}

frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx

@@ -375,7 +375,6 @@ const FeatureValueTab: FC<FeatureValueTabProps> = ({
                 )
               }
               labelTooltip={getValueTooltip(hasVariations, isEdit)}
-              data-test='featureValue'
               className={`full-width${hasVariations ? ' code-medium' : ''}`}
               value={`${
                 typeof initial_value === 'undefined' || initial_value === null

frontend/web/components/mv/VariationValueInput/VariationValueInput.tsx

@@ -73,9 +73,6 @@ export const VariationValueInput: React.FC<VariationValueProps> = ({
           <ValueEditor
             label='Variation Value'
             labelTooltip={Constants.strings.REMOTE_CONFIG_DESCRIPTION_VARIATION}
-            data-test={`featureVariationValue${
-              Utils.featureStateToValue(value) || index
-            }`}
             className='full-width code-medium'
             value={Utils.getTypedValue(Utils.featureStateToValue(value))}
             disabled={!canCreateFeature || disabled || readOnly}