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

test: add more failing tests with react recycle (#2731)

Browse Source
This commit is contained in:
Dmitry Gozman 2020-06-26 16:31:51 -07:00 committed by GitHub
parent 02f7501725
commit 43f70ab978
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 97 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/dom.ts
View File

@ -321,6 +321,8 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
async _performPointerAction(progress: Progress, action: (point: types.Point) => Promise<void>, options: types.PointerActionOptions & types.PointerActionWaitOptions & types.NavigatingActionWaitOptions): Promise<'error:notvisible' | 'error:notconnected' | 'error:notinviewport' | 'error:nothittarget' | 'done'> {
const { force = false, position } = options;
if ((options as any).__testHookBeforeStable)
await (options as any).__testHookBeforeStable();
if (!force) {
const result = await this._waitForDisplayedAtStablePositionAndEnabled(progress);
if (result !== 'done')

21
test/assets/react.html
View File

@ -8,5 +8,26 @@
window.e = React.createElement;
window.reactRoot = document.querySelector('.react-root');
window.renderComponent = c => ReactDOM.render(c, window.reactRoot);
window.MyButton = class MyButton extends React.Component {
constructor(props) {
super(props);
this.state = { hovered: false };
}
render() {
return e('button', {
disabled: !!this.props.disabled,
onClick: () => {
window[this.props.name] = true;
},
onMouseEnter: () => {
if (this.props.renameOnHover)
this.setState({ hovered: true });
if (this.props.onHover)
this.props.onHover();
},
}, this.state.hovered ? 'Hovered' : this.props.name);
}
};
</script>
</body>

87
test/click.spec.js
View File

@ -748,26 +748,87 @@ describe('Page.click', function() {
it.fail(true)('should retarget when element is recycled during hit testing', async ({page, server}) => {
await page.goto(server.PREFIX + '/react.html');
await page.evaluate(() => {
class MyButton extends React.Component {
render() {
return e('button', { onClick: () => window[this.props.name] = true }, this.props.name);
}
}
window.TwoButtons = class TwoButtons extends React.Component {
render() {
const buttons = this.props.names.map(name => e(MyButton, { name }));
return e('div', {}, buttons);
}
}
renderComponent(e(TwoButtons, { names: ['button1', 'button2'] }));
renderComponent(e('div', {}, [e(MyButton, { name: 'button1' }), e(MyButton, { name: 'button2' })] ));
});
const __testHookAfterStable = () => page.evaluate(() => {
renderComponent(e(TwoButtons, { names: ['button2', 'button1'] }));
window.counter = (window.counter || 0) + 1;
if (window.counter === 1)
renderComponent(e('div', {}, [e(MyButton, { name: 'button2' }), e(MyButton, { name: 'button1' })] ));
});
await page.click('text=button1', { __testHookAfterStable });
expect(await page.evaluate(() => window.button1)).toBe(true);
expect(await page.evaluate(() => window.button2)).toBe(undefined);
});
it.fail(true)('should report that selector does not match anymore', async ({page, server}) => {
await page.goto(server.PREFIX + '/react.html');
await page.evaluate(() => {
renderComponent(e('div', {}, [e(MyButton, { name: 'button1' }), e(MyButton, { name: 'button2' })] ));
});
const __testHookAfterStable = () => page.evaluate(() => {
window.counter = (window.counter || 0) + 1;
if (window.counter === 1)
renderComponent(e('div', {}, [e(MyButton, { name: 'button2' }), e(MyButton, { name: 'button1' })] ));
else
renderComponent(e('div', {}, []));
});
const error = await page.dblclick('text=button1', { __testHookAfterStable, timeout: 3000 }).catch(e => e);
expect(await page.evaluate(() => window.button1)).toBe(undefined);
expect(await page.evaluate(() => window.button2)).toBe(undefined);
expect(error.message).toContain('Timeout 3000ms exceeded during page.dblclick.');
expect(error.message).toContain('element does not match the selector anymore');
});
it.fail(true)('should retarget when element is recycled before enabled check', async ({page, server}) => {
await page.goto(server.PREFIX + '/react.html');
await page.evaluate(() => {
renderComponent(e('div', {}, [e(MyButton, { name: 'button1' }), e(MyButton, { name: 'button2', disabled: true })] ));
});
const __testHookBeforeStable = () => page.evaluate(() => {
window.counter = (window.counter || 0) + 1;
if (window.counter === 1)
renderComponent(e('div', {}, [e(MyButton, { name: 'button2', disabled: true }), e(MyButton, { name: 'button1' })] ));
});
await page.click('text=button1', { __testHookBeforeStable });
expect(await page.evaluate(() => window.button1)).toBe(true);
expect(await page.evaluate(() => window.button2)).toBe(undefined);
});
it.fail(true)('should not retarget the handle when element is recycled', async ({page, server}) => {
await page.goto(server.PREFIX + '/react.html');
await page.evaluate(() => {
renderComponent(e('div', {}, [e(MyButton, { name: 'button1' }), e(MyButton, { name: 'button2', disabled: true })] ));
});
const __testHookBeforeStable = () => page.evaluate(() => {
window.counter = (window.counter || 0) + 1;
if (window.counter === 1)
renderComponent(e('div', {}, [e(MyButton, { name: 'button2', disabled: true }), e(MyButton, { name: 'button1' })] ));
});
const handle = await page.$('text=button1');
const error = await handle.click({ __testHookBeforeStable, timeout: 3000 }).catch(e => e);
expect(await page.evaluate(() => window.button1)).toBe(undefined);
expect(await page.evaluate(() => window.button2)).toBe(undefined);
expect(error.message).toContain('Timeout 3000ms exceeded during elementHandle.click.');
expect(error.message).toContain('element is disabled - waiting');
});
it('should not retarget when element changes on hover', async ({page, server}) => {
await page.goto(server.PREFIX + '/react.html');
await page.evaluate(() => {
renderComponent(e('div', {}, [e(MyButton, { name: 'button1', renameOnHover: true }), e(MyButton, { name: 'button2' })] ));
});
await page.click('text=button1');
expect(await page.evaluate(() => window.button1)).toBe(true);
expect(await page.evaluate(() => window.button2)).toBe(undefined);
});
it('should not retarget when element is recycled on hover', async ({page, server}) => {
await page.goto(server.PREFIX + '/react.html');
await page.evaluate(() => {
function shuffle() {
renderComponent(e('div', {}, [e(MyButton, { name: 'button2' }), e(MyButton, { name: 'button1' })] ));
}
renderComponent(e('div', {}, [e(MyButton, { name: 'button1', onHover: shuffle }), e(MyButton, { name: 'button2' })] ));
});
await page.click('text=button1');
expect(await page.evaluate(() => window.button1)).toBe(undefined);
expect(await page.evaluate(() => window.button2)).toBe(true);
});
it('should click the button when window.innerWidth is corrupted', async({page, server}) => {
await page.goto(server.PREFIX + '/input/button.html');
await page.evaluate(() => window.innerWidth = 0);