How do I change the value of a color input element using Playwright?

Answer

To set a color for an input element with type='color' using @playwright/test, you can utilize the locator.fill() method. This method focuses on the element and triggers an input event with the entered text, working for <input>, <textarea>, and [contenteditable] elements.

First, locate the input element using page.locator(). Then, call fill() on the locator and pass in a valid color value as a string in hexadecimal format (e.g., #FF0000 for red).

Here's a TypeScript code snippet demonstrating how to set the color of an input element with type='color':

import { test } from '@playwright/test';

test('set color input value', async ({ page }) => {
  await page.goto('https://ray.run/');
  
  const colorInput = await page.locator('input[type="color"]');
  await colorInput.fill('#FF0000');
});

In this example, we locate the input element using its type attribute and then call fill() to set its value to red (#FF0000).

Keep in mind that not all browsers support setting colors for inputs with type='color'. In some cases, these inputs may appear as regular text inputs instead of displaying a color picker. Additionally, some browsers may have different default styles or behaviors for these inputs.

By using Playwright's fill() method and a valid hexadecimal color value, you can easily set colors for inputs with type='color'.