{icons[icon || 'blank']()}
diff --git a/packages/html-reporter/src/testErrorView.css b/packages/html-reporter/src/testErrorView.css
new file mode 100644
index 0000000000..afb543a0c2
--- /dev/null
+++ b/packages/html-reporter/src/testErrorView.css
@@ -0,0 +1,28 @@
+/*
+ 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.
+*/
+
+.test-error-message {
+ white-space: pre;
+ font-family: monospace;
+ overflow: auto;
+ flex: none;
+ padding: 0;
+ background-color: var(--color-canvas-subtle);
+ border-radius: 6px;
+ padding: 16px;
+ line-height: initial;
+ margin-bottom: 6px;
+}
diff --git a/packages/html-reporter/src/testErrorView.tsx b/packages/html-reporter/src/testErrorView.tsx
new file mode 100644
index 0000000000..5208158b1c
--- /dev/null
+++ b/packages/html-reporter/src/testErrorView.tsx
@@ -0,0 +1,56 @@
+/*
+ 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 ansi2html from 'ansi-to-html';
+import * as React from 'react';
+import './testErrorView.css';
+
+export const TestErrorView: React.FC<{
+ error: string;
+}> = ({ error }) => {
+ const html = React.useMemo(() => {
+ const config: any = {
+ bg: 'var(--color-canvas-subtle)',
+ fg: 'var(--color-fg-default)',
+ };
+ config.colors = ansiColors;
+ return new ansi2html(config).toHtml(escapeHTML(error));
+ }, [error]);
+ return
;
+};
+
+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]!));
+}
diff --git a/packages/html-reporter/src/testFilesView.tsx b/packages/html-reporter/src/testFilesView.tsx
index c0154af4d6..710beaf3ad 100644
--- a/packages/html-reporter/src/testFilesView.tsx
+++ b/packages/html-reporter/src/testFilesView.tsx
@@ -20,6 +20,8 @@ import type { Filter } from './filter';
import { TestFileView } from './testFileView';
import './testFileView.css';
import { msToString } from './uiUtils';
+import { AutoChip } from './chip';
+import { TestErrorView } from './testErrorView';
export const TestFilesView: React.FC<{
report?: HTMLReport,
@@ -48,6 +50,9 @@ export const TestFilesView: React.FC<{
{report ? new Date(report.startTime).toLocaleString() : ''}
Total time: {msToString(filteredStats.duration)}
}
{report && filteredFiles.map(({ file, defaultExpanded }) => {
return