Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(fill): support color and range input types (#10736)

Browse source
This commit is contained in:
Dmitry Gozman 2021-12-06 15:43:10 -08:00 committed by GitHub
parent 516360be5f
commit ec74fa6a76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/playwright-core/src/server/injected/injectedScript.ts
View file

@ -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;

30
tests/page/page-fill.spec.ts
View file

@ -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');