Merge branch 'main' into roll-into-pw-firefox/1471

Signed-off-by: Yury Semikhatsky <yurys@chromium.org>

docs/src/browsers.md

@@ -452,7 +452,7 @@ Certain Enterprise Browser Policies may impact Playwright's ability to launch an
 :::
 
 :::warning
-Google Chrome and Microsoft Edge have switched to a [new headless mode](https://developer.chrome.com/docs/chromium/headless) implementation that is closer to a regular headed mode. This differs from [chromium headless shell](https://developer.chrome.com/blog/chrome-headless-shell) that is used in Playwright by default when running headless, so expect different behavior in some cases. See [issue #33566](https://github.com/microsoft/playwright/issues/33566) fore details.
+Google Chrome and Microsoft Edge have switched to a [new headless mode](https://developer.chrome.com/docs/chromium/headless) implementation that is closer to a regular headed mode. This differs from [chromium headless shell](https://developer.chrome.com/blog/chrome-headless-shell) that is used in Playwright by default when running headless, so expect different behavior in some cases. See [issue #33566](https://github.com/microsoft/playwright/issues/33566) for details.
 :::
 
 ```js

packages/html-reporter/src/links.css

@@ -60,6 +60,11 @@
     color: var(--color-scale-orange-6);
     border: 1px solid var(--color-scale-orange-4);
   }
+  .label-color-gray {
+    background-color: var(--color-scale-gray-0);
+    color: var(--color-scale-gray-6);
+    border: 1px solid var(--color-scale-gray-4);
+  }
 }
 
 @media(prefers-color-scheme: dark) {
@@ -93,6 +98,11 @@
     color: var(--color-scale-orange-2);
     border: 1px solid var(--color-scale-orange-4);
   }
+  .label-color-gray {
+    background-color: var(--color-scale-gray-9);
+    color: var(--color-scale-gray-2);
+    border: 1px solid var(--color-scale-gray-4);
+  }
 }
 
 .attachment-body {

packages/html-reporter/src/testResultView.tsx

@@ -134,7 +134,7 @@ export const TestResultView: React.FC<{
       </div>)}
     </AutoChip></Anchor>}
 
-    {!!otherAttachments.size && <AutoChip header='Attachments' revealOnAnchorId={otherAttachmentAnchors}>
+    {!!otherAttachments.size && <AutoChip header='Attachments' revealOnAnchorId={otherAttachmentAnchors} dataTestId='attachments'>
       {[...otherAttachments].map((a, i) =>
         <Anchor key={`attachment-link-${i}`} id={`attachment-${result.attachments.indexOf(a)}`}>
           <AttachmentLink attachment={a} result={result} openInNewTab={a.contentType.startsWith('text/html')} />
@@ -176,15 +176,27 @@ const StepTreeItem: React.FC<{
 }> = ({ test, step, result, depth }) => {
   return <TreeItem title={<span aria-label={step.title}>
     <span style={{ float: 'right' }}>{msToString(step.duration)}</span>
-    {step.attachments.length > 0 && <a style={{ float: 'right' }} title='link to attachment' href={testResultHref({ test, result, anchor: `attachment-${step.attachments[0]}` })} onClick={evt => { evt.stopPropagation(); }}>{icons.attachment()}</a>}
     {statusIcon(step.error || step.duration === -1 ? 'failed' : 'passed')}
     <span>{step.title}</span>
     {step.count > 1 && <> ✕ <span className='test-result-counter'>{step.count}</span></>}
     {step.location && <span className='test-result-path'>— {step.location.file}:{step.location.line}</span>}
   </span>} loadChildren={step.steps.length + (step.snippet ? 1 : 0) ? () => {
-    const children = step.steps.map((s, i) => <StepTreeItem key={i} step={s} depth={depth + 1} result={result} test={test} />);
-    if (step.snippet)
-      children.unshift(<TestErrorView testId='test-snippet' key='line' error={step.snippet}/>);
-    return children;
+    const snippet = step.snippet ? [<TestErrorView testId='test-snippet' key='line' error={step.snippet}/>] : [];
+    const steps = step.steps.map((s, i) => <StepTreeItem key={i} step={s} depth={depth + 1} result={result} test={test} />);
+    const attachments = step.attachments.map(attachmentIndex => (
+      <a key={'' + attachmentIndex}
+        href={testResultHref({ test, result, anchor: `attachment-${attachmentIndex}` })}
+        style={{ paddingLeft: depth * 22 + 4, textDecoration: 'none' }}
+      >
+        <span
+          style={{ margin: '8px 0 0 8px', padding: '2px 10px', cursor: 'pointer' }}
+          className='label label-color-gray'
+          title={`see "${result.attachments[attachmentIndex].name}"`}
+        >
+          {icons.attachment()}{result.attachments[attachmentIndex].name}
+        </span>
+      </a>
+    ));
+    return snippet.concat(steps, attachments);
   } : undefined} depth={depth}/>;
 };

packages/playwright-core/browsers.json

@@ -21,13 +21,13 @@
     },
     {
       "name": "firefox-beta",
-      "revision": "1466",
+      "revision": "1467",
       "installByDefault": false,
       "browserVersion": "133.0b9"
     },
     {
       "name": "webkit",
-      "revision": "2122",
+      "revision": "2123",
       "installByDefault": true,
       "revisionOverrides": {
         "debian11-x64": "2105",

tests/library/har.spec.ts

@@ -60,7 +60,10 @@ it('should have browser', async ({ browserName, browser, contextFactory, server
   const { page, getLog } = await pageWithHar(contextFactory, testInfo);
   await page.goto(server.EMPTY_PAGE);
   const log = await getLog();
-  expect(log.browser!.name.toLowerCase()).toBe(browserName);
+
+  // _bidiFirefox and _bidiChromium are initialized with 'bidi' as browser name.
+  const harBrowserName = browserName.startsWith('_bidi') ? 'bidi' : browserName;
+  expect(log.browser!.name.toLowerCase()).toBe(harBrowserName);
   expect(log.browser!.version).toBe(browser.version());
 });
 
@@ -957,6 +960,9 @@ it('should not hang on slow chunked response', async ({ browserName, browser, co
   await page.goto(server.EMPTY_PAGE);
   await page.evaluate(() => (window as any).receivedFirstData);
   const log = await getLog();
-  expect(log.browser!.name.toLowerCase()).toBe(browserName);
+
+  // _bidiFirefox and _bidiChromium are initialized with 'bidi' as browser name.
+  const harBrowserName = browserName.startsWith('_bidi') ? 'bidi' : browserName;
+  expect(log.browser!.name.toLowerCase()).toBe(harBrowserName);
   expect(log.browser!.version).toBe(browser.version());
 });

tests/playwright-test/reporter-html.spec.ts

@@ -932,9 +932,10 @@ for (const useIntermediateMergeReport of [true, false] as const) {
       await showReport();
       await page.getByRole('link', { name: 'passing' }).click();
 
-      const attachment = page.getByText('foo-2', { exact: true });
+      const attachment = page.getByTestId('attachments').getByText('foo-2', { exact: true });
       await expect(attachment).not.toBeInViewport();
-      await page.getByLabel('attach "foo-2"').getByTitle('link to attachment').click();
+      await page.getByLabel('attach "foo-2"').click();
+      await page.getByTitle('see "foo-2"').click();
       await expect(attachment).toBeInViewport();
 
       await page.reload();
@@ -961,9 +962,10 @@ for (const useIntermediateMergeReport of [true, false] as const) {
       await showReport();
       await page.getByRole('link', { name: 'passing' }).click();
 
-      const attachment = page.getByText('attachment', { exact: true });
+      const attachment = page.getByTestId('attachments').getByText('attachment', { exact: true });
       await expect(attachment).not.toBeInViewport();
-      await page.getByLabel('step').getByTitle('link to attachment').click();
+      await page.getByLabel('step').click();
+      await page.getByTitle('see "attachment"').click();
       await expect(attachment).toBeInViewport();
     });