test: pressing tab should trigger blur event (#32719)

Reference: https://github.com/microsoft/playwright/issues/32339
This commit is contained in:
Yury Semikhatsky 2024-09-20 12:03:25 -07:00 committed by GitHub
parent 7cd69beed2
commit 5c20f0c534
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -117,6 +117,71 @@ it('clicking checkbox should activate it', async ({ page, browserName, headless,
expect(nodeName).toBe('INPUT');
});
it('tab should cycle between single input and browser', {
annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32339' }
}, async ({ page, browserName, headless }) => {
it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW),
'Chromium in headful mode keeps input focused.');
it.fixme(browserName !== 'chromium');
await page.setContent(`<label for="input1">input1</label>
<input id="input1">
<script>
{
window.focusEvents = [];
const input = document.getElementById('input1');
input.addEventListener('blur', () => focusEvents.push('blur'));
input.addEventListener('focus', () => focusEvents.push('focus'));
}
</script>`);
expect(await page.evaluate(() => document.activeElement.tagName)).toBe('BODY');
await page.keyboard.press('Tab');
expect(await page.evaluate(() => document.activeElement.id)).toBe('input1');
expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus']);
await page.keyboard.press('Tab');
expect(await page.evaluate(() => document.activeElement.tagName)).toBe('BODY');
expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus', 'blur']);
await page.keyboard.press('Tab');
expect(await page.evaluate(() => document.activeElement.id)).toBe('input1');
expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus', 'blur', 'focus']);
});
it('tab should cycle between document elements and browser', {
annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32339' }
}, async ({ page, browserName, headless }) => {
it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW),
'Chromium in headful mode keeps last input focused.');
it.fixme(browserName !== 'chromium');
await page.setContent(`
<input id="input1">
<input id="input2">
<script>
window.focusEvents = [];
{
const input = document.getElementById('input1');
input.addEventListener('blur', () => focusEvents.push('blur1'));
input.addEventListener('focus', () => focusEvents.push('focus1'));
}
{
const input = document.getElementById('input2');
input.addEventListener('blur', () => focusEvents.push('blur2'));
input.addEventListener('focus', () => focusEvents.push('focus2'));
}
</script>`);
expect(await page.evaluate(() => document.activeElement.tagName)).toBe('BODY');
await page.keyboard.press('Tab');
expect(await page.evaluate(() => document.activeElement.id)).toBe('input1');
expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus1']);
await page.keyboard.press('Tab');
expect(await page.evaluate(() => document.activeElement.id)).toBe('input2');
expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus1', 'blur1', 'focus2']);
await page.keyboard.press('Tab');
expect(await page.evaluate(() => document.activeElement.tagName)).toBe('BODY');
expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus1', 'blur1', 'focus2', 'blur2']);
await page.keyboard.press('Tab');
expect(await page.evaluate(() => document.activeElement.id)).toBe('input1');
expect(await page.evaluate(() => (window as any).focusEvents)).toEqual(['focus1', 'blur1', 'focus2', 'blur2', 'focus1']);
});
it('keeps focus on element when attempting to focus a non-focusable element', async ({ page }) => {
it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/14254' });