diff --git a/test/accessibility.spec.js b/test/accessibility.spec.ts similarity index 99% rename from test/accessibility.spec.js rename to test/accessibility.spec.ts index 858359aa00..6e8a3ff316 100644 --- a/test/accessibility.spec.js +++ b/test/accessibility.spec.ts @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -require('./base.fixture'); +import './base.fixture'; const {FFOX, CHROMIUM, WEBKIT} = testOptions; diff --git a/test/assets/shadow.html b/test/assets/shadow.html index 7242e673b5..d1fd331eb2 100644 --- a/test/assets/shadow.html +++ b/test/assets/shadow.html @@ -1,7 +1,7 @@ '); + await page.goto('data:text/html,'); expect(await page.evaluate(() => window['result'])).toBe(42); }); diff --git a/test/elementhandle-bounding-box.spec.js b/test/elementhandle-bounding-box.spec.ts similarity index 97% rename from test/elementhandle-bounding-box.spec.js rename to test/elementhandle-bounding-box.spec.ts index e71b7c1e78..6d2567b249 100644 --- a/test/elementhandle-bounding-box.spec.js +++ b/test/elementhandle-bounding-box.spec.ts @@ -14,9 +14,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -require('./base.fixture'); +import './base.fixture'; -const utils = require('./utils'); +import utils from './utils'; const { FFOX, HEADLESS } = testOptions; it.fail(FFOX && !HEADLESS)('should work', async ({ page, server }) => { @@ -67,7 +67,7 @@ it('should work with SVG nodes', async ({ page, server }) => { }); it.skip(FFOX)('should work with page scale', async ({ browser, server }) => { - const context = await browser.newContext({ viewport: { width: 400, height: 400, isMobile: true } }); + const context = await browser.newContext({ viewport: { width: 400, height: 400 }, isMobile: true }); const page = await context.newPage(); await page.goto(server.PREFIX + '/input/button.html'); const button = await page.$('button'); diff --git a/test/elementhandle-click.spec.js b/test/elementhandle-click.spec.ts similarity index 87% rename from test/elementhandle-click.spec.js rename to test/elementhandle-click.spec.ts index eb854a6e90..38bca7874f 100644 --- a/test/elementhandle-click.spec.js +++ b/test/elementhandle-click.spec.ts @@ -14,16 +14,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -require('./base.fixture'); +import './base.fixture'; -const utils = require('./utils'); +import utils from './utils'; const { FFOX, HEADLESS } = testOptions; it('should work', async ({ page, server }) => { await page.goto(server.PREFIX + '/input/button.html'); const button = await page.$('button'); await button.click(); - expect(await page.evaluate(() => result)).toBe('Clicked'); + expect(await page.evaluate(() => window['result'])).toBe('Clicked'); }); it('should work with Node removed', async ({ page, server }) => { @@ -31,21 +31,21 @@ it('should work with Node removed', async ({ page, server }) => { await page.evaluate(() => delete window['Node']); const button = await page.$('button'); await button.click(); - expect(await page.evaluate(() => result)).toBe('Clicked'); + expect(await page.evaluate(() => window['result'])).toBe('Clicked'); }); it('should work for Shadow DOM v1', async ({ page, server }) => { await page.goto(server.PREFIX + '/shadow.html'); - const buttonHandle = await page.evaluateHandle(() => button); + const buttonHandle = await page.evaluateHandle(() => window['button'] as HTMLButtonElement); await buttonHandle.click(); - expect(await page.evaluate(() => clicked)).toBe(true); + expect(await page.evaluate('clicked')).toBe(true); }); it('should work for TextNodes', async ({ page, server }) => { await page.goto(server.PREFIX + '/input/button.html'); const buttonTextNode = await page.evaluateHandle(() => document.querySelector('button').firstChild); await buttonTextNode.click(); - expect(await page.evaluate(() => result)).toBe('Clicked'); + expect(await page.evaluate(() => window['result'])).toBe('Clicked'); }); it('should throw for detached nodes', async ({ page, server }) => { @@ -83,10 +83,10 @@ it('should throw for
elements with force', async ({ page, server }) => { it('should double click the button', async ({ page, server }) => { await page.goto(server.PREFIX + '/input/button.html'); await page.evaluate(() => { - window.double = false; + window['double'] = false; const button = document.querySelector('button'); button.addEventListener('dblclick', event => { - window.double = true; + window['double'] = true; }); }); const button = await page.$('button'); diff --git a/test/elementhandle-content-frame.spec.js b/test/elementhandle-content-frame.spec.ts similarity index 97% rename from test/elementhandle-content-frame.spec.js rename to test/elementhandle-content-frame.spec.ts index 9ad8f1096d..8642d22eed 100644 --- a/test/elementhandle-content-frame.spec.js +++ b/test/elementhandle-content-frame.spec.ts @@ -14,9 +14,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -require('./base.fixture'); +import './base.fixture'; -const utils = require('./utils'); +import utils from './utils'; const { FFOX, HEADLESS } = testOptions; it('should work', async ({ page, server }) => { diff --git a/test/elementhandle-convenience.spec.js b/test/elementhandle-convenience.spec.ts similarity index 90% rename from test/elementhandle-convenience.spec.js rename to test/elementhandle-convenience.spec.ts index 091a651123..2e20d5d08d 100644 --- a/test/elementhandle-convenience.spec.js +++ b/test/elementhandle-convenience.spec.ts @@ -14,9 +14,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -require('./base.fixture'); +import './base.fixture'; -const utils = require('./utils'); +import utils from './utils'; const { FFOX, HEADLESS } = testOptions; it('should have a nice preview', async ({ page, server }) => { @@ -80,10 +80,10 @@ it('textContent should be atomic', async ({ playwright, page }) => { Promise.resolve().then(() => result.textContent = 'modified'); return result; }, - queryAll(root, selector) { + queryAll(root: HTMLElement, selector: string) { const result = Array.from(root.querySelectorAll(selector)); for (const e of result) - Promise.resolve().then(() => result.textContent = 'modified'); + Promise.resolve().then(() => e.textContent = 'modified'); return result; } }); @@ -97,16 +97,16 @@ it('textContent should be atomic', async ({ playwright, page }) => { it('innerText should be atomic', async ({ playwright, page }) => { const createDummySelector = () => ({ create(root, target) { }, - query(root, selector) { + query(root: HTMLElement, selector: string) { const result = root.querySelector(selector); if (result) Promise.resolve().then(() => result.textContent = 'modified'); return result; }, - queryAll(root, selector) { + queryAll(root: HTMLElement, selector: string) { const result = Array.from(root.querySelectorAll(selector)); for (const e of result) - Promise.resolve().then(() => result.textContent = 'modified'); + Promise.resolve().then(() => e.textContent = 'modified'); return result; } }); @@ -126,10 +126,10 @@ it('innerHTML should be atomic', async ({ playwright, page }) => { Promise.resolve().then(() => result.textContent = 'modified'); return result; }, - queryAll(root, selector) { + queryAll(root: HTMLElement, selector: string) { const result = Array.from(root.querySelectorAll(selector)); for (const e of result) - Promise.resolve().then(() => result.textContent = 'modified'); + Promise.resolve().then(() => e.textContent = 'modified'); return result; } }); @@ -143,16 +143,16 @@ it('innerHTML should be atomic', async ({ playwright, page }) => { it('getAttribute should be atomic', async ({ playwright, page }) => { const createDummySelector = () => ({ create(root, target) { }, - query(root, selector) { + query(root: HTMLElement, selector: string) { const result = root.querySelector(selector); if (result) Promise.resolve().then(() => result.setAttribute('foo', 'modified')); return result; }, - queryAll(root, selector) { + queryAll(root: HTMLElement, selector: string) { const result = Array.from(root.querySelectorAll(selector)); for (const e of result) - Promise.resolve().then(() => result.setAttribute('foo', 'modified')); + Promise.resolve().then(() => (e as HTMLElement).setAttribute('foo', 'modified')); return result; } }); diff --git a/test/elementhandle-eval-on-selector.spec.js b/test/elementhandle-eval-on-selector.spec.ts similarity index 85% rename from test/elementhandle-eval-on-selector.spec.js rename to test/elementhandle-eval-on-selector.spec.ts index 4884548502..5d8c72315f 100644 --- a/test/elementhandle-eval-on-selector.spec.js +++ b/test/elementhandle-eval-on-selector.spec.ts @@ -14,16 +14,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -require('./base.fixture'); +import './base.fixture'; -const path = require('path'); -const utils = require('./utils'); +import path from 'path'; +import utils from './utils'; const {FFOX, CHROMIUM, WEBKIT, CHANNEL, USES_HOOKS} = testOptions; it('should work', async({page, server}) => { await page.setContent('
100
10
'); const tweet = await page.$('.tweet'); - const content = await tweet.$eval('.like', node => node.innerText); + const content = await tweet.$eval('.like', node => (node as HTMLElement).innerText); expect(content).toBe('100'); }); @@ -31,7 +31,7 @@ it('should retrieve content from subtree', async({page, server}) => { const htmlContent = '
not-a-child-div
a-child-div
'; await page.setContent(htmlContent); const elementHandle = await page.$('#myId'); - const content = await elementHandle.$eval('.a', node => node.innerText); + const content = await elementHandle.$eval('.a', node => (node as HTMLElement).innerText); expect(content).toBe('a-child-div'); }); @@ -39,14 +39,14 @@ it('should throw in case of missing selector', async({page, server}) => { const htmlContent = '
not-a-child-div
'; await page.setContent(htmlContent); const elementHandle = await page.$('#myId'); - const errorMessage = await elementHandle.$eval('.a', node => node.innerText).catch(error => error.message); + const errorMessage = await elementHandle.$eval('.a', node => (node as HTMLElement).innerText).catch(error => error.message); expect(errorMessage).toContain(`Error: failed to find element matching selector ".a"`); }); it('should work for all', async({page, server}) => { await page.setContent('
100
10
'); const tweet = await page.$('.tweet'); - const content = await tweet.$$eval('.like', nodes => nodes.map(n => n.innerText)); + const content = await tweet.$$eval('.like', nodes => nodes.map(n => (n as HTMLElement).innerText)); expect(content).toEqual(['100', '10']); }); @@ -54,7 +54,7 @@ it('should retrieve content from subtree for all', async({page, server}) => { const htmlContent = '
not-a-child-div
a1-child-div
a2-child-div
'; await page.setContent(htmlContent); const elementHandle = await page.$('#myId'); - const content = await elementHandle.$$eval('.a', nodes => nodes.map(n => n.innerText)); + const content = await elementHandle.$$eval('.a', nodes => nodes.map(n => (n as HTMLElement).innerText)); expect(content).toEqual(['a1-child-div', 'a2-child-div']); }); diff --git a/test/elementhandle-misc.spec.js b/test/elementhandle-misc.spec.ts similarity index 84% rename from test/elementhandle-misc.spec.js rename to test/elementhandle-misc.spec.ts index 3bdb607ced..5cf08e8471 100644 --- a/test/elementhandle-misc.spec.js +++ b/test/elementhandle-misc.spec.ts @@ -14,9 +14,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -require('./base.fixture'); +import './base.fixture'; -const utils = require('./utils'); +import utils from './utils'; const { FFOX, HEADLESS } = testOptions; it('should hover', async ({ page, server }) => { @@ -38,7 +38,7 @@ it('should fill input', async ({ page, server }) => { await page.goto(server.PREFIX + '/input/textarea.html'); const handle = await page.$('input'); await handle.fill('some value'); - expect(await page.evaluate(() => result)).toBe('some value'); + expect(await page.evaluate(() => window['result'])).toBe('some value'); }); it('should fill input when Node is removed', async ({ page, server }) => { @@ -46,29 +46,29 @@ it('should fill input when Node is removed', async ({ page, server }) => { await page.evaluate(() => delete window['Node']); const handle = await page.$('input'); await handle.fill('some value'); - expect(await page.evaluate(() => result)).toBe('some value'); + expect(await page.evaluate(() => window['result'])).toBe('some value'); }); it('should check the box', async ({ page }) => { await page.setContent(``); const input = await page.$('input'); await input.check(); - expect(await page.evaluate(() => checkbox.checked)).toBe(true); + expect(await page.evaluate('checkbox.checked')).toBe(true); }); it('should uncheck the box', async ({ page }) => { await page.setContent(``); const input = await page.$('input'); await input.uncheck(); - expect(await page.evaluate(() => checkbox.checked)).toBe(false); + expect(await page.evaluate('checkbox.checked')).toBe(false); }); it('should select single option', async ({ page, server }) => { await page.goto(server.PREFIX + '/input/select.html'); const select = await page.$('select'); await select.selectOption('blue'); - expect(await page.evaluate(() => result.onInput)).toEqual(['blue']); - expect(await page.evaluate(() => result.onChange)).toEqual(['blue']); + expect(await page.evaluate(() => window['result'].onInput)).toEqual(['blue']); + expect(await page.evaluate(() => window['result'].onChange)).toEqual(['blue']); }); it('should focus a button', async ({ page, server }) => { diff --git a/test/elementhandle-owner-frame.spec.js b/test/elementhandle-owner-frame.spec.ts similarity index 93% rename from test/elementhandle-owner-frame.spec.js rename to test/elementhandle-owner-frame.spec.ts index 101e3a9d48..6539951a74 100644 --- a/test/elementhandle-owner-frame.spec.js +++ b/test/elementhandle-owner-frame.spec.ts @@ -14,9 +14,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -require('./base.fixture'); +import './base.fixture'; -const utils = require('./utils'); +import utils from './utils'; const { FFOX, HEADLESS } = testOptions; it('should work', async ({ page, server }) => { @@ -55,7 +55,7 @@ it('should work for cross-frame evaluations', async ({ page, server }) => { await page.goto(server.EMPTY_PAGE); await utils.attachFrame(page, 'frame1', server.EMPTY_PAGE); const frame = page.mainFrame(); - const elementHandle = await frame.evaluateHandle(() => document.querySelector('#frame1').contentWindow.document.body); + const elementHandle = await frame.evaluateHandle(() => document.querySelector('iframe').contentWindow.document.body); expect(await elementHandle.ownerFrame()).toBe(frame.childFrames()[0]); }); @@ -78,7 +78,7 @@ it('should work for adopted elements', async ({ page, server }) => { await page.goto(server.EMPTY_PAGE); const [popup] = await Promise.all([ page.waitForEvent('popup'), - page.evaluate(url => window.__popup = window.open(url), server.EMPTY_PAGE), + page.evaluate(url => window["__popup"] = window.open(url), server.EMPTY_PAGE), ]); const divHandle = await page.evaluateHandle(() => { const div = document.createElement('div'); @@ -89,7 +89,7 @@ it('should work for adopted elements', async ({ page, server }) => { await popup.waitForLoadState('domcontentloaded'); await page.evaluate(() => { const div = document.querySelector('div'); - window.__popup.document.body.appendChild(div); + window["__popup"].document.body.appendChild(div); }); expect(await divHandle.ownerFrame()).toBe(popup.mainFrame()); }); diff --git a/test/elementhandle-press.spec.js b/test/elementhandle-press.spec.ts similarity index 97% rename from test/elementhandle-press.spec.js rename to test/elementhandle-press.spec.ts index 184e8d001c..6478190501 100644 --- a/test/elementhandle-press.spec.js +++ b/test/elementhandle-press.spec.ts @@ -14,9 +14,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -require('./base.fixture'); +import './base.fixture'; -const utils = require('./utils'); +import utils from './utils'; const { FFOX, HEADLESS } = testOptions; it('should work', async ({ page }) => { diff --git a/test/elementhandle-query-selector.spec.js b/test/elementhandle-query-selector.spec.ts similarity index 94% rename from test/elementhandle-query-selector.spec.js rename to test/elementhandle-query-selector.spec.ts index 55686fb364..9b1d2b1b5e 100644 --- a/test/elementhandle-query-selector.spec.js +++ b/test/elementhandle-query-selector.spec.ts @@ -14,10 +14,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -require('./base.fixture'); +import './base.fixture'; -const path = require('path'); -const utils = require('./utils'); +import path from 'path'; +import utils from './utils'; const {FFOX, CHROMIUM, WEBKIT, CHANNEL, USES_HOOKS} = testOptions; it('should query existing element', async({page, server}) => { @@ -41,7 +41,7 @@ it('should work for adopted elements', async({page,server}) => { await page.goto(server.EMPTY_PAGE); const [popup] = await Promise.all([ page.waitForEvent('popup'), - page.evaluate(url => window.__popup = window.open(url), server.EMPTY_PAGE), + page.evaluate(url => window["__popup"] = window.open(url), server.EMPTY_PAGE), ]); const divHandle = await page.evaluateHandle(() => { const div = document.createElement('div'); @@ -57,7 +57,7 @@ it('should work for adopted elements', async({page,server}) => { await popup.waitForLoadState('domcontentloaded'); await page.evaluate(() => { const div = document.querySelector('div'); - window.__popup.document.body.appendChild(div); + window["__popup"].document.body.appendChild(div); }); expect(await divHandle.$('span')).toBeTruthy(); expect(await divHandle.$eval('span', e => e.textContent)).toBe('hello'); diff --git a/test/elementhandle-screenshot.spec.js b/test/elementhandle-screenshot.spec.ts similarity index 98% rename from test/elementhandle-screenshot.spec.js rename to test/elementhandle-screenshot.spec.ts index 67b36971ca..61f9e291b6 100644 --- a/test/elementhandle-screenshot.spec.js +++ b/test/elementhandle-screenshot.spec.ts @@ -14,11 +14,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -require('./base.fixture'); +import './base.fixture'; -const utils = require('./utils'); +import utils from './utils'; const {FFOX, CHROMIUM, WEBKIT, USES_HOOKS, HEADLESS} = testOptions; -const {PNG} = require('pngjs'); +import {PNG} from 'pngjs'; // Firefox headful produces a different image. const ffheadful = FFOX && !HEADLESS; @@ -210,7 +210,7 @@ it.skip(ffheadful)('should work for an element with fractional dimensions', asyn }); it.skip(FFOX)('should work with a mobile viewport', async({browser, server}) => { - const context = await browser.newContext({viewport: { width: 320, height: 480, isMobile: true }}); + const context = await browser.newContext({viewport: { width: 320, height: 480 }, isMobile: true}); const page = await context.newPage(); await page.goto(server.PREFIX + '/grid.html'); await page.evaluate(() => window.scrollBy(50, 100)); @@ -288,7 +288,7 @@ it.skip(ffheadful || USES_HOOKS)('should restore viewport after page screenshot const page = await context.newPage(); await page.goto(server.PREFIX + '/grid.html'); const __testHookBeforeScreenshot = () => { throw new Error('oh my') }; - const error = await page.screenshot({ fullPage: true, __testHookBeforeScreenshot }).catch(e => e); + const error = await page.screenshot({ fullPage: true, __testHookBeforeScreenshot } as any).catch(e => e); expect(error.message).toContain('oh my'); await utils.verifyViewport(page, 350, 360); await context.close(); @@ -299,7 +299,7 @@ it.skip(ffheadful || USES_HOOKS)('should restore viewport after page screenshot const page = await context.newPage(); await page.goto(server.PREFIX + '/grid.html'); const __testHookAfterScreenshot = () => new Promise(f => setTimeout(f, 5000)); - const error = await page.screenshot({ fullPage: true, __testHookAfterScreenshot, timeout: 3000 }).catch(e => e); + const error = await page.screenshot({ fullPage: true, __testHookAfterScreenshot, timeout: 3000 } as any).catch(e => e); expect(error.message).toContain('page.screenshot: Timeout 3000ms exceeded'); await utils.verifyViewport(page, 350, 360); await page.setViewportSize({ width: 400, height: 400 }); @@ -310,7 +310,7 @@ it.skip(ffheadful || USES_HOOKS)('should restore viewport after page screenshot it.skip(ffheadful)('should take element screenshot when default viewport is null and restore back', async({server, browser}) => { const context = await browser.newContext({viewport: null}); - const page = await context.newPage({ viewport: null }); + const page = await context.newPage(); await page.setContent(`
oooo