[Fixed] How to interact with Angular ColorPicker components using Selenium WebDriver?

Issue

How to interact with Angular ColorPicker components using Selenium WebDriver? There’s no text field input for hex codes, and it’s operated purely by mouse clicks. An example of it can be seen here: https://www.primefaces.org/primeng/showcase/#/colorpicker

Solution

Interesting problem.

Well you have the handle object:

div[class*=’p-colorpicker-hue-handle’]

You can try to drag it via Selenium up or down

For selecting colors you can find the "main" color picker and click not on the center of it, but by giving it offset:

cssExpression: "div[class=’ng-trigger-overlayAnimation’][class=’p-colorpicker-panel’]"

WebElement element = browser.findElement(By.
cssSelector(cssExpression));
Actions builder = new Actions(browser);
Action action = builder.moveToElement
(element, -20, -20).click().build();
action.perform();

You can play with the values and move in the X -50, and in Y -70 for example.