From 0ff00e59785439e8f10b080fb76c5c7716bb3d77 Mon Sep 17 00:00:00 2001 From: Dmitry Gozman Date: Fri, 12 Aug 2022 12:40:40 -0700 Subject: [PATCH] test: put existing retarget tests to a separate file (#16510) --- tests/page/elementhandle-convenience.spec.ts | 23 -- ...ementhandle-wait-for-element-state.spec.ts | 33 --- tests/page/locator-convenience.spec.ts | 29 --- tests/page/page-check.spec.ts | 35 --- tests/page/page-click.spec.ts | 26 --- tests/page/page-fill.spec.ts | 30 --- tests/page/page-select-option.spec.ts | 20 -- tests/page/page-set-input-files.spec.ts | 7 - tests/page/retarget.spec.ts | 219 ++++++++++++++++++ 9 files changed, 219 insertions(+), 203 deletions(-) create mode 100644 tests/page/retarget.spec.ts diff --git a/tests/page/elementhandle-convenience.spec.ts b/tests/page/elementhandle-convenience.spec.ts index 315bb5040e..e57d2552ec 100644 --- a/tests/page/elementhandle-convenience.spec.ts +++ b/tests/page/elementhandle-convenience.spec.ts @@ -58,13 +58,6 @@ it('inputValue should work', async ({ page, server }) => { expect(await handle2.inputValue().catch(e => e.message)).toContain('Node is not an , `); - expect(await page.inputValue('text=Fill me')).toBe('hey'); - await expect(page.locator('text=Fill me')).toHaveValue('hey'); - - await page.fill('textarea', 'Look at this'); - expect(await page.inputValue('text=Fill me')).toBe('Look at this'); - await expect(page.locator('text=Fill me')).toHaveValue('Look at this'); -}); - - it('innerHTML should work', async ({ page, server }) => { await page.goto(`${server.PREFIX}/dom.html`); const locator = page.locator('#outer'); diff --git a/tests/page/page-check.spec.ts b/tests/page/page-check.spec.ts index 4af9c05ca3..8e9ec4c681 100644 --- a/tests/page/page-check.spec.ts +++ b/tests/page/page-check.spec.ts @@ -41,41 +41,6 @@ it('should not uncheck the unchecked box', async ({ page }) => { expect(await page.evaluate(() => window['checkbox'].checked)).toBe(false); }); -it('should check the box by label', async ({ page }) => { - await page.setContent(``); - await page.check('label'); - expect(await page.evaluate(() => window['checkbox'].checked)).toBe(true); -}); - -it('should check the box outside label', async ({ page }) => { - await page.setContent(`
`); - await page.check('label'); - expect(await page.evaluate(() => window['checkbox'].checked)).toBe(true); -}); - -it('should check the box inside label w/o id', async ({ page }) => { - await page.setContent(``); - await page.check('label'); - expect(await page.evaluate(() => window['checkbox'].checked)).toBe(true); -}); - -it('should check the box outside shadow dom label', async ({ page }) => { - await page.setContent('
'); - await page.$eval('div', div => { - const root = div.attachShadow({ mode: 'open' }); - const label = document.createElement('label'); - label.setAttribute('for', 'target'); - label.textContent = 'Click me'; - root.appendChild(label); - const input = document.createElement('input'); - input.setAttribute('type', 'checkbox'); - input.setAttribute('id', 'target'); - root.appendChild(input); - }); - await page.check('label'); - expect(await page.$eval('input', input => input.checked)).toBe(true); -}); - it('should check radio', async ({ page }) => { await page.setContent(` one diff --git a/tests/page/page-click.spec.ts b/tests/page/page-click.spec.ts index 1af305d49c..855d6722aa 100644 --- a/tests/page/page-click.spec.ts +++ b/tests/page/page-click.spec.ts @@ -605,32 +605,6 @@ it('should click disabled div', async ({ page }) => { expect(await page.evaluate('__CLICKED')).toBe(true); }); -it('should climb dom for inner label with pointer-events:none', async ({ page }) => { - await page.setContent(''); - await page.click('text=Click target'); - expect(await page.evaluate('__CLICKED')).toBe(true); -}); - -it('should climb up to [role=button]', async ({ page }) => { - await page.setContent('
Click target
'); - await page.click('text=Click target'); - expect(await page.evaluate('__CLICKED')).toBe(true); -}); - -it('should climb up to a anchor', async ({ page }) => { - // For Firefox its not allowed to return anything: https://bugzilla.mozilla.org/show_bug.cgi?id=1392046 - // Note the intermediate div - it is necessary, otherwise is not recognized as a clickable link. - await page.setContent(`
Inner
`); - await page.click('#inner'); - expect(await page.evaluate('__CLICKED')).toBe(true); -}); - -it('should climb up to a [role=link]', async ({ page }) => { - await page.setContent(`
Inner
`); - await page.click('#inner'); - expect(await page.evaluate('__CLICKED')).toBe(true); -}); - it('should wait for BUTTON to be clickable when it has pointer-events:none', async ({ page }) => { await page.setContent(''); let done = false; diff --git a/tests/page/page-fill.spec.ts b/tests/page/page-fill.spec.ts index f0c060f2d1..aec4a0b858 100644 --- a/tests/page/page-fill.spec.ts +++ b/tests/page/page-fill.spec.ts @@ -34,36 +34,6 @@ it('should fill input', async ({ page, server }) => { expect(await page.evaluate(() => window['result'])).toBe('some value'); }); -it('should fill input with label', async ({ page }) => { - await page.setContent(``); - await page.fill('text=Fill me', 'some value'); - expect(await page.$eval('input', input => input.value)).toBe('some value'); -}); - -it('should fill input with label 2', async ({ page }) => { - await page.setContent(``); - await page.fill('text=Fill me', 'some value'); - expect(await page.$eval('input', input => input.value)).toBe('some value'); -}); - -it('should fill input with span inside the label', async ({ page }) => { - await page.setContent(``); - await page.fill('text=Fill me', 'some value'); - expect(await page.$eval('input', input => input.value)).toBe('some value'); -}); - -it('should fill input inside the label', async ({ page }) => { - await page.setContent(``); - await page.fill('input', 'some value'); - expect(await page.$eval('input', input => input.value)).toBe('some value'); -}); - -it('should fill textarea with label', async ({ page }) => { - await page.setContent(``); - await page.fill('text=Fill me', 'some value'); - expect(await page.$eval('textarea', textarea => textarea.value)).toBe('some value'); -}); - it('should throw on unsupported inputs', async ({ page, server }) => { await page.goto(server.PREFIX + '/input/textarea.html'); for (const type of ['button', 'checkbox', 'file', 'image', 'radio', 'reset', 'submit']) { diff --git a/tests/page/page-select-option.spec.ts b/tests/page/page-select-option.spec.ts index e9808b4349..115d0526ff 100644 --- a/tests/page/page-select-option.spec.ts +++ b/tests/page/page-select-option.spec.ts @@ -108,26 +108,6 @@ it('should select multiple options with attributes', async ({ page, server }) => expect(await page.evaluate(() => window['result'].onChange)).toEqual(['blue', 'gray', 'green']); }); -it('should select options with sibling label', async ({ page, server }) => { - await page.setContent(` - `); - await page.selectOption('text=Choose a pet', 'cat'); - expect(await page.$eval('select', select => select.options[select.selectedIndex].text)).toEqual('Cat'); -}); - -it('should select options with outer label', async ({ page, server }) => { - await page.setContent(``); - await page.selectOption('text=Choose a pet', 'cat'); - expect(await page.$eval('select', select => select.options[select.selectedIndex].text)).toEqual('Cat'); -}); - it('should respect event bubbling', async ({ page, server }) => { await page.goto(server.PREFIX + '/input/select.html'); await page.selectOption('select', 'blue'); diff --git a/tests/page/page-set-input-files.spec.ts b/tests/page/page-set-input-files.spec.ts index c162478938..5bff029501 100644 --- a/tests/page/page-set-input-files.spec.ts +++ b/tests/page/page-set-input-files.spec.ts @@ -142,13 +142,6 @@ it('should work @smoke', async ({ page, asset }) => { expect(await page.$eval('input', input => input.files[0].name)).toBe('file-to-upload.txt'); }); -it('should work with label', async ({ page, asset }) => { - await page.setContent(``); - await page.setInputFiles('text=Choose a file', asset('file-to-upload.txt')); - expect(await page.$eval('input', input => input.files.length)).toBe(1); - expect(await page.$eval('input', input => input.files[0].name)).toBe('file-to-upload.txt'); -}); - it('should set from memory', async ({ page }) => { await page.setContent(``); await page.setInputFiles('input', { diff --git a/tests/page/retarget.spec.ts b/tests/page/retarget.spec.ts new file mode 100644 index 0000000000..b331949725 --- /dev/null +++ b/tests/page/retarget.spec.ts @@ -0,0 +1,219 @@ +/** + * Copyright 2017 Google Inc. All rights reserved. + * Modifications copyright (c) Microsoft Corporation. + * + * 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. + */ + +import { test as it, expect } from './pageTest'; + +async function giveItAChanceToResolve(page) { + for (let i = 0; i < 5; i++) + await page.evaluate(() => new Promise(f => requestAnimationFrame(() => requestAnimationFrame(f)))); +} + +it('element state checks should work as expected for label with zero-sized input', async ({ page, server }) => { + await page.setContent(` + + `); + // Visible checks the label. + expect(await page.isVisible('text=Click me')).toBe(true); + expect(await page.isHidden('text=Click me')).toBe(false); + + // Enabled checks the input. + expect(await page.isEnabled('text=Click me')).toBe(false); + expect(await page.isDisabled('text=Click me')).toBe(true); +}); + +it('should wait for enclosing disabled button', async ({ page }) => { + await page.setContent(''); + const span = await page.$('text=Target'); + let done = false; + const promise = span.waitForElementState('disabled').then(() => done = true); + await giveItAChanceToResolve(page); + expect(done).toBe(false); + await span.evaluate(span => (span.parentElement as HTMLButtonElement).disabled = true); + await promise; +}); + +it('should wait for enclosing button with a disabled fieldset', async ({ page }) => { + await page.setContent('
'); + const span = await page.$('text=Target'); + let done = false; + const promise = span.waitForElementState('enabled').then(() => done = true); + await giveItAChanceToResolve(page); + expect(done).toBe(false); + await span.evaluate(span => (span.parentElement.parentElement as HTMLFieldSetElement).disabled = false); + await promise; +}); + +it('should wait for enclosing enabled button', async ({ page, server }) => { + await page.setContent(''); + const span = await page.$('text=Target'); + let done = false; + const promise = span.waitForElementState('enabled').then(() => done = true); + await giveItAChanceToResolve(page); + expect(done).toBe(false); + await span.evaluate(span => (span.parentElement as HTMLButtonElement).disabled = false); + await promise; +}); + +it('inputValue should work on label', async ({ page, server }) => { + await page.setContent(``); + await page.fill('input', 'foo'); + expect(await page.locator('label').inputValue()).toBe('foo'); +}); + +it('should get value of input with label', async ({ page }) => { + await page.setContent(``); + expect(await page.inputValue('text=Fill me')).toBe('some value'); + await expect(page.locator('text=Fill me')).toHaveValue('some value'); +}); + +it('should get value of input with span inside the label', async ({ page }) => { + await page.setContent(``); + expect(await page.inputValue('text=Fill me')).toBe('some value'); + await expect(page.locator('text=Fill me')).toHaveValue('some value'); +}); + +it('should get value of textarea with label', async ({ page }) => { + await page.setContent(``); + expect(await page.inputValue('text=Fill me')).toBe('hey'); + await expect(page.locator('text=Fill me')).toHaveValue('hey'); + + await page.fill('textarea', 'Look at this'); + expect(await page.inputValue('text=Fill me')).toBe('Look at this'); + await expect(page.locator('text=Fill me')).toHaveValue('Look at this'); +}); + +it('should check the box by label', async ({ page }) => { + await page.setContent(``); + await page.check('label'); + expect(await page.evaluate(() => window['checkbox'].checked)).toBe(true); +}); + +it('should check the box outside label', async ({ page }) => { + await page.setContent(`
`); + await page.check('label'); + expect(await page.evaluate(() => window['checkbox'].checked)).toBe(true); +}); + +it('should check the box inside label w/o id', async ({ page }) => { + await page.setContent(``); + await page.check('label'); + expect(await page.evaluate(() => window['checkbox'].checked)).toBe(true); +}); + +it('should check the box outside shadow dom label', async ({ page }) => { + await page.setContent('
'); + await page.$eval('div', div => { + const root = div.attachShadow({ mode: 'open' }); + const label = document.createElement('label'); + label.setAttribute('for', 'target'); + label.textContent = 'Click me'; + root.appendChild(label); + const input = document.createElement('input'); + input.setAttribute('type', 'checkbox'); + input.setAttribute('id', 'target'); + root.appendChild(input); + }); + await page.check('label'); + expect(await page.$eval('input', input => input.checked)).toBe(true); +}); + +it('click should climb dom for inner label with pointer-events:none', async ({ page }) => { + await page.setContent(''); + await page.click('text=Click target'); + expect(await page.evaluate('__CLICKED')).toBe(true); +}); + +it('click should climb up to [role=button]', async ({ page }) => { + await page.setContent('
Click target
'); + await page.click('text=Click target'); + expect(await page.evaluate('__CLICKED')).toBe(true); +}); + +it('click should climb up to a anchor', async ({ page }) => { + // For Firefox its not allowed to return anything: https://bugzilla.mozilla.org/show_bug.cgi?id=1392046 + // Note the intermediate div - it is necessary, otherwise is not recognized as a clickable link. + await page.setContent(`
Inner
`); + await page.click('#inner'); + expect(await page.evaluate('__CLICKED')).toBe(true); +}); + +it('click should climb up to a [role=link]', async ({ page }) => { + await page.setContent(`
Inner
`); + await page.click('#inner'); + expect(await page.evaluate('__CLICKED')).toBe(true); +}); + + +it('should fill input with label', async ({ page }) => { + await page.setContent(``); + await page.fill('text=Fill me', 'some value'); + expect(await page.$eval('input', input => input.value)).toBe('some value'); +}); + +it('should fill input with label 2', async ({ page }) => { + await page.setContent(``); + await page.fill('text=Fill me', 'some value'); + expect(await page.$eval('input', input => input.value)).toBe('some value'); +}); + +it('should fill input with span inside the label', async ({ page }) => { + await page.setContent(``); + await page.fill('text=Fill me', 'some value'); + expect(await page.$eval('input', input => input.value)).toBe('some value'); +}); + +it('should fill input inside the label', async ({ page }) => { + await page.setContent(``); + await page.fill('input', 'some value'); + expect(await page.$eval('input', input => input.value)).toBe('some value'); +}); + +it('should fill textarea with label', async ({ page }) => { + await page.setContent(``); + await page.fill('text=Fill me', 'some value'); + expect(await page.$eval('textarea', textarea => textarea.value)).toBe('some value'); +}); + +it('should selectOption with sibling label', async ({ page, server }) => { + await page.setContent(` + `); + await page.selectOption('text=Choose a pet', 'cat'); + expect(await page.$eval('select', select => select.options[select.selectedIndex].text)).toEqual('Cat'); +}); + +it('should selectOption with outer label', async ({ page, server }) => { + await page.setContent(``); + await page.selectOption('text=Choose a pet', 'cat'); + expect(await page.$eval('select', select => select.options[select.selectedIndex].text)).toEqual('Cat'); +}); + +it('setInputFiles should work with label', async ({ page, asset }) => { + await page.setContent(``); + await page.setInputFiles('text=Choose a file', asset('file-to-upload.txt')); + expect(await page.$eval('input', input => input.files.length)).toBe(1); + expect(await page.$eval('input', input => input.files[0].name)).toBe('file-to-upload.txt'); +});