diff --git a/packages/html-reporter/src/testErrorView.css b/packages/html-reporter/src/testErrorView.css
index d5a4534e7e..e29ea2a18b 100644
--- a/packages/html-reporter/src/testErrorView.css
+++ b/packages/html-reporter/src/testErrorView.css
@@ -14,6 +14,8 @@
limitations under the License.
*/
+@import '@web/third_party/vscode/colors.css';
+
.test-error-view {
white-space: pre;
overflow: auto;
diff --git a/packages/html-reporter/src/testErrorView.tsx b/packages/html-reporter/src/testErrorView.tsx
index 8d2bb13bd3..d63f5d7945 100644
--- a/packages/html-reporter/src/testErrorView.tsx
+++ b/packages/html-reporter/src/testErrorView.tsx
@@ -14,7 +14,7 @@
limitations under the License.
*/
-import ansi2html from 'ansi-to-html';
+import { ansi2html } from '@web/ansi2html';
import * as React from 'react';
import './testErrorView.css';
import type { ImageDiff } from '@web/shared/imageDiffView';
@@ -43,33 +43,9 @@ export const TestScreenshotErrorView: React.FC<{
};
function ansiErrorToHtml(text?: string): string {
- const config: any = {
+ const defaultColors = {
bg: 'var(--color-canvas-subtle)',
fg: 'var(--color-fg-default)',
};
- config.colors = ansiColors;
- return new ansi2html(config).toHtml(escapeHTML(text || ''));
-}
-
-const ansiColors = {
- 0: '#000',
- 1: '#C00',
- 2: '#0C0',
- 3: '#C50',
- 4: '#00C',
- 5: '#C0C',
- 6: '#0CC',
- 7: '#CCC',
- 8: '#555',
- 9: '#F55',
- 10: '#5F5',
- 11: '#FF5',
- 12: '#55F',
- 13: '#F5F',
- 14: '#5FF',
- 15: '#FFF'
-};
-
-function escapeHTML(text: string): string {
- return text.replace(/[&"<>]/g, c => ({ '&': '&', '"': '"', '<': '<', '>': '>' }[c]!));
+ return ansi2html(text || '', defaultColors);
}
diff --git a/packages/html-reporter/src/testFileView.tsx b/packages/html-reporter/src/testFileView.tsx
index bd402a74de..4d6890ad33 100644
--- a/packages/html-reporter/src/testFileView.tsx
+++ b/packages/html-reporter/src/testFileView.tsx
@@ -14,24 +14,25 @@
limitations under the License.
*/
-import type { HTMLReport, TestCaseSummary, TestFileSummary } from './types';
+import type { TestCaseSummary, TestFileSummary } from './types';
import * as React from 'react';
import { hashStringToInt, msToString } from './utils';
import { Chip } from './chip';
-import { filterWithToken, type Filter } from './filter';
-import { generateTraceUrl, Link, navigate, ProjectLink } from './links';
+import { filterWithToken } from './filter';
+import { generateTraceUrl, Link, navigate, ProjectLink, SearchParamsContext } from './links';
import { statusIcon } from './statusIcon';
import './testFileView.css';
import { video, image, trace } from './icons';
import { clsx } from '@web/uiUtils';
export const TestFileView: React.FC
boolean;
setFileExpanded: (fileId: string, expanded: boolean) => void;
- filter: Filter;
-}>> = ({ file, report, isFileExpanded, setFileExpanded, filter }) => {
+}>> = ({ file, projectNames, isFileExpanded, setFileExpanded }) => {
+ const searchParams = React.useContext(SearchParamsContext);
+ const filterParam = searchParams.has('q') ? '&q=' + searchParams.get('q') : '';
return
{file.fileName}
}>
- {file.tests.filter(t => filter.matches(t)).map(test =>
+ {file.tests.map(test =>
@@ -47,11 +48,11 @@ export const TestFileView: React.FC
-
+
{[...test.path, test.title].join(' › ')}
- {report.projectNames.length > 1 && !!test.projectName &&
- }
+ {projectNames.length > 1 && !!test.projectName &&
+ }
@@ -90,10 +91,10 @@ function traceBadge(test: TestCaseSummary): JSX.Element | undefined {
const LabelsClickView: React.FC
> = ({ labels }) => {
+ const searchParams = React.useContext(SearchParamsContext);
const onClickHandle = (e: React.MouseEvent, label: string) => {
e.preventDefault();
- const searchParams = new URLSearchParams(window.location.hash.slice(1));
const q = searchParams.get('q')?.toString() || '';
const tokens = q.split(' ');
navigate(filterWithToken(tokens, label, e.metaKey || e.ctrlKey));
diff --git a/packages/html-reporter/src/testFilesView.tsx b/packages/html-reporter/src/testFilesView.tsx
index 30c80c075b..d21088f575 100644
--- a/packages/html-reporter/src/testFilesView.tsx
+++ b/packages/html-reporter/src/testFilesView.tsx
@@ -16,7 +16,6 @@
import type { FilteredStats, HTMLReport, TestFileSummary } from './types';
import * as React from 'react';
-import type { Filter } from './filter';
import { TestFileView } from './testFileView';
import './testFileView.css';
import { msToString } from './utils';
@@ -24,40 +23,26 @@ import { AutoChip } from './chip';
import { TestErrorView } from './testErrorView';
export const TestFilesView: React.FC<{
- report?: HTMLReport,
+ tests: TestFileSummary[],
expandedFiles: Map,
setExpandedFiles: (value: Map) => void,
- filter: Filter,
- filteredStats: FilteredStats,
projectNames: string[],
-}> = ({ report, filter, expandedFiles, setExpandedFiles, projectNames, filteredStats }) => {
+}> = ({ tests, expandedFiles, setExpandedFiles, projectNames }) => {
const filteredFiles = React.useMemo(() => {
const result: { file: TestFileSummary, defaultExpanded: boolean }[] = [];
let visibleTests = 0;
- for (const file of report?.files || []) {
- const tests = file.tests.filter(t => filter.matches(t));
- visibleTests += tests.length;
- if (tests.length)
- result.push({ file, defaultExpanded: visibleTests < 200 });
+ for (const file of tests) {
+ visibleTests += file.tests.length;
+ result.push({ file, defaultExpanded: visibleTests < 200 });
}
return result;
- }, [report, filter]);
+ }, [tests]);
return <>
-
- {projectNames.length === 1 && !!projectNames[0] &&
Project: {projectNames[0]}
}
- {!filter.empty() &&
Filtered: {filteredStats.total} {!!filteredStats.total && ('(' + msToString(filteredStats.duration) + ')')}
}
-
-
{report ? new Date(report.startTime).toLocaleString() : ''}
-
Total time: {msToString(report?.duration ?? 0)}
-
+ {report.projectNames.length === 1 && !!report.projectNames[0] &&
Project: {report.projectNames[0]}
}
+ {filteredStats &&
Filtered: {filteredStats.total} {!!filteredStats.total && ('(' + msToString(filteredStats.duration) + ')')}
}
+
+
{report ? new Date(report.startTime).toLocaleString() : ''}
+
Total time: {msToString(report.duration ?? 0)}
+
-
expandOnTitleClick && setExpanded(!expanded)}>
+
expandOnTitleClick && setExpanded(!expanded)}>
!expandOnTitleClick && setExpanded(!expanded)} />
{title}
- { expanded &&
{children}
}
+ { expanded &&
{children}
}
;
};
diff --git a/packages/web/src/components/treeView.tsx b/packages/web/src/components/treeView.tsx
index cb7ab7150d..e6cf557e99 100644
--- a/packages/web/src/components/treeView.tsx
+++ b/packages/web/src/components/treeView.tsx
@@ -231,6 +231,7 @@ export function TreeItemHeader
({
icon,
isKeyboardNavigation,
setIsKeyboardNavigation }: TreeItemHeaderProps) {
+ const groupId = React.useId();
const itemRef = React.useRef(null);
React.useEffect(() => {
@@ -251,7 +252,7 @@ export function TreeItemHeader({
const titled = title?.(item);
const iconed = icon?.(item) || 'codicon-blank';
- return
+ return
onAccepted?.(item)}
className={clsx(
@@ -281,7 +282,7 @@ export function TreeItemHeader
({
{icon && }
{typeof rendered === 'string' ? {rendered}
: rendered}
- {!!children.length &&
+ {!!children.length &&
{children.map(child => {
const itemData = treeItems.get(child);
return itemData &&
{
if (!options?.allowConnectRequests)
return;
+ if (kConnectHostsToIgnore.has(req.url))
+ return;
this.connectHosts.push(req.url);
req.url = `127.0.0.1:${port}`;
});
diff --git a/tests/library/browsercontext-credentials.spec.ts b/tests/library/browsercontext-credentials.spec.ts
index 7783b65aea..c061ffb067 100644
--- a/tests/library/browsercontext-credentials.spec.ts
+++ b/tests/library/browsercontext-credentials.spec.ts
@@ -15,33 +15,26 @@
* limitations under the License.
*/
-import { browserTest as base, expect } from '../config/browserTest';
+import { browserTest as it, expect } from '../config/browserTest';
-const it = base.extend<{ isChromiumHeadedLike: boolean }>({
- isChromiumHeadedLike: async ({ browserName, headless }, use) => {
- const isChromiumHeadedLike = browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW);
- await use(isChromiumHeadedLike);
- },
-});
-
-it('should fail without credentials', async ({ browser, server, isChromiumHeadedLike }) => {
+it('should fail without credentials', async ({ browser, server, browserName, channel }) => {
server.setAuth('/empty.html', 'user', 'pass');
const context = await browser.newContext();
const page = await context.newPage();
const responseOrError = await page.goto(server.EMPTY_PAGE).catch(e => e);
- if (isChromiumHeadedLike)
+ if (browserName === 'chromium' && channel !== 'chromium-headless-shell')
expect(responseOrError.message).toContain('net::ERR_INVALID_AUTH_CREDENTIALS');
else
expect(responseOrError.status()).toBe(401);
});
-it('should work with setHTTPCredentials', async ({ browser, server, isChromiumHeadedLike }) => {
+it('should work with setHTTPCredentials', async ({ browser, server, browserName, channel }) => {
server.setAuth('/empty.html', 'user', 'pass');
const context = await browser.newContext();
const page = await context.newPage();
let responseOrError = await page.goto(server.EMPTY_PAGE).catch(e => e);
- if (isChromiumHeadedLike)
+ if (browserName === 'chromium' && channel !== 'chromium-headless-shell')
expect(responseOrError.message).toContain('net::ERR_INVALID_AUTH_CREDENTIALS');
else
expect(responseOrError.status()).toBe(401);
@@ -109,21 +102,21 @@ it('should work with correct credentials and matching origin case insensitive',
await context.close();
});
-it('should fail with correct credentials and mismatching scheme', async ({ browser, server, isChromiumHeadedLike }) => {
+it('should fail with correct credentials and mismatching scheme', async ({ browser, server, browserName, channel }) => {
server.setAuth('/empty.html', 'user', 'pass');
const context = await browser.newContext({
httpCredentials: { username: 'user', password: 'pass', origin: server.PREFIX.replace('http://', 'https://') }
});
const page = await context.newPage();
const responseOrError = await page.goto(server.EMPTY_PAGE).catch(e => e);
- if (isChromiumHeadedLike)
+ if (browserName === 'chromium' && channel !== 'chromium-headless-shell')
expect(responseOrError.message).toContain('net::ERR_INVALID_AUTH_CREDENTIALS');
else
expect(responseOrError.status()).toBe(401);
await context.close();
});
-it('should fail with correct credentials and mismatching hostname', async ({ browser, server, isChromiumHeadedLike }) => {
+it('should fail with correct credentials and mismatching hostname', async ({ browser, server, browserName, channel }) => {
server.setAuth('/empty.html', 'user', 'pass');
const hostname = new URL(server.PREFIX).hostname;
const origin = server.PREFIX.replace(hostname, 'mismatching-hostname');
@@ -132,14 +125,14 @@ it('should fail with correct credentials and mismatching hostname', async ({ bro
});
const page = await context.newPage();
const responseOrError = await page.goto(server.EMPTY_PAGE).catch(e => e);
- if (isChromiumHeadedLike)
+ if (browserName === 'chromium' && channel !== 'chromium-headless-shell')
expect(responseOrError.message).toContain('net::ERR_INVALID_AUTH_CREDENTIALS');
else
expect(responseOrError.status()).toBe(401);
await context.close();
});
-it('should fail with correct credentials and mismatching port', async ({ browser, server, isChromiumHeadedLike }) => {
+it('should fail with correct credentials and mismatching port', async ({ browser, server, browserName, channel }) => {
server.setAuth('/empty.html', 'user', 'pass');
const origin = server.PREFIX.replace(server.PORT.toString(), (server.PORT + 1).toString());
const context = await browser.newContext({
@@ -147,7 +140,7 @@ it('should fail with correct credentials and mismatching port', async ({ browser
});
const page = await context.newPage();
const responseOrError = await page.goto(server.EMPTY_PAGE).catch(e => e);
- if (isChromiumHeadedLike)
+ if (browserName === 'chromium' && channel !== 'chromium-headless-shell')
expect(responseOrError.message).toContain('net::ERR_INVALID_AUTH_CREDENTIALS');
else
expect(responseOrError.status()).toBe(401);
diff --git a/tests/library/browsertype-connect.spec.ts b/tests/library/browsertype-connect.spec.ts
index a732985b5b..cd77a210d5 100644
--- a/tests/library/browsertype-connect.spec.ts
+++ b/tests/library/browsertype-connect.spec.ts
@@ -169,7 +169,8 @@ for (const kind of ['launchServer', 'run-server'] as const) {
await browser.close();
});
- test('should ignore page.pause when headed', async ({ connect, startRemoteServer, browserType }) => {
+ test('should ignore page.pause when headed', async ({ connect, startRemoteServer, browserType, channel }) => {
+ test.skip(channel === 'chromium-headless-shell', 'Headless Shell does not support headed mode');
const headless = (browserType as any)._defaultLaunchOptions.headless;
(browserType as any)._defaultLaunchOptions.headless = false;
const remoteServer = await startRemoteServer(kind);
diff --git a/tests/library/channels.spec.ts b/tests/library/channels.spec.ts
index 03becec063..314a55a3e5 100644
--- a/tests/library/channels.spec.ts
+++ b/tests/library/channels.spec.ts
@@ -239,7 +239,7 @@ it('should not generate dispatchers for subresources w/o listeners', async ({ pa
});
});
-it('should work with the domain module', async ({ browserType, server, browserName }) => {
+it('should work with the domain module', async ({ browserType, server, browserName, channel }) => {
const local = domain.create();
local.run(() => { });
let err;
@@ -262,7 +262,7 @@ it('should work with the domain module', async ({ browserType, server, browserNa
if (browserName === 'firefox')
expect(message).toBe('CLOSE_ABNORMAL');
else
- expect(message).toContain(': 400');
+ expect(message).toContain(channel?.includes('msedge') ? '' : ': 400');
await browser.close();
diff --git a/tests/library/chromium/oopif.spec.ts b/tests/library/chromium/oopif.spec.ts
index 3878aa5142..54cd3e1a46 100644
--- a/tests/library/chromium/oopif.spec.ts
+++ b/tests/library/chromium/oopif.spec.ts
@@ -232,7 +232,8 @@ it('should click a button when it overlays oopif', async function({ page, browse
expect(await page.evaluate(() => (window as any)['BUTTON_CLICKED'])).toBe(true);
});
-it('should report google.com frame with headed', async ({ browserType, server }) => {
+it('should report google.com frame with headed', async ({ browserType, server, channel }) => {
+ it.skip(channel === 'chromium-headless-shell', 'Headless Shell does not support headed mode');
// @see https://github.com/GoogleChrome/puppeteer/issues/2548
// https://google.com is isolated by default in Chromium embedder.
const browser = await browserType.launch({ headless: false });
diff --git a/tests/library/debug-controller.spec.ts b/tests/library/debug-controller.spec.ts
index cdc579fed2..b1a93a0138 100644
--- a/tests/library/debug-controller.spec.ts
+++ b/tests/library/debug-controller.spec.ts
@@ -253,3 +253,29 @@ test('should reset routes before reuse', async ({ server, connectedBrowserFactor
await expect(page2).toHaveTitle('console.log test');
await browser2.close();
});
+
+test('should highlight inside iframe', async ({ backend, connectedBrowser }, testInfo) => {
+ testInfo.annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/33146' });
+
+ const context = await connectedBrowser._newContextForReuse();
+ const page = await context.newPage();
+ await backend.navigate({ url: `data:text/html,bar
` });
+
+
+ await page.frameLocator('iframe').getByText('bar').highlight();
+
+ const highlight = page.frameLocator('iframe').locator('x-pw-highlight');
+ await expect(highlight).not.toHaveCount(0);
+ await backend.hideHighlight();
+ await expect(highlight).toHaveCount(0);
+
+ await backend.highlight({ selector: `frameLocator('iframe').getByText('bar')` });
+ await expect(highlight).not.toHaveCount(0);
+
+ await backend.highlight({ selector: `frameLocator('iframe').frameLocator('iframe').getByText('bar')` });
+ await expect(highlight).toHaveCount(0);
+
+ await backend.highlight({ selector: `getByText('bar')` });
+ await expect(highlight).toHaveCount(1);
+ await expect(page.locator('x-pw-highlight')).toHaveCount(1);
+});
diff --git a/tests/library/download.spec.ts b/tests/library/download.spec.ts
index 33e33f21b4..74b008c51b 100644
--- a/tests/library/download.spec.ts
+++ b/tests/library/download.spec.ts
@@ -636,8 +636,8 @@ it('should be able to download a inline PDF file via response interception', asy
await page.close();
});
-it('should be able to download a inline PDF file via navigation', async ({ browser, server, asset, browserName, headless }) => {
- it.fixme(((!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW) && browserName === 'chromium'));
+it('should be able to download a inline PDF file via navigation', async ({ browser, server, asset, browserName, channel }) => {
+ it.skip(browserName === 'chromium' && channel !== 'chromium-headless-shell', 'We expect PDF Viewer to open up in Chromium');
const page = await browser.newPage();
await page.goto(server.EMPTY_PAGE);
await page.setContent(`
diff --git a/tests/library/emulation-focus.spec.ts b/tests/library/emulation-focus.spec.ts
index 5f6b5b741f..5bbef6b164 100644
--- a/tests/library/emulation-focus.spec.ts
+++ b/tests/library/emulation-focus.spec.ts
@@ -101,9 +101,10 @@ it('should change document.activeElement', async ({ page, server }) => {
expect(active).toEqual(['INPUT', 'TEXTAREA']);
});
-it('should not affect screenshots', async ({ page, server, browserName, headless, isWindows }) => {
+it('should not affect screenshots', async ({ page, server, browserName, headless, isWindows, channel }) => {
it.skip(browserName === 'webkit' && isWindows && !headless, 'WebKit/Windows/headed has a larger minimal viewport. See https://github.com/microsoft/playwright/issues/22616');
it.skip(browserName === 'firefox' && !headless, 'Firefox headed produces a different image');
+ it.fixme(browserName === 'chromium' && channel !== 'chromium-headless-shell', 'https://github.com/microsoft/playwright/issues/33330');
const page2 = await page.context().newPage();
await Promise.all([
diff --git a/tests/library/inspector/cli-codegen-aria.spec.ts b/tests/library/inspector/cli-codegen-aria.spec.ts
index f99f65fd6f..840725067b 100644
--- a/tests/library/inspector/cli-codegen-aria.spec.ts
+++ b/tests/library/inspector/cli-codegen-aria.spec.ts
@@ -39,4 +39,24 @@ test.describe(() => {
await expect.poll(() =>
recorder.text('C#')).toContain(`await Expect(page.GetByRole(AriaRole.Button)).ToMatchAriaSnapshotAsync("- button \\"Submit\\"");`);
});
+
+ test('should generate regex in aria snapshot', async ({ openRecorder }) => {
+ const { recorder } = await openRecorder();
+ await recorder.setContentAndWait(``);
+
+ await recorder.page.click('x-pw-tool-item.snapshot');
+ await recorder.page.hover('button');
+ await recorder.trustedClick();
+
+ await expect.poll(() =>
+ recorder.text('JavaScript')).toContain(`await expect(page.getByRole('button')).toMatchAriaSnapshot(\`- button /Submit \\\\d+/\`);`);
+ await expect.poll(() =>
+ recorder.text('Python')).toContain(`expect(page.get_by_role("button")).to_match_aria_snapshot("- button /Submit \\\\d+/")`);
+ await expect.poll(() =>
+ recorder.text('Python Async')).toContain(`await expect(page.get_by_role(\"button\")).to_match_aria_snapshot("- button /Submit \\\\d+/")`);
+ await expect.poll(() =>
+ recorder.text('Java')).toContain(`assertThat(page.getByRole(AriaRole.BUTTON)).matchesAriaSnapshot("- button /Submit \\\\d+/");`);
+ await expect.poll(() =>
+ recorder.text('C#')).toContain(`await Expect(page.GetByRole(AriaRole.Button)).ToMatchAriaSnapshotAsync("- button /Submit \\\\d+/");`);
+ });
});
diff --git a/tests/library/modernizr.spec.ts b/tests/library/modernizr.spec.ts
index 7e3fc49f6f..c0a06f3714 100644
--- a/tests/library/modernizr.spec.ts
+++ b/tests/library/modernizr.spec.ts
@@ -14,6 +14,7 @@
* limitations under the License.
*/
+import { hostPlatform } from '../../packages/playwright-core/src/utils/hostPlatform';
import { browserTest as it, expect } from '../config/browserTest';
import fs from 'fs';
import os from 'os';
@@ -33,6 +34,7 @@ async function checkFeatures(name: string, context: any, server: any) {
it('Safari Desktop', async ({ browser, browserName, platform, server, headless }) => {
it.skip(browserName !== 'webkit');
it.skip(browserName === 'webkit' && platform === 'darwin' && os.arch() === 'x64', 'Modernizr uses WebGL which is not available on Intel macOS - https://bugs.webkit.org/show_bug.cgi?id=278277');
+ it.skip(browserName === 'webkit' && hostPlatform.startsWith('ubuntu20.04'), 'Ubuntu 20.04 is frozen');
const context = await browser.newContext({
deviceScaleFactor: 2
});
@@ -52,7 +54,6 @@ it('Safari Desktop', async ({ browser, browserName, platform, server, headless }
actual.video = !!actual.video;
if (platform === 'linux') {
- expected.subpixelfont = false;
expected.speechrecognition = false;
expected.publickeycredential = false;
expected.mediastream = false;
@@ -96,6 +97,7 @@ it('Safari Desktop', async ({ browser, browserName, platform, server, headless }
it('Mobile Safari', async ({ playwright, browser, browserName, platform, server, headless }) => {
it.skip(browserName !== 'webkit');
it.skip(browserName === 'webkit' && platform === 'darwin' && os.arch() === 'x64', 'Modernizr uses WebGL which is not available on Intel macOS - https://bugs.webkit.org/show_bug.cgi?id=278277');
+ it.skip(browserName === 'webkit' && hostPlatform.startsWith('ubuntu20.04'), 'Ubuntu 20.04 is frozen');
const iPhone = playwright.devices['iPhone 12'];
const context = await browser.newContext(iPhone);
const { actual, expected } = await checkFeatures('mobile-safari-18', context, server);
@@ -119,7 +121,6 @@ it('Mobile Safari', async ({ playwright, browser, browserName, platform, server,
}
if (platform === 'linux') {
- expected.subpixelfont = false;
expected.speechrecognition = false;
expected.publickeycredential = false;
expected.mediastream = false;
diff --git a/tests/library/permissions.spec.ts b/tests/library/permissions.spec.ts
index f9f7fdd7ce..451149878c 100644
--- a/tests/library/permissions.spec.ts
+++ b/tests/library/permissions.spec.ts
@@ -145,20 +145,19 @@ it.describe('permissions', () => {
});
});
-it('should support clipboard read', async ({ page, context, server, browserName, isWindows, isLinux, headless }) => {
+it('should support clipboard read', async ({ page, context, server, browserName, isWindows, isLinux, headless, channel }) => {
it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/27475' });
it.fail(browserName === 'firefox', 'No such permissions (requires flag) in Firefox');
it.fixme(browserName === 'webkit' && isWindows, 'WebPasteboardProxy::allPasteboardItemInfo not implemented for Windows.');
it.fixme(browserName === 'webkit' && isLinux && headless, 'WebPasteboardProxy::allPasteboardItemInfo not implemented for WPE.');
- const isChromiumHeadedLike = browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW);
await page.goto(server.EMPTY_PAGE);
// There is no 'clipboard-read' permission in WebKit Web API.
if (browserName !== 'webkit')
expect(await getPermission(page, 'clipboard-read')).toBe('prompt');
- if (!isChromiumHeadedLike) {
- // Headed Chromium shows a dialog and does not resolve the promise.
+ if (browserName === 'chromium' && channel === 'chromium-headless-shell') {
+ // Chromium shows a dialog and does not resolve the promise.
const error = await page.evaluate(() => navigator.clipboard.readText()).catch(e => e);
expect(error.toString()).toContain('denied');
}
diff --git a/tests/library/playwright.config.ts b/tests/library/playwright.config.ts
index 759dc70edc..399eec1b6b 100644
--- a/tests/library/playwright.config.ts
+++ b/tests/library/playwright.config.ts
@@ -126,13 +126,7 @@ for (const browserName of browserNames) {
metadata: {
platform: process.platform,
docker: !!process.env.INSIDE_DOCKER,
- headless: (() => {
- if (process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW)
- return 'headless-new';
- if (headed)
- return 'headed';
- return 'headless';
- })(),
+ headless: headed ? 'headed' : 'headless',
browserName,
channel,
mode,
diff --git a/tests/library/screenshot.spec.ts b/tests/library/screenshot.spec.ts
index e8bdac3313..2f8e516963 100644
--- a/tests/library/screenshot.spec.ts
+++ b/tests/library/screenshot.spec.ts
@@ -22,7 +22,8 @@ import { verifyViewport } from '../config/utils';
browserTest.describe('page screenshot', () => {
browserTest.skip(({ browserName, headless }) => browserName === 'firefox' && !headless, 'Firefox headed produces a different image.');
- browserTest('should run in parallel in multiple pages', async ({ server, contextFactory }) => {
+ browserTest('should run in parallel in multiple pages', async ({ server, contextFactory, browserName, channel }) => {
+ browserTest.fixme(browserName === 'chromium' && channel !== 'chromium-headless-shell', 'https://github.com/microsoft/playwright/issues/33330');
const context = await contextFactory();
const N = 5;
const pages = await Promise.all(Array(N).fill(0).map(async () => {
diff --git a/tests/library/tracing.spec.ts b/tests/library/tracing.spec.ts
index dc077ccd04..b13ed1b84a 100644
--- a/tests/library/tracing.spec.ts
+++ b/tests/library/tracing.spec.ts
@@ -407,9 +407,9 @@ for (const params of [
height: 768,
}
]) {
- browserTest(`should produce screencast frames ${params.id}`, async ({ video, contextFactory, browserName, platform, headless }, testInfo) => {
+ browserTest(`should produce screencast frames ${params.id}`, async ({ video, contextFactory, browserName, platform, headless, channel }, testInfo) => {
browserTest.skip(browserName === 'chromium' && video === 'on', 'Same screencast resolution conflicts');
- browserTest.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW), 'Chromium screencast on headed has a min width issue');
+ browserTest.fixme(browserName === 'chromium' && channel !== 'chromium-headless-shell', 'Chromium screencast has a min width issue');
browserTest.fixme(params.id === 'fit' && browserName === 'chromium' && platform === 'darwin', 'High DPI maxes image at 600x600');
browserTest.fixme(params.id === 'fit' && browserName === 'webkit' && platform === 'linux', 'Image size is flaky');
browserTest.fixme(browserName === 'firefox' && !headless, 'Image size is different');
diff --git a/tests/library/video.spec.ts b/tests/library/video.spec.ts
index 39dcaecbc6..c6b8de24fb 100644
--- a/tests/library/video.spec.ts
+++ b/tests/library/video.spec.ts
@@ -473,9 +473,9 @@ it.describe('screencast', () => {
expect(videoFiles.length).toBe(2);
});
- it('should scale frames down to the requested size ', async ({ browser, browserName, server, headless, trace }, testInfo) => {
- const isChromiumHeadlessNew = browserName === 'chromium' && !!headless && !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW;
- it.fixme(!headless || isChromiumHeadlessNew, 'Fails on headed');
+ it('should scale frames down to the requested size ', async ({ browser, browserName, server, headless, channel }, testInfo) => {
+ it.fixme(!headless, 'Fails on headed');
+ it.fixme(browserName === 'chromium' && channel !== 'chromium-headless-shell', 'Fails on Chromiums');
const context = await browser.newContext({
recordVideo: {
@@ -722,9 +722,9 @@ it.describe('screencast', () => {
expect(files.length).toBe(1);
});
- it('should capture full viewport', async ({ browserType, browserName, headless, isWindows }, testInfo) => {
+ it('should capture full viewport', async ({ browserType, browserName, isWindows, channel }, testInfo) => {
it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/22411' });
- it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW), 'The square is not on the video');
+ it.fixme(browserName === 'chromium' && channel !== 'chromium-headless-shell', 'The square is not on the video');
it.fixme(browserName === 'firefox' && isWindows, 'https://github.com/microsoft/playwright/issues/14405');
const size = { width: 600, height: 400 };
const browser = await browserType.launch();
@@ -757,9 +757,9 @@ it.describe('screencast', () => {
expectAll(pixels, almostRed);
});
- it('should capture full viewport on hidpi', async ({ browserType, browserName, headless, isWindows, isLinux }, testInfo) => {
+ it('should capture full viewport on hidpi', async ({ browserType, browserName, headless, isWindows, isLinux, channel }, testInfo) => {
it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/22411' });
- it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW), 'The square is not on the video');
+ it.fixme(browserName === 'chromium' && channel !== 'chromium-headless-shell', 'The square is not on the video');
it.fixme(browserName === 'firefox' && isWindows, 'https://github.com/microsoft/playwright/issues/14405');
it.fixme(browserName === 'webkit' && isLinux && !headless, 'https://github.com/microsoft/playwright/issues/22617');
const size = { width: 600, height: 400 };
@@ -794,9 +794,10 @@ it.describe('screencast', () => {
expectAll(pixels, almostRed);
});
- it('should work with video+trace', async ({ browser, trace, headless }, testInfo) => {
+ it('should work with video+trace', async ({ browser, trace, headless, browserName, channel }, testInfo) => {
it.skip(trace === 'on');
- it.fixme(!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW, 'different trace screencast image size on all browsers');
+ it.fixme(!headless, 'different trace screencast image size on all browsers');
+ it.fixme(browserName === 'chromium' && channel !== 'chromium-headless-shell', 'different trace screencast image size on Chromium');
const size = { width: 500, height: 400 };
const traceFile = testInfo.outputPath('trace.zip');
diff --git a/tests/library/web-socket.spec.ts b/tests/library/web-socket.spec.ts
index 179c332307..94b8ff1b2b 100644
--- a/tests/library/web-socket.spec.ts
+++ b/tests/library/web-socket.spec.ts
@@ -137,7 +137,7 @@ it('should emit binary frame events', async ({ page, server }) => {
expect(sent[1][i]).toBe(i);
});
-it('should emit error', async ({ page, server, browserName }) => {
+it('should emit error', async ({ page, server, browserName, channel }) => {
let callback;
const result = new Promise(f => callback = f);
page.on('websocket', ws => ws.on('socketerror', callback));
@@ -148,7 +148,7 @@ it('should emit error', async ({ page, server, browserName }) => {
if (browserName === 'firefox')
expect(message).toBe('CLOSE_ABNORMAL');
else
- expect(message).toContain(': 400');
+ expect(message).toContain(channel?.includes('msedge') ? '' : ': 400');
});
it('should not have stray error events', async ({ page, server }) => {
diff --git a/tests/page/page-aria-snapshot.spec.ts b/tests/page/page-aria-snapshot.spec.ts
index 86843d886a..e9156ebad8 100644
--- a/tests/page/page-aria-snapshot.spec.ts
+++ b/tests/page/page-aria-snapshot.spec.ts
@@ -64,8 +64,8 @@ it('should snapshot list with accessible name', async ({ page }) => {
`);
await checkAndMatchSnapshot(page.locator('body'), `
- list "my list":
- - listitem: "one"
- - listitem: "two"
+ - listitem: one
+ - listitem: two
`);
});
@@ -92,7 +92,7 @@ it('should allow text nodes', async ({ page }) => {
await checkAndMatchSnapshot(page.locator('body'), `
- heading "Microsoft" [level=1]
- - text: "Open source projects and samples from Microsoft"
+ - text: Open source projects and samples from Microsoft
`);
});
@@ -105,7 +105,7 @@ it('should snapshot details visibility', async ({ page }) => {
`);
await checkAndMatchSnapshot(page.locator('body'), `
- - group: "Summary"
+ - group: Summary
`);
});
@@ -145,10 +145,10 @@ it('should snapshot integration', async ({ page }) => {
await checkAndMatchSnapshot(page.locator('body'), `
- heading "Microsoft" [level=1]
- - text: "Open source projects and samples from Microsoft"
+ - text: Open source projects and samples from Microsoft
- list:
- listitem:
- - group: "Verified"
+ - group: Verified
- listitem:
- link "Sponsor"
`);
@@ -164,7 +164,7 @@ it('should support multiline text', async ({ page }) => {
`);
await checkAndMatchSnapshot(page.locator('body'), `
- - paragraph: "Line 1 Line 2 Line 3"
+ - paragraph: Line 1 Line 2 Line 3
`);
await expect(page.locator('body')).toMatchAriaSnapshot(`
- paragraph: |
@@ -180,7 +180,7 @@ it('should concatenate span text', async ({ page }) => {
`);
await checkAndMatchSnapshot(page.locator('body'), `
- - text: "One Two Three"
+ - text: One Two Three
`);
});
@@ -190,7 +190,7 @@ it('should concatenate span text 2', async ({ page }) => {
`);
await checkAndMatchSnapshot(page.locator('body'), `
- - text: "One Two Three"
+ - text: One Two Three
`);
});
@@ -200,7 +200,7 @@ it('should concatenate div text with spaces', async ({ page }) => {
`);
await checkAndMatchSnapshot(page.locator('body'), `
- - text: "One Two Three"
+ - text: One Two Three
`);
});
@@ -362,12 +362,12 @@ it('should snapshot inner text', async ({ page }) => {
await checkAndMatchSnapshot(page.locator('body'), `
- listitem:
- - text: "a.test.ts"
+ - text: a.test.ts
- button "Run"
- button "Show source"
- button "Watch"
- listitem:
- - text: "snapshot 30ms"
+ - text: snapshot 30ms
- button "Run"
- button "Show source"
- button "Watch"
@@ -382,12 +382,11 @@ it('should include pseudo codepoints', async ({ page, server }) => {
`);
await checkAndMatchSnapshot(page.locator('body'), `
- - paragraph: "\ueab2hello"
+ - paragraph: \ueab2hello
`);
});
-it('check aria-hidden text', async ({ page, server }) => {
- await page.goto(server.EMPTY_PAGE);
+it('check aria-hidden text', async ({ page }) => {
await page.setContent(`
hello
@@ -396,12 +395,11 @@ it('check aria-hidden text', async ({ page, server }) => {
`);
await checkAndMatchSnapshot(page.locator('body'), `
- - paragraph: "hello"
+ - paragraph: hello
`);
});
-it('should ignore presentation and none roles', async ({ page, server }) => {
- await page.goto(server.EMPTY_PAGE);
+it('should ignore presentation and none roles', async ({ page }) => {
await page.setContent(`
- hello
@@ -410,6 +408,54 @@ it('should ignore presentation and none roles', async ({ page, server }) => {
`);
await checkAndMatchSnapshot(page.locator('body'), `
- - list: "hello world"
+ - list: hello world
+ `);
+});
+
+it('should treat input value as text in templates', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ await checkAndMatchSnapshot(page.locator('body'), `
+ - textbox: hello world
+ `);
+});
+
+it('should respect aria-owns', async ({ page }) => {
+ await page.setContent(`
+
+ Link 1
+
+
+ Link 2
+
+
+ Paragraph
+ `);
+
+ // - Different from Chrome DevTools which attributes ownership to the last element.
+ // - CDT also does not include non-owned children in accessible name.
+ // - Disregarding these as aria-owns can't suggest multiple parts by spec.
+ await checkAndMatchSnapshot(page.locator('body'), `
+ - link "Link 1 Value Paragraph":
+ - region: Link 1
+ - textbox: Value
+ - paragraph: Paragraph
+ - link "Link 2 Value Paragraph":
+ - region: Link 2
+ `);
+});
+
+it('should be ok with circular ownership', async ({ page }) => {
+ await page.setContent(`
+
+ Hello
+
+ `);
+
+ await checkAndMatchSnapshot(page.locator('body'), `
+ - link "Hello":
+ - region: Hello
`);
});
diff --git a/tests/page/page-autowaiting-basic.spec.ts b/tests/page/page-autowaiting-basic.spec.ts
index a2104530ef..dbfe482c33 100644
--- a/tests/page/page-autowaiting-basic.spec.ts
+++ b/tests/page/page-autowaiting-basic.spec.ts
@@ -15,6 +15,7 @@
* limitations under the License.
*/
+import { stripAnsi } from 'tests/config/utils';
import type { TestServer } from '../config/testserver';
import { test as it, expect } from './pageTest';
@@ -139,3 +140,21 @@ it('should report navigation in the log when clicking anchor', async ({ page, se
expect(error.message).toContain('waiting for scheduled navigations to finish');
expect(error.message).toContain(`navigated to "${server.PREFIX + '/frames/one-frame.html'}"`);
});
+
+it('should report and collapse log in action', async ({ page, server, mode }) => {
+ await page.setContent(``);
+ const error = await page.locator('input').click({ timeout: 5000 }).catch(e => e);
+ const message = stripAnsi(error.message);
+ expect(message).toContain(`Call log:`);
+ expect(message).toMatch(/\d+ × waiting for/);
+ const logLines = message.substring(message.indexOf('Call log:')).split('\n');
+ expect(logLines.length).toBeLessThan(30);
+});
+
+it('should report and collapse log in expect', async ({ page, server, mode }) => {
+ await page.setContent(``);
+ const error = await expect(page.locator('input')).toBeVisible({ timeout: 5000 }).catch(e => e);
+ const message = stripAnsi(error.message);
+ expect(message).toContain(`Call log:`);
+ expect(message).toMatch(/\d+ × locator resolved to/);
+});
diff --git a/tests/page/page-focus.spec.ts b/tests/page/page-focus.spec.ts
index 020526380f..67e3e883b4 100644
--- a/tests/page/page-focus.spec.ts
+++ b/tests/page/page-focus.spec.ts
@@ -119,9 +119,8 @@ it('clicking checkbox should activate it', async ({ page, browserName, headless,
it('tab should cycle between single input and browser', {
annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32339' }
-}, async ({ page, browserName, headless }) => {
- it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW),
- 'Chromium in headful mode keeps input focused.');
+}, async ({ page, browserName, channel }) => {
+ it.fixme(browserName === 'chromium' && channel !== 'chromium-headless-shell', 'Chromium keeps input focused.');
it.fixme(browserName !== 'chromium');
await page.setContent(`
@@ -147,9 +146,8 @@ it('tab should cycle between single input and browser', {
it('tab should cycle between document elements and browser', {
annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32339' }
-}, async ({ page, browserName, headless }) => {
- it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW),
- 'Chromium in headful mode keeps last input focused.');
+}, async ({ page, browserName, channel }) => {
+ it.fixme(browserName === 'chromium' && channel !== 'chromium-headless-shell', 'Chromium keeps last input focused.');
it.fixme(browserName !== 'chromium');
await page.setContent(`
diff --git a/tests/page/to-match-aria-snapshot.spec.ts b/tests/page/to-match-aria-snapshot.spec.ts
index 8050c3b569..8c8b11525e 100644
--- a/tests/page/to-match-aria-snapshot.spec.ts
+++ b/tests/page/to-match-aria-snapshot.spec.ts
@@ -396,8 +396,8 @@ test('expected formatter', async ({ page }) => {
expect(stripAnsi(error.message)).toContain(`
Locator: locator('body')
-- Expected - 2
-+ Received string + 3
+- Expected - 2
++ Received + 3
- - heading "todos"
- - textbox "Wrong text"
@@ -405,3 +405,56 @@ Locator: locator('body')
+ - heading "todos" [level=1]
+ - textbox "What needs to be done?"`);
});
+
+test('should unpack escaped names', async ({ page }) => {
+ {
+ await page.setContent(`
+
+ `);
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - 'button "Click: me"'
+ `);
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - 'button /Click: me/'
+ `);
+ }
+
+ {
+ await page.setContent(`
+
+ `);
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - button "Click / me"
+ `);
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - button /Click \\/ me/
+ `);
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - 'button /Click \\/ me/'
+ `);
+ }
+
+ {
+ await page.setContent(`
+
+ `);
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - button "Click \\ me"
+ `);
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - button /Click \\\\ me/
+ `);
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - 'button /Click \\\\ me/'
+ `);
+ }
+
+ {
+ await page.setContent(`
+
+ `);
+ await expect(page.locator('body')).toMatchAriaSnapshot(`
+ - 'button "Click '' me"'
+ `);
+ }
+});
diff --git a/tests/playwright-test/fit-to-width.spec.ts b/tests/playwright-test/fit-to-width.spec.ts
new file mode 100644
index 0000000000..94e73cb381
--- /dev/null
+++ b/tests/playwright-test/fit-to-width.spec.ts
@@ -0,0 +1,32 @@
+/**
+ * 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 { fitToWidth } from 'packages/playwright/lib/reporters/base';
+import { test, expect } from './playwright-test-fixtures';
+
+test('chinese characters', () => {
+ expect(fitToWidth('ä½ ä½ å¥½', 3)).toBe('…好');
+ expect(fitToWidth('ä½ å¥½ä½ å¥½', 4)).toBe('…好');
+});
+
+test('surrogate pairs', () => {
+ expect(fitToWidth('🫣🤗', 2)).toBe('…');
+ expect(fitToWidth('🫣🤗', 3)).toBe('…🤗');
+ expect(fitToWidth('🚄🚄', 1)).toBe('…');
+ expect(fitToWidth('🚄🚄', 2)).toBe('…');
+ expect(fitToWidth('🚄🚄', 3)).toBe('…🚄');
+ expect(fitToWidth('🚄🚄', 4)).toBe('🚄🚄');
+});
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index 51734be9ff..59d986857f 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -472,7 +472,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await showReport();
await page.click('text=fails');
- await expect(page.locator('.test-error-view span:has-text("received")').nth(1)).toHaveCSS('color', 'rgb(204, 0, 0)');
+ await expect(page.locator('.test-error-view span:has-text("true")').first()).toHaveCSS('color', 'rgb(205, 49, 49)');
});
test('should show trace source', async ({ runInlineTest, page, showReport }) => {
@@ -939,8 +939,9 @@ for (const useIntermediateMergeReport of [true, false] as const) {
expect(result.exitCode).toBe(1);
await showReport();
await page.click('text="is a test"');
- const stricken = await page.locator('css=strike').innerText();
- expect(stricken).toBe('old');
+
+ await expect(page.locator('.test-error-view').getByText('old')).toHaveCSS('text-decoration', 'line-through solid rgb(205, 49, 49)');
+ await expect(page.locator('.test-error-view').getByText('new', { exact: true })).toHaveCSS('text-decoration', 'none solid rgb(0, 188, 0)');
});
test('should strikethrough textual diff with commonalities', async ({ runInlineTest, showReport, page }) => {
@@ -966,8 +967,32 @@ for (const useIntermediateMergeReport of [true, false] as const) {
expect(result.exitCode).toBe(1);
await showReport();
await page.click('text="is a test"');
- const stricken = await page.locator('css=strike').innerText();
- expect(stricken).toBe('old');
+ await expect(page.locator('.test-error-view').getByText('old')).toHaveCSS('text-decoration', 'line-through solid rgb(205, 49, 49)');
+ await expect(page.locator('.test-error-view').getByText('new', { exact: true })).toHaveCSS('text-decoration', 'none solid rgb(0, 188, 0)');
+ await expect(page.locator('.test-error-view').getByText('common Expected:')).toHaveCSS('text-decoration', 'none solid rgb(36, 41, 47)');
+ });
+
+ test('should highlight inline textual diff in toHaveText', async ({ runInlineTest, showReport, page }) => {
+ const result = await runInlineTest({
+ 'a.spec.ts': `
+ import { test, expect } from '@playwright/test';
+ test('is a test', async ({ page }) => {
+ await page.setContent('begin inner end
');
+ await expect(page.locator('div')).toHaveText('inner', { timeout: 500 });
+ });
+ `
+ }, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
+ expect(result.exitCode).toBe(1);
+ await showReport();
+ await page.click('text="is a test"');
+ await expect(page.locator('.test-error-view').getByText('begin ', { exact: true })).toHaveCSS('color', 'rgb(246, 248, 250)');
+ await expect(page.locator('.test-error-view').getByText('begin ', { exact: true })).toHaveCSS('background-color', 'rgb(205, 49, 49)');
+
+ await expect(page.locator('.test-error-view').getByText('inner', { exact: true })).toHaveCSS('color', 'rgb(205, 49, 49)');
+ await expect(page.locator('.test-error-view').getByText('inner', { exact: true })).toHaveCSS('background-color', 'rgb(246, 248, 250)');
+
+ await expect(page.locator('.test-error-view').getByText('end ', { exact: true })).toHaveCSS('color', 'rgb(246, 248, 250)');
+ await expect(page.locator('.test-error-view').getByText('end ', { exact: true })).toHaveCSS('background-color', 'rgb(205, 49, 49)');
});
test('should differentiate repeat-each test cases', async ({ runInlineTest, showReport, page }) => {
@@ -984,13 +1009,13 @@ for (const useIntermediateMergeReport of [true, false] as const) {
expect(result.exitCode).toBe(1);
await showReport();
- await page.locator('text=sample').first().click();
- await expect(page.locator('text=ouch')).toHaveCount(1);
- await page.locator('text=All').first().click();
+ await page.getByText('sample').first().click();
+ await expect(page.getByText('ouch')).toHaveCount(2);
+ await page.getByText('All').first().click();
- await page.locator('text=sample').nth(1).click();
- await expect(page.locator('text=Before Hooks')).toBeVisible();
- await expect(page.locator('text=ouch')).toBeHidden();
+ await page.getByText('sample').nth(1).click();
+ await expect(page.getByText('Before Hooks')).toBeVisible();
+ await expect(page.getByText('ouch')).toBeHidden();
});
test('should group similar / loop steps', async ({ runInlineTest, showReport, page }) => {
diff --git a/tests/playwright-test/stable-test-runner/package-lock.json b/tests/playwright-test/stable-test-runner/package-lock.json
index 9b14a59c90..17cc3a9635 100644
--- a/tests/playwright-test/stable-test-runner/package-lock.json
+++ b/tests/playwright-test/stable-test-runner/package-lock.json
@@ -5,15 +5,15 @@
"packages": {
"": {
"dependencies": {
- "@playwright/test": "1.49.0-alpha-2024-10-26"
+ "@playwright/test": "1.49.0-alpha-2024-10-30"
}
},
"node_modules/@playwright/test": {
- "version": "1.49.0-alpha-2024-10-26",
- "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.0-alpha-2024-10-26.tgz",
- "integrity": "sha512-EUl8wIsAWVJJlX2ynKdY1KxRs44Yz9MPDmN8AH6HIdwazSRe1ML46kaM3V49gQvMVMo5JZfuXnRzbtYDMFpKYA==",
+ "version": "1.49.0-alpha-2024-10-30",
+ "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.0-alpha-2024-10-30.tgz",
+ "integrity": "sha512-7pq4a+eDCkp6VmGGpr6KanL0gQ2SunC9dAjtP+VZLobdaY0ZL7XkmD2rL8UNANF2AkmKdOf+GmTS+wZ42qhvLg==",
"dependencies": {
- "playwright": "1.49.0-alpha-2024-10-26"
+ "playwright": "1.49.0-alpha-2024-10-30"
},
"bin": {
"playwright": "cli.js"
@@ -36,11 +36,11 @@
}
},
"node_modules/playwright": {
- "version": "1.49.0-alpha-2024-10-26",
- "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.0-alpha-2024-10-26.tgz",
- "integrity": "sha512-1qh/6z4UdWv7qMocNQmUMbvZAXzzS93jckUzjGr0mWMn9rs4QavHhuK0s2HIS0hLB+t5T1+NBUpHudWzeasudA==",
+ "version": "1.49.0-alpha-2024-10-30",
+ "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.0-alpha-2024-10-30.tgz",
+ "integrity": "sha512-OJ++0IaaTyBHZuPMi7kNZ/ssyRvN4Fkh7NCpYBRyfPL8H90bEVwDe7j4Ab79HMBLxUZMg7D7aRIlimmYmVdbpQ==",
"dependencies": {
- "playwright-core": "1.49.0-alpha-2024-10-26"
+ "playwright-core": "1.49.0-alpha-2024-10-30"
},
"bin": {
"playwright": "cli.js"
@@ -53,9 +53,9 @@
}
},
"node_modules/playwright-core": {
- "version": "1.49.0-alpha-2024-10-26",
- "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.0-alpha-2024-10-26.tgz",
- "integrity": "sha512-ELIdRRHkdzkHP7siPcFSE9jBLRnDHE1l3UigIgEzVN9o34yGBgH8TAkC2uK1M8Jrkomc3jKQm5faiBsimu0XEQ==",
+ "version": "1.49.0-alpha-2024-10-30",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.0-alpha-2024-10-30.tgz",
+ "integrity": "sha512-T1KDI5SQPqzVIahMOpCX7GE2Slv/5KEM+gSnj5mQZDi57Z8Ij5xnGz6ZX4KBdDrmkBRHLrRM4ijXfH1Q7zNkEg==",
"bin": {
"playwright-core": "cli.js"
},
@@ -66,11 +66,11 @@
},
"dependencies": {
"@playwright/test": {
- "version": "1.49.0-alpha-2024-10-26",
- "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.0-alpha-2024-10-26.tgz",
- "integrity": "sha512-EUl8wIsAWVJJlX2ynKdY1KxRs44Yz9MPDmN8AH6HIdwazSRe1ML46kaM3V49gQvMVMo5JZfuXnRzbtYDMFpKYA==",
+ "version": "1.49.0-alpha-2024-10-30",
+ "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.0-alpha-2024-10-30.tgz",
+ "integrity": "sha512-7pq4a+eDCkp6VmGGpr6KanL0gQ2SunC9dAjtP+VZLobdaY0ZL7XkmD2rL8UNANF2AkmKdOf+GmTS+wZ42qhvLg==",
"requires": {
- "playwright": "1.49.0-alpha-2024-10-26"
+ "playwright": "1.49.0-alpha-2024-10-30"
}
},
"fsevents": {
@@ -80,18 +80,18 @@
"optional": true
},
"playwright": {
- "version": "1.49.0-alpha-2024-10-26",
- "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.0-alpha-2024-10-26.tgz",
- "integrity": "sha512-1qh/6z4UdWv7qMocNQmUMbvZAXzzS93jckUzjGr0mWMn9rs4QavHhuK0s2HIS0hLB+t5T1+NBUpHudWzeasudA==",
+ "version": "1.49.0-alpha-2024-10-30",
+ "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.0-alpha-2024-10-30.tgz",
+ "integrity": "sha512-OJ++0IaaTyBHZuPMi7kNZ/ssyRvN4Fkh7NCpYBRyfPL8H90bEVwDe7j4Ab79HMBLxUZMg7D7aRIlimmYmVdbpQ==",
"requires": {
"fsevents": "2.3.2",
- "playwright-core": "1.49.0-alpha-2024-10-26"
+ "playwright-core": "1.49.0-alpha-2024-10-30"
}
},
"playwright-core": {
- "version": "1.49.0-alpha-2024-10-26",
- "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.0-alpha-2024-10-26.tgz",
- "integrity": "sha512-ELIdRRHkdzkHP7siPcFSE9jBLRnDHE1l3UigIgEzVN9o34yGBgH8TAkC2uK1M8Jrkomc3jKQm5faiBsimu0XEQ=="
+ "version": "1.49.0-alpha-2024-10-30",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.0-alpha-2024-10-30.tgz",
+ "integrity": "sha512-T1KDI5SQPqzVIahMOpCX7GE2Slv/5KEM+gSnj5mQZDi57Z8Ij5xnGz6ZX4KBdDrmkBRHLrRM4ijXfH1Q7zNkEg=="
}
}
}
diff --git a/tests/playwright-test/stable-test-runner/package.json b/tests/playwright-test/stable-test-runner/package.json
index 93ee2dba85..793663f7d5 100644
--- a/tests/playwright-test/stable-test-runner/package.json
+++ b/tests/playwright-test/stable-test-runner/package.json
@@ -1,6 +1,6 @@
{
"private": true,
"dependencies": {
- "@playwright/test": "1.49.0-alpha-2024-10-26"
+ "@playwright/test": "1.49.0-alpha-2024-10-30"
}
}
diff --git a/tests/playwright-test/ui-mode-test-output.spec.ts b/tests/playwright-test/ui-mode-test-output.spec.ts
index b10c02d08a..46cdc2e478 100644
--- a/tests/playwright-test/ui-mode-test-output.spec.ts
+++ b/tests/playwright-test/ui-mode-test-output.spec.ts
@@ -145,6 +145,17 @@ test('should format console messages in page', async ({ runUITest }, testInfo) =
'Failed to load resource: net::ERR_CONNECTION_REFUSED',
]);
+ await expect(page.locator('.console-tab')).toMatchAriaSnapshot(`
+ - list:
+ - listitem: "/:1 Object {a: 1}/"
+ - listitem: "/:4 Date/"
+ - listitem: "/:5 Regex \/a\//"
+ - listitem: "/:6 Number 0 one 2/"
+ - listitem: "/:7 Download the React DevTools for a better development experience: https:\/\/fb\.me\/react-devtools/"
+ - listitem: "/:8 Array of values/"
+ - listitem: "/Failed to load resource: net::ERR_CONNECTION_REFUSED/"
+ `);
+
const label = page.getByText('React DevTools');
await expect(label).toHaveCSS('color', 'rgb(255, 0, 0)');
await expect(label).toHaveCSS('font-weight', '700');
diff --git a/tests/playwright-test/update-aria-snapshot.spec.ts b/tests/playwright-test/update-aria-snapshot.spec.ts
index a5f56ea28e..c9c9b0056e 100644
--- a/tests/playwright-test/update-aria-snapshot.spec.ts
+++ b/tests/playwright-test/update-aria-snapshot.spec.ts
@@ -15,7 +15,8 @@
*/
import * as fs from 'fs';
-import { test, expect } from './playwright-test-fixtures';
+import { test, expect, playwrightCtConfigText } from './playwright-test-fixtures';
+import { execSync } from 'child_process';
test.describe.configure({ mode: 'parallel' });
@@ -47,6 +48,10 @@ test('should update snapshot with the update-snapshots flag', async ({ runInline
});
`);
+
+ execSync(`patch -p1 < ${patchPath}`, { cwd: testInfo.outputPath() });
+ const result2 = await runInlineTest({});
+ expect(result2.exitCode).toBe(0);
});
test('should update missing snapshots', async ({ runInlineTest }, testInfo) => {
@@ -76,4 +81,250 @@ test('should update missing snapshots', async ({ runInlineTest }, testInfo) => {
});
`);
+
+ execSync(`patch -p1 < ${patchPath}`, { cwd: testInfo.outputPath() });
+ const result2 = await runInlineTest({});
+ expect(result2.exitCode).toBe(0);
+});
+
+test('should generate baseline with regex', async ({ runInlineTest }, testInfo) => {
+ const result = await runInlineTest({
+ 'a.spec.ts': `
+ import { test, expect } from '@playwright/test';
+ test('test', async ({ page }) => {
+ await page.setContent(\`
+ - Item 1
+ - Item 2
+ - Time 15:30
+ - Year 2022
+ - Duration 12ms
+ - 22,333
+ - 2,333.79
+ - Total 22
+ - /Regex 1/
+ - /Regex 22ms/
+
\`);
+ await expect(page.locator('body')).toMatchAriaSnapshot(\`\`);
+ });
+ `
+ });
+
+ expect(result.exitCode).toBe(0);
+ const patchPath = testInfo.outputPath('test-results/rebaselines.patch');
+ const data = fs.readFileSync(patchPath, 'utf-8');
+ expect(data).toBe(`--- a/a.spec.ts
++++ b/a.spec.ts
+@@ -13,6 +13,18 @@
+ - /Regex 1/
+ - /Regex 22ms/
+
\`);
+- await expect(page.locator('body')).toMatchAriaSnapshot(\`\`);
++ await expect(page.locator('body')).toMatchAriaSnapshot(\`
++ - list:
++ - listitem: Item 1
++ - listitem: Item 2
++ - listitem: /Time \\\\d+:\\\\d+/
++ - listitem: /Year \\\\d+/
++ - listitem: /Duration \\\\d+[hmsp]+/
++ - listitem: /\\\\d+,\\\\d+/
++ - listitem: /\\\\d+,\\\\d+\\\\.\\\\d+/
++ - listitem: /Total \\\\d+/
++ - listitem: /Regex 1/
++ - listitem: /\\\\/Regex \\\\d+[hmsp]+\\\\//
++ \`);
+ });
+
+`);
+
+ execSync(`patch -p1 < ${patchPath}`, { cwd: testInfo.outputPath() });
+ const result2 = await runInlineTest({});
+ expect(result2.exitCode).toBe(0);
+});
+
+test('should generate baseline with special characters', async ({ runInlineTest }, testInfo) => {
+ const result = await runInlineTest({
+ 'a.spec.ts': `
+ import { test, expect } from '@playwright/test';
+ test('test', async ({ page }) => {
+ await page.setContent(\`
+
+
+
+
+ - Item: 1
+ - Item {a: b}
+
\`);
+ await expect(page.locator('body')).toMatchAriaSnapshot(\`\`);
+ });
+ `
+ });
+
+ expect(result.exitCode).toBe(0);
+ const patchPath = testInfo.outputPath('test-results/rebaselines.patch');
+ const data = fs.readFileSync(patchPath, 'utf-8');
+ expect(data).toBe(`--- a/a.spec.ts
++++ b/a.spec.ts
+@@ -9,6 +9,14 @@
+ Item: 1
+ Item {a: b}
+ \`);
+- await expect(page.locator('body')).toMatchAriaSnapshot(\`\`);
++ await expect(page.locator('body')).toMatchAriaSnapshot(\`
++ - list:
++ - 'button "Click: me"'
++ - 'button /Click: \\\\d+/'
++ - button "Click ' me"
++ - 'button "Click: '' me"'
++ - listitem: \"Item: 1\"
++ - listitem: \"Item {a: b}\"
++ \`);
+ });
+
+`);
+
+ execSync(`patch -p1 < ${patchPath}`, { cwd: testInfo.outputPath() });
+ const result2 = await runInlineTest({});
+ expect(result2.exitCode).toBe(0);
+});
+
+test('should update missing snapshots in tsx', async ({ runInlineTest }, testInfo) => {
+ const result = await runInlineTest({
+ 'playwright.config.ts': playwrightCtConfigText,
+ 'playwright/index.html': ``,
+ 'playwright/index.ts': ``,
+
+ 'src/button.tsx': `
+ export const Button = () => ;
+ `,
+
+ 'src/button.test.tsx': `
+ import { test, expect } from '@playwright/experimental-ct-react';
+ import { Button } from './button.tsx';
+
+ test('pass', async ({ mount }) => {
+ const component = await mount();
+ await expect(component).toMatchAriaSnapshot(\`\`);
+ });
+ `,
+ });
+
+ expect(result.exitCode).toBe(0);
+ const patchPath = testInfo.outputPath('test-results/rebaselines.patch');
+ const data = fs.readFileSync(patchPath, 'utf-8');
+ expect(data).toBe(`--- a/src/button.test.tsx
++++ b/src/button.test.tsx
+@@ -4,6 +4,8 @@
+
+ test('pass', async ({ mount }) => {
+ const component = await mount();
+- await expect(component).toMatchAriaSnapshot(\`\`);
++ await expect(component).toMatchAriaSnapshot(\`
++ - button \"Button\"
++ \`);
+ });
+
+`);
+
+ execSync(`patch -p1 < ${patchPath}`, { cwd: testInfo.outputPath() });
+ const result2 = await runInlineTest({});
+ expect(result2.exitCode).toBe(0);
+});
+
+test('should update multiple files', async ({ runInlineTest }, testInfo) => {
+ const result = await runInlineTest({
+ 'playwright.config.ts': playwrightCtConfigText,
+ 'playwright/index.html': ``,
+ 'playwright/index.ts': ``,
+
+ 'src/button.tsx': `
+ export const Button = () => ;
+ `,
+
+ 'src/button-1.test.tsx': `
+ import { test, expect } from '@playwright/experimental-ct-react';
+ import { Button } from './button.tsx';
+
+ test('pass 1', async ({ mount }) => {
+ const component = await mount();
+ await expect(component).toMatchAriaSnapshot(\`\`);
+ });
+ `,
+
+ 'src/button-2.test.tsx': `
+ import { test, expect } from '@playwright/experimental-ct-react';
+ import { Button } from './button.tsx';
+
+ test('pass 2', async ({ mount }) => {
+ const component = await mount();
+ await expect(component).toMatchAriaSnapshot(\`\`);
+ });
+ `,
+ });
+
+ expect(result.exitCode).toBe(0);
+ const patchPath = testInfo.outputPath('test-results/rebaselines.patch');
+ const data = fs.readFileSync(patchPath, 'utf-8');
+ expect(data).toBe(`--- a/src/button-1.test.tsx
++++ b/src/button-1.test.tsx
+@@ -4,6 +4,8 @@
+
+ test('pass 1', async ({ mount }) => {
+ const component = await mount();
+- await expect(component).toMatchAriaSnapshot(\`\`);
++ await expect(component).toMatchAriaSnapshot(\`
++ - button \"Button\"
++ \`);
+ });
+
+
+--- a/src/button-2.test.tsx
++++ b/src/button-2.test.tsx
+@@ -4,6 +4,8 @@
+
+ test('pass 2', async ({ mount }) => {
+ const component = await mount();
+- await expect(component).toMatchAriaSnapshot(\`\`);
++ await expect(component).toMatchAriaSnapshot(\`
++ - button \"Button\"
++ \`);
+ });
+
+`);
+
+ execSync(`patch -p1 < ${patchPath}`, { cwd: testInfo.outputPath() });
+ const result2 = await runInlineTest({});
+ expect(result2.exitCode).toBe(0);
+});
+
+test('should generate baseline for input values', async ({ runInlineTest }, testInfo) => {
+ const result = await runInlineTest({
+ 'a.spec.ts': `
+ import { test, expect } from '@playwright/test';
+ test('test', async ({ page }) => {
+ await page.setContent(\`\`);
+ await expect(page.locator('body')).toMatchAriaSnapshot(\`\`);
+ });
+ `
+ });
+
+ expect(result.exitCode).toBe(0);
+ const patchPath = testInfo.outputPath('test-results/rebaselines.patch');
+ const data = fs.readFileSync(patchPath, 'utf-8');
+ expect(data).toBe(`--- a/a.spec.ts
++++ b/a.spec.ts
+@@ -2,6 +2,8 @@
+ import { test, expect } from '@playwright/test';
+ test('test', async ({ page }) => {
+ await page.setContent(\`\`);
+- await expect(page.locator('body')).toMatchAriaSnapshot(\`\`);
++ await expect(page.locator('body')).toMatchAriaSnapshot(\`
++ - textbox: hello world
++ \`);
+ });
+
+`);
+
+ execSync(`patch -p1 < ${patchPath}`, { cwd: testInfo.outputPath() });
+ const result2 = await runInlineTest({});
+ expect(result2.exitCode).toBe(0);
});
diff --git a/utils/build/build-playwright-driver.sh b/utils/build/build-playwright-driver.sh
index d587cdc94d..f89e770c77 100755
--- a/utils/build/build-playwright-driver.sh
+++ b/utils/build/build-playwright-driver.sh
@@ -4,7 +4,7 @@ set -x
trap "cd $(pwd -P)" EXIT
SCRIPT_PATH="$(cd "$(dirname "$0")" ; pwd -P)"
-NODE_VERSION="20.18.0" # autogenerated via ./update-playwright-driver-version.mjs
+NODE_VERSION="22.11.0" # autogenerated via ./update-playwright-driver-version.mjs
cd "$(dirname "$0")"
PACKAGE_VERSION=$(node -p "require('../../package.json').version")
diff --git a/utils/docker/Dockerfile.jammy b/utils/docker/Dockerfile.jammy
index ff24c31c88..d4d0cbad8a 100644
--- a/utils/docker/Dockerfile.jammy
+++ b/utils/docker/Dockerfile.jammy
@@ -14,7 +14,7 @@ RUN apt-get update && \
apt-get install -y curl wget gpg ca-certificates && \
mkdir -p /etc/apt/keyrings && \
curl -sL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \
- echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" >> /etc/apt/sources.list.d/nodesource.list && \
+ echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_22.x nodistro main" >> /etc/apt/sources.list.d/nodesource.list && \
apt-get update && \
apt-get install -y nodejs && \
# Feature-parity with node.js base images.
diff --git a/utils/docker/Dockerfile.noble b/utils/docker/Dockerfile.noble
index 29ca98c4e4..62ec6232c2 100644
--- a/utils/docker/Dockerfile.noble
+++ b/utils/docker/Dockerfile.noble
@@ -14,7 +14,7 @@ RUN apt-get update && \
apt-get install -y curl wget gpg ca-certificates && \
mkdir -p /etc/apt/keyrings && \
curl -sL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \
- echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" >> /etc/apt/sources.list.d/nodesource.list && \
+ echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_22.x nodistro main" >> /etc/apt/sources.list.d/nodesource.list && \
apt-get update && \
apt-get install -y nodejs && \
# Feature-parity with node.js base images.