Autotests: Color Picker UI

[github-actions]

Source task(s):

• Color Picker UI #9549

Suggested test scenarios:

• Opening Molecules > Stereochemistry settings displays three color pickers: Absolute Center, AND Centers, and OR Centers
• Clicking a preset color swatch in the palette immediately updates the color preview box to the selected color
• Clicking Apply after selecting a preset swatch applies the chosen color to the corresponding stereochemistry center label in the editor
• Clicking Cancel after selecting a new swatch discards the change and keeps the previously set color
• Clicking the "+" icon opens the Custom Colors section revealing hue and brightness/saturation sliders and HEX input; clicking "X" closes it
• Dragging the hue slider updates the color preview box and populates the HEX input field with the corresponding valid HEX code
• Entering a valid HEX code (e.g. #FF5733) in the HEX input field updates the color preview box to match
• Entering an invalid or incomplete HEX code (e.g. #GGG, #12) does not update the preview and is blocked by the input mask
• Clicking the Delete icon next to the HEX input clears the field and resets the custom color preview
• Applying a custom color defined via HEX input correctly updates the stereochemistry center color in the rendered molecule
• Each of the three stereochemistry centers (Absolute, AND, OR) maintains its own independently selected color without cross-contamination
• Selecting "Reset to Default" reverts all three stereochemistry center colors to Ketcher default values
• Selecting "Reset to ACS" reverts all three stereochemistry center colors to the ACS preset values
• Custom color selections persist after closing and reopening the Settings dialog (saved in browser cache)
• Using "Save Settings" and "Load Settings" correctly serializes and restores all three stereochemistry center color values

[github-actions]

Claude finished @github-actions[bot]'s task —— View job • claude/issue-10090-20260603-1601 • Create PR ➔

---

✅ Color Picker UI Autotests Successfully Generated

I've successfully created comprehensive Playwright autotests for the Color Picker UI functionality based on issue #10090.

✅ Completed Tasks:

• Gathered context and analyzed autotest request details
• Fetched feature details from source issue Color Picker UI #9549
• Extracted feature number and sanitized title for directory naming
• Used autotests-generator agent to create comprehensive test file
• Created proper directory structure: ketcher-autotests/tests/specs/Chromium-popup/Features/
• Saved the generated test file in .spec.ts format
• Committed and pushed changes to the branch

📋 Test Coverage Summary:

All 15 test scenarios have been implemented covering:

• ✅ Color picker display for three stereochemistry centers (Absolute, AND, OR)
• ✅ Preset color swatch functionality with immediate preview updates
• ✅ Apply/Cancel button behavior
• ✅ Custom colors section with + and X toggle functionality
• ✅ Hue slider interaction with HEX code population
• ✅ HEX input validation for valid/invalid codes (#FF5733, #GGG, Bump lodash from 4.17.4 to 4.17.15 #12)
• ✅ Delete icon for clearing HEX input
• ✅ Custom color application to stereochemistry centers
• ✅ Independent color selection without cross-contamination
• ✅ Reset to Default and Reset to ACS functionality
• ✅ Color persistence after dialog close/reopen
• ✅ Settings save/load serialization

📁 Generated File:

• Path: ketcher-autotests/tests/specs/Chromium-popup/Features/9549-color-picker-ui.spec.ts
• Lines: 773 lines of comprehensive test code
• Features: ColorPickerHelper utility, proper error handling, visual testing integration
• Reference: Links to issue Autotests: Color Picker UI #10090 and source feature Color Picker UI #9549

🚀 Next Steps:

---

[github-actions]

Generated Playwright test: #10165