yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(fill): allow filling more input types (#4563)

Browse Source 
This includes invalid types that are no recognized by the browser.
This commit is contained in:
Dmitry Gozman 2020-12-02 14:43:41 -08:00 committed by GitHub
parent 1fa7e86ea9
commit 52ae218bfc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/server/injected/injectedScript.ts
View File

@ -281,8 +281,8 @@ export class InjectedScript {
} }
if (element.nodeName.toLowerCase() === 'input') { if (element.nodeName.toLowerCase() === 'input') {
const input = element as HTMLInputElement; const input = element as HTMLInputElement;
const type = (input.getAttribute('type') || '').toLowerCase(); const type = input.type.toLowerCase();
const kDateTypes = new Set(['date', 'time', 'datetime', 'datetime-local']); const kDateTypes = new Set(['date', 'time', 'datetime', 'datetime-local', 'month', 'week']);
const kTextInputTypes = new Set(['', 'email', 'number', 'password', 'search', 'tel', 'text', 'url']); const kTextInputTypes = new Set(['', 'email', 'number', 'password', 'search', 'tel', 'text', 'url']);
if (!kTextInputTypes.has(type) && !kDateTypes.has(type)) { if (!kTextInputTypes.has(type) && !kDateTypes.has(type)) {
progress.log(` input of type "${type}" cannot be filled`); progress.log(` input of type "${type}" cannot be filled`);

38
test/page-fill.spec.ts
View File

@ -54,7 +54,7 @@ it('should fill textarea with label', async ({page}) => {
it('should throw on unsupported inputs', async ({page, server}) => { it('should throw on unsupported inputs', async ({page, server}) => {
await page.goto(server.PREFIX + '/input/textarea.html'); await page.goto(server.PREFIX + '/input/textarea.html');
for (const type of ['color', 'file']) { for (const type of ['button', 'checkbox', 'file', 'image', 'radio', 'range', 'reset', 'submit']) {
await page.$eval('input', (input, type) => input.setAttribute('type', type), type); await page.$eval('input', (input, type) => input.setAttribute('type', type), type);
let error = null; let error = null;
await page.fill('input', '').catch(e => error = e); await page.fill('input', '').catch(e => error = e);
@ -64,7 +64,7 @@ it('should throw on unsupported inputs', async ({page, server}) => {
it('should fill different input types', async ({page, server}) => { it('should fill different input types', async ({page, server}) => {
await page.goto(server.PREFIX + '/input/textarea.html'); await page.goto(server.PREFIX + '/input/textarea.html');
for (const type of ['password', 'search', 'tel', 'text', 'url']) { for (const type of ['password', 'search', 'tel', 'text', 'url', 'invalid-type']) {
await page.$eval('input', (input, type) => input.setAttribute('type', type), type); await page.$eval('input', (input, type) => input.setAttribute('type', type), type);
await page.fill('input', 'text ' + type); await page.fill('input', 'text ' + type);
expect(await page.evaluate(() => window['result'])).toBe('text ' + type); expect(await page.evaluate(() => window['result'])).toBe('text ' + type);
@ -79,7 +79,7 @@ it('should fill date input after clicking', async ({page, server}) => {
}); });
it('should throw on incorrect date', (test, { browserName }) => { it('should throw on incorrect date', (test, { browserName }) => {
test.skip(browserName === 'webkit'); test.skip(browserName === 'webkit', 'WebKit does not support date inputs');
}, async ({page}) => { }, async ({page}) => {
await page.setContent('<input type=date>'); await page.setContent('<input type=date>');
const error = await page.fill('input', '2020-13-05').catch(e => e); const error = await page.fill('input', '2020-13-05').catch(e => e);
@ -92,8 +92,36 @@ it('should fill time input', async ({page}) => {
expect(await page.$eval('input', input => input.value)).toBe('13:15'); expect(await page.$eval('input', input => input.value)).toBe('13:15');
}); });
it('should fill month input', async ({page}) => {
await page.setContent('<input type=month>');
await page.fill('input', '2020-07');
expect(await page.$eval('input', input => input.value)).toBe('2020-07');
});
it('should throw on incorrect month', (test, { browserName }) => {
test.skip(browserName !== 'chromium', 'Only Chromium supports month inputs');
}, async ({page}) => {
await page.setContent('<input type=month>');
const error = await page.fill('input', '2020-13').catch(e => e);
expect(error.message).toContain('Malformed value');
});
it('should fill week input', async ({page}) => {
await page.setContent('<input type=week>');
await page.fill('input', '2020-W50');
expect(await page.$eval('input', input => input.value)).toBe('2020-W50');
});
it('should throw on incorrect week', (test, { browserName }) => {
test.skip(browserName !== 'chromium', 'Only Chromium supports week inputs');
}, async ({page}) => {
await page.setContent('<input type=week>');
const error = await page.fill('input', '2020-123').catch(e => e);
expect(error.message).toContain('Malformed value');
});
it('should throw on incorrect time', (test, { browserName }) => { it('should throw on incorrect time', (test, { browserName }) => {
test.skip(browserName === 'webkit'); test.skip(browserName === 'webkit', 'WebKit does not support time inputs');
}, async ({page}) => { }, async ({page}) => {
await page.setContent('<input type=time>'); await page.setContent('<input type=time>');
const error = await page.fill('input', '25:05').catch(e => e); const error = await page.fill('input', '25:05').catch(e => e);
@ -107,7 +135,7 @@ it('should fill datetime-local input', async ({page, server}) => {
}); });
it('should throw on incorrect datetime-local', (test, { browserName }) => { it('should throw on incorrect datetime-local', (test, { browserName }) => {
test.skip(browserName === 'webkit' || browserName === 'firefox'); test.skip(browserName !== 'chromium', 'Only Chromium supports datetime-local inputs');
}, async ({page, server}) => { }, async ({page, server}) => {
await page.setContent('<input type=datetime-local>'); await page.setContent('<input type=datetime-local>');
const error = await page.fill('input', 'abc').catch(e => e); const error = await page.fill('input', 'abc').catch(e => e);