diff --git a/packages/html-reporter/src/copyToClipboard.tsx b/packages/html-reporter/src/copyToClipboard.tsx
index a24015a67125d..85132a40dfd8d 100644
--- a/packages/html-reporter/src/copyToClipboard.tsx
+++ b/packages/html-reporter/src/copyToClipboard.tsx
@@ -34,5 +34,5 @@ export const CopyToClipboard: React.FunctionComponent<{
});
}, [value]);
const iconElement = icon === 'check' ? icons.check() : icon === 'cross' ? icons.cross() : icons.copy();
- return ;
+ return ;
};
diff --git a/packages/html-reporter/src/testCaseView.spec.tsx b/packages/html-reporter/src/testCaseView.spec.tsx
index 28fe8247f5861..94d37ec570f81 100644
--- a/packages/html-reporter/src/testCaseView.spec.tsx
+++ b/packages/html-reporter/src/testCaseView.spec.tsx
@@ -64,7 +64,13 @@ const testCase: TestCase = {
test('should render test case', async ({ mount }) => {
const component = await mount();
- await expect(component.getByText('Annotation text', { exact: false }).first()).toBeVisible();
+ const firstAnnotationElement = component.getByText('Annotation text', { exact: false }).first();
+ await expect(firstAnnotationElement).toBeVisible();
+ await expect(component.getByRole('button', { name: 'copy to clipboard' }).first()).not.toBeVisible();
+ await expect(component.getByRole('button', { name: 'copy to clipboard' }).nth(1)).not.toBeVisible();
+ await firstAnnotationElement.hover();
+ await expect(component.getByRole('button', { name: 'copy to clipboard' }).first()).toBeVisible();
+ await expect(component.getByRole('button', { name: 'copy to clipboard' }).nth(1)).not.toBeVisible();
await component.getByText('Annotations').click();
await expect(component.getByText('Annotation text')).not.toBeVisible();
await expect(component.getByText('Outer step')).toBeVisible();