From ec74fa6a76285935bd898ea3c6e74277a671d205 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Mon, 6 Dec 2021 15:43:10 -0800
Subject: [PATCH] feat(fill): support color and range input types (#10736)

---
 .../src/server/injected/injectedScript.ts     |  8 ++---
 tests/page/page-fill.spec.ts                  | 30 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/packages/playwright-core/src/server/injected/injectedScript.ts b/packages/playwright-core/src/server/injected/injectedScript.ts
index 1ed0414931..49c1b59fb6 100644
--- a/packages/playwright-core/src/server/injected/injectedScript.ts
+++ b/packages/playwright-core/src/server/injected/injectedScript.ts
@@ -571,9 +571,9 @@ export class InjectedScript {
     if (element.nodeName.toLowerCase() === 'input') {
       const input = element as HTMLInputElement;
       const type = input.type.toLowerCase();
-      const kDateTypes = new Set(['date', 'time', 'datetime', 'datetime-local', 'month', 'week']);
-      const kTextInputTypes = new Set(['', 'email', 'number', 'password', 'search', 'tel', 'text', 'url']);
-      if (!kTextInputTypes.has(type) && !kDateTypes.has(type)) {
+      const kInputTypesToSetValue = new Set(['color', 'date', 'time', 'datetime', 'datetime-local', 'month', 'range', 'week']);
+      const kInputTypesToTypeInto = new Set(['', 'email', 'number', 'password', 'search', 'tel', 'text', 'url']);
+      if (!kInputTypesToTypeInto.has(type) && !kInputTypesToSetValue.has(type)) {
         progress.log(`    input of type "${type}" cannot be filled`);
         throw this.createStacklessError(`Input of type "${type}" cannot be filled`);
       }
@@ -582,7 +582,7 @@ export class InjectedScript {
         if (isNaN(Number(value)))
           throw this.createStacklessError('Cannot type text into input[type=number]');
       }
-      if (kDateTypes.has(type)) {
+      if (kInputTypesToSetValue.has(type)) {
         value = value.trim();
         input.focus();
         input.value = value;
diff --git a/tests/page/page-fill.spec.ts b/tests/page/page-fill.spec.ts
index 7bdad699f9..b7faedb674 100644
--- a/tests/page/page-fill.spec.ts
+++ b/tests/page/page-fill.spec.ts
@@ -66,7 +66,7 @@ it('should fill textarea with label', async ({ page }) => {
 
 it('should throw on unsupported inputs', async ({ page, server }) => {
   await page.goto(server.PREFIX + '/input/textarea.html');
-  for (const type of ['button', 'checkbox', 'file', 'image', 'radio', 'range', 'reset', 'submit']) {
+  for (const type of ['button', 'checkbox', 'file', 'image', 'radio', 'reset', 'submit']) {
     await page.$eval('input', (input, type) => input.setAttribute('type', type), type);
     let error = null;
     await page.fill('input', '').catch(e => error = e);
@@ -83,6 +83,34 @@ it('should fill different input types', async ({ page, server }) => {
   }
 });
 
+it('should fill range input', async ({ page }) => {
+  await page.setContent('<input type=range min=0 max=100 value=50>');
+  await page.fill('input', '42');
+  expect(await page.$eval('input', input => input.value)).toBe('42');
+});
+
+it('should throw on incorrect range value', async ({ page }) => {
+  await page.setContent('<input type=range min=0 max=100 value=50>');
+  const error1 = await page.fill('input', 'foo').catch(e => e);
+  expect(error1.message).toContain('Malformed value');
+  const error2 = await page.fill('input', '200').catch(e => e);
+  expect(error2.message).toContain('Malformed value');
+  const error3 = await page.fill('input', '15.43').catch(e => e);
+  expect(error3.message).toContain('Malformed value');
+});
+
+it('should fill color input', async ({ page }) => {
+  await page.setContent('<input type=color value="#e66465">');
+  await page.fill('input', '#aaaaaa');
+  expect(await page.$eval('input', input => input.value)).toBe('#aaaaaa');
+});
+
+it('should throw on incorrect color value', async ({ page }) => {
+  await page.setContent('<input type=color value="#e66465">');
+  const error1 = await page.fill('input', 'badvalue').catch(e => e);
+  expect(error1.message).toContain('Malformed value');
+});
+
 it('should fill date input after clicking', async ({ page, server }) => {
   await page.setContent('<input type=date>');
   await page.click('input');