/** * 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 type { Page } from 'playwright-core'; import { test as it, expect } from './inspectorTest'; import { waitForTestLog } from '../../config/utils'; it('should resume when closing inspector', async ({ page, recorderPageGetter, closeRecorder, mode }) => { it.skip(mode !== 'default'); const scriptPromise = (async () => { await page.pause(); })(); await recorderPageGetter(); await closeRecorder(); await scriptPromise; }); it.describe('pause', () => { it.skip(({ mode }) => mode !== 'default'); it.afterEach(async ({ recorderPageGetter }, testInfo) => { if (testInfo.status === 'skipped') return; try { const recorderPage = await recorderPageGetter(); recorderPage.click('[title="Resume (F8)"]').catch(() => {}); } catch (e) { // Some tests close context. } }); it('should pause and resume the script', async ({ page, recorderPageGetter }) => { const scriptPromise = (async () => { await page.pause(); })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should pause and resume the script with keyboard shortcut', async ({ page, recorderPageGetter }) => { const scriptPromise = (async () => { await page.pause(); })(); const recorderPage = await recorderPageGetter(); await recorderPage.keyboard.press('F8'); await scriptPromise; }); it('should resume from console', async ({ page }) => { const scriptPromise = (async () => { await page.pause(); })(); await Promise.all([ page.waitForFunction(() => (window as any).playwright && (window as any).playwright.resume).then(() => { return page.evaluate('window.playwright.resume()'); }) ]); await scriptPromise; }); it('should pause after a navigation', async ({ page, server, recorderPageGetter }) => { const scriptPromise = (async () => { await page.goto(server.EMPTY_PAGE); await page.pause(); })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should show source', async ({ page, recorderPageGetter }) => { const scriptPromise = (async () => { await page.pause(); })(); const recorderPage = await recorderPageGetter(); const source = await recorderPage.textContent('.source-line-paused .source-code'); expect(source).toContain('page.pause()'); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should pause on next pause', async ({ page, recorderPageGetter }) => { const scriptPromise = (async () => { await page.pause(); // 1 await page.pause(); // 2 })(); const recorderPage = await recorderPageGetter(); const source = await recorderPage.textContent('.source-line-paused'); expect(source).toContain('page.pause(); // 1'); await recorderPage.click('[title="Resume (F8)"]'); await recorderPage.waitForSelector('.source-line-paused:has-text("page.pause(); // 2")'); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should step', async ({ page, recorderPageGetter }) => { await page.setContent(''); const scriptPromise = (async () => { await page.pause(); await page.click('button'); })(); const recorderPage = await recorderPageGetter(); const source = await recorderPage.textContent('.source-line-paused'); expect(source).toContain('page.pause();'); await recorderPage.click('[title="Step over (F10)"]'); await recorderPage.waitForSelector('.source-line-paused :has-text("page.click")'); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should step with keyboard shortcut', async ({ page, recorderPageGetter }) => { await page.setContent(''); const scriptPromise = (async () => { await page.pause(); await page.click('button'); })(); const recorderPage = await recorderPageGetter(); const source = await recorderPage.textContent('.source-line-paused'); expect(source).toContain('page.pause();'); await recorderPage.keyboard.press('F10'); await recorderPage.waitForSelector('.source-line-paused :has-text("page.click")'); await recorderPage.isEnabled('[title="Resume (F8)"]'); await recorderPage.keyboard.press('F8'); await scriptPromise; }); it('should highlight pointer', async ({ page, recorderPageGetter }) => { const actionPointPromise = waitForTestLog<{ x: number, y: number }>(page, 'Action point for test: '); await page.setContent(''); const scriptPromise = (async () => { await page.pause(); await page.click('button'); })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Step over (F10)"]'); const { x, y } = await actionPointPromise; const button = await page.waitForSelector('button'); const box1 = await button.boundingBox(); const x1 = box1.x + box1.width / 2; const y1 = box1.y + box1.height / 2; expect(Math.abs(x1 - x) < 2).toBeTruthy(); expect(Math.abs(y1 - y) < 2).toBeTruthy(); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should skip input when resuming', async ({ page, recorderPageGetter }) => { await page.setContent(''); const scriptPromise = (async () => { await page.pause(); await page.click('button'); await page.pause(); // 2 })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Resume (F8)"]'); await recorderPage.waitForSelector('.source-line-paused:has-text("page.pause(); // 2")'); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should populate log', async ({ page, recorderPageGetter }) => { await page.setContent(''); const scriptPromise = (async () => { await page.pause(); await page.click('button'); await page.pause(); // 2 })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Resume (F8)"]'); await recorderPage.waitForSelector('.source-line-paused:has-text("page.pause(); // 2")'); expect(await sanitizeLog(recorderPage)).toEqual([ 'page.pause- XXms', 'page.click(page.locator(\'button\'))- XXms', 'page.pause', ]); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should hide internal calls', async ({ page, recorderPageGetter, trace }) => { it.skip(trace === 'on'); const scriptPromise = (async () => { await page.pause(); await page.context().tracing.start(); page.setDefaultTimeout(0); page.context().setDefaultNavigationTimeout(0); await page.context().tracing.stop(); await page.pause(); // 2 })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Resume (F8)"]'); await recorderPage.waitForSelector('.source-line-paused:has-text("page.pause(); // 2")'); expect(await sanitizeLog(recorderPage)).toEqual([ 'page.pause- XXms', 'tracing.start- XXms', 'tracing.stop- XXms', 'page.pause', ]); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should show expect.toHaveText', async ({ page, recorderPageGetter }) => { await page.setContent(''); const scriptPromise = (async () => { await page.pause(); await expect(page.locator('button')).toHaveText('Submit'); await page.pause(); // 2 })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Resume (F8)"]'); await recorderPage.waitForSelector('.source-line-paused:has-text("page.pause(); // 2")'); expect(await sanitizeLog(recorderPage)).toEqual([ 'page.pause- XXms', 'expect(page.locator(\'button\')).toHaveText()- XXms', 'page.pause', ]); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should highlight waitForEvent', async ({ page, recorderPageGetter }) => { await page.setContent(''); const scriptPromise = (async () => { await page.pause(); await Promise.all([ page.waitForEvent('console', msg => msg.type() === 'log' && msg.text() === '1'), page.click('button'), ]); })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Step over (F10)"]'); await recorderPage.waitForSelector('.source-line-paused:has-text("page.click")'); await recorderPage.waitForSelector('.source-line-running:has-text("page.waitForEvent")'); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should populate log with waitForEvent', async ({ page, recorderPageGetter }) => { await page.setContent(''); const scriptPromise = (async () => { await page.pause(); await Promise.all([ page.waitForEvent('console'), page.getByRole('button', { name: 'Submit' }).click(), ]); await page.pause(); // 2 })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Resume (F8)"]'); await recorderPage.waitForSelector('.source-line-paused:has-text("page.pause(); // 2")'); expect(await sanitizeLog(recorderPage)).toEqual([ 'page.pause- XXms', 'page.waitForEvent(console)', 'page.getByRole(\'button\', { name: \'Submit\' }).click()- XXms', 'page.pause', ]); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should populate log with error', async ({ page, recorderPageGetter }) => { await page.setContent(''); const scriptPromise = (async () => { await page.pause(); await page.getByRole('button').isChecked(); })().catch(e => e); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Resume (F8)"]'); await recorderPage.waitForSelector('.source-line-error'); expect(await sanitizeLog(recorderPage)).toEqual([ 'page.pause- XXms', 'page.getByRole(\'button\').isChecked()- XXms', 'waiting for \"getByRole(\'button\')"', 'selector resolved to ', 'error: Error: Not a checkbox or radio button', ]); const error = await scriptPromise; expect(error.message).toContain('Not a checkbox or radio button'); }); it('should populate log with error in waitForEvent', async ({ page, recorderPageGetter }) => { await page.setContent(''); const scriptPromise = (async () => { await page.pause(); await Promise.all([ page.waitForEvent('console', { timeout: 1 }).catch(() => {}), page.pause(), ]); })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Step over (F10)"]'); await recorderPage.waitForSelector('.source-line-paused:has-text("page.pause")'); await recorderPage.waitForSelector('.source-line-error:has-text("page.waitForEvent")'); expect(await sanitizeLog(recorderPage)).toEqual([ 'page.pause- XXms', 'page.waitForEvent(console)', 'waiting for event \"console\"', 'error: Timeout 1ms exceeded while waiting for event \"console\"', 'page.pause', ]); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should pause on page close', async ({ page, recorderPageGetter }) => { const scriptPromise = (async () => { await page.pause(); await page.close(); })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Step over (F10)"]'); await recorderPage.waitForSelector('.source-line-paused:has-text("page.close();")'); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should pause on context close', async ({ page, recorderPageGetter }) => { const scriptPromise = (async () => { await page.pause(); await page.context().close(); })(); const recorderPage = await recorderPageGetter(); await recorderPage.click('[title="Step over (F10)"]'); await recorderPage.waitForSelector('.source-line-paused:has-text("page.context().close();")'); // Next line can throw because closing context also closes the inspector page. await recorderPage.click('[title="Resume (F8)"]').catch(e => {}); await scriptPromise; }); it('should highlight on explore', async ({ page, recorderPageGetter }) => { await page.setContent(''); const scriptPromise = (async () => { await page.pause(); })(); const recorderPage = await recorderPageGetter(); const [box1] = await Promise.all([ waitForTestLog(page, 'Highlight box for test: '), recorderPage.fill('input[placeholder="Playwright Selector"]', 'text=Submit'), ]); const button = await page.$('text=Submit'); const box2 = await button.boundingBox(); expect(roundBox(box1)).toEqual(roundBox(box2)); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; }); it('should not prevent key events', async ({ page, recorderPageGetter }) => { await page.setContent('
Hello
'); await page.evaluate(() => { (window as any).log = []; for (const event of ['keydown', 'keyup', 'keypress']) window.addEventListener(event, e => (window as any).log.push(e.type)); }); const scriptPromise = (async () => { await page.pause(); await page.keyboard.press('Enter'); await page.keyboard.press('A'); await page.keyboard.press('Shift+A'); })(); const recorderPage = await recorderPageGetter(); await recorderPage.waitForSelector(`.source-line-paused:has-text("page.pause")`); await recorderPage.click('[title="Step over (F10)"]'); await recorderPage.waitForSelector(`.source-line-paused:has-text("press('Enter')")`); await recorderPage.click('[title="Step over (F10)"]'); await recorderPage.waitForSelector(`.source-line-paused:has-text("press('A')")`); await recorderPage.click('[title="Step over (F10)"]'); await recorderPage.waitForSelector(`.source-line-paused:has-text("press('Shift+A')")`); await recorderPage.click('[title="Resume (F8)"]'); await scriptPromise; const log = await page.evaluate(() => (window as any).log); expect(log).toEqual([ 'keydown', 'keypress', 'keyup', 'keydown', 'keypress', 'keyup', 'keydown', 'keydown', 'keypress', 'keyup', 'keyup', ]); }); }); async function sanitizeLog(recorderPage: Page): Promise { const results = []; for (const entry of await recorderPage.$$('.call-log-call')) { const header = (await (await entry.$('.call-log-call-header')).textContent()).replace(/— [\d.]+(ms|s)/, '- XXms'); results.push(header.replace(/page\.waitForEvent\(console\).*/, 'page.waitForEvent(console)')); results.push(...await entry.$$eval('.call-log-message', ee => ee.map(e => { return (e.classList.contains('error') ? 'error: ' : '') + e.textContent; }))); } return results; } type Box = { x: number, y: number, width: number, height: number }; function roundBox(box: Box): Box { return { x: Math.round(box.x * 1000), y: Math.round(box.y * 1000), width: Math.round(box.width * 1000), height: Math.round(box.height * 1000), }; }