2020-08-03 23:41:48 +03:00
|
|
|
/**
|
|
|
|
* Copyright Microsoft Corporation. All rights reserved.
|
|
|
|
*
|
|
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
* you may not use this file except in compliance with the License.
|
|
|
|
* You may obtain a copy of the License at
|
|
|
|
*
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
*
|
|
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
* See the License for the specific language governing permissions and
|
|
|
|
* limitations under the License.
|
|
|
|
*/
|
2020-09-03 07:43:38 +03:00
|
|
|
|
2021-05-06 17:08:22 +03:00
|
|
|
import { test as it, expect } from './pageTest';
|
2020-08-03 23:41:48 +03:00
|
|
|
|
2020-08-28 14:20:29 +03:00
|
|
|
it('should dispatch click event', async ({page, server}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.goto(server.PREFIX + '/input/button.html');
|
|
|
|
await page.dispatchEvent('button', 'click');
|
2020-08-12 01:50:53 +03:00
|
|
|
expect(await page.evaluate(() => window['result'])).toBe('Clicked');
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|
|
|
|
|
2020-08-28 14:20:29 +03:00
|
|
|
it('should dispatch click event properties', async ({page, server}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.goto(server.PREFIX + '/input/button.html');
|
|
|
|
await page.dispatchEvent('button', 'click');
|
2020-08-12 01:50:53 +03:00
|
|
|
expect(await page.evaluate('bubbles')).toBeTruthy();
|
|
|
|
expect(await page.evaluate('cancelable')).toBeTruthy();
|
|
|
|
expect(await page.evaluate('composed')).toBeTruthy();
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|
|
|
|
|
2020-08-28 14:20:29 +03:00
|
|
|
it('should dispatch click svg', async ({page}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.setContent(`
|
|
|
|
<svg height="100" width="100">
|
|
|
|
<circle onclick="javascript:window.__CLICKED=42" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
|
|
|
|
</svg>
|
|
|
|
`);
|
|
|
|
await page.dispatchEvent('circle', 'click');
|
2020-08-12 01:50:53 +03:00
|
|
|
expect(await page.evaluate(() => window['__CLICKED'])).toBe(42);
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|
|
|
|
|
2021-03-19 02:20:35 +03:00
|
|
|
it('should dispatch click on a span with an inline element inside', async ({page}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.setContent(`
|
|
|
|
<style>
|
|
|
|
span::before {
|
|
|
|
content: 'q';
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<span onclick='javascript:window.CLICKED=42'></span>
|
|
|
|
`);
|
|
|
|
await page.dispatchEvent('span', 'click');
|
2020-08-12 01:50:53 +03:00
|
|
|
expect(await page.evaluate(() => window['CLICKED'])).toBe(42);
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|
|
|
|
|
2020-08-28 14:20:29 +03:00
|
|
|
it('should dispatch click after navigation ', async ({page, server}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.goto(server.PREFIX + '/input/button.html');
|
|
|
|
await page.dispatchEvent('button', 'click');
|
|
|
|
await page.goto(server.PREFIX + '/input/button.html');
|
|
|
|
await page.dispatchEvent('button', 'click');
|
2020-08-12 01:50:53 +03:00
|
|
|
expect(await page.evaluate(() => window['result'])).toBe('Clicked');
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|
|
|
|
|
2020-08-28 14:20:29 +03:00
|
|
|
it('should dispatch click after a cross origin navigation ', async ({page, server}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.goto(server.PREFIX + '/input/button.html');
|
|
|
|
await page.dispatchEvent('button', 'click');
|
|
|
|
await page.goto(server.CROSS_PROCESS_PREFIX + '/input/button.html');
|
|
|
|
await page.dispatchEvent('button', 'click');
|
2020-08-12 01:50:53 +03:00
|
|
|
expect(await page.evaluate(() => window['result'])).toBe('Clicked');
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|
|
|
|
|
2021-03-19 02:20:35 +03:00
|
|
|
it('should not fail when element is blocked on hover', async ({page}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.setContent(`<style>
|
|
|
|
container { display: block; position: relative; width: 200px; height: 50px; }
|
|
|
|
div, button { position: absolute; left: 0; top: 0; bottom: 0; right: 0; }
|
|
|
|
div { pointer-events: none; }
|
|
|
|
container:hover div { pointer-events: auto; background: red; }
|
|
|
|
</style>
|
|
|
|
<container>
|
|
|
|
<button onclick="window.clicked=true">Click me</button>
|
|
|
|
<div></div>
|
|
|
|
</container>`);
|
|
|
|
await page.dispatchEvent('button', 'click');
|
2020-08-12 01:50:53 +03:00
|
|
|
expect(await page.evaluate(() => window['clicked'])).toBeTruthy();
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|
|
|
|
|
2020-08-28 14:20:29 +03:00
|
|
|
it('should dispatch click when node is added in shadow dom', async ({page, server}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
const watchdog = page.dispatchEvent('span', 'click');
|
|
|
|
await page.evaluate(() => {
|
|
|
|
const div = document.createElement('div');
|
|
|
|
div.attachShadow({mode: 'open'});
|
|
|
|
document.body.appendChild(div);
|
|
|
|
});
|
|
|
|
await page.evaluate(() => new Promise(f => setTimeout(f, 100)));
|
|
|
|
await page.evaluate(() => {
|
|
|
|
const span = document.createElement('span');
|
|
|
|
span.textContent = 'Hello from shadow';
|
2020-08-12 01:50:53 +03:00
|
|
|
span.addEventListener('click', () => window['clicked'] = true);
|
2020-08-03 23:41:48 +03:00
|
|
|
document.querySelector('div').shadowRoot.appendChild(span);
|
|
|
|
});
|
|
|
|
await watchdog;
|
2020-08-12 01:50:53 +03:00
|
|
|
expect(await page.evaluate(() => window['clicked'])).toBe(true);
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|
|
|
|
|
2020-08-28 14:20:29 +03:00
|
|
|
it('should be atomic', async ({playwright, page}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
const createDummySelector = () => ({
|
|
|
|
query(root, selector) {
|
|
|
|
const result = root.querySelector(selector);
|
|
|
|
if (result)
|
2020-08-28 14:20:29 +03:00
|
|
|
Promise.resolve().then(() => result.onclick = '');
|
2020-08-03 23:41:48 +03:00
|
|
|
return result;
|
|
|
|
},
|
2020-08-12 01:50:53 +03:00
|
|
|
queryAll(root: HTMLElement, selector: string) {
|
2020-08-03 23:41:48 +03:00
|
|
|
const result = Array.from(root.querySelectorAll(selector));
|
|
|
|
for (const e of result)
|
2020-08-12 01:50:53 +03:00
|
|
|
Promise.resolve().then(() => (e as HTMLElement).onclick = null);
|
2020-08-03 23:41:48 +03:00
|
|
|
return result;
|
|
|
|
}
|
|
|
|
});
|
2020-09-19 01:52:14 +03:00
|
|
|
await playwright.selectors.register('dispatchEvent', createDummySelector);
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.setContent(`<div onclick="window._clicked=true">Hello</div>`);
|
|
|
|
await page.dispatchEvent('dispatchEvent=div', 'click');
|
2020-08-12 01:50:53 +03:00
|
|
|
expect(await page.evaluate(() => window['_clicked'])).toBe(true);
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|
|
|
|
|
2020-09-23 02:38:05 +03:00
|
|
|
it('should dispatch drag drop events', async ({page, server}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.goto(server.PREFIX + '/drag-n-drop.html');
|
|
|
|
const dataTransfer = await page.evaluateHandle(() => new DataTransfer());
|
|
|
|
await page.dispatchEvent('#source', 'dragstart', { dataTransfer });
|
|
|
|
await page.dispatchEvent('#target', 'drop', { dataTransfer });
|
2020-08-12 01:50:53 +03:00
|
|
|
const source = await page.$('#source');
|
|
|
|
const target = await page.$('#target');
|
|
|
|
expect(await page.evaluate(({source, target}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
return source.parentElement === target;
|
2020-08-12 01:50:53 +03:00
|
|
|
}, {source, target})).toBeTruthy();
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|
|
|
|
|
2020-09-23 02:38:05 +03:00
|
|
|
it('should dispatch drag drop events', async ({page, server}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.goto(server.PREFIX + '/drag-n-drop.html');
|
|
|
|
const dataTransfer = await page.evaluateHandle(() => new DataTransfer());
|
|
|
|
const source = await page.$('#source');
|
|
|
|
await source.dispatchEvent('dragstart', { dataTransfer });
|
|
|
|
const target = await page.$('#target');
|
|
|
|
await target.dispatchEvent('drop', { dataTransfer });
|
2020-08-12 01:50:53 +03:00
|
|
|
expect(await page.evaluate(({source, target}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
return source.parentElement === target;
|
2020-08-12 01:50:53 +03:00
|
|
|
}, {source, target})).toBeTruthy();
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|
|
|
|
|
2020-08-28 14:20:29 +03:00
|
|
|
it('should dispatch click event', async ({page, server}) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.goto(server.PREFIX + '/input/button.html');
|
|
|
|
const button = await page.$('button');
|
|
|
|
await button.dispatchEvent('click');
|
2020-08-12 01:50:53 +03:00
|
|
|
expect(await page.evaluate(() => window['result'])).toBe('Clicked');
|
2020-08-03 23:41:48 +03:00
|
|
|
});
|