Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: input events triggered by playwright actions should have composed=true #28730

Merged
merged 6 commits into from
Dec 21, 2023
Merged

fix: input events triggered by playwright actions should have composed=true #28730

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4d06b6e
fix: selectOption should fire composed input
yury-s Dec 20, 2023
5976330
Update test to check shadow dom boundary
yury-s Dec 21, 2023
5bd75eb
fill events
yury-s Dec 21, 2023
a0f5b75
setInputFiles events
yury-s Dec 21, 2023
deb1f8e
Update epxectations for month, week pickers
yury-s Dec 21, 2023
d6e176c
fix lint
yury-s Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions packages/playwright-core/src/server/injected/injectedScript.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -720,8 +720,8 @@ export class InjectedScript {
select.value = undefined as any;
selectedOptions.forEach(option => option.selected = true);
progress.log(' selected specified option(s)');
select.dispatchEvent(new Event('input', { 'bubbles': true }));
select.dispatchEvent(new Event('change', { 'bubbles': true }));
select.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
select.dispatchEvent(new Event('change', { bubbles: true }));
yury-s marked this conversation as resolved.
Show resolved Hide resolved
return selectedOptions.map(option => option.value);
}

Expand All @@ -732,7 +732,7 @@ export class InjectedScript {
if (element.nodeName.toLowerCase() === 'input') {
const input = element as HTMLInputElement;
const type = input.type.toLowerCase();
const kInputTypesToSetValue = new Set(['color', 'date', 'time', 'datetime', 'datetime-local', 'month', 'range', 'week']);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no such input type as 'datetime'.

const kInputTypesToSetValue = new Set(['color', 'date', 'time', '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`);
Expand All @@ -749,8 +749,8 @@ export class InjectedScript {
input.value = value;
if (input.value !== value)
throw this.createStacklessError('Malformed value');
element.dispatchEvent(new Event('input', { 'bubbles': true }));
element.dispatchEvent(new Event('change', { 'bubbles': true }));
element.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
element.dispatchEvent(new Event('change', { bubbles: true }));
return 'done'; // We have already changed the value, no need to input it.
}
} else if (element.nodeName.toLowerCase() === 'textarea') {
Expand Down Expand Up @@ -852,8 +852,8 @@ export class InjectedScript {
for (const file of files)
dt.items.add(file);
input.files = dt.files;
input.dispatchEvent(new Event('input', { 'bubbles': true }));
input.dispatchEvent(new Event('change', { 'bubbles': true }));
input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));
}

expectHitTarget(hitPoint: { x: number, y: number }, targetElement: Element) {
Expand Down
46 changes: 46 additions & 0 deletions tests/page/page-fill.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,52 @@ it('should fill date input after clicking', async ({ page, server }) => {
expect(await page.$eval('input', input => input.value)).toBe('2020-03-02');
});

for (const [type, value] of Object.entries({
'color': '#aaaaaa',
'date': '2020-03-02',
'time': '13:15',
'datetime-local': '2020-03-02T13:15:30',
'month': '2020-03',
'range': '42',
'week': '2020-W50'
})) {
it(`input event.composed should be true and cross shadow dom boundary - ${type}`, async ({ page, server, browserName }) => {
it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/28726' });
await page.goto(server.EMPTY_PAGE);
await page.setContent(`<body><script>
const div = document.createElement('div');
const shadowRoot = div.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<input type=${type}></input>';
document.body.appendChild(div);
</script></body>`);
await page.locator('body').evaluate(select => {
(window as any).firedBodyEvents = [];
for (const event of ['input', 'change']) {
select.addEventListener(event, e => {
(window as any).firedBodyEvents.push(e.type + ':' + e.composed);
}, false);
}
});

await page.locator('input').evaluate(select => {
(window as any).firedEvents = [];
for (const event of ['input', 'change']) {
select.addEventListener(event, e => {
(window as any).firedEvents.push(e.type + ':' + e.composed);
}, false);
}
});
await page.locator('input').fill(value);

expect(await page.evaluate(() => window['firedEvents'])).toEqual(
(browserName !== 'chromium' && (type === 'month' || type === 'week')) ?
['input:true'] :
['input:true', 'change:false']
);
expect(await page.evaluate(() => window['firedBodyEvents'])).toEqual(['input:true']);
});
}

it('should throw on incorrect date', async ({ page, browserName }) => {
it.skip(browserName === 'webkit', 'WebKit does not support date inputs');

Expand Down
34 changes: 34 additions & 0 deletions tests/page/page-select-option.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,3 +287,37 @@ it('should wait for multiple options to be present', async ({ page, server }) =>
const items = await selectPromise;
expect(items).toStrictEqual(['green', 'scarlet']);
});

it('input event.composed should be true and cross shadow dom boundary', async ({ page, server }) => {
it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/28726' });
await page.goto(server.EMPTY_PAGE);
await page.setContent(`<body><script>
const div = document.createElement('div');
const shadowRoot = div.attachShadow({mode: 'open'});
shadowRoot.innerHTML = \`<select>
<option value="black">Black</option>
<option value="blue">Blue</option>
</select>\`;
document.body.appendChild(div);
</script></body>`);
await page.locator('body').evaluate(select => {
(window as any).firedBodyEvents = [];
for (const event of ['input', 'change']) {
select.addEventListener(event, e => {
(window as any).firedBodyEvents.push(e.type + ':' + e.composed);
}, false);
}
});

await page.locator('select').evaluate(select => {
(window as any).firedEvents = [];
for (const event of ['input', 'change']) {
select.addEventListener(event, e => {
(window as any).firedEvents.push(e.type + ':' + e.composed);
}, false);
}
});
await page.selectOption('select', 'blue');
expect(await page.evaluate(() => window['firedEvents'])).toEqual(['input:true', 'change:false']);
expect(await page.evaluate(() => window['firedBodyEvents'])).toEqual(['input:true']);
});
35 changes: 35 additions & 0 deletions tests/page/page-set-input-files.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -533,6 +533,41 @@ it('should emit input and change events', async ({ page, asset }) => {
expect(events[1].type).toBe('change');
});

it('input event.composed should be true and cross shadow dom boundary', async ({ page, server, asset }) => {
it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/28726' });
await page.goto(server.EMPTY_PAGE);
await page.setContent(`<body><script>
const div = document.createElement('div');
const shadowRoot = div.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<input type=file></input>';
document.body.appendChild(div);
</script></body>`);
await page.locator('body').evaluate(select => {
(window as any).firedBodyEvents = [];
for (const event of ['input', 'change']) {
select.addEventListener(event, e => {
(window as any).firedBodyEvents.push(e.type + ':' + e.composed);
}, false);
}
});

await page.locator('input').evaluate(select => {
(window as any).firedEvents = [];
for (const event of ['input', 'change']) {
select.addEventListener(event, e => {
(window as any).firedEvents.push(e.type + ':' + e.composed);
}, false);
}
});
await page.locator('input').setInputFiles({
name: 'test.txt',
mimeType: 'text/plain',
buffer: Buffer.from('this is a test')
});
expect(await page.evaluate(() => window['firedEvents'])).toEqual(['input:true', 'change:false']);
expect(await page.evaluate(() => window['firedBodyEvents'])).toEqual(['input:true']);
});

it('should work for single file pick', async ({ page, server }) => {
await page.setContent(`<input type=file>`);
const [fileChooser] = await Promise.all([
Expand Down