2021-06-30 13:35:50 +08:00
/ * *
* 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 .
* /
2024-11-05 20:45:54 +08:00
// DO NOT TOUCH THIS LINE
// It is used in the tracing.group test.
2022-04-07 05:57:14 +08:00
import type { TraceViewerFixtures } from '../config/traceViewerFixtures' ;
import { traceViewerFixtures } from '../config/traceViewerFixtures' ;
2021-11-09 10:03:10 +08:00
import fs from 'fs' ;
2021-06-30 13:35:50 +08:00
import path from 'path' ;
2025-07-19 01:56:49 +08:00
import type http from 'http' ;
2024-06-10 17:44:52 +08:00
import { pathToFileURL } from 'url' ;
2022-04-06 07:10:12 +08:00
import { expect , playwrightTest } from '../config/browserTest' ;
2023-06-09 22:18:13 +08:00
import type { FrameLocator } from '@playwright/test' ;
2025-01-12 02:14:21 +08:00
import { rafraf , roundBox } from 'tests/page/pageTest' ;
2021-06-30 13:35:50 +08:00
2022-04-06 07:10:12 +08:00
const test = playwrightTest . extend < TraceViewerFixtures > ( traceViewerFixtures ) ;
2021-06-30 13:35:50 +08:00
2021-10-27 04:45:53 +08:00
test . skip ( ( { trace } ) = > trace === 'on' ) ;
2023-08-05 05:59:48 +08:00
test . skip ( ( { mode } ) = > mode . startsWith ( 'service' ) ) ;
2021-12-23 03:17:43 +08:00
test . slow ( ) ;
2021-10-14 10:32:23 +08:00
2021-06-30 13:35:50 +08:00
let traceFile : string ;
2021-09-08 06:23:13 +08:00
test . beforeAll ( async function recordTrace ( { browser , browserName , browserType , server } , workerInfo ) {
2024-07-25 23:14:46 +08:00
const context = await browser . newContext ( {
baseURL : 'https://example.com' ,
} ) ;
2021-11-02 10:57:29 +08:00
await context . tracing . start ( { name : 'test' , screenshots : true , snapshots : true , sources : true } ) ;
2021-06-30 13:35:50 +08:00
const page = await context . newPage ( ) ;
2025-06-16 23:27:38 +08:00
await page . goto ( ` data:text/html,<!DOCTYPE html><html><title>Hello</title><body>Hello world</body></html> ` ) ;
await expect ( page ) . toHaveTitle ( 'Hello' ) ;
await expect ( page ) . toHaveURL ( 'data:text/html,<!DOCTYPE html><html><title>Hello</title><body>Hello world</body></html>' ) ;
2023-07-11 03:56:56 +08:00
await page . setContent ( '<!DOCTYPE html><button>Click</button>' ) ;
2021-09-29 07:02:34 +08:00
await expect ( page . locator ( 'button' ) ) . toHaveText ( 'Click' ) ;
2023-05-30 23:45:48 +08:00
await expect ( page . getByTestId ( 'amazing-btn' ) ) . toBeHidden ( ) ;
await expect ( page . getByTestId ( /amazing-btn-regex/ ) ) . toBeHidden ( ) ;
2021-07-03 07:45:09 +08:00
await page . evaluate ( ( { a } ) = > {
2021-07-02 05:31:20 +08:00
console . log ( 'Info' ) ;
console . warn ( 'Warning' ) ;
console . error ( 'Error' ) ;
2021-09-01 12:49:08 +08:00
return new Promise ( f = > {
// Generate exception.
2025-03-25 21:49:28 +08:00
window . builtins . setTimeout ( ( ) = > {
2021-09-01 12:49:08 +08:00
// And then resolve.
2025-03-25 21:49:28 +08:00
window . builtins . setTimeout ( ( ) = > f ( 'return ' + a ) , 0 ) ;
2021-09-01 12:49:08 +08:00
throw new Error ( 'Unhandled exception' ) ;
} , 0 ) ;
} ) ;
2021-07-03 07:45:09 +08:00
} , { a : 'paramA' , b : 4 } ) ;
2021-08-17 08:06:38 +08:00
2022-02-18 05:12:42 +08:00
await page . evaluate ( ( ) = > 1 + 1 , null ) ;
2021-08-17 08:06:38 +08:00
async function doClick() {
2022-10-19 10:23:40 +08:00
await page . getByText ( 'Click' ) . click ( ) ;
2021-08-17 08:06:38 +08:00
}
await doClick ( ) ;
2021-07-01 08:56:48 +08:00
await Promise . all ( [
page . waitForNavigation ( ) ,
2022-09-09 02:31:02 +08:00
page . waitForResponse ( server . PREFIX + '/frames/frame.html' ) ,
2021-09-08 06:23:13 +08:00
page . waitForTimeout ( 200 ) . then ( ( ) = > page . goto ( server . PREFIX + '/frames/frame.html' ) )
2021-07-01 08:56:48 +08:00
] ) ;
2021-08-06 07:04:09 +08:00
await page . setViewportSize ( { width : 500 , height : 600 } ) ;
2021-08-17 08:06:38 +08:00
// Go through instrumentation to exercise reentrant stack traces.
2023-04-28 23:57:43 +08:00
const csi = {
2024-05-29 05:29:57 +08:00
runBeforeCloseBrowserContext : async ( ) = > {
2023-04-28 23:57:43 +08:00
await page . hover ( 'body' ) ;
await page . close ( ) ;
2024-09-17 21:32:30 +08:00
traceFile = path . join ( workerInfo . project . outputDir , String ( workerInfo . workerIndex ) , browserName , 'trace.zip' ) ;
2023-04-28 23:57:43 +08:00
await context . tracing . stop ( { path : traceFile } ) ;
}
2021-08-17 08:06:38 +08:00
} ;
2023-04-28 23:57:43 +08:00
( browserType as any ) . _instrumentation . addListener ( csi ) ;
2021-08-17 08:06:38 +08:00
await context . close ( ) ;
2023-04-28 23:57:43 +08:00
( browserType as any ) . _instrumentation . removeListener ( csi ) ;
2021-06-30 13:35:50 +08:00
} ) ;
test ( 'should show empty trace viewer' , async ( { showTraceViewer } , testInfo ) = > {
2022-02-08 09:05:42 +08:00
const traceViewer = await showTraceViewer ( [ testInfo . outputPath ( ) ] ) ;
2021-11-04 01:44:50 +08:00
await expect ( traceViewer . page ) . toHaveTitle ( 'Playwright Trace Viewer' ) ;
2021-06-30 13:35:50 +08:00
} ) ;
2022-09-28 03:45:42 +08:00
test ( 'should open two trace viewers' , async ( { showTraceViewer } , testInfo ) = > {
2023-01-28 06:20:25 +08:00
const port = testInfo . workerIndex + 48321 ;
const traceViewer1 = await showTraceViewer ( [ testInfo . outputPath ( ) ] , { host : 'localhost' , port } ) ;
2022-09-28 03:45:42 +08:00
await expect ( traceViewer1 . page ) . toHaveTitle ( 'Playwright Trace Viewer' ) ;
2023-01-28 06:20:25 +08:00
const traceViewer2 = await showTraceViewer ( [ testInfo . outputPath ( ) ] , { host : 'localhost' , port } ) ;
2022-09-28 03:45:42 +08:00
await expect ( traceViewer2 . page ) . toHaveTitle ( 'Playwright Trace Viewer' ) ;
} ) ;
2023-01-28 06:20:25 +08:00
test ( 'should open trace viewer on specific host' , async ( { showTraceViewer } , testInfo ) = > {
const traceViewer = await showTraceViewer ( [ testInfo . outputPath ( ) ] , { host : '127.0.0.1' } ) ;
await expect ( traceViewer . page ) . toHaveTitle ( 'Playwright Trace Viewer' ) ;
await expect ( traceViewer . page ) . toHaveURL ( /127.0.0.1/ ) ;
} ) ;
2024-11-05 20:45:54 +08:00
test ( 'should show tracing.group in the action list with location' , async ( { runAndTrace , page , context } ) = > {
2025-08-06 15:44:25 +08:00
test . info ( ) . annotations . push ( { type : 'issue' , description : 'https://github.com/microsoft/playwright/issues/36483' } ) ;
2024-11-05 19:45:37 +08:00
const traceViewer = await test . step ( 'create trace with groups' , async ( ) = > {
2024-11-05 20:45:54 +08:00
await page . context ( ) . tracing . group ( 'ignored group' ) ;
2024-11-05 19:45:37 +08:00
return await runAndTrace ( async ( ) = > {
2024-11-05 20:45:54 +08:00
await context . tracing . group ( 'outer group' ) ;
await page . goto ( ` data:text/html,<!DOCTYPE html><body><div>Hello world</div></body> ` ) ;
2025-08-06 15:44:25 +08:00
await context . tracing . group ( 'inner group 1 {{ eager_beaver }}' , { location : { file : __filename , line : 17 , column : 1 } } ) ;
2024-11-05 20:45:54 +08:00
await page . locator ( 'body' ) . click ( ) ;
await context . tracing . groupEnd ( ) ;
await context . tracing . group ( 'inner group 2' ) ;
await expect ( page . getByText ( 'Hello' ) ) . toBeVisible ( ) ;
await context . tracing . groupEnd ( ) ;
await context . tracing . groupEnd ( ) ;
2024-11-05 19:45:37 +08:00
} ) ;
} ) ;
2024-11-05 20:45:54 +08:00
await expect ( traceViewer . actionTitles ) . toHaveText ( [
/outer group/ ,
2025-05-23 00:49:37 +08:00
/Navigate/ ,
2025-08-06 15:44:25 +08:00
/inner group 1 {{ eager_beaver }}/ ,
2024-11-05 20:45:54 +08:00
/inner group 2/ ,
2025-05-24 07:03:50 +08:00
/toBeVisible/ ,
2024-11-05 20:45:54 +08:00
] ) ;
await traceViewer . selectAction ( 'inner group 1' ) ;
await traceViewer . expandAction ( 'inner group 1' ) ;
await expect ( traceViewer . actionTitles ) . toHaveText ( [
/outer group/ ,
2025-05-23 00:49:37 +08:00
/Navigate/ ,
2025-08-06 15:44:25 +08:00
/inner group 1 {{ eager_beaver }}/ ,
2025-05-23 00:49:37 +08:00
/Click.*locator/ ,
2024-11-05 20:45:54 +08:00
/inner group 2/ ,
] ) ;
await traceViewer . showSourceTab ( ) ;
await expect ( traceViewer . sourceCodeTab . locator ( '.source-line-running' ) ) . toHaveText ( /DO NOT TOUCH THIS LINE/ ) ;
await traceViewer . selectAction ( 'inner group 2' ) ;
await expect ( traceViewer . sourceCodeTab . locator ( '.source-line-running' ) ) . toContainText ( "await context.tracing.group('inner group 2');" ) ;
} ) ;
2024-11-05 19:45:37 +08:00
2021-06-30 13:35:50 +08:00
test ( 'should open simple trace viewer' , async ( { showTraceViewer } ) = > {
2022-02-08 09:05:42 +08:00
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2021-09-04 03:34:47 +08:00
await expect ( traceViewer . actionTitles ) . toHaveText ( [
2025-05-23 00:49:37 +08:00
/Create page/ ,
/Navigate to "data:"/ ,
2025-06-16 23:27:38 +08:00
/^Expect "toHaveTitle"[\d]+ms$/ ,
/^Expect "toHaveURL"[\d]+ms$/ ,
2025-05-23 00:49:37 +08:00
/Set content/ ,
2025-05-24 07:03:50 +08:00
/toHaveText.*locator/ ,
/toBeHidden.*getByTestId/ ,
/toBeHidden.*getByTestId/ ,
2025-05-23 00:49:37 +08:00
/Evaluate/ ,
/Evaluate/ ,
/Click/ ,
/Wait for navigation/ ,
/Wait for event "response"/ ,
/Wait for timeout/ ,
/Navigate to "\/frames\/frame.html"/ ,
/Set viewport size/ ,
2025-08-06 19:07:11 +08:00
/Hover/ ,
/Close page/ ,
2021-07-01 08:56:48 +08:00
] ) ;
2021-06-30 13:35:50 +08:00
} ) ;
2025-01-17 03:48:34 +08:00
test ( 'should show action context on locators and other common actions' , async ( {
runAndTrace ,
page ,
} ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( '<input type="text" />' ) ;
await page . locator ( 'input' ) . click ( { button : 'right' } ) ;
await page . getByRole ( 'textbox' ) . click ( ) ;
await expect ( page . locator ( 'input' ) ) . toHaveText ( '' ) ;
await page . locator ( 'input' ) . press ( 'Enter' ) ;
await page . keyboard . type (
'Hello world this is a very long string what happens when it overflows?' ,
) ;
await page . keyboard . press ( 'Control+c' ) ;
await page . keyboard . down ( 'Shift' ) ;
await page . keyboard . insertText ( 'Hello world' ) ;
await page . keyboard . up ( 'Shift' ) ;
await page . mouse . move ( 0 , 0 ) ;
await page . mouse . down ( ) ;
await page . mouse . move ( 100 , 200 ) ;
await page . mouse . wheel ( 5 , 7 ) ;
await page . mouse . up ( ) ;
await page . clock . fastForward ( 1000 ) ;
await page . clock . fastForward ( '30:00' ) ;
await page . clock . pauseAt ( new Date ( '2020-02-02T00:00:00Z' ) ) ;
await page . clock . runFor ( 10 ) ;
await page . clock . setFixedTime ( new Date ( '2020-02-02T00:00:00Z' ) ) ;
await page . clock . setSystemTime ( new Date ( '2020-02-02T00:00:00Z' ) ) ;
} ) ;
await expect ( traceViewer . actionTitles ) . toHaveText ( [
2025-05-23 00:49:37 +08:00
/Set content/ ,
/Click.*locator\('input'\)/ ,
/Click.*getByRole\('textbox'\)/ ,
2025-05-24 07:03:50 +08:00
/toHaveText.*locator\('input'\)/ ,
2025-05-23 00:49:37 +08:00
/Press "Enter".*locator\('input'\)/ ,
/Type "Hello world.*/ ,
/Press "Control\+c"/ ,
/Key down "Shift"/ ,
/Insert "Hello world"/ ,
/Key up "Shift"/ ,
/Mouse move/ ,
/Mouse down/ ,
/Mouse move/ ,
/Mouse wheel/ ,
/Mouse up/ ,
/Fast forward clock "1000"/ ,
/Fast forward clock "30:00"/ ,
/Pause clock ".*:00.*"/ ,
/Run clock/ ,
/Set fixed time ".*:00.*"/ ,
/Set system time ".*:00.*"/ ,
2025-01-17 03:48:34 +08:00
] ) ;
} ) ;
2024-07-22 23:16:25 +08:00
test ( 'should complain about newer version of trace in old viewer' , async ( { showTraceViewer , asset } , testInfo ) = > {
const traceViewer = await showTraceViewer ( [ asset ( 'trace-from-the-future.zip' ) ] ) ;
await expect ( traceViewer . page . getByText ( 'The trace was created by a newer version of Playwright and is not supported by this version of the viewer.' ) ) . toBeVisible ( ) ;
} ) ;
2024-09-18 02:14:15 +08:00
test ( 'should properly synchronize local and remote time' , async ( { showTraceViewer , asset } , testInfo ) = > {
const traceViewer = await showTraceViewer ( [ asset ( 'trace-remote-time-diff.zip' ) ] ) ;
// The total duration should be sub 10s, rather than 16h.
2024-09-21 02:21:57 +08:00
await expect . poll ( async ( ) = >
parseInt ( await traceViewer . page . locator ( '.timeline-time' ) . last ( ) . innerText ( ) , 10 )
) . toBeLessThan ( 10 ) ;
2024-09-18 02:14:15 +08:00
} ) ;
2021-07-03 05:33:38 +08:00
test ( 'should contain action info' , async ( { showTraceViewer } ) = > {
2022-02-08 09:05:42 +08:00
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 00:49:37 +08:00
await traceViewer . selectAction ( 'Click' ) ;
2023-09-02 11:12:05 +08:00
await traceViewer . page . getByText ( 'Log' , { exact : true } ) . click ( ) ;
2023-10-27 05:45:15 +08:00
await expect ( traceViewer . logLines ) . toContainText ( [
/\d+m?sattempting click action/ ,
/\d+m?s click action done/ ,
] ) ;
2021-06-30 13:35:50 +08:00
} ) ;
2021-07-01 08:56:48 +08:00
2023-08-17 07:30:17 +08:00
test ( 'should render network bars' , async ( { page , runAndTrace , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
} ) ;
await expect ( traceViewer . page . locator ( '.timeline-bar.network' ) ) . toHaveCount ( 1 ) ;
2021-07-01 08:56:48 +08:00
} ) ;
2021-07-02 05:31:20 +08:00
test ( 'should render console' , async ( { showTraceViewer , browserName } ) = > {
2022-02-08 09:05:42 +08:00
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2021-08-17 08:06:38 +08:00
await traceViewer . showConsoleTab ( ) ;
2021-07-02 05:31:20 +08:00
2023-08-01 02:24:04 +08:00
await expect ( traceViewer . consoleLineMessages . nth ( 0 ) ) . toHaveText ( 'Info' ) ;
await expect ( traceViewer . consoleLineMessages . nth ( 1 ) ) . toHaveText ( 'Warning' ) ;
await expect ( traceViewer . consoleLineMessages . nth ( 2 ) ) . toHaveText ( 'Error' ) ;
await expect ( traceViewer . consoleLineMessages . nth ( 3 ) ) . toHaveText ( 'Unhandled exception' ) ;
2023-10-11 00:14:58 +08:00
// Browsers can insert more messages between these two.
await expect ( traceViewer . consoleLineMessages . filter ( { hasText : 'Cheers!' } ) ) . toBeVisible ( ) ;
2023-08-01 02:24:04 +08:00
const icons = traceViewer . consoleLines . locator ( '.codicon' ) ;
2023-08-22 07:05:27 +08:00
await expect . soft ( icons . nth ( 0 ) ) . toHaveClass ( 'codicon codicon-browser status-none' ) ;
await expect . soft ( icons . nth ( 1 ) ) . toHaveClass ( 'codicon codicon-browser status-warning' ) ;
await expect . soft ( icons . nth ( 2 ) ) . toHaveClass ( 'codicon codicon-browser status-error' ) ;
await expect . soft ( icons . nth ( 3 ) ) . toHaveClass ( 'codicon codicon-browser status-error' ) ;
2023-10-11 00:14:58 +08:00
// Browsers can insert more messages between these two.
await expect . soft ( traceViewer . consoleLines . filter ( { hasText : 'Cheers!' } ) . locator ( '.codicon' ) ) . toHaveClass ( 'codicon codicon-browser status-none' ) ;
2021-09-01 12:49:08 +08:00
await expect ( traceViewer . consoleStacks . first ( ) ) . toContainText ( 'Error: Unhandled exception' ) ;
2023-07-11 03:56:56 +08:00
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Evaluate' ) ;
2023-08-01 02:24:04 +08:00
const listViews = traceViewer . page . locator ( '.console-tab' ) . locator ( '.list-view-entry' ) ;
2023-08-17 07:30:17 +08:00
await expect ( listViews . nth ( 0 ) ) . toHaveClass ( 'list-view-entry' ) ;
await expect ( listViews . nth ( 1 ) ) . toHaveClass ( 'list-view-entry warning' ) ;
await expect ( listViews . nth ( 2 ) ) . toHaveClass ( 'list-view-entry error' ) ;
await expect ( listViews . nth ( 3 ) ) . toHaveClass ( 'list-view-entry error' ) ;
2023-10-11 00:14:58 +08:00
// Browsers can insert more messages between these two.
await expect ( listViews . filter ( { hasText : 'Cheers!' } ) ) . toHaveClass ( 'list-view-entry' ) ;
2021-07-02 05:31:20 +08:00
} ) ;
2021-07-02 11:46:56 +08:00
2025-06-16 23:24:02 +08:00
test ( 'should open console errors on click' , async ( { showTraceViewer } ) = > {
2022-02-08 09:05:42 +08:00
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-06-16 23:24:02 +08:00
await expect ( traceViewer . actionIconsText ( 'Evaluate' ) ) . toHaveText ( [ '2' , '1' ] ) ;
await expect ( traceViewer . page . getByRole ( 'tabpanel' , { name : 'Console' } ) ) . toBeHidden ( ) ;
await traceViewer . actionIcons ( 'Evaluate' ) . click ( ) ;
await traceViewer . page . getByRole ( 'tabpanel' , { name : 'Console' } ) . waitFor ( ) ;
2021-07-02 11:46:56 +08:00
} ) ;
2021-07-03 07:45:09 +08:00
2023-02-16 23:59:21 +08:00
test ( 'should show params and return value' , async ( { showTraceViewer } ) = > {
2022-02-08 09:05:42 +08:00
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Evaluate' ) ;
2021-09-04 03:34:47 +08:00
await expect ( traceViewer . callLines ) . toHaveText ( [
2025-05-23 10:00:33 +08:00
'' ,
2024-12-20 21:01:16 +08:00
/start:[\d\.]+m?s/ ,
2023-02-16 23:59:21 +08:00
/duration:[\d]+ms/ ,
/expression:"\({↵ a↵ }\) => {↵ console\.log\(\'Info\'\);↵ console\.warn\(\'Warning\'\);↵ console/ ,
'isFunction:true' ,
'arg:{"a":"paramA","b":4}' ,
'value:"return paramA"'
2021-07-03 07:45:09 +08:00
] ) ;
2023-01-06 08:59:50 +08:00
await traceViewer . selectAction ( ` locator('button') ` ) ;
await expect ( traceViewer . callLines ) . toContainText ( [
2025-05-24 07:03:50 +08:00
/toHaveText/ ,
2024-12-20 21:01:16 +08:00
/start:[\d\.]+m?s/ ,
2023-02-16 23:59:21 +08:00
/duration:[\d]+ms/ ,
/locator:locator\('button'\)/ ,
/expression:"to.have.text"/ ,
/timeout:10000/ ,
/matches:true/ ,
/received:"Click"/ ,
2023-01-06 08:59:50 +08:00
] ) ;
2021-07-03 07:45:09 +08:00
} ) ;
2021-08-06 07:04:09 +08:00
2022-02-18 05:12:42 +08:00
test ( 'should show null as a param' , async ( { showTraceViewer , browserName } ) = > {
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Evaluate' , 1 ) ;
2022-02-18 05:12:42 +08:00
await expect ( traceViewer . callLines ) . toHaveText ( [
2025-05-23 10:00:33 +08:00
'' ,
2024-12-20 21:01:16 +08:00
/start:[\d\.]+m?s/ ,
2023-02-16 23:59:21 +08:00
/duration:[\d]+ms/ ,
'expression:"() => 1 + 1"' ,
'isFunction:true' ,
'arg:null' ,
'value:2'
2022-02-18 05:12:42 +08:00
] ) ;
} ) ;
2021-09-24 02:40:55 +08:00
test ( 'should have correct snapshot size' , async ( { showTraceViewer } , testInfo ) = > {
2022-02-08 09:05:42 +08:00
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 00:49:37 +08:00
await traceViewer . selectAction ( 'SET VIEWPORT' ) ;
2021-08-06 07:04:09 +08:00
await traceViewer . selectSnapshot ( 'Before' ) ;
2021-09-24 02:40:55 +08:00
await expect ( traceViewer . snapshotContainer ) . toHaveCSS ( 'width' , '1280px' ) ;
await expect ( traceViewer . snapshotContainer ) . toHaveCSS ( 'height' , '720px' ) ;
2021-08-06 07:04:09 +08:00
await traceViewer . selectSnapshot ( 'After' ) ;
2021-09-24 02:40:55 +08:00
await expect ( traceViewer . snapshotContainer ) . toHaveCSS ( 'width' , '500px' ) ;
await expect ( traceViewer . snapshotContainer ) . toHaveCSS ( 'height' , '600px' ) ;
2021-08-06 07:04:09 +08:00
} ) ;
2021-08-17 08:06:38 +08:00
test ( 'should have correct stack trace' , async ( { showTraceViewer } ) = > {
2022-02-08 09:05:42 +08:00
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2021-08-17 08:06:38 +08:00
2025-05-23 00:49:37 +08:00
await traceViewer . selectAction ( 'Click' ) ;
2021-08-17 08:06:38 +08:00
await traceViewer . showSourceTab ( ) ;
2025-06-16 23:24:02 +08:00
await expect ( traceViewer . stackFrames ( ) ) . toContainText ( [
2021-09-28 02:14:35 +08:00
/doClick\s+trace-viewer.spec.ts\s+:\d+/ ,
/recordTrace\s+trace-viewer.spec.ts\s+:\d+/ ,
] , { useInnerText : true } ) ;
2021-08-17 08:06:38 +08:00
} ) ;
2021-09-08 06:23:13 +08:00
test ( 'should have network requests' , async ( { showTraceViewer } ) = > {
2022-02-08 09:05:42 +08:00
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Navigate' ) ;
2021-09-08 06:23:13 +08:00
await traceViewer . showNetworkTab ( ) ;
2024-01-11 07:28:33 +08:00
await expect ( traceViewer . networkRequests ) . toContainText ( [ /frame.htmlGET200text\/html/ ] ) ;
await expect ( traceViewer . networkRequests ) . toContainText ( [ /style.cssGET200text\/css/ ] ) ;
2024-02-02 05:44:26 +08:00
await expect ( traceViewer . networkRequests ) . toContainText ( [ /404GET404text\/plain/ ] ) ;
2024-01-11 07:28:33 +08:00
await expect ( traceViewer . networkRequests ) . toContainText ( [ /script.jsGET200application\/javascript/ ] ) ;
2024-10-02 21:58:21 +08:00
await expect ( traceViewer . networkRequests . filter ( { hasText : '404GET404text' } ) ) . toHaveCSS ( 'background-color' , 'rgb(242, 222, 222)' ) ;
2021-09-08 06:23:13 +08:00
} ) ;
2021-10-13 05:42:50 +08:00
2024-08-07 05:52:35 +08:00
test ( 'should filter network requests by resource type' , async ( { page , runAndTrace , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
server . setRoute ( '/api/endpoint' , ( _ , res ) = > res . setHeader ( 'Content-Type' , 'application/json' ) . end ( ) ) ;
await page . goto ( ` ${ server . PREFIX } /network-tab/network.html ` ) ;
2025-04-10 22:18:34 +08:00
await page . evaluate ( ( ) = > ( window as any ) . donePromise ) ;
2024-08-07 05:52:35 +08:00
} ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Navigate' ) ;
2024-08-07 05:52:35 +08:00
await traceViewer . showNetworkTab ( ) ;
await traceViewer . page . getByText ( 'JS' , { exact : true } ) . click ( ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await expect ( traceViewer . networkRequests . getByText ( 'script.js' ) ) . toBeVisible ( ) ;
await traceViewer . page . getByText ( 'CSS' , { exact : true } ) . click ( ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await expect ( traceViewer . networkRequests . getByText ( 'style.css' ) ) . toBeVisible ( ) ;
await traceViewer . page . getByText ( 'Image' , { exact : true } ) . click ( ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await expect ( traceViewer . networkRequests . getByText ( 'image.png' ) ) . toBeVisible ( ) ;
await traceViewer . page . getByText ( 'Fetch' , { exact : true } ) . click ( ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await expect ( traceViewer . networkRequests . getByText ( 'endpoint' ) ) . toBeVisible ( ) ;
await traceViewer . page . getByText ( 'HTML' , { exact : true } ) . click ( ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await expect ( traceViewer . networkRequests . getByText ( 'network.html' ) ) . toBeVisible ( ) ;
await traceViewer . page . getByText ( 'Font' , { exact : true } ) . click ( ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await expect ( traceViewer . networkRequests . getByText ( 'font.woff2' ) ) . toBeVisible ( ) ;
} ) ;
2024-08-22 23:56:07 +08:00
test ( 'should show font preview' , async ( { page , runAndTrace , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( ` ${ server . PREFIX } /network-tab/network.html ` ) ;
2025-04-10 22:18:34 +08:00
await page . evaluate ( ( ) = > ( window as any ) . donePromise ) ;
2024-08-22 23:56:07 +08:00
} ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Navigate' ) ;
2024-08-22 23:56:07 +08:00
await traceViewer . showNetworkTab ( ) ;
await traceViewer . page . getByText ( 'Font' , { exact : true } ) . click ( ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await traceViewer . networkRequests . getByText ( 'font.woff2' ) . click ( ) ;
await traceViewer . page . getByTestId ( 'network-request-details' ) . getByTitle ( 'Body' ) . click ( ) ;
await expect ( traceViewer . page . locator ( '.network-request-details-tab' ) ) . toContainText ( 'ABCDEF' ) ;
} ) ;
2024-08-07 05:52:35 +08:00
test ( 'should filter network requests by url' , async ( { page , runAndTrace , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( ` ${ server . PREFIX } /network-tab/network.html ` ) ;
2025-04-10 22:18:34 +08:00
await page . evaluate ( ( ) = > ( window as any ) . donePromise ) ;
2024-08-07 05:52:35 +08:00
} ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Navigate' ) ;
2024-08-07 05:52:35 +08:00
await traceViewer . showNetworkTab ( ) ;
await traceViewer . page . getByPlaceholder ( 'Filter network' ) . fill ( 'script.' ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await expect ( traceViewer . networkRequests . getByText ( 'script.js' ) ) . toBeVisible ( ) ;
await traceViewer . page . getByPlaceholder ( 'Filter network' ) . fill ( 'png' ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await expect ( traceViewer . networkRequests . getByText ( 'image.png' ) ) . toBeVisible ( ) ;
await traceViewer . page . getByPlaceholder ( 'Filter network' ) . fill ( 'api/' ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await expect ( traceViewer . networkRequests . getByText ( 'endpoint' ) ) . toBeVisible ( ) ;
await traceViewer . page . getByPlaceholder ( 'Filter network' ) . fill ( 'End' ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await expect ( traceViewer . networkRequests . getByText ( 'endpoint' ) ) . toBeVisible ( ) ;
await traceViewer . page . getByPlaceholder ( 'Filter network' ) . fill ( 'FON' ) ;
await expect ( traceViewer . networkRequests ) . toHaveCount ( 1 ) ;
await expect ( traceViewer . networkRequests . getByText ( 'font.woff2' ) ) . toBeVisible ( ) ;
} ) ;
2023-06-07 07:55:53 +08:00
test ( 'should have network request overrides' , async ( { page , server , runAndTrace } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . route ( '**/style.css' , route = > route . abort ( ) ) ;
await page . goto ( server . PREFIX + '/frames/frame.html' ) ;
} ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Navigate' ) ;
2023-06-07 07:55:53 +08:00
await traceViewer . showNetworkTab ( ) ;
2024-01-11 07:28:33 +08:00
await expect ( traceViewer . networkRequests ) . toContainText ( [ /frame.htmlGET200text\/html/ ] ) ;
await expect ( traceViewer . networkRequests ) . toContainText ( [ /style.cssGETx-unknown.*aborted/ ] ) ;
2023-06-15 00:37:19 +08:00
await expect ( traceViewer . networkRequests ) . not . toContainText ( [ /continued/ ] ) ;
2023-06-07 07:55:53 +08:00
} ) ;
test ( 'should have network request overrides 2' , async ( { page , server , runAndTrace } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . route ( '**/script.js' , route = > route . continue ( ) ) ;
await page . goto ( server . PREFIX + '/frames/frame.html' ) ;
} ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Navigate' ) ;
2023-06-07 07:55:53 +08:00
await traceViewer . showNetworkTab ( ) ;
2024-01-11 07:28:33 +08:00
await expect . soft ( traceViewer . networkRequests ) . toContainText ( [ /frame.htmlGET200text\/html.*/ ] ) ;
await expect . soft ( traceViewer . networkRequests ) . toContainText ( [ /script.jsGET200application\/javascript.*continued/ ] ) ;
2023-06-07 07:55:53 +08:00
} ) ;
2021-11-03 08:35:23 +08:00
test ( 'should show snapshot URL' , async ( { page , runAndTrace , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
await page . evaluate ( '2+2' ) ;
} ) ;
2025-05-23 00:49:37 +08:00
await traceViewer . snapshotFrame ( 'Evaluate' ) ;
2025-03-28 21:39:29 +08:00
const browserFrameAddressBarLocator = traceViewer . page . locator ( '.browser-frame-address-bar' ) ;
await expect ( browserFrameAddressBarLocator ) . toHaveText ( server . EMPTY_PAGE ) ;
const copySelectorLocator = browserFrameAddressBarLocator . getByRole ( 'button' , { name : 'Copy' } ) ;
await expect ( copySelectorLocator ) . toBeHidden ( ) ;
await browserFrameAddressBarLocator . hover ( ) ;
await expect ( copySelectorLocator ) . toBeVisible ( ) ;
await traceViewer . page . context ( ) . grantPermissions ( [ 'clipboard-read' , 'clipboard-write' ] ) ;
await copySelectorLocator . click ( ) ;
expect ( await traceViewer . page . evaluate ( ( ) = > navigator . clipboard . readText ( ) ) ) . toBe ( server . EMPTY_PAGE ) ;
2021-11-03 08:35:23 +08:00
} ) ;
2023-01-31 11:07:52 +08:00
test ( 'should popup snapshot' , async ( { page , runAndTrace , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
2024-08-05 15:11:31 +08:00
await page . setContent ( 'hello äöü 🙂' ) ;
2023-01-31 11:07:52 +08:00
} ) ;
2025-05-23 00:49:37 +08:00
await traceViewer . snapshotFrame ( 'Set content' ) ;
2023-01-31 11:07:52 +08:00
const popupPromise = traceViewer . page . context ( ) . waitForEvent ( 'page' ) ;
await traceViewer . page . getByTitle ( 'Open snapshot in a new tab' ) . click ( ) ;
const popup = await popupPromise ;
2024-08-05 15:11:31 +08:00
await expect ( popup . getByText ( 'hello äöü 🙂' ) ) . toBeVisible ( ) ;
2023-01-31 11:07:52 +08:00
} ) ;
2021-12-10 09:10:31 +08:00
test ( 'should capture iframe with sandbox attribute' , async ( { page , server , runAndTrace } ) = > {
2021-10-13 05:42:50 +08:00
await page . route ( '**/empty.html' , route = > {
2023-06-03 03:59:12 +08:00
void route . fulfill ( {
2021-12-10 09:10:31 +08:00
body : '<iframe src="iframe.html" sandBOX="allow-scripts"></iframe>' ,
2021-10-13 05:42:50 +08:00
contentType : 'text/html'
} ) . catch ( ( ) = > { } ) ;
} ) ;
await page . route ( '**/iframe.html' , route = > {
2023-06-03 03:59:12 +08:00
void route . fulfill ( {
2021-10-13 05:42:50 +08:00
body : '<html><button>Hello iframe</button></html>' ,
contentType : 'text/html'
} ) . catch ( ( ) = > { } ) ;
} ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
if ( page . frames ( ) . length < 2 )
await page . waitForEvent ( 'frameattached' ) ;
await page . frames ( ) [ 1 ] . waitForSelector ( 'button' ) ;
// Force snapshot.
await page . evaluate ( '2+2' ) ;
} ) ;
// Render snapshot, check expectations.
2025-05-23 00:49:37 +08:00
const snapshotFrame = await traceViewer . snapshotFrame ( 'Evaluate' , 0 , true ) ;
2023-03-21 22:40:54 +08:00
const button = snapshotFrame . frameLocator ( 'iframe' ) . locator ( 'button' ) ;
2021-10-13 05:42:50 +08:00
expect ( await button . textContent ( ) ) . toBe ( 'Hello iframe' ) ;
} ) ;
2021-12-10 09:10:31 +08:00
test ( 'should capture data-url svg iframe' , async ( { page , server , runAndTrace } ) = > {
await page . route ( '**/empty.html' , route = > {
2023-06-03 03:59:12 +08:00
void route . fulfill ( {
2021-12-10 09:10:31 +08:00
body : ` <iframe src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3e%3cpath d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'/%3e%3c/svg%3e"></iframe> ` ,
contentType : 'text/html'
} ) . catch ( ( ) = > { } ) ;
} ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
if ( page . frames ( ) . length < 2 )
await page . waitForEvent ( 'frameattached' ) ;
await page . frames ( ) [ 1 ] . waitForSelector ( 'svg' ) ;
// Force snapshot.
await page . evaluate ( '2+2' ) ;
} ) ;
// Render snapshot, check expectations.
2025-05-23 00:49:37 +08:00
const snapshotFrame = await traceViewer . snapshotFrame ( 'Evaluate' , 0 , true ) ;
2024-10-22 18:44:18 +08:00
await expect ( snapshotFrame . frameLocator ( 'iframe' ) . locator ( '> body > svg' ) ) . toBeVisible ( ) ;
2023-03-21 22:40:54 +08:00
const content = await snapshotFrame . frameLocator ( 'iframe' ) . locator ( ':root' ) . innerHTML ( ) ;
2021-12-10 09:10:31 +08:00
expect ( content ) . toContain ( ` d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" ` ) ;
} ) ;
2021-10-13 05:42:50 +08:00
test ( 'should contain adopted style sheets' , async ( { page , runAndTrace , browserName } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( '<button>Hello</button>' ) ;
await page . evaluate ( ( ) = > {
const sheet = new CSSStyleSheet ( ) ;
sheet . addRule ( 'button' , 'color: red' ) ;
2024-07-03 15:40:50 +08:00
document . adoptedStyleSheets = [ sheet ] ;
2021-10-13 05:42:50 +08:00
const sheet2 = new CSSStyleSheet ( ) ;
sheet2 . addRule ( ':host' , 'color: blue' ) ;
for ( const element of [ document . createElement ( 'div' ) , document . createElement ( 'span' ) ] ) {
const root = element . attachShadow ( {
mode : 'open'
} ) ;
root . append ( 'foo' ) ;
2024-07-03 15:40:50 +08:00
root . adoptedStyleSheets = [ sheet2 ] ;
2021-10-13 05:42:50 +08:00
document . body . appendChild ( element ) ;
}
} ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Evaluate' ) ;
2023-03-21 22:40:54 +08:00
await expect ( frame . locator ( 'button' ) ) . toHaveCSS ( 'color' , 'rgb(255, 0, 0)' ) ;
await expect ( frame . locator ( 'div' ) ) . toHaveCSS ( 'color' , 'rgb(0, 0, 255)' ) ;
await expect ( frame . locator ( 'span' ) ) . toHaveCSS ( 'color' , 'rgb(0, 0, 255)' ) ;
2021-10-13 05:42:50 +08:00
} ) ;
test ( 'should work with adopted style sheets and replace/replaceSync' , async ( { page , runAndTrace , browserName } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( '<button>Hello</button>' ) ;
await page . evaluate ( ( ) = > {
const sheet = new CSSStyleSheet ( ) ;
sheet . addRule ( 'button' , 'color: red' ) ;
2024-07-03 15:40:50 +08:00
document . adoptedStyleSheets = [ sheet ] ;
2021-10-13 05:42:50 +08:00
} ) ;
await page . evaluate ( ( ) = > {
2024-07-03 15:40:50 +08:00
const [ sheet ] = document . adoptedStyleSheets ;
2021-10-13 05:42:50 +08:00
sheet . replaceSync ( ` button { color: blue } ` ) ;
} ) ;
2024-07-03 15:40:50 +08:00
await page . evaluate ( async ( ) = > {
const [ sheet ] = document . adoptedStyleSheets ;
await sheet . replace ( ` button { color: #0F0 } ` ) ;
2021-10-13 05:42:50 +08:00
} ) ;
} ) ;
{
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Evaluate' , 0 ) ;
2023-03-21 22:40:54 +08:00
await expect ( frame . locator ( 'button' ) ) . toHaveCSS ( 'color' , 'rgb(255, 0, 0)' ) ;
2021-10-13 05:42:50 +08:00
}
{
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Evaluate' , 1 ) ;
2023-03-21 22:40:54 +08:00
await expect ( frame . locator ( 'button' ) ) . toHaveCSS ( 'color' , 'rgb(0, 0, 255)' ) ;
2021-10-13 05:42:50 +08:00
}
{
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Evaluate' , 2 ) ;
2023-03-21 22:40:54 +08:00
await expect ( frame . locator ( 'button' ) ) . toHaveCSS ( 'color' , 'rgb(0, 255, 0)' ) ;
2021-10-13 05:42:50 +08:00
}
} ) ;
2024-07-03 15:40:50 +08:00
test ( 'should work with adopted style sheets and all: unset' , async ( { page , runAndTrace , browserName } ) = > {
test . info ( ) . annotations . push ( { type : 'issue' , description : 'https://github.com/microsoft/playwright/issues/31500' } ) ;
test . fixme ( browserName === 'chromium' , 'https://issues.chromium.org/u/1/issues/41416124' ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( '<button>Hello</button>' ) ;
await page . evaluate ( ( ) = > {
const stylesheet = new CSSStyleSheet ( ) ;
// 'all: unset' is the problem here.
stylesheet . replaceSync ( 'button { all: unset; border-radius: 24px; background-color: deepskyblue; color: black; padding: 5px }' ) ;
document . adoptedStyleSheets = [ stylesheet ] ;
} ) ;
await page . getByRole ( 'button' ) . click ( ) ;
} ) ;
{
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Evaluate' , 0 ) ;
2024-07-03 15:40:50 +08:00
await expect ( frame . locator ( 'button' ) ) . toHaveCSS ( 'border-radius' , '24px' ) ;
await expect ( frame . locator ( 'button' ) ) . toHaveCSS ( 'background-color' , 'rgb(0, 191, 255)' ) ;
await expect ( frame . locator ( 'button' ) ) . toHaveCSS ( 'color' , 'rgb(0, 0, 0)' ) ;
await expect ( frame . locator ( 'button' ) ) . toHaveCSS ( 'padding' , '5px' ) ;
}
} ) ;
2024-07-15 23:33:22 +08:00
test ( 'should work with nesting CSS selectors' , async ( { page , runAndTrace } ) = > {
test . info ( ) . annotations . push ( { type : 'issue' , description : 'https://github.com/microsoft/playwright/issues/31607' } ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( `
< span class = "foo" data - testid = "green-element" > Hi < / span >
< span class = "foo bar" data - testid = "red-element" > Hello < / span >
< style >
. foo {
color : green ;
& . bar {
color : red ;
}
}
< / style >
` );
await page . evaluate ( ( ) = > { } ) ;
} ) ;
{
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Evaluate' , 0 ) ;
2024-07-15 23:33:22 +08:00
await expect ( frame . getByTestId ( 'green-element' ) ) . toHaveCSS ( 'color' , /* green */ 'rgb(0, 128, 0)' ) ;
await expect ( frame . getByTestId ( 'red-element' ) ) . toHaveCSS ( 'color' , /* red */ 'rgb(255, 0, 0)' ) ;
}
} ) ;
2024-07-03 15:40:50 +08:00
test ( 'should restore scroll positions' , async ( { page , runAndTrace } ) = > {
2021-10-13 05:42:50 +08:00
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( `
< style >
li { height : 20px ; margin : 0 ; padding : 0 ; }
div { height : 60px ; overflow - x : hidden ; overflow - y : scroll ; background : green ; padding : 0 ; margin : 0 ; }
< / style >
< div >
< ul >
< li > Item 1 < / li >
< li > Item 2 < / li >
< li > Item 3 < / li >
< li > Item 4 < / li >
< li > Item 5 < / li >
< li > Item 6 < / li >
< li > Item 7 < / li >
< li > Item 8 < / li >
< li > Item 9 < / li >
< li > Item 10 < / li >
< / ul >
< / div >
` );
await ( await page . $ ( 'text=Item 8' ) ) . scrollIntoViewIfNeeded ( ) ;
} ) ;
// Render snapshot, check expectations.
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Scroll into view' ) ;
2023-03-21 22:40:54 +08:00
expect ( await frame . locator ( 'div' ) . evaluate ( div = > div . scrollTop ) ) . toBe ( 136 ) ;
2021-10-13 05:42:50 +08:00
} ) ;
2023-12-02 01:38:50 +08:00
test ( 'should restore control values' , async ( { page , runAndTrace , asset } ) = > {
2022-03-22 09:51:48 +08:00
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( `
< input type = text value = old >
< input type = checkbox checked >
< input type = radio >
2023-12-02 01:38:50 +08:00
< input type = file >
2022-03-22 09:51:48 +08:00
< textarea > old < / textarea >
< select multiple >
< option value = opt1 > Hi < / option >
< option value = opt2 selected > Bye < / option >
< option value = opt3 > Hello < / option >
< / select >
< script >
document . querySelector ( '[type=text]' ) . value = 'hi' ;
document . querySelector ( '[type=checkbox]' ) . checked = false ;
document . querySelector ( '[type=radio]' ) . checked = true ;
document . querySelector ( 'textarea' ) . value = 'hello' ;
document . querySelector ( '[value=opt1]' ) . selected = true ;
document . querySelector ( '[value=opt2]' ) . selected = false ;
document . querySelector ( '[value=opt3]' ) . selected = true ;
< / script >
` );
2023-12-02 01:38:50 +08:00
await page . locator ( 'input[type="file"]' ) . setInputFiles ( asset ( 'file-to-upload.txt' ) ) ;
2022-03-22 09:51:48 +08:00
await page . click ( 'input' ) ;
} ) ;
// Render snapshot, check expectations.
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Click' ) ;
2022-03-22 09:51:48 +08:00
const text = frame . locator ( '[type=text]' ) ;
await expect ( text ) . toHaveAttribute ( 'value' , 'old' ) ;
await expect ( text ) . toHaveValue ( 'hi' ) ;
const checkbox = frame . locator ( '[type=checkbox]' ) ;
await expect ( checkbox ) . not . toBeChecked ( ) ;
expect ( await checkbox . evaluate ( c = > c . hasAttribute ( 'checked' ) ) ) . toBe ( true ) ;
const radio = frame . locator ( '[type=radio]' ) ;
await expect ( radio ) . toBeChecked ( ) ;
expect ( await radio . evaluate ( c = > c . hasAttribute ( 'checked' ) ) ) . toBe ( false ) ;
const textarea = frame . locator ( 'textarea' ) ;
await expect ( textarea ) . toHaveText ( 'old' ) ;
await expect ( textarea ) . toHaveValue ( 'hello' ) ;
2023-03-21 22:40:54 +08:00
expect ( await frame . locator ( 'option >> nth=0' ) . evaluate ( o = > o . hasAttribute ( 'selected' ) ) ) . toBe ( false ) ;
expect ( await frame . locator ( 'option >> nth=1' ) . evaluate ( o = > o . hasAttribute ( 'selected' ) ) ) . toBe ( true ) ;
expect ( await frame . locator ( 'option >> nth=2' ) . evaluate ( o = > o . hasAttribute ( 'selected' ) ) ) . toBe ( false ) ;
await expect ( frame . locator ( 'select' ) ) . toHaveValues ( [ 'opt1' , 'opt3' ] ) ;
2023-12-02 01:38:50 +08:00
await expect ( frame . locator ( 'input[type=file]' ) ) . toHaveValue ( '' ) ;
2022-03-22 09:51:48 +08:00
} ) ;
2021-10-13 05:42:50 +08:00
test ( 'should work with meta CSP' , async ( { page , runAndTrace , browserName } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( `
< head >
< meta http - equiv = "Content-Security-Policy" content = "script-src 'none'" >
< / head >
< body >
< div > Hello < / div >
< / body >
` );
await page . $eval ( 'div' , div = > {
const shadow = div . attachShadow ( { mode : 'open' } ) ;
const span = document . createElement ( 'span' ) ;
span . textContent = 'World' ;
shadow . appendChild ( span ) ;
} ) ;
} ) ;
// Render snapshot, check expectations.
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Evaluate' ) ;
2021-10-13 05:42:50 +08:00
// Should render shadow dom with post-processing script.
2023-03-21 22:40:54 +08:00
await expect ( frame . locator ( 'span' ) ) . toHaveText ( 'World' ) ;
2021-10-13 05:42:50 +08:00
} ) ;
test ( 'should handle multiple headers' , async ( { page , server , runAndTrace , browserName } ) = > {
server . setRoute ( '/foo.css' , ( req , res ) = > {
res . statusCode = 200 ;
res . setHeader ( 'vary' , [ 'accepts-encoding' , 'accepts-encoding' ] ) ;
res . end ( 'body { padding: 42px }' ) ;
} ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
await page . setContent ( ` <head><link rel=stylesheet href="/foo.css"></head><body><div>Hello</div></body> ` ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Set content' ) ;
2023-03-21 22:40:54 +08:00
await frame . locator ( 'div' ) . waitFor ( ) ;
await expect ( frame . locator ( 'body' ) ) . toHaveCSS ( 'padding-left' , '42px' ) ;
2021-10-13 05:42:50 +08:00
} ) ;
test ( 'should handle src=blob' , async ( { page , server , runAndTrace , browserName } ) = > {
test . skip ( browserName === 'firefox' ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setViewportSize ( { width : 300 , height : 300 } ) ;
await page . goto ( server . EMPTY_PAGE ) ;
await page . evaluate ( async ( ) = > {
const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAQAAADIvofAAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfhBhAPKSstM+EuAAAAvUlEQVQY05WQIW4CYRgF599gEZgeoAKBWIfCNSmVvQMe3wv0ChhIViKwtTQEAYJwhgpISBA0JSxNIdlB7LIGTJ/8kpeZ7wW5TcT9o/QNBtvOrrWMrtg0sSGOFeELbHlCDsQ+ukeYiHNFJPHBDRKlQKVEbFkLUT3AiAxI6VGCXsWXAoQLBUl5E7HjUFwiyI4zf/wWoB3CFnxX5IeGdY8IGU/iwE9jcZrLy4pnEat+FL4hf/cbqREKo/Cf6W5zASVMeh234UtGAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA2LTE2VDE1OjQxOjQzLTA3OjAwd1xNIQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNi0xNlQxNTo0MTo0My0wNzowMAYB9Z0AAAAASUVORK5CYII=' ;
const blob = await fetch ( dataUrl ) . then ( res = > res . blob ( ) ) ;
const url = window . URL . createObjectURL ( blob ) ;
const img = document . createElement ( 'img' ) ;
img . src = url ;
const loaded = new Promise ( f = > img . onload = f ) ;
document . body . appendChild ( img ) ;
await loaded ;
} ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Evaluate' ) ;
2023-03-21 22:40:54 +08:00
const size = await frame . locator ( 'img' ) . evaluate ( e = > ( e as HTMLImageElement ) . naturalWidth ) ;
2021-10-13 05:42:50 +08:00
expect ( size ) . toBe ( 10 ) ;
} ) ;
2021-10-16 06:07:15 +08:00
2024-06-10 17:44:52 +08:00
test ( 'should handle file URIs' , async ( { page , runAndTrace , browserName } ) = > {
test . skip ( browserName !== 'chromium' ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( pathToFileURL ( path . join ( __dirname , '..' , 'assets' , 'one-style.html' ) ) . href ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Navigate' ) ;
2024-06-10 17:44:52 +08:00
await expect ( frame . locator ( 'body' ) ) . toHaveCSS ( 'background-color' , 'rgb(255, 192, 203)' ) ;
} ) ;
2023-09-06 03:48:07 +08:00
test ( 'should preserve currentSrc' , async ( { browser , server , showTraceViewer } ) = > {
2024-09-17 21:32:30 +08:00
const traceFile = test . info ( ) . outputPath ( 'trace.zip' ) ;
2023-09-06 03:48:07 +08:00
const page = await browser . newPage ( { deviceScaleFactor : 3 } ) ;
await page . context ( ) . tracing . start ( { snapshots : true , screenshots : true , sources : true } ) ;
await page . setViewportSize ( { width : 300 , height : 300 } ) ;
await page . goto ( server . EMPTY_PAGE ) ;
await page . setContent ( `
< picture >
< source srcset = "digits/1.png 1x, digits/2.png 2x, digits/3.png 3x" >
< img id = target1 src = "digits/0.png" >
< / picture >
< img id = target2 srcset = "digits/4.png 1x, digits/5.png 2x, digits/6.png 3x" >
` );
await page . context ( ) . tracing . stop ( { path : traceFile } ) ;
await page . close ( ) ;
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Set content' ) ;
2023-09-06 03:48:07 +08:00
await expect ( frame . locator ( '#target1' ) ) . toHaveAttribute ( 'src' , server . PREFIX + '/digits/3.png' ) ;
await expect ( frame . locator ( '#target2' ) ) . toHaveAttribute ( 'src' , server . PREFIX + '/digits/6.png' ) ;
} ) ;
2023-02-23 13:53:27 +08:00
test ( 'should register custom elements' , async ( { page , server , runAndTrace } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
await page . evaluate ( ( ) = > {
customElements . define ( 'my-element' , class extends HTMLElement {
constructor ( ) {
super ( ) ;
const shadow = this . attachShadow ( { mode : 'open' } ) ;
const span = document . createElement ( 'span' ) ;
span . textContent = 'hello' ;
shadow . appendChild ( span ) ;
shadow . appendChild ( document . createElement ( 'slot' ) ) ;
}
} ) ;
} ) ;
await page . setContent ( `
< style >
: not ( : defined ) {
visibility : hidden ;
}
< / style >
< MY - element > world < / M Y - e l e m e n t >
` );
} ) ;
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Set content' ) ;
2023-02-23 13:53:27 +08:00
await expect ( frame . getByText ( 'worldhello' ) ) . toBeVisible ( ) ;
} ) ;
2021-10-16 06:07:15 +08:00
test ( 'should highlight target elements' , async ( { page , runAndTrace , browserName } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( `
2023-06-09 22:18:13 +08:00
< div > t1 < / div >
< div > t2 < / div >
2024-10-03 14:48:26 +08:00
< div id = div3 > t3 < / div >
2023-06-09 22:18:13 +08:00
< div > t4 < / div >
< div > t5 < / div >
< div > t6 < / div >
< div > multi < / div >
< div > multi < / div >
2021-10-16 06:07:15 +08:00
` );
2023-06-09 22:18:13 +08:00
await page . click ( 'text=t1' ) ;
await page . innerText ( 'text=t2' ) ;
await ( await page . $ ( 'text=t3' ) ) . click ( ) ;
await ( await page . $ ( 'text=t4' ) ) . innerText ( ) ;
await page . locator ( 'text=t5' ) . innerText ( ) ;
await expect ( page . locator ( 'text=t6' ) ) . toHaveText ( /t6/i ) ;
await expect ( page . locator ( 'text=multi' ) ) . toHaveText ( [ 'a' , 'b' ] , { timeout : 1000 } ) . catch ( ( ) = > { } ) ;
2023-12-07 22:27:49 +08:00
await page . mouse . move ( 123 , 234 ) ;
2024-10-02 15:00:45 +08:00
await page . getByText ( /^t\d$/ ) . click ( ) . catch ( ( ) = > { } ) ;
await expect ( page . getByText ( /t3|t4/ ) ) . toBeVisible ( ) . catch ( ( ) = > { } ) ;
2024-10-03 14:48:26 +08:00
const expectPromise = expect ( page . getByText ( /t3|t4/ ) ) . toHaveText ( [ 't4' ] ) ;
await page . waitForTimeout ( 1000 ) ;
await page . evaluate ( ( ) = > document . querySelector ( '#div3' ) . textContent = 'changed' ) ;
await expectPromise ;
2021-10-16 06:07:15 +08:00
} ) ;
2023-06-09 22:18:13 +08:00
async function highlightedDivs ( frameLocator : FrameLocator ) {
return frameLocator . locator ( 'div' ) . evaluateAll ( divs = > {
// See snapshotRenderer.ts for the exact color.
return divs . filter ( div = > getComputedStyle ( div ) . backgroundColor === 'rgba(111, 168, 220, 0.498)' ) . map ( div = > div . textContent ) ;
} ) ;
}
2025-08-15 18:38:05 +08:00
await traceViewer . showAllActions ( ) ;
2025-08-08 15:34:56 +08:00
2025-05-23 00:49:37 +08:00
const framePageClick = await traceViewer . snapshotFrame ( 'Click' ) ;
2023-06-09 22:18:13 +08:00
await expect . poll ( ( ) = > highlightedDivs ( framePageClick ) ) . toEqual ( [ 't1' ] ) ;
2023-12-07 22:27:49 +08:00
const box1 = await framePageClick . getByText ( 't1' ) . boundingBox ( ) ;
const box2 = await framePageClick . locator ( 'x-pw-pointer' ) . boundingBox ( ) ;
const x1 = box1 ! . x + box1 ! . width / 2 ;
const y1 = box1 ! . y + box1 ! . height / 2 ;
const x2 = box2 ! . x + box2 ! . width / 2 ;
const y2 = box2 ! . y + box2 ! . height / 2 ;
expect ( Math . abs ( x1 - x2 ) < 2 ) . toBeTruthy ( ) ;
expect ( Math . abs ( y1 - y2 ) < 2 ) . toBeTruthy ( ) ;
2021-10-16 06:07:15 +08:00
2025-05-23 00:49:37 +08:00
const framePageInnerText = await traceViewer . snapshotFrame ( 'Inner text' ) ;
2023-06-09 22:18:13 +08:00
await expect . poll ( ( ) = > highlightedDivs ( framePageInnerText ) ) . toEqual ( [ 't2' ] ) ;
2021-10-16 06:07:15 +08:00
2025-05-23 00:49:37 +08:00
const frameHandleClick = await traceViewer . snapshotFrame ( 'Click' , 1 ) ;
2023-06-09 22:18:13 +08:00
await expect . poll ( ( ) = > highlightedDivs ( frameHandleClick ) ) . toEqual ( [ 't3' ] ) ;
2021-10-16 06:07:15 +08:00
2025-05-23 00:49:37 +08:00
const frameHandleInnerText = await traceViewer . snapshotFrame ( 'Inner text' , 1 ) ;
2023-06-09 22:18:13 +08:00
await expect . poll ( ( ) = > highlightedDivs ( frameHandleInnerText ) ) . toEqual ( [ 't4' ] ) ;
2021-10-16 06:07:15 +08:00
2025-05-23 00:49:37 +08:00
const frameLocatorInnerText = await traceViewer . snapshotFrame ( 'Inner text' , 2 ) ;
2023-06-09 22:18:13 +08:00
await expect . poll ( ( ) = > highlightedDivs ( frameLocatorInnerText ) ) . toEqual ( [ 't5' ] ) ;
2021-10-16 06:07:15 +08:00
2025-05-23 00:49:37 +08:00
const frameExpect1 = await traceViewer . snapshotFrame ( 'Expect' , 0 ) ;
2023-06-09 22:18:13 +08:00
await expect . poll ( ( ) = > highlightedDivs ( frameExpect1 ) ) . toEqual ( [ 't6' ] ) ;
2021-10-16 06:07:15 +08:00
2025-05-23 00:49:37 +08:00
const frameExpect2 = await traceViewer . snapshotFrame ( 'Expect' , 1 ) ;
2023-06-09 22:18:13 +08:00
await expect . poll ( ( ) = > highlightedDivs ( frameExpect2 ) ) . toEqual ( [ 'multi' , 'multi' ] ) ;
2023-12-07 22:27:49 +08:00
await expect ( frameExpect2 . locator ( 'x-pw-pointer' ) ) . not . toBeVisible ( ) ;
2025-05-23 00:49:37 +08:00
const frameMouseMove = await traceViewer . snapshotFrame ( 'Mouse move' ) ;
2023-12-07 22:27:49 +08:00
await expect ( frameMouseMove . locator ( 'x-pw-pointer' ) ) . toBeVisible ( ) ;
2024-10-02 15:00:45 +08:00
2025-05-23 00:49:37 +08:00
const frameClickStrictViolation = await traceViewer . snapshotFrame ( 'Click' , 2 ) ;
2024-10-02 15:00:45 +08:00
await expect . poll ( ( ) = > highlightedDivs ( frameClickStrictViolation ) ) . toEqual ( [ 't1' , 't2' , 't3' , 't4' , 't5' , 't6' ] ) ;
2025-05-23 00:49:37 +08:00
const frameExpectStrictViolation = await traceViewer . snapshotFrame ( 'Expect' , 2 ) ;
2024-10-02 15:00:45 +08:00
await expect . poll ( ( ) = > highlightedDivs ( frameExpectStrictViolation ) ) . toEqual ( [ 't3' , 't4' ] ) ;
2024-10-03 14:48:26 +08:00
2025-05-23 00:49:37 +08:00
const frameUpdatedListOfTargets = await traceViewer . snapshotFrame ( 'Expect' , 3 ) ;
2024-10-03 14:48:26 +08:00
await expect . poll ( ( ) = > highlightedDivs ( frameUpdatedListOfTargets ) ) . toEqual ( [ 't4' ] ) ;
2021-10-16 06:07:15 +08:00
} ) ;
2021-10-24 02:23:39 +08:00
2023-09-01 03:46:49 +08:00
test ( 'should highlight target element in shadow dom' , async ( { page , server , runAndTrace } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . PREFIX + '/shadow.html' ) ;
await page . locator ( 'button' ) . click ( ) ;
await expect ( page . locator ( 'h1' ) ) . toHaveText ( 'Hellow Shadow DOM v1' ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const framePageClick = await traceViewer . snapshotFrame ( 'Click' ) ;
2023-09-01 03:46:49 +08:00
await expect ( framePageClick . locator ( 'button' ) ) . toHaveCSS ( 'background-color' , 'rgba(111, 168, 220, 0.498)' ) ;
2025-05-23 00:49:37 +08:00
const frameExpect = await traceViewer . snapshotFrame ( 'Expect' ) ;
2023-09-01 03:46:49 +08:00
await expect ( frameExpect . locator ( 'h1' ) ) . toHaveCSS ( 'background-color' , 'rgba(111, 168, 220, 0.498)' ) ;
} ) ;
2024-02-03 08:41:08 +08:00
test ( 'should highlight expect failure' , async ( { page , server , runAndTrace } ) = > {
test . info ( ) . annotations . push ( { type : 'issue' , description : 'https://github.com/microsoft/playwright-python/issues/2258' } ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
try {
await page . goto ( server . EMPTY_PAGE ) ;
await expect ( page ) . toHaveTitle ( 'foo' , { timeout : 100 } ) ;
} catch ( e ) {
}
} ) ;
2025-05-23 00:49:37 +08:00
await expect ( traceViewer . actionTitles . getByText ( 'EXPECT' ) ) . toHaveCSS ( 'color' , 'rgb(176, 16, 17)' ) ;
2024-02-03 08:41:08 +08:00
await traceViewer . showErrorsTab ( ) ;
await expect ( traceViewer . errorMessages . nth ( 0 ) ) . toHaveText ( 'Expect failed' ) ;
} ) ;
2021-10-24 02:23:39 +08:00
test ( 'should show action source' , async ( { showTraceViewer } ) = > {
2022-02-08 09:05:42 +08:00
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 00:49:37 +08:00
await traceViewer . selectAction ( 'Click' ) ;
2021-10-24 02:23:39 +08:00
2025-06-16 23:24:02 +08:00
await traceViewer . showSourceTab ( ) ;
await expect ( traceViewer . page . locator ( '.source-line-running' ) ) . toContainText ( 'await page.getByText(\'Click\').click()' ) ;
await expect ( traceViewer . stackFrames ( { selected : true } ) ) . toHaveText ( /doClick.*trace-viewer\.spec\.ts:[\d]+/ ) ;
2024-10-02 19:30:44 +08:00
2025-05-23 00:49:37 +08:00
await traceViewer . hoverAction ( 'Wait for navigation' ) ;
2025-06-16 23:24:02 +08:00
await expect ( traceViewer . page . locator ( '.source-line-running' ) ) . toContainText ( 'page.waitForNavigation()' ) ;
2021-10-24 02:23:39 +08:00
} ) ;
2021-11-09 10:03:10 +08:00
2023-05-24 03:04:44 +08:00
test ( 'should follow redirects' , async ( { page , runAndTrace , server , asset } ) = > {
2021-11-09 10:03:10 +08:00
server . setRoute ( '/empty.html' , ( req , res ) = > {
res . writeHead ( 200 , { 'Content-Type' : 'text/html' } ) ;
res . end ( ` <div><img id=img src="image.png"></img></div> ` ) ;
} ) ;
server . setRoute ( '/image.png' , ( req , res ) = > {
res . writeHead ( 301 , { location : '/image-301.png' } ) ;
res . end ( ) ;
} ) ;
server . setRoute ( '/image-301.png' , ( req , res ) = > {
res . writeHead ( 302 , { location : '/image-302.png' } ) ;
res . end ( ) ;
} ) ;
server . setRoute ( '/image-302.png' , ( req , res ) = > {
res . writeHead ( 200 , { 'content-type' : 'image/png' } ) ;
res . end ( fs . readFileSync ( asset ( 'digits/0.png' ) ) ) ;
} ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
expect ( await page . evaluate ( ( ) = > ( window as any ) . img . naturalWidth ) ) . toBe ( 10 ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const snapshotFrame = await traceViewer . snapshotFrame ( 'Evaluate' ) ;
2021-11-09 10:03:10 +08:00
await expect ( snapshotFrame . locator ( 'img' ) ) . toHaveJSProperty ( 'naturalWidth' , 10 ) ;
} ) ;
2021-11-10 14:13:51 +08:00
2024-07-03 15:40:50 +08:00
test ( 'should include metainfo' , async ( { showTraceViewer } ) = > {
2022-02-08 09:05:42 +08:00
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-06-16 23:24:02 +08:00
await traceViewer . page . getByRole ( 'tab' , { name : 'Metadata' } ) . click ( ) ;
2024-08-01 07:37:16 +08:00
const callLine = traceViewer . metadataTab . locator ( '.call-line' ) ;
2023-02-16 23:59:21 +08:00
await expect ( callLine . getByText ( 'start time' ) ) . toHaveText ( /start time:[\d/,: ]+/ ) ;
await expect ( callLine . getByText ( 'duration' ) ) . toHaveText ( /duration:[\dms]+/ ) ;
await expect ( callLine . getByText ( 'engine' ) ) . toHaveText ( /engine:[\w]+/ ) ;
await expect ( callLine . getByText ( 'platform' ) ) . toHaveText ( /platform:[\w]+/ ) ;
await expect ( callLine . getByText ( 'width' ) ) . toHaveText ( /width:[\d]+/ ) ;
await expect ( callLine . getByText ( 'height' ) ) . toHaveText ( /height:[\d]+/ ) ;
await expect ( callLine . getByText ( 'pages' ) ) . toHaveText ( /pages:1/ ) ;
await expect ( callLine . getByText ( 'actions' ) ) . toHaveText ( /actions:[\d]+/ ) ;
await expect ( callLine . getByText ( 'events' ) ) . toHaveText ( /events:[\d]+/ ) ;
2021-11-10 14:13:51 +08:00
} ) ;
2022-02-08 09:05:42 +08:00
test ( 'should open two trace files' , async ( { context , page , request , server , showTraceViewer } , testInfo ) = > {
await ( request as any ) . _tracing . start ( { snapshots : true } ) ;
2024-03-27 01:25:12 +08:00
await context . tracing . start ( { snapshots : true , sources : true } ) ;
2022-02-08 09:05:42 +08:00
{
const response = await request . get ( server . PREFIX + '/simple.json' ) ;
await expect ( response ) . toBeOK ( ) ;
}
await page . goto ( server . PREFIX + '/input/button.html' ) ;
{
const response = await request . head ( server . PREFIX + '/simplezip.json' ) ;
await expect ( response ) . toBeOK ( ) ;
}
2022-10-19 10:23:40 +08:00
await page . locator ( 'button' ) . click ( ) ;
await page . locator ( 'button' ) . click ( ) ;
2022-02-08 09:05:42 +08:00
{
const response = await request . post ( server . PREFIX + '/one-style.css' ) ;
2023-06-03 03:59:12 +08:00
await expect ( response ) . toBeOK ( ) ;
2022-02-08 09:05:42 +08:00
}
const apiTrace = testInfo . outputPath ( 'api.zip' ) ;
const contextTrace = testInfo . outputPath ( 'context.zip' ) ;
await ( request as any ) . _tracing . stop ( { path : apiTrace } ) ;
await context . tracing . stop ( { path : contextTrace } ) ;
const traceViewer = await showTraceViewer ( [ contextTrace , apiTrace ] ) ;
2025-05-23 00:49:37 +08:00
2025-06-18 20:59:09 +08:00
await traceViewer . selectAction ( 'GET' ) ;
await traceViewer . selectAction ( 'HEAD' ) ;
await traceViewer . selectAction ( 'POST' ) ;
2022-02-08 09:05:42 +08:00
await expect ( traceViewer . actionTitles ) . toHaveText ( [
2025-06-18 20:59:09 +08:00
/GET "\/simple\.json"/ ,
2025-05-23 00:49:37 +08:00
/Navigate to "\/input\/button\.html"/ ,
2025-06-18 20:59:09 +08:00
/HEAD "\/simplezip\.json"/ ,
2025-05-23 00:49:37 +08:00
/Click.*locator\('button'\)/ ,
/Click.*locator\('button'\)/ ,
2025-06-18 20:59:09 +08:00
/POST "\/one-style\.css"/ ,
2022-02-08 09:05:42 +08:00
] ) ;
2025-06-16 23:24:02 +08:00
await traceViewer . page . getByRole ( 'tab' , { name : 'Metadata' } ) . click ( ) ;
2022-02-08 09:05:42 +08:00
const callLine = traceViewer . page . locator ( '.call-line' ) ;
// Should get metadata from the context trace
2023-02-16 23:59:21 +08:00
await expect ( callLine . getByText ( 'start time' ) ) . toHaveText ( /start time:[\d/,: ]+/ ) ;
2023-10-05 10:56:42 +08:00
// duration in the metadata section
2023-02-16 23:59:21 +08:00
await expect ( callLine . getByText ( 'duration' ) . first ( ) ) . toHaveText ( /duration:[\dms]+/ ) ;
await expect ( callLine . getByText ( 'engine' ) ) . toHaveText ( /engine:[\w]+/ ) ;
await expect ( callLine . getByText ( 'platform' ) ) . toHaveText ( /platform:[\w]+/ ) ;
await expect ( callLine . getByText ( 'width' ) ) . toHaveText ( /width:[\d]+/ ) ;
await expect ( callLine . getByText ( 'height' ) ) . toHaveText ( /height:[\d]+/ ) ;
await expect ( callLine . getByText ( 'pages' ) ) . toHaveText ( /pages:1/ ) ;
await expect ( callLine . getByText ( 'actions' ) ) . toHaveText ( /actions:6/ ) ;
await expect ( callLine . getByText ( 'events' ) ) . toHaveText ( /events:[\d]+/ ) ;
2022-02-08 09:05:42 +08:00
} ) ;
2025-05-20 05:02:57 +08:00
test ( 'should open two trace files of the same test (v6)' , async ( { showTraceViewer , asset } ) = > {
2024-05-09 08:33:31 +08:00
const traceViewer = await showTraceViewer ( [ asset ( 'test-trace1.zip' ) , asset ( 'test-trace2.zip' ) ] ) ;
// Same actions from different test runs should not be merged.
await expect ( traceViewer . actionTitles ) . toHaveText ( [
2025-05-23 00:49:37 +08:00
/Before Hooks/ ,
/Before Hooks/ ,
/page.goto/ , // Legacy trace does not have titles
/page.goto/ , // Legacy trace does not have titles
/expect.toBe/ ,
/After Hooks/ ,
/expect.toBe/ ,
/After Hooks/ ,
2024-05-09 08:33:31 +08:00
] ) ;
} ) ;
2023-03-23 09:52:04 +08:00
test ( 'should not crash with broken locator' , async ( { page , runAndTrace , server } ) = > {
test . info ( ) . annotations . push ( { type : 'issue' , description : 'https://github.com/microsoft/playwright/issues/21832' } ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
try {
await page . locator ( '[class*=github-btn] a]' ) . click ( ) ;
} catch ( e ) {
}
} ) ;
await expect ( traceViewer . page ) . toHaveTitle ( 'Playwright Trace Viewer' ) ;
const header = traceViewer . page . getByText ( 'Playwright' , { exact : true } ) ;
await expect ( header ) . toBeVisible ( ) ;
} ) ;
2022-09-05 01:52:20 +08:00
test ( 'should serve overridden request' , async ( { page , runAndTrace , server } ) = > {
server . setRoute ( '/custom.css' , ( req , res ) = > {
res . writeHead ( 200 , {
'Content-Type' : 'text/css' ,
} ) ;
res . end ( ` body { background: red } ` ) ;
} ) ;
await page . route ( '**/one-style.css' , route = > {
2023-06-03 03:59:12 +08:00
void route . continue ( {
2022-09-05 01:52:20 +08:00
url : server.PREFIX + '/custom.css'
} ) ;
} ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . PREFIX + '/one-style.html' ) ;
} ) ;
// Render snapshot, check expectations.
2025-05-23 00:49:37 +08:00
const snapshotFrame = await traceViewer . snapshotFrame ( 'Navigate' ) ;
2023-03-21 22:40:54 +08:00
await expect ( snapshotFrame . locator ( 'body' ) ) . toHaveCSS ( 'background-color' , 'rgb(255, 0, 0)' ) ;
2022-09-05 01:52:20 +08:00
} ) ;
2022-10-08 02:27:56 +08:00
test ( 'should display waitForLoadState even if did not wait for it' , async ( { runAndTrace , server , page } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
await page . waitForLoadState ( 'load' ) ;
await page . waitForLoadState ( 'load' ) ;
} ) ;
await expect ( traceViewer . actionTitles ) . toHaveText ( [
2025-05-23 00:49:37 +08:00
/Navigate/ ,
/Wait for load state "load"/ ,
/Wait for load state "load"/ ,
2022-10-08 02:27:56 +08:00
] ) ;
} ) ;
2022-10-19 10:23:40 +08:00
test ( 'should display language-specific locators' , async ( { runAndTrace , server , page , toImpl } ) = > {
2023-06-02 08:54:43 +08:00
toImpl ( page ) . attribution . playwright . options . sdkLanguage = 'python' ;
2022-10-19 10:23:40 +08:00
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( '<button>Submit</button>' ) ;
await page . getByRole ( 'button' , { name : 'Submit' } ) . click ( ) ;
} ) ;
await expect ( traceViewer . actionTitles ) . toHaveText ( [
2025-05-23 00:49:37 +08:00
/Set content/ ,
/Click.*get_by_role\("button", name="Submit"\)/ ,
2022-10-19 10:23:40 +08:00
] ) ;
2023-06-02 08:54:43 +08:00
toImpl ( page ) . attribution . playwright . options . sdkLanguage = 'javascript' ;
2022-10-19 10:23:40 +08:00
} ) ;
2023-02-18 03:19:53 +08:00
test ( 'should pick locator' , async ( { page , runAndTrace , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
await page . setContent ( '<button>Submit</button>' ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Set content' ) ;
2023-02-18 03:19:53 +08:00
await traceViewer . page . getByTitle ( 'Pick locator' ) . click ( ) ;
2023-03-21 22:40:54 +08:00
await snapshot . locator ( 'button' ) . click ( ) ;
2025-01-12 02:14:21 +08:00
await expect ( traceViewer . page . locator ( '.cm-wrapper' ) . first ( ) ) . toContainText ( ` getByRole('button', { name: 'Submit' }) ` ) ;
await expect ( traceViewer . page . locator ( '.cm-wrapper' ) . last ( ) ) . toContainText ( ` - button "Submit" ` ) ;
2023-02-18 03:19:53 +08:00
} ) ;
2025-01-12 02:14:21 +08:00
test ( 'should update highlight when typing locator' , async ( { page , runAndTrace , server } ) = > {
2023-02-18 03:19:53 +08:00
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
await page . setContent ( '<button>Submit</button>' ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Set content' ) ;
2023-08-19 08:53:03 +08:00
await traceViewer . page . getByText ( 'Locator' ) . click ( ) ;
2025-01-12 02:14:21 +08:00
await traceViewer . page . locator ( '.CodeMirror' ) . first ( ) . click ( ) ;
2023-02-18 03:19:53 +08:00
await traceViewer . page . keyboard . type ( 'button' ) ;
2025-01-12 02:14:21 +08:00
const buttonBox = roundBox ( await snapshot . locator ( 'button' ) . boundingBox ( ) ) ;
await expect ( snapshot . locator ( 'x-pw-highlight' ) ) . toBeVisible ( ) ;
await expect . poll ( async ( ) = > {
return roundBox ( await snapshot . locator ( 'x-pw-highlight' ) . boundingBox ( ) ) ;
} ) . toEqual ( buttonBox ) ;
} ) ;
test ( 'should update highlight when typing snapshot' , async ( { page , runAndTrace , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
await page . setContent ( '<button>Submit</button>' ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Set content' ) ;
2025-01-12 02:14:21 +08:00
await traceViewer . page . getByText ( 'Locator' ) . click ( ) ;
await traceViewer . page . locator ( '.CodeMirror' ) . last ( ) . click ( ) ;
await traceViewer . page . keyboard . type ( '- button' ) ;
const buttonBox = roundBox ( await snapshot . locator ( 'button' ) . boundingBox ( ) ) ;
await expect ( snapshot . locator ( 'x-pw-highlight' ) ) . toBeVisible ( ) ;
await expect . poll ( async ( ) = > {
return roundBox ( await snapshot . locator ( 'x-pw-highlight' ) . boundingBox ( ) ) ;
} ) . toEqual ( buttonBox ) ;
2023-02-18 03:19:53 +08:00
} ) ;
2023-03-24 03:49:53 +08:00
test ( 'should open trace-1.31' , async ( { showTraceViewer } ) = > {
const traceViewer = await showTraceViewer ( [ path . join ( __dirname , '../assets/trace-1.31.zip' ) ] ) ;
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Click' ) ;
2023-03-24 03:49:53 +08:00
await expect ( snapshot . locator ( '[__playwright_target__]' ) ) . toHaveText ( [ 'Submit' ] ) ;
} ) ;
2023-06-17 21:58:16 +08:00
2023-09-20 07:21:09 +08:00
test ( 'should open trace-1.37' , async ( { showTraceViewer } ) = > {
const traceViewer = await showTraceViewer ( [ path . join ( __dirname , '../assets/trace-1.37.zip' ) ] ) ;
const snapshot = await traceViewer . snapshotFrame ( 'page.goto' ) ;
await expect ( snapshot . locator ( 'div' ) ) . toHaveCSS ( 'background-color' , 'rgb(255, 0, 0)' ) ;
await traceViewer . showConsoleTab ( ) ;
await expect ( traceViewer . consoleLineMessages ) . toHaveText ( [ 'hello {foo: bar}' ] ) ;
await traceViewer . showNetworkTab ( ) ;
2024-01-11 07:28:33 +08:00
await expect ( traceViewer . networkRequests ) . toContainText ( [
/index.htmlGET200text\/html/ ,
/style.cssGET200x-unknown/
] ) ;
2023-09-20 07:21:09 +08:00
} ) ;
2023-07-11 11:04:48 +08:00
test ( 'should prefer later resource request with the same method' , async ( { page , server , runAndTrace } ) = > {
2023-06-17 21:58:16 +08:00
const html = `
< body >
< script >
const link = document . createElement ( 'link' ) ;
link . rel = 'stylesheet' ;
link . href = 'style.css' ;
document . head . appendChild ( link ) ;
if ( ! window . location . href . includes ( 'reloaded' ) )
window . location . href = window . location . href + '?reloaded' ;
2023-07-11 11:04:48 +08:00
else
link . onload = ( ) = > fetch ( 'style.css' , { method : 'HEAD' } ) ;
2023-06-17 21:58:16 +08:00
< / script >
2023-07-11 11:04:48 +08:00
< div > Hello < / div >
2023-06-17 21:58:16 +08:00
< / body >
` ;
let reloadStartedCallback = ( ) = > { } ;
const reloadStartedPromise = new Promise < void > ( f = > reloadStartedCallback = f ) ;
server . setRoute ( '/style.css' , async ( req , res ) = > {
2023-07-11 11:04:48 +08:00
if ( req . method === 'HEAD' ) {
res . statusCode = 200 ;
res . end ( '' ) ;
return ;
}
2023-06-17 21:58:16 +08:00
// Make sure reload happens before style arrives.
await reloadStartedPromise ;
res . end ( 'body { background-color: rgb(123, 123, 123) }' ) ;
} ) ;
server . setRoute ( '/index.html' , ( req , res ) = > res . end ( html ) ) ;
server . setRoute ( '/index.html?reloaded' , ( req , res ) = > {
reloadStartedCallback ( ) ;
res . end ( html ) ;
} ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
2023-07-11 11:04:48 +08:00
const headRequest = page . waitForRequest ( req = > req . url ( ) === server . PREFIX + '/style.css' && req . method ( ) === 'HEAD' ) ;
2023-06-17 21:58:16 +08:00
await page . goto ( server . PREFIX + '/index.html' ) ;
2023-07-11 11:04:48 +08:00
await headRequest ;
await page . locator ( 'div' ) . click ( ) ;
2023-06-17 21:58:16 +08:00
} ) ;
2025-05-23 00:49:37 +08:00
const frame1 = await traceViewer . snapshotFrame ( 'Navigate' ) ;
2023-07-11 11:04:48 +08:00
await expect ( frame1 . locator ( 'body' ) ) . toHaveCSS ( 'background-color' , 'rgb(123, 123, 123)' ) ;
2025-05-23 00:49:37 +08:00
const frame2 = await traceViewer . snapshotFrame ( 'Click' ) ;
2023-07-11 11:04:48 +08:00
await expect ( frame2 . locator ( 'body' ) ) . toHaveCSS ( 'background-color' , 'rgb(123, 123, 123)' ) ;
2023-06-17 21:58:16 +08:00
} ) ;
2023-07-27 23:06:00 +08:00
test ( 'should ignore 304 responses' , async ( { page , server , runAndTrace } ) = > {
const html = `
< head >
< link rel = stylesheet href = "style.css" / >
< / head >
< body >
< div > Hello < / div >
< / body >
` ;
server . setRoute ( '/style.css' , async ( req , res ) = > {
if ( req . headers [ 'if-modified-since' ] ) {
res . statusCode = 304 ; // not modified
res . end ( ) ;
return ;
}
res . setHeader ( 'Cache-Control' , 'public, max-age=31536000, no-cache' ) ;
res . setHeader ( 'Last-Modified' , ( new Date ( ) ) . toISOString ( ) ) ;
res . end ( 'body { background-color: rgb(123, 123, 123) }' ) ;
} ) ;
server . setRoute ( '/index.html' , ( req , res ) = > res . end ( html ) ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
const request1 = page . waitForEvent ( 'requestfinished' , req = > req . url ( ) === server . PREFIX + '/style.css' ) ;
await page . goto ( server . PREFIX + '/index.html' ) ;
await request1 ;
await page . waitForTimeout ( 1000 ) ;
const request2 = page . waitForEvent ( 'requestfinished' , req = > req . url ( ) === server . PREFIX + '/style.css' ) ;
await page . goto ( server . PREFIX + '/index.html' ) ;
await request2 ;
await page . waitForTimeout ( 1000 ) ;
await page . locator ( 'div' ) . click ( ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Click' ) ;
2023-07-27 23:06:00 +08:00
await expect ( frame . locator ( 'body' ) ) . toHaveCSS ( 'background-color' , 'rgb(123, 123, 123)' ) ;
} ) ;
2023-09-07 00:44:47 +08:00
test ( 'should pick locator in iframe' , async ( { page , runAndTrace , server } ) = > {
/ *
iframe [ id = frame1 ]
div Hello1
iframe
div Hello2
iframe [ name = one ]
div HelloNameOne
iframe [ name = two ]
dev HelloNameTwo
* /
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
await page . setContent ( ` <iframe id=frame1 srcdoc="<div>Hello1</div><iframe srcdoc='<div>Hello2</div><iframe name=one></iframe><iframe name=two></iframe><iframe></iframe>'>"> ` ) ;
const frameOne = page . frame ( { name : 'one' } ) ;
await frameOne . setContent ( ` <div>HelloNameOne</div> ` ) ;
const frameTwo = page . frame ( { name : 'two' } ) ;
await frameTwo . setContent ( ` <div>HelloNameTwo</div> ` ) ;
await page . evaluate ( '2+2' ) ;
} ) ;
await traceViewer . page . getByTitle ( 'Pick locator' ) . click ( ) ;
2025-01-12 02:14:21 +08:00
const cmWrapper = traceViewer . page . locator ( '.cm-wrapper' ) . first ( ) ;
2023-09-07 00:44:47 +08:00
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Evaluate' ) ;
2023-09-07 00:44:47 +08:00
await snapshot . frameLocator ( '#frame1' ) . getByText ( 'Hello1' ) . click ( ) ;
2024-09-19 11:15:01 +08:00
await expect . soft ( cmWrapper ) . toContainText ( ` locator('#frame1').contentFrame().getByText('Hello1') ` ) ;
2023-09-07 00:44:47 +08:00
await snapshot . frameLocator ( '#frame1' ) . frameLocator ( 'iframe' ) . getByText ( 'Hello2' ) . click ( ) ;
2024-09-19 11:15:01 +08:00
await expect . soft ( cmWrapper ) . toContainText ( ` locator('#frame1').contentFrame().locator('iframe').contentFrame().getByText('Hello2') ` , { timeout : 0 } ) ;
2023-09-07 00:44:47 +08:00
await snapshot . frameLocator ( '#frame1' ) . frameLocator ( 'iframe' ) . frameLocator ( '[name=one]' ) . getByText ( 'HelloNameOne' ) . click ( ) ;
2024-09-19 11:15:01 +08:00
await expect . soft ( cmWrapper ) . toContainText ( ` locator('#frame1').contentFrame().locator('iframe').contentFrame().locator('iframe[name="one"]').contentFrame().getByText('HelloNameOne') ` , { timeout : 0 } ) ;
2023-09-07 00:44:47 +08:00
await snapshot . frameLocator ( '#frame1' ) . frameLocator ( 'iframe' ) . frameLocator ( '[name=two]' ) . getByText ( 'HelloNameTwo' ) . click ( ) ;
2024-09-19 11:15:01 +08:00
await expect . soft ( cmWrapper ) . toContainText ( ` locator('#frame1').contentFrame().locator('iframe').contentFrame().locator('iframe[name="two"]').contentFrame().getByText('HelloNameTwo') ` , { timeout : 0 } ) ;
2023-09-07 00:44:47 +08:00
} ) ;
2023-09-07 07:14:40 +08:00
test ( 'should highlight locator in iframe while typing' , async ( { page , runAndTrace , server , platform } ) = > {
/ *
iframe [ id = frame1 ]
div Hello1
iframe
div Hello2
iframe [ name = one ]
div HelloNameOne
iframe [ name = two ]
dev HelloNameTwo
* /
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
await page . setContent ( ` <iframe id=frame1 srcdoc="<div>Hello1</div><iframe srcdoc='<div>Hello2</div><iframe name=one></iframe><iframe name=two></iframe><iframe></iframe>'>"> ` ) ;
const frameOne = page . frame ( { name : 'one' } ) ;
await frameOne . setContent ( ` <div>HelloNameOne</div> ` ) ;
const frameTwo = page . frame ( { name : 'two' } ) ;
await frameTwo . setContent ( ` <div>HelloNameTwo</div> ` ) ;
await page . evaluate ( '2+2' ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Evaluate' ) ;
2023-09-07 07:14:40 +08:00
await traceViewer . page . getByText ( 'Locator' ) . click ( ) ;
2025-01-12 02:14:21 +08:00
await traceViewer . page . locator ( '.CodeMirror' ) . first ( ) . click ( ) ;
2023-09-07 07:14:40 +08:00
const locators = [ {
2024-09-19 11:15:01 +08:00
text : ` locator('#frame1').contentFrame().getByText('Hello1') ` ,
2023-09-07 07:14:40 +08:00
element : snapshot.frameLocator ( '#frame1' ) . locator ( 'div' , { hasText : 'Hello1' } ) ,
highlight : snapshot.frameLocator ( '#frame1' ) . locator ( 'x-pw-highlight' ) ,
} , {
2024-09-19 11:15:01 +08:00
text : ` locator('#frame1').contentFrame().locator('iframe').contentFrame().getByText('Hello2') ` ,
2023-09-07 07:14:40 +08:00
element : snapshot.frameLocator ( '#frame1' ) . frameLocator ( 'iframe' ) . locator ( 'div' , { hasText : 'Hello2' } ) ,
highlight : snapshot.frameLocator ( '#frame1' ) . frameLocator ( 'iframe' ) . locator ( 'x-pw-highlight' ) ,
} , {
2024-09-19 11:15:01 +08:00
text : ` locator('#frame1').contentFrame().locator('iframe').contentFrame().locator('iframe[name="one"]').contentFrame().getByText('HelloNameOne') ` ,
2023-09-07 07:14:40 +08:00
element : snapshot.frameLocator ( '#frame1' ) . frameLocator ( 'iframe' ) . frameLocator ( 'iframe[name="one"]' ) . locator ( 'div' , { hasText : 'HelloNameOne' } ) ,
highlight : snapshot.frameLocator ( '#frame1' ) . frameLocator ( 'iframe' ) . frameLocator ( 'iframe[name="one"]' ) . locator ( 'x-pw-highlight' ) ,
} ] ;
for ( const locator of locators ) {
if ( platform === 'darwin' )
await traceViewer . page . keyboard . press ( 'Meta+a' ) ;
else
await traceViewer . page . keyboard . press ( 'Control+a' ) ;
await traceViewer . page . keyboard . press ( 'Backspace' ) ;
await traceViewer . page . keyboard . type ( locator . text ) ;
const elementBox = await locator . element . boundingBox ( ) ;
const highlightBox = await locator . highlight . boundingBox ( ) ;
expect ( Math . abs ( elementBox . width - highlightBox . width ) ) . toBeLessThan ( 5 ) ;
expect ( Math . abs ( elementBox . height - highlightBox . height ) ) . toBeLessThan ( 5 ) ;
expect ( Math . abs ( elementBox . x - highlightBox . x ) ) . toBeLessThan ( 5 ) ;
expect ( Math . abs ( elementBox . y - highlightBox . y ) ) . toBeLessThan ( 5 ) ;
}
} ) ;
2024-01-13 04:11:39 +08:00
test ( 'should preserve noscript when javascript is disabled' , async ( { browser , server , showTraceViewer } ) = > {
2024-09-17 21:32:30 +08:00
const traceFile = test . info ( ) . outputPath ( 'trace.zip' ) ;
2024-01-13 04:11:39 +08:00
const page = await browser . newPage ( { javaScriptEnabled : false } ) ;
await page . context ( ) . tracing . start ( { snapshots : true , screenshots : true , sources : true } ) ;
await page . goto ( server . EMPTY_PAGE ) ;
await page . setContent ( `
< body >
< noscript > javascript is disabled ! < / noscript >
< / body >
` );
await page . context ( ) . tracing . stop ( { path : traceFile } ) ;
await page . close ( ) ;
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Set content' ) ;
2024-01-13 04:11:39 +08:00
await expect ( frame . getByText ( 'javascript is disabled!' ) ) . toBeVisible ( ) ;
} ) ;
2024-04-13 02:26:52 +08:00
2024-09-17 21:32:30 +08:00
test ( 'should remove noscript by default' , async ( { browser , server , showTraceViewer , browserType } ) = > {
const traceFile = test . info ( ) . outputPath ( 'trace.zip' ) ;
2024-04-13 02:26:52 +08:00
const page = await browser . newPage ( { javaScriptEnabled : undefined } ) ;
await page . context ( ) . tracing . start ( { snapshots : true , screenshots : true , sources : true } ) ;
await page . goto ( server . EMPTY_PAGE ) ;
await page . setContent ( `
< noscript > Enable JavaScript to run this app . < / noscript >
< div > Always visible < / div >
` );
await page . context ( ) . tracing . stop ( { path : traceFile } ) ;
await page . close ( ) ;
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Set content' ) ;
2024-04-13 02:26:52 +08:00
await expect ( frame . getByText ( 'Always visible' ) ) . toBeVisible ( ) ;
await expect ( frame . getByText ( 'Enable JavaScript to run this app.' ) ) . toBeHidden ( ) ;
} ) ;
2024-09-17 21:32:30 +08:00
test ( 'should remove noscript when javaScriptEnabled is set to true' , async ( { browser , server , showTraceViewer , browserType } ) = > {
const traceFile = test . info ( ) . outputPath ( 'trace.zip' ) ;
2024-04-13 02:26:52 +08:00
const page = await browser . newPage ( { javaScriptEnabled : true } ) ;
await page . context ( ) . tracing . start ( { snapshots : true , screenshots : true , sources : true } ) ;
await page . goto ( server . EMPTY_PAGE ) ;
await page . setContent ( `
< noscript > Enable JavaScript to run this app . < / noscript >
< div > Always visible < / div >
` );
await page . context ( ) . tracing . stop ( { path : traceFile } ) ;
await page . close ( ) ;
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 00:49:37 +08:00
const frame = await traceViewer . snapshotFrame ( 'Set content' ) ;
2024-04-13 02:26:52 +08:00
await expect ( frame . getByText ( 'Always visible' ) ) . toBeVisible ( ) ;
await expect ( frame . getByText ( 'Enable JavaScript to run this app.' ) ) . toBeHidden ( ) ;
} ) ;
2024-05-29 04:14:22 +08:00
2025-09-09 18:34:30 +08:00
test ( 'should open snapshot in new browser context' , async ( { browser , page , runAndTrace , server , channel } ) = > {
test . skip ( channel === 'webkit-wsl' , 'Trace Viewer opens via ipv6 address which is not supported in WSL' ) ;
2024-05-29 04:14:22 +08:00
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
await page . setContent ( 'hello' ) ;
} ) ;
2025-05-23 00:49:37 +08:00
await traceViewer . snapshotFrame ( 'Set content' ) ;
2024-05-29 04:14:22 +08:00
const popupPromise = traceViewer . page . context ( ) . waitForEvent ( 'page' ) ;
await traceViewer . page . getByTitle ( 'Open snapshot in a new tab' ) . click ( ) ;
const popup = await popupPromise ;
// doesn't share sw.bundle.js
const newPage = await browser . newPage ( ) ;
await newPage . goto ( popup . url ( ) ) ;
await expect ( newPage . getByText ( 'hello' ) ) . toBeVisible ( ) ;
await newPage . close ( ) ;
} ) ;
2024-06-20 06:06:20 +08:00
2025-05-23 00:49:37 +08:00
test ( 'should show similar actions from legacy library-only trace' , async ( { showTraceViewer , asset } ) = > {
2024-07-20 02:18:22 +08:00
const traceViewer = await showTraceViewer ( [ asset ( 'trace-library-1.46.zip' ) ] ) ;
2025-08-15 18:38:05 +08:00
await traceViewer . showAllActions ( ) ;
2024-07-20 02:18:22 +08:00
await expect ( traceViewer . actionTitles ) . toHaveText ( [
2025-05-23 00:49:37 +08:00
/page\.setContent/ ,
/locator\.getAttribute/ ,
/locator\.isVisible.*locator\('div'\)/ ,
/locator\.getAttribute/ ,
/locator\.isVisible.*locator\('div'\)/ ,
2024-07-20 02:18:22 +08:00
] ) ;
} ) ;
2024-06-20 06:06:20 +08:00
function parseMillis ( s : string ) : number {
const matchMs = s . match ( /(\d+)ms/ ) ;
if ( matchMs )
return + matchMs [ 1 ] ;
const matchSeconds = s . match ( /([\d.]+)s/ ) ;
if ( ! matchSeconds )
throw new Error ( 'Failed to parse to millis: ' + s ) ;
return ( + matchSeconds [ 1 ] ) * 1000 ;
}
test ( 'should show correct request start time' , {
annotation : { type : 'issue' , description : 'https://github.com/microsoft/playwright/issues/31133' } ,
} , async ( { page , runAndTrace , server } ) = > {
server . setRoute ( '/api' , ( req , res ) = > {
setTimeout ( ( ) = > {
res . writeHead ( 200 , { 'Content-Type' : 'text/plain' } ) ;
res . end ( 'done' ) ;
} , 1100 ) ;
} ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . EMPTY_PAGE ) ;
await page . evaluate ( ( ) = > {
return fetch ( '/api' ) . then ( r = > r . text ( ) ) ;
} ) ;
} ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Evaluate' ) ;
2024-06-20 06:06:20 +08:00
await traceViewer . showNetworkTab ( ) ;
await expect ( traceViewer . networkRequests ) . toContainText ( [ /apiGET200text/ ] ) ;
const line = traceViewer . networkRequests . getByText ( /apiGET200text/ ) ;
const start = await line . locator ( '.grid-view-column-start' ) . textContent ( ) ;
const duration = await line . locator ( '.grid-view-column-duration' ) . textContent ( ) ;
expect ( parseMillis ( duration ) ) . toBeGreaterThan ( 1000 ) ;
expect ( parseMillis ( start ) ) . toBeLessThan ( 1000 ) ;
} ) ;
2024-07-23 02:34:34 +08:00
2024-09-22 01:17:59 +08:00
test ( 'should not record route actions' , {
2024-07-23 02:34:34 +08:00
annotation : { type : 'issue' , description : 'https://github.com/microsoft/playwright/issues/30970' } ,
} , async ( { page , runAndTrace , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . route ( '**/*' , async route = > {
await route . fulfill ( { contentType : 'text/html' , body : 'Yo, page!' } ) ;
} ) ;
await page . goto ( server . EMPTY_PAGE ) ;
} ) ;
await expect ( traceViewer . actionTitles ) . toHaveText ( [
2025-05-23 00:49:37 +08:00
/Navigate to "\/empty.html"/ ,
2024-07-23 02:34:34 +08:00
] ) ;
} ) ;
2024-07-25 23:14:46 +08:00
2024-11-18 20:59:40 +08:00
test ( 'should not record network actions' , {
annotation : { type : 'issue' , description : 'https://github.com/microsoft/playwright/issues/33558' } ,
} , async ( { page , runAndTrace , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
2025-08-08 15:34:56 +08:00
let counter = 0 ;
2024-11-18 20:59:40 +08:00
page . on ( 'request' , async request = > {
await request . allHeaders ( ) ;
2025-08-08 15:34:56 +08:00
++ counter ;
2024-11-18 20:59:40 +08:00
} ) ;
page . on ( 'response' , async response = > {
await response . text ( ) ;
2025-08-08 15:34:56 +08:00
++ counter ;
2024-11-18 20:59:40 +08:00
} ) ;
await page . goto ( server . EMPTY_PAGE ) ;
2025-08-08 15:34:56 +08:00
await expect . poll ( ( ) = > counter ) . toBe ( 2 ) ;
2024-11-18 20:59:40 +08:00
} ) ;
await expect ( traceViewer . actionTitles ) . toHaveText ( [
2025-05-23 00:49:37 +08:00
/Navigate.*empty.html/ ,
2024-11-18 20:59:40 +08:00
] ) ;
} ) ;
2024-07-25 23:14:46 +08:00
test ( 'should show baseURL in metadata pane' , {
annotation : { type : 'issue' , description : 'https://github.com/microsoft/playwright/issues/31847' } ,
} , async ( { showTraceViewer } ) = > {
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Evaluate' ) ;
2024-07-25 23:14:46 +08:00
await traceViewer . showMetadataTab ( ) ;
await expect ( traceViewer . metadataTab ) . toContainText ( 'baseURL:https://example.com' ) ;
} ) ;
2024-08-20 01:29:51 +08:00
2024-10-24 01:24:53 +08:00
test ( 'should not leak recorders' , {
annotation : { type : 'issue' , description : 'https://github.com/microsoft/playwright/issues/33086' } ,
2025-05-03 04:46:58 +08:00
} , async ( { showTraceViewer , platform } ) = > {
2024-10-24 01:24:53 +08:00
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2024-10-24 17:47:34 +08:00
const aliveCount = async ( ) = > {
2024-10-24 01:24:53 +08:00
return await traceViewer . page . evaluate ( ( ) = > {
const weakSet = ( window as any ) . _weakRecordersForTest || new Set ( ) ;
const weakList = [ . . . weakSet ] ;
const aliveList = weakList . filter ( r = > ! ! r . deref ( ) ) ;
2024-10-24 17:47:34 +08:00
return aliveList . length ;
2024-10-24 01:24:53 +08:00
} ) ;
} ;
2025-05-03 04:46:58 +08:00
await traceViewer . page . getByRole ( 'tab' , { name : 'Locator' } ) . click ( ) ;
const forceRecorder = async ( action : string ) = > {
const frame = await traceViewer . snapshotFrame ( action ) ;
await test . step ( ` highlighting "body" in " ${ action } " ` , async ( ) = > {
await traceViewer . page . locator ( '.CodeMirror' ) . first ( ) . click ( ) ;
if ( platform === 'darwin' )
await traceViewer . page . keyboard . press ( 'Meta+a' ) ;
else
await traceViewer . page . keyboard . press ( 'Control+a' ) ;
await traceViewer . page . keyboard . press ( 'Backspace' ) ;
await expect ( frame . locator ( 'x-pw-highlight' ) ) . not . toBeVisible ( ) ;
await traceViewer . page . keyboard . type ( 'body' ) ;
await expect ( frame . locator ( 'x-pw-highlight' ) ) . toBeVisible ( ) ;
} ) ;
return frame ;
} ;
2025-08-06 19:07:11 +08:00
const frame0 = await traceViewer . snapshotFrame ( 'Set viewport' ) ;
await expect ( frame0 . locator ( 'body' ) ) . toContainText ( ` Hi, I'm frame ` ) ;
2024-10-24 17:47:34 +08:00
2025-05-23 10:00:33 +08:00
const frame1 = await forceRecorder ( 'Navigate' ) ;
2024-10-24 17:47:34 +08:00
await expect ( frame1 . locator ( 'body' ) ) . toContainText ( 'Hello world' ) ;
2025-05-23 10:00:33 +08:00
const frame2 = await forceRecorder ( 'Evaluate' ) ;
2024-10-24 17:47:34 +08:00
await expect ( frame2 . locator ( 'button' ) ) . toBeVisible ( ) ;
2024-10-24 01:24:53 +08:00
await traceViewer . page . requestGC ( ) ;
2024-10-24 17:47:34 +08:00
await expect . poll ( ( ) = > aliveCount ( ) ) . toBeLessThanOrEqual ( 2 ) ; // two snapshot iframes
2025-05-23 10:00:33 +08:00
const frame3 = await forceRecorder ( 'Set viewport size' ) ;
2024-10-24 17:47:34 +08:00
await expect ( frame3 . locator ( 'body' ) ) . toContainText ( ` Hi, I'm frame ` ) ;
2025-05-23 10:00:33 +08:00
const frame4 = await forceRecorder ( 'Navigate' ) ;
2024-10-24 17:47:34 +08:00
await expect ( frame4 . locator ( 'body' ) ) . toContainText ( 'Hello world' ) ;
2025-05-23 10:00:33 +08:00
const frame5 = await forceRecorder ( 'Evaluate' ) ;
2024-10-24 17:47:34 +08:00
await expect ( frame5 . locator ( 'button' ) ) . toBeVisible ( ) ;
2024-10-24 01:24:53 +08:00
await traceViewer . page . requestGC ( ) ;
2024-10-24 17:47:34 +08:00
await expect . poll ( ( ) = > aliveCount ( ) ) . toBeLessThanOrEqual ( 2 ) ; // two snapshot iframes
2024-10-24 01:24:53 +08:00
} ) ;
2024-08-20 01:29:51 +08:00
test ( 'should serve css without content-type' , async ( { page , runAndTrace , server } ) = > {
server . setRoute ( '/one-style.css' , ( req , res ) = > {
res . writeHead ( 200 ) ;
res . end ( ` body { background: red } ` ) ;
} ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . PREFIX + '/one-style.html' ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const snapshotFrame = await traceViewer . snapshotFrame ( 'Navigate' ) ;
2024-08-20 01:29:51 +08:00
await expect ( snapshotFrame . locator ( 'body' ) ) . toHaveCSS ( 'background-color' , 'rgb(255, 0, 0)' , { timeout : 0 } ) ;
} ) ;
2024-09-06 22:24:33 +08:00
2025-01-08 21:08:00 +08:00
test ( 'canvas disabled title' , async ( { runAndTrace , page , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . PREFIX + '/screenshots/canvas.html#canvas-on-edge' ) ;
await rafraf ( page , 5 ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Navigate' ) ;
2025-01-08 21:08:00 +08:00
await expect ( snapshot . locator ( 'canvas' ) ) . toHaveAttribute ( 'title' , ` Canvas content display is disabled. ` ) ;
} ) ;
2024-10-22 20:12:25 +08:00
test ( 'canvas clipping' , async ( { runAndTrace , page , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . PREFIX + '/screenshots/canvas.html#canvas-on-edge' ) ;
await rafraf ( page , 5 ) ;
} ) ;
2025-01-08 21:08:00 +08:00
// Enable canvas display
await traceViewer . showSettings ( ) ;
2025-01-11 06:57:50 +08:00
const [ msg ] = await Promise . all ( [
traceViewer . page . waitForEvent ( 'console' , { predicate : msg = > msg . text ( ) . startsWith ( 'canvas drawn:' ) } ) ,
traceViewer . displayCanvasContentSetting . click ( ) ,
] ) ;
2024-11-14 22:27:09 +08:00
expect ( msg . text ( ) ) . toEqual ( 'canvas drawn: [0,91,11,20]' ) ;
2024-10-22 20:12:25 +08:00
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Navigate' ) ;
2024-10-22 20:12:25 +08:00
await expect ( snapshot . locator ( 'canvas' ) ) . toHaveAttribute ( 'title' , ` Playwright couldn't capture full canvas contents because it's located partially outside the viewport. ` ) ;
} ) ;
test ( 'canvas clipping in iframe' , async ( { runAndTrace , page , server } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( `
< iframe src = "${server.PREFIX}/screenshots/canvas.html#canvas-on-edge" > < / iframe >
` );
2024-12-13 23:28:06 +08:00
await page . locator ( 'iframe' ) . contentFrame ( ) . locator ( 'canvas' ) . scrollIntoViewIfNeeded ( ) ;
2024-10-22 20:12:25 +08:00
await rafraf ( page , 5 ) ;
} ) ;
2025-01-08 21:08:00 +08:00
// Enable canvas display
await traceViewer . showSettings ( ) ;
2025-01-11 06:57:50 +08:00
const [ msg ] = await Promise . all ( [
traceViewer . page . waitForEvent ( 'console' , { predicate : msg = > msg . text ( ) . startsWith ( 'canvas drawn:' ) } ) ,
traceViewer . displayCanvasContentSetting . click ( ) ,
] ) ;
2024-12-13 23:28:06 +08:00
expect ( msg . text ( ) ) . toEqual ( 'canvas drawn: [1,1,11,20]' ) ;
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Evaluate' ) ;
2024-10-22 20:12:25 +08:00
const canvas = snapshot . locator ( 'iframe' ) . contentFrame ( ) . locator ( 'canvas' ) ;
2024-12-13 23:28:06 +08:00
await expect ( canvas ) . toHaveAttribute ( 'title' , 'Canvas contents are displayed on a best-effort basis based on viewport screenshots taken during test execution.' ) ;
2024-10-22 20:12:25 +08:00
} ) ;
2024-09-11 18:04:03 +08:00
test ( 'should show only one pointer with multilevel iframes' , async ( { page , runAndTrace , server , browserName } ) = > {
2024-10-04 23:22:27 +08:00
test . fixme ( browserName === 'firefox' , 'Elements in iframe are not marked' ) ;
2024-09-11 18:04:03 +08:00
server . setRoute ( '/level-0.html' , ( req , res ) = > {
2024-10-04 23:22:27 +08:00
res . writeHead ( 200 , { 'Content-Type' : 'text/html' } ) ;
2024-09-11 18:04:03 +08:00
res . end ( ` <iframe src="/level-1.html" style="position: absolute; left: 100px"></iframe> ` ) ;
} ) ;
server . setRoute ( '/level-1.html' , ( req , res ) = > {
2024-10-04 23:22:27 +08:00
res . writeHead ( 200 , { 'Content-Type' : 'text/html' } ) ;
2024-09-11 18:04:03 +08:00
res . end ( ` <iframe src="/level-2.html"></iframe> ` ) ;
} ) ;
server . setRoute ( '/level-2.html' , ( req , res ) = > {
2024-10-04 23:22:27 +08:00
res . writeHead ( 200 , { 'Content-Type' : 'text/html' } ) ;
2024-09-11 18:04:03 +08:00
res . end ( ` <button>Click me</button> ` ) ;
} ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( server . PREFIX + '/level-0.html' ) ;
await page . frameLocator ( 'iframe' ) . frameLocator ( 'iframe' ) . locator ( 'button' ) . click ( { position : { x : 5 , y : 5 } } ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const snapshotFrame = await traceViewer . snapshotFrame ( 'Click' ) ;
2024-09-11 18:04:03 +08:00
await expect . soft ( snapshotFrame . locator ( 'x-pw-pointer' ) ) . not . toBeAttached ( ) ;
await expect . soft ( snapshotFrame . frameLocator ( 'iframe' ) . locator ( 'x-pw-pointer' ) ) . not . toBeAttached ( ) ;
await expect . soft ( snapshotFrame . frameLocator ( 'iframe' ) . frameLocator ( 'iframe' ) . locator ( 'x-pw-pointer' ) ) . toBeVisible ( ) ;
} ) ;
2024-11-23 01:35:19 +08:00
2025-01-25 00:27:06 +08:00
test ( 'should show a popover' , async ( { runAndTrace , page , server , platform , browserName , macVersion } ) = > {
test . skip ( platform === 'darwin' && macVersion === 13 && browserName === 'webkit' , 'WebKit on macOS 13.7 reliably fails on this test for some reason' ) ;
2024-11-23 01:35:19 +08:00
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( `
< button popovertarget = "pop" > Click me < / button >
< article id = "pop" popover = "auto" >
< div > I ' m a popover < / div >
< / article >
` );
await page . getByRole ( 'button' ) . click ( ) ;
await expect ( page . locator ( 'div' ) ) . toBeVisible ( ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Expect' ) ;
2024-11-23 01:35:19 +08:00
const popover = snapshot . locator ( '#pop' ) ;
await expect . poll ( ( ) = > popover . evaluate ( e = > e . matches ( ':popover-open' ) ) ) . toBe ( true ) ;
} ) ;
2025-01-08 21:08:00 +08:00
2025-03-17 22:57:43 +08:00
test ( 'should show a modal dialog' , async ( { runAndTrace , page , platform , browserName , macVersion } ) = > {
test . skip ( platform === 'darwin' && macVersion === 13 && browserName === 'webkit' , 'WebKit on macOS 13.7 reliably fails on this test for some reason' ) ;
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( `
< button > Show the dialog < / button >
< dialog >
< p > This is a modal dialog < / p >
< / dialog >
< script >
document . querySelector ( 'button' ) . addEventListener ( 'click' , ( ) = > {
document . querySelector ( 'dialog' ) . showModal ( ) ;
} ) ;
< / script >
` );
await page . getByRole ( 'button' ) . click ( ) ;
await expect ( page . locator ( 'p' ) ) . toBeVisible ( ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Expect' ) ;
2025-03-17 22:57:43 +08:00
const dialog = snapshot . locator ( 'dialog' ) ;
await expect . poll ( ( ) = > dialog . evaluate ( e = > e . matches ( ':open' ) ) ) . toBe ( true ) ;
await expect . poll ( ( ) = > dialog . evaluate ( e = > e . matches ( ':modal' ) ) ) . toBe ( true ) ;
} ) ;
2025-01-08 21:08:00 +08:00
test ( 'should open settings dialog' , async ( { showTraceViewer } ) = > {
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Navigate' ) ;
2025-01-08 21:08:00 +08:00
await traceViewer . showSettings ( ) ;
await expect ( traceViewer . settingsDialog ) . toBeVisible ( ) ;
} ) ;
test ( 'should toggle theme color' , async ( { showTraceViewer , page } ) = > {
const traceViewer = await showTraceViewer ( [ traceFile ] ) ;
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Navigate' ) ;
2025-01-08 21:08:00 +08:00
await traceViewer . showSettings ( ) ;
await expect ( traceViewer . darkModeSetting ) . toBeChecked ( { checked : false } ) ;
await traceViewer . darkModeSetting . click ( ) ;
await expect ( traceViewer . darkModeSetting ) . toBeChecked ( { checked : true } ) ;
await expect ( traceViewer . page . locator ( '.dark-mode' ) ) . toBeVisible ( ) ;
await traceViewer . darkModeSetting . click ( ) ;
await expect ( traceViewer . darkModeSetting ) . toBeChecked ( { checked : false } ) ;
await expect ( traceViewer . page . locator ( '.light-mode' ) ) . toBeVisible ( ) ;
} ) ;
test ( 'should toggle canvas rendering' , async ( { runAndTrace , page } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( ` data:text/html,<!DOCTYPE html><body><div>Hello world</div><canvas /></body> ` ) ;
await page . goto ( ` data:text/html,<!DOCTYPE html><body><div>Hello world</div></body> ` ) ;
} ) ;
let snapshotRequestPromise = traceViewer . page . waitForRequest ( request = > request . url ( ) . includes ( '/snapshot/' ) ) ;
// Click on the action with a canvas snapshot
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Navigate' , 0 ) ;
2025-01-08 21:08:00 +08:00
let snapshotRequest = await snapshotRequestPromise ;
expect ( snapshotRequest . url ( ) ) . not . toContain ( 'shouldPopulateCanvasFromScreenshot' ) ;
await traceViewer . showSettings ( ) ;
await expect ( traceViewer . displayCanvasContentSetting ) . toBeChecked ( { checked : false } ) ;
await traceViewer . displayCanvasContentSetting . click ( ) ;
await expect ( traceViewer . displayCanvasContentSetting ) . toBeChecked ( { checked : true } ) ;
// Deselect canvas
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Navigate' , 1 ) ;
2025-01-08 21:08:00 +08:00
snapshotRequestPromise = traceViewer . page . waitForRequest ( request = > request . url ( ) . includes ( '/snapshot/' ) ) ;
// Select canvas again
2025-05-23 10:00:33 +08:00
await traceViewer . selectAction ( 'Navigate' , 0 ) ;
2025-01-08 21:08:00 +08:00
snapshotRequest = await snapshotRequestPromise ;
expect ( snapshotRequest . url ( ) ) . toContain ( 'shouldPopulateCanvasFromScreenshot' ) ;
} ) ;
2025-03-05 02:56:01 +08:00
test ( 'should render blob trace received from message' , async ( { showTraceViewer } ) = > {
const traceViewer = await showTraceViewer ( [ ] , { host : 'localhost' } ) ;
await expect ( traceViewer . page . locator ( '.drop-target' ) ) . toBeVisible ( ) ;
await expect ( traceViewer . actionTitles ) . not . toBeVisible ( ) ;
await traceViewer . page . evaluate ( trace = > {
const uint8Array = Uint8Array . from ( atob ( trace ) , c = > c . charCodeAt ( 0 ) ) ;
window . postMessage ( {
method : 'load' ,
params : {
trace : new Blob ( [ uint8Array ] , { type : 'application/zip' } ) ,
}
} , '*' ) ;
} , fs . readFileSync ( traceFile , 'base64' ) ) ;
await expect ( traceViewer . page . locator ( '.drop-target' ) ) . not . toBeVisible ( ) ;
await expect ( traceViewer . actionTitles ) . toHaveText ( [
2025-05-23 00:49:37 +08:00
/Create page/ ,
/Navigate to "data:"/ ,
2025-06-16 23:27:38 +08:00
/toHaveTitle/ ,
/toHaveURL/ ,
2025-05-23 00:49:37 +08:00
/Set content/ ,
2025-05-24 07:03:50 +08:00
/toHaveText.*locator/ ,
/toBeHidden.*getByTestId/ ,
/toBeHidden.*getByTestId/ ,
2025-05-23 00:49:37 +08:00
/Evaluate/ ,
/Evaluate/ ,
/Click.*getByText\('Click'\)/ ,
/Wait for navigation/ ,
/Wait for event "response"/ ,
/Wait for timeout/ ,
/Navigate to "\/frames\/frame.html"/ ,
/Set viewport size/ ,
2025-08-06 19:07:11 +08:00
/Hover/ ,
/Close page/ ,
2025-03-05 02:56:01 +08:00
] ) ;
} ) ;
test ( "shouldn't render not-blob trace received from message" , async ( { showTraceViewer } ) = > {
const traceViewer = await showTraceViewer ( [ ] , { host : 'localhost' } ) ;
await expect ( traceViewer . page . locator ( '.drop-target' ) ) . toBeVisible ( ) ;
await expect ( traceViewer . actionTitles ) . not . toBeVisible ( ) ;
await traceViewer . page . evaluate ( trace = > {
window . postMessage ( {
method : 'load' ,
params : {
trace ,
}
} , '*' ) ;
} , fs . readFileSync ( traceFile , 'base64' ) ) ;
await expect ( traceViewer . page . locator ( '.drop-target' ) ) . toBeVisible ( ) ;
await expect ( traceViewer . actionTitles ) . not . toBeVisible ( ) ;
} ) ;
2025-04-24 17:53:48 +08:00
test ( 'should not trip over complex urls in style tags' , {
annotation : { type : 'issue' , description : 'https://github.com/microsoft/playwright/issues/35681' } ,
} , async ( { runAndTrace , page } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( `
< html >
< head >
< style >
< / style >
< / head >
< body >
< div > hello < / div >
< span > world < / span >
< / body >
< / html >
` );
const css = `
div {
background - image : url ( 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none}</style></defs><title>Custom Title</title><polyline class="cls-1" points="1 2 3 4"/></svg>' ) ;
color : rgb ( 1 , 2 , 3 ) ;
}
span {
color : rgb ( 4 , 5 , 6 ) ;
background - image : url ( "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><style>.cls-1{fill:none}</style></defs><title>Custom Title</title><polyline class='cls-1' points='1 2 3 4'/></svg>" ) ;
}
` ;
await page . evaluate ( css = > document . querySelector ( 'style' ) . textContent = css , css ) ;
} ) ;
2025-05-23 00:49:37 +08:00
const snapshot = await traceViewer . snapshotFrame ( 'Evaluate' ) ;
2025-04-24 17:53:48 +08:00
// Just "hello world", no gibberish from the <style>.
await expect ( snapshot . locator ( 'body' ) ) . toHaveText ( 'hello world' ) ;
await expect ( snapshot . locator ( 'div' ) ) . toHaveCSS ( 'color' , 'rgb(1, 2, 3)' ) ;
await expect ( snapshot . locator ( 'span' ) ) . toHaveCSS ( 'color' , 'rgb(4, 5, 6)' ) ;
} ) ;
2025-05-17 04:40:47 +08:00
test ( 'should render locator descriptions' , async ( { runAndTrace , page } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . setContent ( '<input type="text" />' ) ;
2025-06-04 02:58:14 +08:00
await page . locator ( 'input' ) . describe ( 'custom' ) . click ( ) ;
await page . locator ( 'input' ) . describe ( 'custom' ) . first ( ) . click ( ) ;
2025-05-17 04:40:47 +08:00
} ) ;
await expect ( traceViewer . page . locator ( 'body' ) ) . toMatchAriaSnapshot ( `
2025-06-04 02:58:14 +08:00
- treeitem / Click . * custom /
- treeitem / Click . * input . * first /
2025-05-17 04:40:47 +08:00
` );
} ) ;
2025-07-19 01:56:49 +08:00
test ( 'should load trace from HTTP with progress indicator' , async ( { showTraceViewer , server } ) = > {
const [ traceViewer , res ] = await Promise . all ( [
showTraceViewer ( [ server . PREFIX ] ) ,
new Promise < http.ServerResponse > ( resolve = > {
server . setRoute ( '/' , ( req , res ) = > resolve ( res ) ) ;
} ) ,
] ) ;
const file = await fs . promises . readFile ( traceFile ) ;
const dialog = traceViewer . page . locator ( 'dialog' , { hasText : 'Loading' } ) ;
res . setHeader ( 'Access-Control-Allow-Origin' , '*' ) ;
res . setHeader ( 'Content-Length' , file . byteLength ) ;
res . writeHead ( 200 ) ;
await expect ( dialog ) . not . toBeVisible ( { timeout : 100 } ) ;
// Should become visible after ~200ms
await expect ( dialog ) . toBeVisible ( ) ;
res . end ( file ) ;
await expect ( dialog ) . not . toBeVisible ( ) ;
await expect ( traceViewer . actionTitles ) . toContainText ( [ /Create page/ ] ) ;
} ) ;
2025-08-08 15:34:56 +08:00
test ( 'should show all actions' , async ( { runAndTrace , page } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . route ( '**/*' , async route = > {
await route . fulfill ( { contentType : 'text/html' , body : '<input type=checkbox checked>' } ) ;
} ) ;
await page . goto ( 'https://does.not.exist' ) ;
await page . locator ( 'input' ) . getAttribute ( 'checked' ) ;
await expect ( page . locator ( 'input' ) ) . toBeChecked ( ) ;
} ) ;
await expect ( traceViewer . actionTitles ) . toHaveText ( [
/Navigate to/ ,
/Expect "toBeChecked"/ ,
] ) ;
2025-08-15 18:38:05 +08:00
await traceViewer . showAllActions ( ) ;
2025-08-08 15:34:56 +08:00
await expect ( traceViewer . actionTitles ) . toHaveText ( [
/Route requests/ ,
/Navigate to/ ,
/Fulfill request/ ,
/Get attribute "checked"/ ,
/Expect "toBeChecked"/ ,
] ) ;
} ) ;
2025-09-03 03:55:42 +08:00
2025-09-03 23:00:43 +08:00
test . describe ( ( ) = > {
// NOTE: In Firefox/WebKit, history.pushState() requires a SecureContext.
// On http/about:blank it throws "The operation is insecure".
test . use ( { ignoreHTTPSErrors : true } ) ;
test ( 'should handle failed snapshots due to dialog' , async ( { page , httpsServer , runAndTrace } ) = > {
const traceViewer = await runAndTrace ( async ( ) = > {
await page . goto ( httpsServer . EMPTY_PAGE ) ;
await page . setContent ( `
< head >
< style >
button { color : red ; }
< / style >
< / head >
< body >
< button > Click me < / button >
< script >
const button = document . querySelector ( 'button' ) ;
window . history . pushState ( { page : 'stay' } , '' , window . location . href ) ;
window . addEventListener ( 'popstate' , ( ) = > {
if ( window . confirm ( 'ready?' ) )
button . textContent = 'Clicked' ;
} ) ;
< / script >
< / body >
` );
let dialogMessage = '' ;
page . on ( 'dialog' , async dialog = > {
dialogMessage = dialog . message ( ) ;
await dialog . accept ( ) ;
} ) ;
await page . goBack ( ) ;
await expect . poll ( ( ) = > dialogMessage ) . toBe ( 'ready?' ) ;
await expect ( page . getByRole ( 'button' ) ) . toHaveText ( 'Clicked' ) ;
2025-09-03 03:55:42 +08:00
} ) ;
2025-09-03 23:00:43 +08:00
const frame = await traceViewer . snapshotFrame ( 'Expect' ) ;
await expect ( frame . getByRole ( 'button' ) ) . toHaveCSS ( 'color' , 'rgb(255, 0, 0)' ) ;
} ) ;
2025-09-03 03:55:42 +08:00
} ) ;
