feat: show diff tab by default (#19820)

Close https://github.com/microsoft/playwright/issues/19803

I had to manually inject `window.playwrightReportBase64` data into
`playwright/packages/html-reporter/index.html` when developing,
wondering if there's any method I don't know.

packages/html-reporter/src/imageDiffView.spec.tsx

@@ -38,14 +38,15 @@ const imageDiff: ImageDiff = {
 test('should render links', async ({ mount }) => {
   const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
   await expect(component.locator('a')).toHaveText([
+    'screenshot-diff.png',
     'screenshot-actual.png',
     'screenshot-expected.png',
-    'screenshot-diff.png',
   ]);
 });
 
-test('should show actual by default', async ({ mount }) => {
+test('should switch to actual', async ({ mount }) => {
   const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
+  await component.getByText('Actual', { exact: true }).click();
   const sliderElement = component.locator('data-testid=test-result-image-mismatch-grip');
   await expect.poll(() => sliderElement.evaluate(e => e.style.left), 'Actual slider is on the right').toBe('611px');
 
@@ -73,9 +74,8 @@ test('should switch to expected', async ({ mount }) => {
   }
 });
 
-test('should switch to diff', async ({ mount }) => {
+test('should show diff by default', async ({ mount }) => {
   const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
-  await component.getByText('Diff', { exact: true }).click();
 
   const image = component.locator('img');
   const box = await image.boundingBox();

packages/html-reporter/src/imageDiffView.tsx

@@ -32,8 +32,8 @@ export type ImageDiff = {
 export const ImageDiffView: React.FunctionComponent<{
  imageDiff: ImageDiff,
 }> = ({ imageDiff: diff }) => {
-  // Pre-select a tab called "actual", if any.
+  // Pre-select a tab called "diff", if any.
-  const [selectedTab, setSelectedTab] = React.useState<string>('actual');
+  const [selectedTab, setSelectedTab] = React.useState<string>('diff');
   const diffElement = React.useRef<HTMLDivElement>(null);
   const imageElement = React.useRef<HTMLImageElement>(null);
   const [sliderPosition, setSliderPosition] = React.useState<number>(0);
@@ -50,6 +50,11 @@ export const ImageDiffView: React.FunctionComponent<{
   };
   const tabs: TabbedPaneTab[] = [];
   if (diff.diff) {
+    tabs.push({
+      id: 'diff',
+      title: 'Diff',
+      render: () => <ImageWithSize src={diff.diff!.attachment.path!} onLoad={() => onImageLoaded()} />
+    });
     tabs.push({
       id: 'actual',
       title: 'Actual',
@@ -78,18 +83,11 @@ export const ImageDiffView: React.FunctionComponent<{
       render: () => <ImageWithSize src={diff.expected!.attachment.path!} onLoad={() => onImageLoaded()} />
     });
   }
-  if (diff.diff) {
-    tabs.push({
-      id: 'diff',
-      title: 'Diff',
-      render: () => <ImageWithSize src={diff.diff!.attachment.path!} onLoad={() => onImageLoaded()} />
-    });
-  }
   return <div className='vbox image-diff-view' data-testid='test-result-image-mismatch' ref={diffElement}>
     <TabbedPane tabs={tabs} selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
+    {diff.diff && <AttachmentLink attachment={diff.diff.attachment}></AttachmentLink>}
     <AttachmentLink attachment={diff.actual!.attachment}></AttachmentLink>
     <AttachmentLink attachment={diff.expected!.attachment}></AttachmentLink>
-    {diff.diff && <AttachmentLink attachment={diff.diff.attachment}></AttachmentLink>}
   </div>;
 };
 

packages/html-reporter/src/index.tsx

@@ -17,7 +17,7 @@
 import type { HTMLReport } from './types';
 import type zip from '@zip.js/zip.js';
 // @ts-ignore
-import zipImport from '@zip.js/zip.js/dist/zip-no-worker-inflate.min.js';
+import * as zipImport from '@zip.js/zip.js/lib/zip-no-worker-inflate.js';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import './colors.css';

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

@@ -130,6 +130,7 @@ test('should include image diff', async ({ runInlineTest, page, showReport }) =>
   const set = new Set();
 
   const imageDiff = page.locator('data-testid=test-result-image-mismatch');
+  await imageDiff.locator('text="Actual"').click();
   const expectedImage = imageDiff.locator('img').first();
   const actualImage = imageDiff.locator('img').last();
   await expect(expectedImage).toHaveAttribute('src', /.*png/);
@@ -255,6 +256,7 @@ test('should include image diff when screenshot failed to generate due to animat
   await expect(page.locator('text=Snapshot mismatch')).toHaveCount(0);
   await expect(page.locator('.chip-header', { hasText: 'Screenshots' })).toHaveCount(0);
   const imageDiff = page.locator('data-testid=test-result-image-mismatch');
+  await imageDiff.locator('text="Actual"').click();
   const image = imageDiff.locator('img');
   await expect(image.first()).toHaveAttribute('src', /.*png/);
   await expect(image.last()).toHaveAttribute('src', /.*png/);