+ return
+
+
Locator
+
{
+ copy(highlightedElement.locator || '');
+ }}>
+
+
{
// Updating text needs to go first - react can squeeze a render between the state updates.
setHighlightedElement({ ...highlightedElement, locator: text, lastEdited: 'locator' });
setIsInspecting(false);
}} />
-
Aria
-
+
+
+
Aria snapshot
+
{
+ copy(highlightedElement.ariaSnapshot || '');
+ }}>
+
+
-
- {
- copy(highlightedElement.locator || '');
- }}>
-
;
};
diff --git a/packages/trace-viewer/src/ui/recorder/DEPS.list b/packages/trace-viewer/src/ui/recorder/DEPS.list
deleted file mode 100644
index a504a7dba1..0000000000
--- a/packages/trace-viewer/src/ui/recorder/DEPS.list
+++ /dev/null
@@ -1,5 +0,0 @@
-[*]
-@isomorphic/**
-@trace/**
-@web/**
-../**
diff --git a/packages/trace-viewer/src/ui/recorder/actionListView.tsx b/packages/trace-viewer/src/ui/recorder/actionListView.tsx
deleted file mode 100644
index 8e9fa0df45..0000000000
--- a/packages/trace-viewer/src/ui/recorder/actionListView.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- Copyright (c) Microsoft Corporation.
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-*/
-
-import type * as actionTypes from '@recorder/actions';
-import { ListView } from '@web/components/listView';
-import * as React from 'react';
-import '../actionList.css';
-import { traceParamsForAction } from '@isomorphic/recorderUtils';
-import { asLocator } from '@isomorphic/locatorGenerators';
-import type { Language } from '@isomorphic/locatorGenerators';
-
-const ActionList = ListView
;
-
-export const ActionListView: React.FC<{
- sdkLanguage: Language,
- actions: actionTypes.ActionInContext[],
- selectedAction: actionTypes.ActionInContext | undefined,
- onSelectedAction: (action: actionTypes.ActionInContext | undefined) => void,
-}> = ({
- sdkLanguage,
- actions,
- selectedAction,
- onSelectedAction,
-}) => {
- const render = React.useCallback((action: actionTypes.ActionInContext) => {
- return renderAction(sdkLanguage, action);
- }, [sdkLanguage]);
- return ;
-};
-
-export const renderAction = (sdkLanguage: Language, action: actionTypes.ActionInContext) => {
- const { method, apiName, params } = traceParamsForAction(action);
- const locator = params.selector ? asLocator(sdkLanguage || 'javascript', params.selector) : undefined;
-
- return <>
-
-
{apiName}
- {locator &&
{locator}
}
- {method === 'goto' && params.url &&
{params.url}
}
-
(undefined);
-
-export const BackendProvider: React.FunctionComponent> = ({ guid, children }) => {
- const [connection, setConnection] = React.useState(undefined);
- const [mode, setMode] = React.useState('none');
- const [actions, setActions] = React.useState<{ actions: actionTypes.ActionInContext[], sources: Source[] }>({ actions: [], sources: [] });
- const callbacks = React.useRef({ setMode, setActions });
-
- React.useEffect(() => {
- const wsURL = new URL(`../${guid}`, window.location.toString());
- wsURL.protocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:');
- const webSocket = new WebSocket(wsURL.toString());
- setConnection(new Connection(webSocket, callbacks.current));
- return () => {
- webSocket.close();
- };
- }, [guid]);
-
- const backend = React.useMemo(() => {
- return connection ? { mode, actions: actions.actions, sources: actions.sources, connection } : undefined;
- }, [actions, mode, connection]);
-
- return
- {children}
- ;
-};
-
-export type Backend = {
- actions: actionTypes.ActionInContext[],
- sources: Source[],
- connection: Connection,
-};
-
-type ConnectionCallbacks = {
- setMode: (mode: Mode) => void;
- setActions: (data: { actions: actionTypes.ActionInContext[], sources: Source[] }) => void;
-};
-
-class Connection {
- private _lastId = 0;
- private _webSocket: WebSocket;
- private _callbacks = new Map void, reject: (arg: Error) => void }>();
- private _options: ConnectionCallbacks;
-
- constructor(webSocket: WebSocket, options: ConnectionCallbacks) {
- this._webSocket = webSocket;
- this._callbacks = new Map();
- this._options = options;
-
- this._webSocket.addEventListener('message', event => {
- const message = JSON.parse(event.data);
- const { id, result, error, method, params } = message;
- if (id) {
- const callback = this._callbacks.get(id);
- if (!callback)
- return;
- this._callbacks.delete(id);
- if (error)
- callback.reject(new Error(error));
- else
- callback.resolve(result);
- } else {
- this._dispatchEvent(method, params);
- }
- });
- }
-
- setMode(mode: Mode) {
- this._sendMessageNoReply('setMode', { mode });
- }
-
- private async _sendMessage(method: string, params?: any): Promise {
- const id = ++this._lastId;
- const message = { id, method, params };
- this._webSocket.send(JSON.stringify(message));
- return new Promise((resolve, reject) => {
- this._callbacks.set(id, { resolve, reject });
- });
- }
-
- private _sendMessageNoReply(method: string, params?: any) {
- this._sendMessage(method, params).catch(() => { });
- }
-
- private _dispatchEvent(method: string, params?: any) {
- if (method === 'setMode') {
- const { mode } = params as { mode: Mode };
- this._options.setMode(mode);
- }
- if (method === 'setActions') {
- const { actions, sources } = params as { actions: actionTypes.ActionInContext[], sources: Source[] };
- this._options.setActions({ actions: actions.filter(a => a.action.name !== 'openPage' && a.action.name !== 'closePage'), sources });
- (window as any).playwrightSourcesEchoForTest = sources;
- }
- }
-}
diff --git a/packages/trace-viewer/src/ui/recorder/modelContext.tsx b/packages/trace-viewer/src/ui/recorder/modelContext.tsx
deleted file mode 100644
index 98f450361b..0000000000
--- a/packages/trace-viewer/src/ui/recorder/modelContext.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- Copyright (c) Microsoft Corporation.
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-*/
-
-import { sha1 } from '@web/uiUtils';
-import * as React from 'react';
-import type { ContextEntry } from '../../types/entries';
-import { MultiTraceModel } from '../modelUtil';
-
-export const ModelContext = React.createContext(undefined);
-
-export const ModelProvider: React.FunctionComponent> = ({ trace, children }) => {
- const [model, setModel] = React.useState<{ model: MultiTraceModel, sha1: string } | undefined>();
- const [counter, setCounter] = React.useState(0);
- const pollTimer = React.useRef(null);
-
- React.useEffect(() => {
- if (pollTimer.current)
- clearTimeout(pollTimer.current);
-
- // Start polling running test.
- pollTimer.current = setTimeout(async () => {
- try {
- const result = await loadSingleTraceFile(trace);
- if (result.sha1 !== model?.sha1)
- setModel(result);
- } catch {
- setModel(undefined);
- } finally {
- setCounter(counter + 1);
- }
- }, 500);
- return () => {
- if (pollTimer.current)
- clearTimeout(pollTimer.current);
- };
- }, [counter, model, trace]);
-
- return
- {children}
- ;
-};
-
-async function loadSingleTraceFile(url: string): Promise<{ model: MultiTraceModel, sha1: string }> {
- const params = new URLSearchParams();
- params.set('trace', url);
- params.set('limit', '1');
- const response = await fetch(`contexts?${params.toString()}`);
- const contextEntries = await response.json() as ContextEntry[];
-
- const tokens: string[] = [];
- for (const entry of contextEntries) {
- entry.actions.forEach(a => tokens.push(a.type + '@' + a.startTime + '-' + a.endTime));
- entry.events.forEach(e => tokens.push(e.type + '@' + e.time));
- }
- return { model: new MultiTraceModel(contextEntries), sha1: await sha1(tokens.join('|')) };
-}
diff --git a/packages/trace-viewer/src/ui/recorder/recorderView.css b/packages/trace-viewer/src/ui/recorder/recorderView.css
deleted file mode 100644
index ad03e78e7d..0000000000
--- a/packages/trace-viewer/src/ui/recorder/recorderView.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- 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.
-*/
diff --git a/packages/trace-viewer/src/ui/recorder/recorderView.tsx b/packages/trace-viewer/src/ui/recorder/recorderView.tsx
deleted file mode 100644
index 93db2b917d..0000000000
--- a/packages/trace-viewer/src/ui/recorder/recorderView.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-/*
- Copyright (c) Microsoft Corporation.
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-*/
-
-import type * as actionTypes from '@recorder/actions';
-import { SourceChooser } from '@web/components/sourceChooser';
-import { SplitView } from '@web/components/splitView';
-import type { TabbedPaneTabModel } from '@web/components/tabbedPane';
-import { TabbedPane } from '@web/components/tabbedPane';
-import { Toolbar } from '@web/components/toolbar';
-import { ToolbarButton, ToolbarSeparator } from '@web/components/toolbarButton';
-import { copy, useSetting } from '@web/uiUtils';
-import * as React from 'react';
-import { ConsoleTab, useConsoleTabModel } from '../consoleTab';
-import type { Boundaries } from '../geometry';
-import { InspectorTab } from '../inspectorTab';
-import type * as modelUtil from '../modelUtil';
-import type { SourceLocation } from '../modelUtil';
-import { NetworkTab, useNetworkTabModel } from '../networkTab';
-import { collectSnapshots, extendSnapshot, SnapshotView } from '../snapshotTab';
-import { SourceTab } from '../sourceTab';
-import { ModelContext, ModelProvider } from './modelContext';
-import './recorderView.css';
-import { ActionListView } from './actionListView';
-import { BackendContext, BackendProvider } from './backendContext';
-import type { Language } from '@isomorphic/locatorGenerators';
-import { SettingsToolbarButton } from '../settingsToolbarButton';
-import type { HighlightedElement } from '../snapshotTab';
-
-export const RecorderView: React.FunctionComponent = () => {
- const searchParams = new URLSearchParams(window.location.search);
- const guid = searchParams.get('ws')!;
- const trace = searchParams.get('trace') + '.json';
-
- return
-
-
- ;
-};
-
-export const Workbench: React.FunctionComponent = () => {
- const backend = React.useContext(BackendContext);
- const model = React.useContext(ModelContext);
- const [fileId, setFileId] = React.useState();
- const [selectedStartTime, setSelectedStartTime] = React.useState(undefined);
- const [isInspecting, setIsInspecting] = React.useState(false);
- const [highlightedElementInProperties, setHighlightedElementInProperties] = React.useState({ lastEdited: 'none' });
- const [highlightedElementInTrace, setHighlightedElementInTrace] = React.useState({ lastEdited: 'none' });
- const [traceCallId, setTraceCallId] = React.useState();
-
- const setSelectedAction = React.useCallback((action: actionTypes.ActionInContext | undefined) => {
- setSelectedStartTime(action?.startTime);
- }, []);
-
- const selectedAction = React.useMemo(() => {
- return backend?.actions.find(a => a.startTime === selectedStartTime);
- }, [backend?.actions, selectedStartTime]);
-
- React.useEffect(() => {
- const callId = model?.actions.find(a => a.endTime && a.endTime === selectedAction?.endTime)?.callId;
- if (callId)
- setTraceCallId(callId);
- }, [model, selectedAction]);
-
- const source = React.useMemo(() => backend?.sources.find(s => s.id === fileId) || backend?.sources[0], [backend?.sources, fileId]);
- const sourceLocation = React.useMemo(() => {
- if (!source)
- return undefined;
- const sourceLocation: SourceLocation = {
- file: '',
- line: 0,
- column: 0,
- source: {
- errors: [],
- content: source.text
- }
- };
- return sourceLocation;
- }, [source]);
-
- const sdkLanguage: Language = source?.language || 'javascript';
-
- const { boundaries } = React.useMemo(() => {
- const boundaries = { minimum: model?.startTime || 0, maximum: model?.endTime || 30000 };
- if (boundaries.minimum > boundaries.maximum) {
- boundaries.minimum = 0;
- boundaries.maximum = 30000;
- }
- // Leave some nice free space on the right hand side.
- boundaries.maximum += (boundaries.maximum - boundaries.minimum) / 20;
- return { boundaries };
- }, [model]);
-
- const elementPickedInTrace = React.useCallback((element: HighlightedElement) => {
- setHighlightedElementInProperties(element);
- setHighlightedElementInTrace({ lastEdited: 'none' });
- setIsInspecting(false);
- }, []);
-
- const elementTypedInProperties = React.useCallback((element: HighlightedElement) => {
- setHighlightedElementInTrace(element);
- setHighlightedElementInProperties(element);
- }, []);
-
- const actionList =
-
- {
- setIsInspecting(!isInspecting);
- }} />
- {
- }} />
- {
- }} />
- {
- }} />
- {
- if (source?.text)
- copy(source.text);
- }}>
-
- Target:
- {
- setFileId(fileId);
- }} />
- ;
-
- const sidebarTabbedPane =
-
- {toolbar}
- {traceView}
-
}
- sidebar={propertiesView}
- />}
- sidebar={sidebarTabbedPane}
- />
- ;
-};
-
-const PropertiesView: React.FunctionComponent<{
- sdkLanguage: Language,
- boundaries: Boundaries,
- setIsInspecting: (value: boolean) => void,
- highlightedElement: HighlightedElement,
- setHighlightedElement: (element: HighlightedElement) => void,
- sourceLocation: modelUtil.SourceLocation | undefined,
-}> = ({
- sdkLanguage,
- boundaries,
- setIsInspecting,
- highlightedElement,
- setHighlightedElement,
- sourceLocation,
-}) => {
- const model = React.useContext(ModelContext);
- const consoleModel = useConsoleTabModel(model, boundaries);
- const networkModel = useNetworkTabModel(model, boundaries);
- const sourceModel = React.useRef(new Map
());
- const [selectedPropertiesTab, setSelectedPropertiesTab] = useSetting('recorderPropertiesTab', 'source');
-
- const inspectorTab: TabbedPaneTabModel = {
- id: 'inspector',
- title: 'Locator',
- render: () => {
await use((playwright as any)._toImpl);
diff --git a/tests/library/css-parser.spec.ts b/tests/library/css-parser.spec.ts
index 3bf8a742e6..e6ff046579 100644
--- a/tests/library/css-parser.spec.ts
+++ b/tests/library/css-parser.spec.ts
@@ -77,7 +77,8 @@ it('should throw on malformed css', async () => {
} catch (e) {
error = e;
}
- expect(error.message).toContain(`while parsing selector "${selector}"`);
+ expect(error.message).toContain(`while parsing css selector "${selector}"`);
+ expect(error.message).toContain(`Did you mean to CSS.escape it?`);
}
expectError('');
diff --git a/tests/library/inspector/cli-codegen-1.spec.ts b/tests/library/inspector/cli-codegen-1.spec.ts
index 0fd5f69d0b..6936aeee41 100644
--- a/tests/library/inspector/cli-codegen-1.spec.ts
+++ b/tests/library/inspector/cli-codegen-1.spec.ts
@@ -19,7 +19,6 @@ import type { ConsoleMessage } from 'playwright';
test.describe('cli codegen', () => {
test.skip(({ mode }) => mode !== 'default');
- test.skip(({ trace, codegenMode }) => trace === 'on' && codegenMode === 'trace-events');
test('should click', async ({ openRecorder }) => {
const { page, recorder } = await openRecorder();
@@ -413,7 +412,7 @@ await page.GetByRole(AriaRole.Textbox).PressAsync("Shift+Enter");`);
expect(messages[0].text()).toBe('press');
});
- test('should update selected element after pressing Tab', async ({ openRecorder, browserName, codegenMode }) => {
+ test('should update selected element after pressing Tab', async ({ openRecorder }) => {
const { page, recorder } = await openRecorder();
await recorder.setContentAndWait(`
diff --git a/tests/library/inspector/cli-codegen-2.spec.ts b/tests/library/inspector/cli-codegen-2.spec.ts
index 47afcc2fab..920ecbdf76 100644
--- a/tests/library/inspector/cli-codegen-2.spec.ts
+++ b/tests/library/inspector/cli-codegen-2.spec.ts
@@ -20,7 +20,6 @@ import fs from 'fs';
test.describe('cli codegen', () => {
test.skip(({ mode }) => mode !== 'default');
- test.skip(({ trace, codegenMode }) => trace === 'on' && codegenMode === 'trace-events');
test('should contain open page', async ({ openRecorder }) => {
const { recorder } = await openRecorder();
@@ -310,8 +309,7 @@ await page.GetByRole(AriaRole.Button, new() { Name = "click me" }).ClickAsync();
}
});
- test('should record open in a new tab with url', async ({ openRecorder, browserName, codegenMode }) => {
- test.skip(codegenMode === 'trace-events');
+ test('should record open in a new tab with url', async ({ openRecorder, browserName }) => {
const { page, recorder } = await openRecorder();
await recorder.setContentAndWait(`link `);
@@ -453,8 +451,7 @@ await page1.GotoAsync("about:blank?foo");`);
await recorder.waitForOutput('JavaScript', `await page.goto('${server.PREFIX}/page2.html');`);
});
- test('should --save-trace', async ({ runCLI, codegenMode }, testInfo) => {
- test.skip(codegenMode === 'trace-events');
+ test('should --save-trace', async ({ runCLI }, testInfo) => {
const traceFileName = testInfo.outputPath('trace.zip');
const cli = runCLI([`--save-trace=${traceFileName}`], {
autoExitWhen: ' ',
@@ -463,8 +460,7 @@ await page1.GotoAsync("about:blank?foo");`);
expect(fs.existsSync(traceFileName)).toBeTruthy();
});
- test('should save assets via SIGINT', async ({ runCLI, platform, codegenMode }, testInfo) => {
- test.skip(codegenMode === 'trace-events');
+ test('should save assets via SIGINT', async ({ runCLI, platform }, testInfo) => {
test.skip(platform === 'win32', 'SIGINT not supported on Windows');
const traceFileName = testInfo.outputPath('trace.zip');
diff --git a/tests/library/inspector/cli-codegen-3.spec.ts b/tests/library/inspector/cli-codegen-3.spec.ts
index 87c7e7bfec..8af5a76472 100644
--- a/tests/library/inspector/cli-codegen-3.spec.ts
+++ b/tests/library/inspector/cli-codegen-3.spec.ts
@@ -21,7 +21,6 @@ import type { Page } from '@playwright/test';
test.describe('cli codegen', () => {
test.skip(({ mode }) => mode !== 'default');
- test.skip(({ trace, codegenMode }) => trace === 'on' && codegenMode === 'trace-events');
test('should click locator.first', async ({ openRecorder }) => {
const { page, recorder } = await openRecorder();
diff --git a/tests/library/inspector/cli-codegen-aria.spec.ts b/tests/library/inspector/cli-codegen-aria.spec.ts
index 354ca6495a..a11cf33342 100644
--- a/tests/library/inspector/cli-codegen-aria.spec.ts
+++ b/tests/library/inspector/cli-codegen-aria.spec.ts
@@ -19,7 +19,6 @@ import { roundBox } from '../../page/pageTest';
test.describe(() => {
test.skip(({ mode }) => mode !== 'default');
- test.skip(({ trace, codegenMode }) => trace === 'on' && codegenMode === 'trace-events');
test('should generate aria snapshot', async ({ openRecorder }) => {
const { recorder } = await openRecorder();
diff --git a/tests/library/inspector/cli-codegen-pick-locator.spec.ts b/tests/library/inspector/cli-codegen-pick-locator.spec.ts
index 53d106b4c9..bd1a612842 100644
--- a/tests/library/inspector/cli-codegen-pick-locator.spec.ts
+++ b/tests/library/inspector/cli-codegen-pick-locator.spec.ts
@@ -19,7 +19,6 @@ import { roundBox } from '../../page/pageTest';
test.describe(() => {
test.skip(({ mode }) => mode !== 'default');
- test.skip(({ trace, codegenMode }) => trace === 'on' && codegenMode === 'trace-events');
test('should inspect locator', async ({ openRecorder }) => {
const { recorder } = await openRecorder();
diff --git a/tests/library/inspector/inspectorTest.ts b/tests/library/inspector/inspectorTest.ts
index a90f73fcdf..b94bfc09a0 100644
--- a/tests/library/inspector/inspectorTest.ts
+++ b/tests/library/inspector/inspectorTest.ts
@@ -67,7 +67,7 @@ export const test = contextTest.extend({
});
},
- runCLI: async ({ childProcess, browserName, channel, headless, mode, launchOptions, codegenMode }, run, testInfo) => {
+ runCLI: async ({ childProcess, browserName, channel, headless, mode, launchOptions }, run, testInfo) => {
testInfo.skip(mode.startsWith('service'));
await run((cliArgs, { autoExitWhen } = {}) => {
@@ -78,17 +78,15 @@ export const test = contextTest.extend({
args: cliArgs,
executablePath: launchOptions.executablePath,
autoExitWhen,
- codegenMode
});
});
},
- openRecorder: async ({ context, recorderPageGetter, codegenMode }, run) => {
+ openRecorder: async ({ context, recorderPageGetter }, run) => {
await run(async (options?: { testIdAttributeName?: string }) => {
await (context as any)._enableRecorder({
language: 'javascript',
mode: 'recording',
- codegenMode,
...options
});
const page = await context.newPage();
@@ -235,7 +233,7 @@ export class Recorder {
class CLIMock {
process: TestChildProcess;
- constructor(childProcess: CommonFixtures['childProcess'], options: { browserName: string, channel: string | undefined, headless: boolean | undefined, args: string[], executablePath: string | undefined, autoExitWhen: string | undefined, codegenMode?: 'trace-events' | 'actions'}) {
+ constructor(childProcess: CommonFixtures['childProcess'], options: { browserName: string, channel: string | undefined, headless: boolean | undefined, args: string[], executablePath: string | undefined, autoExitWhen: string | undefined}) {
const nodeArgs = [
'node',
path.join(__dirname, '..', '..', '..', 'packages', 'playwright-core', 'cli.js'),
@@ -248,7 +246,6 @@ class CLIMock {
this.process = childProcess({
command: nodeArgs,
env: {
- PW_RECORDER_IS_TRACE_VIEWER: options.codegenMode === 'trace-events' ? '1' : undefined,
PWTEST_CLI_AUTO_EXIT_WHEN: options.autoExitWhen,
PWTEST_CLI_IS_UNDER_TEST: '1',
PWTEST_CLI_HEADLESS: options.headless ? '1' : undefined,
diff --git a/tests/library/playwright.config.ts b/tests/library/playwright.config.ts
index 399eec1b6b..f588ee2f45 100644
--- a/tests/library/playwright.config.ts
+++ b/tests/library/playwright.config.ts
@@ -147,18 +147,6 @@ for (const browserName of browserNames) {
testDir: path.join(testDir, 'page'),
...projectTemplate,
});
-
- // TODO: figure out reporting to flakiness dashboard (Problem: they get merged, we want to keep them separate)
- // config.projects.push({
- // name: `${browserName}-codegen-mode-trace`,
- // testDir: path.join(testDir, 'library'),
- // testMatch: '**/cli-codegen-*.spec.ts',
- // ...projectTemplate,
- // use: {
- // ...projectTemplate.use,
- // codegenMode: 'trace-events',
- // }
- // });
}
export default config;
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index 71ecfe0764..9bb67884f5 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -166,6 +166,61 @@ test('should open simple trace viewer', async ({ showTraceViewer }) => {
]);
});
+test('should show action context on locators and other common actions', async ({
+ runAndTrace,
+ page,
+}) => {
+ const traceViewer = await runAndTrace(async () => {
+ await page.setContent('
-
- Cell A1
- Cell B1
- Cell C1
-
-
- Cell A2
- Cell B2
- Cell C2
-
-
- Cell A3
- Cell B3
- Cell C3
-
-
- `);
- await expect(page.getByRole('row')).toHaveAccessibleName([
- 'Cell A1 Cell B1 Cell C1',
- 'Cell A2 Cell B2 Cell C2',
- 'Cell A3 Cell B3 Cell C3',
- ]);
- await expect(page.getByRole('row')).toHaveAccessibleName(['cell a1 cell b1 cell C1',
- 'cell A2 Cell b2 Cell c2',
- 'Cell a3 Cell b3 cell C3',], { ignoreCase: true });
-
- await expect(page.getByRole('row')).not.toHaveAccessibleName([
- 'Cel A4 Cell B4 Cell C4',
- 'Cell A5 Cell B5 Cell C5',
- 'Cell A6 Cell B6 Cell C6',
- ]);
-});
-
-
test('toHaveAccessibleDescription', async ({ page }) => {
await page.setContent(`
diff --git a/tests/page/page-check.spec.ts b/tests/page/page-check.spec.ts
index 01b00ddc55..42946ce555 100644
--- a/tests/page/page-check.spec.ts
+++ b/tests/page/page-check.spec.ts
@@ -18,9 +18,10 @@
import { test as it, expect } from './pageTest';
it('should check the box @smoke', async ({ page }) => {
- await page.setContent(`
`);
+ const locator = page.locator('#component');
+ await expect(locator).toHaveClass(/(^|\s)selected(\s|$)/);
+ await expect(locator).toHaveClass('middle selected row');
});
it('should not check the checked box', async ({ page }) => {
diff --git a/tests/page/selectors-misc.spec.ts b/tests/page/selectors-misc.spec.ts
index 605ff6c5a0..f656e9d512 100644
--- a/tests/page/selectors-misc.spec.ts
+++ b/tests/page/selectors-misc.spec.ts
@@ -415,7 +415,7 @@ it('should work with internal:has=', async ({ page, server }) => {
const error3 = await page.$(`div >> internal:has=33`).catch(e => e);
expect(error3.message).toContain('Malformed selector: internal:has=33');
const error4 = await page.$(`div >> internal:has="span!"`).catch(e => e);
- expect(error4.message).toContain('Unexpected token "!" while parsing selector "span!"');
+ expect(error4.message).toContain('Unexpected token "!" while parsing css selector "span!"');
});
it('should work with internal:has-not=', async ({ page }) => {
diff --git a/tests/playwright-test/test-step.spec.ts b/tests/playwright-test/test-step.spec.ts
index ec04ef19e8..648cbeb52e 100644
--- a/tests/playwright-test/test-step.spec.ts
+++ b/tests/playwright-test/test-step.spec.ts
@@ -616,7 +616,7 @@ test('should not propagate errors from within toPass', async ({ runInlineTest })
expect(result.exitCode).toBe(0);
expect(result.output).toBe(`
hook |Before Hooks
-expect |expect.toPass @ a.test.ts:7
+step |expect.toPass @ a.test.ts:7
expect | expect.toBe @ a.test.ts:6
expect | ↪ error: Error: expect(received).toBe(expected) // Object.is equality
expect | expect.toBe @ a.test.ts:6
@@ -643,8 +643,8 @@ test('should show final toPass error', async ({ runInlineTest }) => {
expect(result.exitCode).toBe(1);
expect(stripAnsi(result.output)).toBe(`
hook |Before Hooks
-expect |expect.toPass @ a.test.ts:6
-expect |↪ error: Error: expect(received).toBe(expected) // Object.is equality
+step |expect.toPass @ a.test.ts:6
+step |↪ error: Error: expect(received).toBe(expected) // Object.is equality
expect | expect.toBe @ a.test.ts:5
expect | ↪ error: Error: expect(received).toBe(expected) // Object.is equality
hook |After Hooks
@@ -909,7 +909,7 @@ test('step inside expect.toPass', async ({ runInlineTest }) => {
expect(stripAnsi(result.output)).toBe(`
hook |Before Hooks
test.step |step 1 @ a.test.ts:4
-expect | expect.toPass @ a.test.ts:11
+step | expect.toPass @ a.test.ts:11
test.step | step 2, attempt: 0 @ a.test.ts:7
test.step | ↪ error: Error: expect(received).toBe(expected) // Object.is equality
expect | expect.toBe @ a.test.ts:9
@@ -956,7 +956,7 @@ fixture | fixture: context
pw:api | browser.newContext
fixture | fixture: page
pw:api | browserContext.newPage
-expect |expect.toPass @ a.test.ts:11
+step |expect.toPass @ a.test.ts:11
pw:api | page.goto(about:blank) @ a.test.ts:6
test.step | inner step attempt: 0 @ a.test.ts:7
test.step | ↪ error: Error: expect(received).toBe(expected) // Object.is equality
@@ -1007,7 +1007,7 @@ fixture | fixture: context
pw:api | browser.newContext
fixture | fixture: page
pw:api | browserContext.newPage
-expect |expect.poll.toHaveLength @ a.test.ts:14
+step |expect.poll.toHaveLength @ a.test.ts:14
pw:api | page.goto(about:blank) @ a.test.ts:7
test.step | inner step attempt: 0 @ a.test.ts:8
expect | expect.toBe @ a.test.ts:10
@@ -1059,7 +1059,7 @@ pw:api | browser.newContext
fixture | fixture: page
pw:api | browserContext.newPage
pw:api |page.setContent @ a.test.ts:4
-expect |expect.poll.toBe @ a.test.ts:13
+step |expect.poll.toBe @ a.test.ts:13
expect | expect.toHaveText @ a.test.ts:7
test.step | iteration 1 @ a.test.ts:9
expect | expect.toBeVisible @ a.test.ts:10
@@ -1565,3 +1565,66 @@ expect |expect.toBe @ a.test.ts:10
hook |After Hooks
`);
});
+
+test('show api calls inside expects', async ({ runInlineTest }) => {
+ const result = await runInlineTest({
+ 'reporter.ts': stepIndentReporter,
+ 'playwright.config.ts': `module.exports = { reporter: './reporter' };`,
+ 'a.test.ts': `
+ import { test, expect as baseExpect } from '@playwright/test';
+
+ const expect = baseExpect.extend({
+ async toBeInvisible(locator: Locator) {
+ try {
+ await expect.poll(() => locator.isVisible()).toBe(false);
+ return { name: 'toBeInvisible', pass: true, message: '' };
+ } catch (e) {
+ return { name: 'toBeInvisible', pass: false, message: () => 'Expected to be invisible, got visible!' };
+ }
+ },
+ });
+
+ test('test', async ({ page }) => {
+ await page.setContent('hello
');
+ const promise = expect(page.locator('div')).toBeInvisible();
+ await page.waitForTimeout(1100);
+ await page.setContent('hello
');
+ await promise;
+ });
+ `
+ }, { reporter: '' });
+
+ expect(result.exitCode).toBe(0);
+ expect(result.report.stats.expected).toBe(1);
+ expect(stripAnsi(result.output)).toBe(`
+hook |Before Hooks
+fixture | fixture: browser
+pw:api | browserType.launch
+fixture | fixture: context
+pw:api | browser.newContext
+fixture | fixture: page
+pw:api | browserContext.newPage
+pw:api |page.setContent @ a.test.ts:16
+expect |expect.toBeInvisible @ a.test.ts:17
+step | expect.poll.toBe @ a.test.ts:7
+pw:api | locator.isVisible(div) @ a.test.ts:7
+expect | expect.toBe @ a.test.ts:7
+expect | ↪ error: Error: expect(received).toBe(expected) // Object.is equality
+pw:api | locator.isVisible(div) @ a.test.ts:7
+expect | expect.toBe @ a.test.ts:7
+expect | ↪ error: Error: expect(received).toBe(expected) // Object.is equality
+pw:api | locator.isVisible(div) @ a.test.ts:7
+expect | expect.toBe @ a.test.ts:7
+expect | ↪ error: Error: expect(received).toBe(expected) // Object.is equality
+pw:api | locator.isVisible(div) @ a.test.ts:7
+expect | expect.toBe @ a.test.ts:7
+expect | ↪ error: Error: expect(received).toBe(expected) // Object.is equality
+pw:api | locator.isVisible(div) @ a.test.ts:7
+expect | expect.toBe @ a.test.ts:7
+pw:api |page.waitForTimeout @ a.test.ts:18
+pw:api |page.setContent @ a.test.ts:19
+hook |After Hooks
+fixture | fixture: page
+fixture | fixture: context
+`);
+});